-
Notifications
You must be signed in to change notification settings - Fork 49
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
base: main
Are you sure you want to change the base?
Changes from all commits
d9724f3
63ecec1
32badcb
ae99859
ac3abff
8ae95a8
51a2631
70620e4
6ea2a42
ef50acd
2081e49
a7a70c0
470f917
5624cc6
94afa55
8d53b4d
8988923
64bdcf4
0be94c5
d35afba
8ea66ee
612bb1b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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 |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'd recommend dropping the |
||
<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"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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
|
||
</section> | ||
</main> | ||
<footer> | ||
<h5>© Elizabeth, Divya, Rediet</h5> | ||
</footer> | ||
</div> | ||
</body> | ||
</html> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Make sure you don't skip levels when using 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>© Elizabeth, Divya, Rediet</h5> | ||
</footer> | ||
</body> | ||
</html> |
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) | ||
} |
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); | ||
} |
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; | ||
|
||
} | ||
|
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; | ||
} | ||
|
There was a problem hiding this comment.
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