"added completed webpage" #29
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| body { | ||
| background-color: white | ||
| } | ||
|
|
||
| body div section:first-of-type { | ||
| text-align: center; | ||
| border-bottom: thin solid black | ||
| } | ||
| body div section h1 { | ||
| font-size: 300% | ||
| } | ||
|
|
||
| body div section sub { | ||
| width: 100%; | ||
| display: block; | ||
| font-size: 2em; | ||
| font-weight: bold; | ||
| text-transform: capitalize | ||
| } | ||
|
|
||
| section a:first-of-type { | ||
| text-align: center; | ||
| text-transform: capitalize; | ||
| display: inline-block; | ||
| padding: 1.5em; | ||
| border: thin solid black; | ||
| margin: 40px 0 100px 0; | ||
| border-radius: 10px; | ||
| font-size: 1.2em; | ||
| color: black; | ||
| font-weight: thin; | ||
| text-decoration: none | ||
| } | ||
|
|
||
| section:first-of-type a:hover { | ||
| color: lightpink | ||
| } | ||
|
|
||
| body nav ul:first-of-type { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| list-style-type: none; | ||
| font-weight: bold; | ||
| font-size: 1.1em; | ||
| background-color: lightgray | ||
|
|
||
| } | ||
|
|
||
| body nav ul li { | ||
| flex: 1; | ||
| list-style-type: none; | ||
| font-weight: bold; | ||
| padding: 30px; | ||
| } | ||
|
|
||
| body nav ul li:first-of-type { | ||
| flex: 3; | ||
| } | ||
|
|
||
| section.quote_box { | ||
| border-bottom: thin solid black; | ||
| padding: 2.0em; | ||
| margin: 75px 0 75px 0; | ||
| text-align: center; | ||
| font-size: 20px; | ||
| font-family: 'Open Sans Condensed', sans-serif; | ||
| font-style: italic | ||
| } | ||
|
|
||
| blockquote::before { | ||
| content: '"'; | ||
| } | ||
|
|
||
| blockquote { | ||
| line-height: 2.0em | ||
| } | ||
| blockquote::after { | ||
| content: '"'; | ||
| } | ||
|
|
||
| .author { | ||
| text-align: right; | ||
| padding-right: 50px; | ||
| margin: 50px 100px 50px 0; | ||
| font-size: 15px; | ||
| font-family: 'Open Sans Condensed', sans-serif; | ||
| font-style: italic; | ||
| } | ||
|
|
||
| .author::before { | ||
|
There was a problem hiding this comment. I like how you added the class .author here -- I think i said something like ... last child of quote section, which isn't as clear and wouldn't have been easy to find to change if any changes were wanted. Good job! |
||
| content: "--"; | ||
| } | ||
|
|
||
| section h2 { | ||
| text-align: center; | ||
| font-family: 'Open Sans Condensed', sans-serif; | ||
| font-style: bold; | ||
| font-size: 2.0em; | ||
| } | ||
|
|
||
| section ul:nth-last-of-type(1) { | ||
| display: flex; | ||
| text-align: left; | ||
| list-style-type: none | ||
| } | ||
|
|
||
| section ul:nth-of-type(3) li { | ||
| flex: 1; | ||
| } | ||
|
|
||
| section:nth-of-type(3) ul li img { | ||
| float: left; | ||
| padding-right: 6px | ||
| } | ||
|
|
||
| .team_name { | ||
| display: block; | ||
| } | ||
| section ul li p { | ||
| width: auto; | ||
| } | ||
|
|
||
|
|
||
| section:nth-of-type(4){ | ||
| border-top:thin solid black; | ||
| border-bottom: thin solid black; | ||
| padding-top: 4em; | ||
| text-align: center | ||
| } | ||
|
|
||
| section:nth-of-type(5) { | ||
| padding: 40px 10px 40px 10px | ||
| } | ||
|
|
||
| section:nth-of-type(5) h2 { | ||
| padding: 30px 10px 30px 10px; | ||
| } | ||
|
|
||
| section:nth-of-type(5) ul{ | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: space-around; | ||
| align-content: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. your bear section is beautiful, I don't know why the second row isn't close together... I struggled with that too. Wish I could help!!! :( |
||
| section:nth-of-type(5) ul li { | ||
| width: 33% | ||
| } | ||
|
|
||
| section:nth-of-type(5) ul li img { | ||
| padding: 5px; | ||
| border: thin solid lightgray; | ||
| border-radius: 80px; | ||
| filter: grayscale(100%) | ||
| } | ||
|
|
||
|
There was a problem hiding this comment. Great job on the bear border... I don't know why I didn't do this. For some reason I did something really complicated. :( Great job!!! :D |
||
| section:nth-of-type(6) ul { | ||
|
There was a problem hiding this comment. The first thing I noticed about your website was how perfect the Sponsors section was! So that was the first code I wanted to investigate. It looks like you figured it out using much less code than I did and it's super readable and makes more sense (however - I don't really understand what flex does - please teach me if we have time after!) My only suggestion is to name the sections with classes or IDs so that it's easier to find which part of the CSS is taking care of which part of the HTML - I thought I could scan your CSS to find where the Sponsor section was to learn your magic, but found it was easier to open the dev tools and click the section to see what CSS was applied, and realized you select each section by its order. |
||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-items: center; | ||
| text-align: center; | ||
| } | ||
|
|
||
| section:nth-of-type(6) ul li { | ||
| flex: 1; | ||
| } | ||
|
|
||
| section:last-of-type { | ||
| border-top: 1px solid black; | ||
| display: flex; | ||
| font-size: 12px; | ||
| justify-content: left; | ||
| } | ||
|
|
||
| section:last-of-type ul { | ||
| padding: 0; | ||
| display: grid | ||
|
|
||
| } | ||
| div.support_links { | ||
| flex: 1; | ||
| } | ||
|
|
||
| div.about_links { | ||
| flex: 3; | ||
| } | ||
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.
For each special, unique section, I think it helps a ton to add id="unique-identifier" so that in CSS it can be accessed with #unique-identifier which I think makes it easier to understand what selection each "selection, property, value group" was being operated on.