Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ruby -- Elizabeth, Divya, Rediet Fansite #26

Open
wants to merge 22 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
d9724f3
Modified index.html
e7valle May 16, 2023
63ecec1
added headers to facts page
red-med May 16, 2023
32badcb
added fun facts and linked the main and gallery pages
dnai55 May 16, 2023
ae99859
added source to facts and started gallery page
dnai55 May 16, 2023
ac3abff
added gif to gallery and created image folder
dnai55 May 16, 2023
8ae95a8
sourced image links and deleted old images
dnai55 May 16, 2023
51a2631
added new image links to gallery page
red-med May 16, 2023
70620e4
Fixed the last image in gallery
e7valle May 16, 2023
6ea2a42
Added nav to index page
e7valle May 16, 2023
ef50acd
added nav to gallery page
red-med May 16, 2023
2081e49
Fixed gallery to have a header and the nav
e7valle May 16, 2023
a7a70c0
Fixed nav to have actual links to home page, fun facts, and gallery
e7valle May 17, 2023
470f917
Added css files and modified headers 1 and 4 on each page
e7valle May 17, 2023
5624cc6
Added styles sheets
e7valle May 17, 2023
94afa55
added image to main page and modified nav for all page styles
dnai55 May 17, 2023
8d53b4d
added style elements to index style sheet and overrided main style el…
dnai55 May 17, 2023
8988923
updated facts and index styling for wave 2
red-med May 17, 2023
64bdcf4
made updates to gallery styling
red-med May 17, 2023
0be94c5
added grid organization to gallery, added gradient background on gall…
red-med May 18, 2023
d35afba
made index flexy
red-med May 18, 2023
8ea66ee
fixed the footer in gallery using grid and flex and changed hover col…
dnai55 May 19, 2023
612bb1b
We fixed html errors and added alt text to images
dnai55 May 19, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions images/image-links.txt
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
https://i.pinimg.com/736x/09/93/a0/0993a095cced6d4f08ac10b57368040f--girls-episodes-the-powerpuff-girls.jpg
mayor and sara bellum

https://legendary-digital-network-assets.s3.amazonaws.com/wp-content/uploads/2021/05/12225331/Him_Powerpuff_Girls_1.png
him

https://www.gamespot.com/a/uploads/scale_landscape/1603/16030002/3815177-mojo-jojo.jpg
mojo jojo

https://cdn.britannica.com/08/190808-050-CB26C47B/The-Powerpuff-Girls-Bubbles-Blossom-Buttercup.jpg
powerpuff girls

https://static.wikia.nocookie.net/powerlisting/images/4/45/SugarSpiceEverythingNice.jpg/revision/latest?cb=20180521002327
professor U

https://e1.pxfuel.com/desktop-wallpaper/507/432/desktop-wallpaper-the-powerpuff-girls-townsville.jpg
32 changes: 30 additions & 2 deletions pages/facts.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,37 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/styles/style.css" rel="stylesheet">
<link href="/styles/facts.css" rel="stylesheet">
<title>Fun Facts</title>
</head>
<body>

<header>
<h1 class="page-title">Powerpuff Fun Facts</h1>
<h4>If you don't know, now you know</h4>
<nav>
<ul>
<li><a href="/pages/index.html">Main</a></li>
<li><a href="/pages/facts.html">Fun Facts</a></li>
<li><a href="/pages/gallery.html">Gallery</a></li>
</ul>
</nav>
</header>
<main>
<h2>Background on the Show</h2>
<p id="tag-line"> SUGAR. SPICE. AND EVERYTHING NICE. </p>
<p>The Powerpuff Girls aired from 1998 to 2005. It is an animated show following the adventures of three kindergarten-age sisters who have superpowers. They were created by Professor Utonium with a special ingredient called Chemical X, which allows them to fly and fight bad guys.</p>
<ul class="fun-facts">
<li>The Powerpuff Girls (1998) names were based on Fauna, Flora, and Merryweather from the popular Disney movie, Sleeping Beauty (1959).</li>
<li>The devilish, demonic rival named is referred to as "Him" because the producers thought the Devil or Satan or any other name would be too controversial for a kids' show.</li>
<li>Originally called Whoopass Stew! (1992), the trio's name changed to The Powerpuff Girls (1998) when adult audiences disapproved of children hearing profanity.</li>
<li>Sara Bellum is named after the cerebellum, likely because she is the "brains" of the mayor's occupation and city operations.</li>
<li>The character design was influenced by Margaret Keane, an artist known for painting big eyes.</li>
</ul>
</main>
<footer>
<h5><a href="https://www.imdb.com/title/tt0175058/">source</a></h5>
<h5>&copy; Elizabeth, Divya, Rediet</h5>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure you're only using <h1>-<h6> tags for headings! They're used to automatically construct a table of contents.

You can read more about best practices here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes

</footer>
</body>
</html>
30 changes: 28 additions & 2 deletions pages/gallery.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,35 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/styles/style.css" rel="stylesheet">
<link href="/styles/gallery.css" rel="stylesheet">
<title>Gallery</title>
</head>
<body>

<header>
<h1 class="page-title">Powerpuff Girls Gallery</h1>
<nav>
<ul>
<li><a href="/pages/index.html">Main</a></li>
<li><a href="/pages/facts.html">Fun Facts</a></li>
<li><a href="/pages/gallery.html">Gallery</a></li>
</ul>
</nav>
</header>
<div>
<main>
<section>
Comment on lines +23 to +24

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd recommend dropping the <section> tag here since the <main> tag is already providing semantic organization for these images.

<img src="https://cartoongoodies.com/wp-content/uploads/2019/11/Professor-Utonium-hugging-the-Powerpuff-Girls.gif" alt="Professor Utonium hugging the Powerpuff Girls">
<img src="https://i.pinimg.com/736x/09/93/a0/0993a095cced6d4f08ac10b57368040f--girls-episodes-the-powerpuff-girls.jpg" alt="Townesville Mayor and Sara Bellum">
<img src="https://legendary-digital-network-assets.s3.amazonaws.com/wp-content/uploads/2021/05/12225331/Him_Powerpuff_Girls_1.png" alt="Him">
<img src="https://www.gamespot.com/a/uploads/scale_landscape/1603/16030002/3815177-mojo-jojo.jpg" alt="Mojo Jojo">
<img src="https://cdn.britannica.com/08/190808-050-CB26C47B/The-Powerpuff-Girls-Bubbles-Blossom-Buttercup.jpg" alt="The three Powerpuff Girls">
<img src="https://static.wikia.nocookie.net/powerlisting/images/4/45/SugarSpiceEverythingNice.jpg" alt="Powerpuff Girls origin story">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd recommend storing images locally in your assets folder. There's a couple of pros to rendering images this way

  1. Your site won't need to contact a 3rd party site to load the image, which can speed up page load times
  2. If the linked site moves the image or goes down, you may end up with broken links. So, having local images guarantees you'll always have access to the image.

</section>
</main>
<footer>
<h5>&copy; Elizabeth, Divya, Rediet</h5>
</footer>
</div>
</body>
</html>
24 changes: 22 additions & 2 deletions pages/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,29 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="/styles/style.css" rel="stylesheet">
<link href="/styles/index.css" rel="stylesheet">
<title>Powerpuff Girls Fanpage</title>
</head>
<body>

<header>
<h1 class="page-title">The Ultimate Powerpuff Girls Fanpage</h1>
<h4>Your source for all things Powerpuff</h4>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure you don't skip levels when using <h1>-<h6> tags for headings! Browsers use heading tags to construct a table of contents, so the different numbers on heading tags should be treated as different heading levels rather than as different style options. It's best practice to start headings at h1 and then move to h2 then h3 and so on as you need to nest sections. If all headers are at the top level, then all header tags should be h1. CSS should be used to resize and change the style as needed.

You can read more about heading tag best practices here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#usage_notes

<p>Greetings from the city of Townsville! This site is all about the Powerpuff Girls aka the best show to ever air. Are you a Bubbles, a Blossom, or a Buttercup? Choose your fighter! </p>
<nav>
<ul>
<li><a href="/pages/index.html">Main</a></li>
<li><a href="/pages/facts.html">Fun Facts</a></li>
<li><a href="/pages/gallery.html">Gallery</a></li>
</ul>
</nav>
</header>
<main>
<img src="https://e1.pxfuel.com/desktop-wallpaper/507/432/desktop-wallpaper-the-powerpuff-girls-townsville.jpg" alt="The Powerpuff Girls over Townesville" class="center">

</main>
<footer>
<h5>&copy; Elizabeth, Divya, Rediet</h5>
</footer>
</body>
</html>
29 changes: 29 additions & 0 deletions styles/facts.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
h2 {
text-align: center;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

#tag-line{
font-weight: bold;
}

.fun-facts :hover{
color: rgb(71, 71, 137);
}

nav :hover:not(.active){
color:darkcyan;
}

body {
background: rgb(34,193,195);
background: radial-gradient(circle, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}

.page-title {
color:rgb(71, 71, 137);
}

h4 {
color:rgb(73, 73, 166)
}
42 changes: 42 additions & 0 deletions styles/gallery.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
div {
display: grid;
grid-template-columns: 100%;
grid-template-rows: 80% 20%;
}



section {
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
row-gap: 50px;
grid-row: 1 / 2;
}

footer {
grid-row: 2 / 3;
}

img {
width: 40%;
height: 300px;
}
/* Wave 2 focus */
img {
border: 5px black solid
}

body {
background: rgb(255, 222, 227);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148, 187, 233, 1) 100%);
}

nav {
background-color: rgba(0,0,0,0);
}

.page-title {
color: rgb(237, 244, 250);
}
32 changes: 32 additions & 0 deletions styles/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}

h4 {
font-style: italic;
}

p {
color: cornflowerblue;
text-align: center;
}

header {
display: flex;
flex-direction: row;
flex-direction: column;
flex-wrap: wrap;
border: 5px purple solid;
justify-content: space-evenly;

}

.page-title {
background-color: thistle;
color: white;

}

23 changes: 23 additions & 0 deletions styles/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.page-title {
color: thistle;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}


h4 {
color: cornflowerblue;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

nav {
background-color: rgba(139, 237, 139, 0.67);
text-align: center;
}

nav li {
display: inline;
margin-right: 50px;
}