HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<link href="/resources/css/styles.css" rel="stylesheet">
</head>
<body class= "body">
<section class="container">
<div class="navigatio"><nav>
<ul call="ul">
<li class="li">ABOUT ME</li>
<li>MY WORK</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<header>
<h1 class="h1">I SAW THE SIGN</h1>
</header>
<main class="main">
<p>and it opened up my eyes. One of my favorite things to do is to capturethe american nostalgia of signage. They tell us where we’re going or where we’ve been. They express a mood or saying can even just be a shape. But it’s the vintage, neon, and big light bulbed signs that say so much more. They aren’t just your average square shapes with letters on it. Some actual thought and planning went into the making of the sign. Oh and the lost are of advertising with nneon signsthat display motion is always a fun find! Such a lost art in my opinion. LED just hurts my eyes...doesn’t it?</p>
<section>
<p class="text-caption">Austin, TX</p><img class="large" src="/resources/images/LargeImage.jpg" alt="Large Neon Sign">
</section>
<section>
<img src="/resources/images/baconNeon.jpg" alt="Non Bacon Light">
</section>
<section>
<img src="/resources/images/img2.jpg" alt="Enter Neon Sign">
</section>
<section>
<img src="/resources/images/img3.jpg" alt="Neon Light Love is Losing Game">
</section>
<section>
<img src="/resources/images/img4.jpg" alt="Large and Symbol">
</section>
<section>
<img src="/resources/images/img5%20.jpg" alt="Large Bulb Arrow">
</section>
<section>
<img src="/resources/images/img6.jpg" alt="Old Motel Sign">
</section>
</main>
<footer class="footer">
<p>©2021 Chesapeake, Virginia</p>
</footer>
</section>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<link href="/resources/css/styles.css" rel="stylesheet">
</head>
<body class= "body">
<section class="container">
<div class="navigatio"><nav>
<ul call="ul">
<li class="li">ABOUT ME</li>
<li>MY WORK</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<header>
<h1 class="h1">I SAW THE SIGN</h1>
</header>
<main class="main">
<p>and it opened up my eyes. One of my favorite things to do is to capturethe american nostalgia of signage. They tell us where we’re going or where we’ve been. They express a mood or saying can even just be a shape. But it’s the vintage, neon, and big light bulbed signs that say so much more. They aren’t just your average square shapes with letters on it. Some actual thought and planning went into the making of the sign. Oh and the lost are of advertising with nneon signsthat display motion is always a fun find! Such a lost art in my opinion. LED just hurts my eyes...doesn’t it?</p>
<section>
<p class="text-caption">Austin, TX</p><img class="large" src="/resources/images/LargeImage.jpg" alt="Large Neon Sign">
</section>
<section>
<img src="/resources/images/baconNeon.jpg" alt="Non Bacon Light">
</section>
<section>
<img src="/resources/images/img2.jpg" alt="Enter Neon Sign">
</section>
<section>
<img src="/resources/images/img3.jpg" alt="Neon Light Love is Losing Game">
</section>
<section>
<img src="/resources/images/img4.jpg" alt="Large and Symbol">
</section>
<section>
<img src="/resources/images/img5%20.jpg" alt="Large Bulb Arrow">
</section>
<section>
<img src="/resources/images/img6.jpg" alt="Old Motel Sign">
</section>
</main>
<footer class="footer">
<p>©2021 Chesapeake, Virginia</p>
</footer>
</section>
</body>
</html>
CSS:
.body{
background-color: #C72033;
max-width: 1240px;
}
nav{
background-color: white;
max-width: 800px;
}
ul{
list-style-type: none;
background-color: black;
float: center;
padding: 0;
max-width: 800px;
margin: 0 auto;
}
li{
display: inline;
color: white;
text-align: center;
padding: 14px 80px;
text-decoration: none;
}
img{
width: 180px;
height: 180px;
padding: 20px;
margin: 0 auto;
float: left;
}
footer{
max-width: 800px;
padding: 30px;
margin: 0 auto;
}
h1{
font-family: "Courier New", monospace;
text-align: center;
font-size: 70px;
height: 10px;
max-width: 800px;
padding: 30px;
margin: 0 auto;
}
.container{
background-color: white;
max-width: 800px;
height: 1200px;
padding: 30px;
margin: 0 auto;
}
.navigation{
float: center;
margin: 0 auto;
}
.main{
max-width: 800px;
height: 950px;
padding: 40px;
margin: 0 auto;
}
.large{
width: 600px;
height: 325px;
margin: 0 auto;
}
.text-caption{
font-family: "Courier New", monospace;
margin: 5px;
}
.clear{
clear: both;
}
.content-wrap{
margin: 0 auto;
}
background-color: #C72033;
max-width: 1240px;
}
nav{
background-color: white;
max-width: 800px;
}
ul{
list-style-type: none;
background-color: black;
float: center;
padding: 0;
max-width: 800px;
margin: 0 auto;
}
li{
display: inline;
color: white;
text-align: center;
padding: 14px 80px;
text-decoration: none;
}
img{
width: 180px;
height: 180px;
padding: 20px;
margin: 0 auto;
float: left;
}
footer{
max-width: 800px;
padding: 30px;
margin: 0 auto;
}
h1{
font-family: "Courier New", monospace;
text-align: center;
font-size: 70px;
height: 10px;
max-width: 800px;
padding: 30px;
margin: 0 auto;
}
.container{
background-color: white;
max-width: 800px;
height: 1200px;
padding: 30px;
margin: 0 auto;
}
.navigation{
float: center;
margin: 0 auto;
}
.main{
max-width: 800px;
height: 950px;
padding: 40px;
margin: 0 auto;
}
.large{
width: 600px;
height: 325px;
margin: 0 auto;
}
.text-caption{
font-family: "Courier New", monospace;
margin: 5px;
}
.clear{
clear: both;
}
.content-wrap{
margin: 0 auto;
}
