JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang-"en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript" src="main.js"></script>
<title>Chris Flynn</title>
</head>
<body bgcolor= "#434343" >
<div id ="container">
<div id="headerContainer">
<div id = "header">
<div class="dropdown">Test</div>
<div><ul id="barBtns" class="dropdown-menu">
<li class="listItem"><a href="#home">[email protected]</a></li><li class="listItem"><a href="#about">StuffA</a></li><li class="listItem"><a href="#contact">StuffB</a></li>
</ul></div>
</div>
</div>
<div id="strip">
<div id="images">
<div><img class="wide" src="images/Chris-Flynn Going-Away.jpg"></img></div>
<div><img class="wide" src="images/Chris-Flynn Red-Samurai.jpg"></img></div>
<div><img class="tall" src="images/Chris-Flynn Midna.jpg"></img></div>
<div><img class="wide" src="images/Chris-Flynn Life-Study.jpg"></img></div>
</div>
<div id="about">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris dapibus, ligula quis varius posuere, tortor lectus dapibus nibh,
tempus rhoncus urna ex sed purus. Nunc congue, arcu quis accumsan
fermentum, felis erat volutpat metus, eu feugiat metus tellus sed arcu.
Nulla sagittis lacinia arcu, vitae malesuada quam gravida imperdiet.
Phasellus auctor augue ut elementum pretium. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Donec posuere risus eget dolor
ultrices, at fringilla neque hendrerit. Aenean et libero tortor.<br /><br />
Vestibulum est turpis, accumsan et maximus eu, ultricies in felis.
Phasellus nec lacus quis arcu euismod porta sed ac erat. Quisque
non tristique tellus. Fusce viverra, elit eu venenatis varius, felis ipsum
auctor arcu, nec bibendum nisi felis in diam. Cras mollis malesuada velit,
eget venenatis orci pretium non. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere...
CSS
body{
margin:0;
padding:0;
}
ul {
margin:0;
pading:0;
list-style-position: inside;
}
#strip {
display: block;
margin: 40px auto;
width: 80%;
background-color: black;
padding-top:10px
}
#headerContainer {
top:0;
position:fixed;
height :40px;
width:100%;
padding-left:20%;
background-color: #2F2F2F;
font-family:Arial, Helvetica, sans-serif;
font-size:8px;
}
#header {
height:40px;
width:800px
}
#images {
display: block;
width:100%;
}
img.wide {
display: block;
width:100%;
margin: 20px auto;
}
img.tall {
display: block;
max-height:98vh;
max-width:100%;
margin: 20px auto;
}
a {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
color:white;
text-decoration: none;
}
#about {
padding:10px;
background-color:#778899;
}
.dropdown {
display: inline-block;
height:40px;
background-color:#4c4d4c;
border-left-style:solid;
border-left-color:grey;
border-left-width:1px;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
text-decoration:none;
}
.dropdown .dropdown-menu {
display: inline-block;
height:40px;
padding:0;
margin: 0;
background-color:#4c4d4c;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
}
.listItem {
display:inline-block;
list-style-type: none;
margine:0px;
background-color:#4c4d4c;
border-left-style:solid;
border-left-color:grey;
border-left-width:1px;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:19px;
padding-top:5px;
padding-left:10px;
padding-right:10px;
height: 35px;
text-decoration:none;
}
.listItem:hover {
background-color:#9e9e9e;
}
.listItem:active {
position:relative;
top:1px;
}
JavaScript
// Stackoverflow