A Pen by Angelfirenze on CodePen.
Forked from anonymous/how-to-build-a-website-team-treehouse.markdown
Created
May 29, 2017 22:35
-
-
Save Angelfirenze01/1a52a2eb4744bb1a79cf9e2ee243a8bd to your computer and use it in GitHub Desktop.
How To Build A Website - Team Treehouse
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="utf-8"> <!-- Unicode Transformation Format 8-bit --> | |
| <title>Nicole A. Moore | Back-End Programmer, Photoshopper</title> | |
| <link rel="stylesheet" href="css/normalize.css"> | |
| <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Shadows+Into+Light|Exo" rel="stylesheet"> | |
| <link rel="stylesheet" href="css/responsive.css"> | |
| <!-- <link rel="stylesheet" href="css/alternate-colors.css"> --> | |
| <link rel="stylesheet" href="css/main.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="~/Dropbox/Github/Team-Treehouse/Web-Design/How-To-Make-A-Website_2 id="logo"> | |
| <h1>NICOLE A. MOORE</h1><h2>BACK-END PROGRAMMING STUDENT, DEVOTED PHOTOSHOPPER</h2> | |
| </a> | |
| <nav> | |
| <ul> | |
| <li><a href="index.html" class="selected">PORTFOLIO</a></li> | |
| <li><a href="about.html">ABOUT</a></li> | |
| <li><a href="contact.html">CONTACT</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <div id="wrapper"> | |
| <section> | |
| <ul id="gallery"> | |
| <li><a href="http://www.navsea.navy.mil/Home/Shipyards/Norfolk.aspx" target="_blank"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse//11186931_825197427573003_940532838_n_zps8taqlppb.jpg" alt="This image is hosted by Photobucket.com"><p>Battleships may be closer and much bigger than they appear. - The Naval Yard - Norfolk, VA.</p></a></li> | |
| <li><a href="http://spectaclesdetroit.com/" target="_blank"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse//926736_763920980287176_1048864906_n_zpshcdyixvs.jpg"alt="This image is hosted by Photobucket.com"><p>Spectacles - Downtown Detroit, MI</p></a></li> | |
| <li><a href="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse/10881843_833825913337541_801291789_n_zpsrexcqfvh.jpg" target="_blank"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse//10881843_833825913337541_801291789_n_zpsrexcqfvh.jpg"><p>Fall beginning in earnest. - Southfield, MI</p></a></li> | |
| <li><a href="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse/11246624_863744787018011_1162035123_n_zpsjotyyra0.jpg" target="_blank"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse//11246624_863744787018011_1162035123_n_zpsjotyyra0.jpg" alt="This image is hosted by Photobucket.com"><p>In the nick of time... - Southfield, MI</p></a></li> | |
| <li><a href="https://www.girldevelopit.com/chapters/detroit" target="_blank"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse/10249311_697407320297388_1544074365_n_zpszyg8pnnr.jpg" alt="This image is hosted by Photobucket.com"><p>Girl Develop It! Meetup at Grand Circus - Detroit, MI</p></a></li> | |
| <li><a href="http://www.johnnynoodleking.com/" target="_blank"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse//10735430_314628748720910_1985141208_n_zpszjykgaw4.jpg" alt="This image is hosted by Photobucket.com"><p>Johnny Noodle King craft noodles restaurant - Detroit, MI</p></a></li> | |
| <li><a href="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse/11190021_377248549152181_1577581640_n_zpsjaekkntf.jpg" target="_blank"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse//11190021_377248549152181_1577581640_n_zpsjaekkntf.jpg" alt="This image is hosted by Photobucket.com"><p>Perfectly in bloom. - Detroit, MI</p></a></li> | |
| <li><a href="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse//11186931_825197427573003_940532838_n_zps8taqlppb.jpg" target="_blank"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse/11186931_825197427573003_940532838_n_zps8taqlppb.jpg" border="0" alt=" This image is hosted by Photobucket.com"><p>Late summer night - Cleveland, OH</p></a></li> | |
| </ul> | |
| </section> | |
| <footer> | |
| <a href="https://twitter.com/Angelfirenze"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse//twitter-logo_zpssfqaussg.png" alt="Twitter Logo" class="social-icon"></a> | |
| <a href="https://www.linkedin.com/in/Angelfirenze/Team%20Treehouse/"><img src="http://img.photobucket.com/albums/v204/Angelfirenze/Team%20Treehouse//768px-LinkedIn_logo_initials_zpsnyrrjv9j.png" alt="LinkedIn Logo" class="social-icon"></a> | |
| <p>© 2017 NICOLE A. MOORE.</p> | |
| </footer> | |
| </div> | |
| `</body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*************************** | |
| GENERAL FORMATTING | |
| This | |
| is | |
| how | |
| a | |
| multi-line | |
| comment | |
| works. | |
| ****************************/ | |
| body { | |
| font-family: 'Shadows Into Light', cursive; | |
| } | |
| div { | |
| max-width: 100%; | |
| max-height: 100%; | |
| } | |
| #wrapper { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| padding: 0 5%; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: #999; | |
| } | |
| img { | |
| max-width: 100%; | |
| position: relative; | |
| } | |
| h3 { | |
| margin: 0 0 1em 0; | |
| } | |
| /************************** | |
| HEADING | |
| ***************************/ | |
| header { | |
| float: left; | |
| margin: 0 0 30px 0; | |
| padding: 5px 0 0 0; | |
| width: 100%; | |
| } | |
| header { | |
| text-align: center; | |
| padding: 5px 0 5px 0; | |
| } | |
| /* logo design */ | |
| #logo { | |
| text-align: center; | |
| margin: 10px; | |
| } | |
| h1 { | |
| font-family: 'Shadows Into Light', cursive; | |
| margin: 5px 0; | |
| font-size: 1.75em; | |
| font-weight: normal; | |
| line-height: 0.8em; | |
| } | |
| h2 { | |
| font-family: 'Exo', curisve; | |
| font-size: 0.75em; | |
| margin: -5px 0 0; | |
| font-weight: normal; | |
| color: #fff; | |
| } | |
| /************************** | |
| NAVIGATION | |
| ***************************/ | |
| nav { | |
| text-align: center; | |
| padding: 10px; | |
| margin: 20px 0 0 0; | |
| } | |
| nav ul { | |
| font-family: 'Exo', cursive; | |
| list-style: none; | |
| margin: 0 10px; | |
| padding: 0; | |
| } | |
| nav li { | |
| font-family: 'Exo', cursive; | |
| list-style: none; | |
| display: inline-block; | |
| } | |
| nav a { | |
| font-family: 'Exo', cursive; | |
| font-weight: 700; | |
| padding: 15px 10px; | |
| } | |
| /************************** | |
| FOOTER | |
| ***************************/ | |
| footer { | |
| font-family: 'Exo', cursive; | |
| font-size: 0.75em; | |
| text-align: center; | |
| clear: both; | |
| padding-top: 50px; | |
| color: #ccc; | |
| } | |
| .social-icon { | |
| width: 20px; | |
| height: 20px; | |
| margin: 0 5px; | |
| } | |
| /************************** | |
| PAGE: PORTFOLIO | |
| ***************************/ | |
| #gallery { | |
| margin: 0; | |
| padding: .5; | |
| list-style: none; | |
| } | |
| /* Gallery list items */ | |
| #gallery li { | |
| float: left; | |
| width: 45%; | |
| margin: 2.5%; | |
| background-color: #000; | |
| color: #ccc; | |
| font-family: 'Shadows Into Light', cursive; | |
| } | |
| /* Gallery list items, anchors, paragraphs */ | |
| #gallery li a p { | |
| margin: 0; | |
| padding: 5%; | |
| font-size: 0.75em; | |
| color: #ccc; | |
| } | |
| #gallery p { | |
| font-family: 'Exo', cursive; | |
| } | |
| /************************** | |
| PAGE: ABOUT | |
| ***************************/ | |
| .profile-photo { | |
| display: block; | |
| max-width: 150px; | |
| margin: 0 auto 30px; | |
| border-radius: 100%; | |
| } | |
| /************************** | |
| COLORS | |
| **************************/ | |
| /* site body */ | |
| body { | |
| background-color: #fff; | |
| color: #000; | |
| } | |
| /* Prussian blue header, seafoam green border, light-grey border */ | |
| header { | |
| background: #356983; | |
| border-color: #ccc; | |
| width: 100%; | |
| } | |
| /******************************** | |
| NAVIGATION LINKS | |
| *********************************/ | |
| /* link anchor element/ background on mobile */ | |
| nav { | |
| background: #358983; | |
| font-family: 'Exo', cursive; | |
| color: #ccc; | |
| width: 100%; | |
| } | |
| /* visited nav link element */ | |
| nav a, nav a:visited { | |
| font-family: 'Exo', cursive; | |
| color: #fff; | |
| } | |
| nav a:hover { | |
| font-family: 'Exo', cursive; | |
| color: #ccc; | |
| } | |
| /* selected nav hover link element */ | |
| nav a.selected, nav a:hover { | |
| color: #ccc; | |
| font-family: 'Exo', cursive; | |
| } | |
| /* paragraph element */ | |
| p { | |
| color: #ccc; | |
| font-family: 'Exo', cursive; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment