Skip to content

Instantly share code, notes, and snippets.

/how-to-build-a-website-team-treehouse.markdown

Created May 29, 2017 22:32
Show Gist options
  • Save anonymous/f3479daddc134dee3fdc85af20918336 to your computer and use it in GitHub Desktop.
Save anonymous/f3479daddc134dee3fdc85af20918336 to your computer and use it in GitHub Desktop.
Download ZIP
How To Build A Website - Team Treehouse
Raw
index.html
<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>&copy; 2017 NICOLE A. MOORE.</p>
</footer>
</div>
`</body>
</html>
Raw
style.css
/***************************
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