JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="main">
<p></p>
</div>
<nav>
<ol>
<li><a href="home.php">Home</a></li>
<li><a href="Info.php">Info</a></li>
<li><a href="projects.php">Projects</a></li>
<li><a href="contact.php">Contact</a></li>
</ol>
</nav>
CSS
/* CSS Document */
/*******************************************
Clear body
*******************************************/
body, h1, h2 {
margin: 0;
padding: 0;
}
/*******************************************
body
*******************************************/
body {
background-color: #666;
}
/*******************************************
Headlines
*******************************************/
h1 {
}
h2 {
}
/*******************************************
p etc
*******************************************/
p {
height: 90%;
}
/*******************************************
Linkss
*******************************************/
a:link {
font-family: 'Iceland';
font-style: normal;
font-size: 30px;
font-weight: 700;
text-decoration: none;
color: #666;
}
a:visited {
color: #666;
}
a:hover {
color: #F90;
}
a:active {
}
/*******************************************
Navigation
*******************************************/
nav {
width: 100%;
bottom: 0;
left:0;
height: 10%;
position: fixed;
background-color: #333;
}
ol {
margin: 0;
list-style: none;
text-align: center;
vertical-align: middle;
height: 100%;
}
li {
display: inline;
margin-right: 40px;
}
li a{
}
/*******************************************
Class
*******************************************/
/*******************************************
ID's
*******************************************/
#main {
background-color: #C90;
width: 90%;
height: 80%;
margin: 5% auto;
}
/*#content {
background-color: #FFF;
width: 90%;
height: 90%;
}*/
/*******************************************
Wrapper
*******************************************/
#wrapper{
}
/******************************************
Responsive (Mobile, Tablet)
******************************************/
/* Portrait tablet to landscape and desktop */
@media all and (min-width: 768px) and (max-width: 979px) {
}
/* Landscape phone to portrait tablet */
@media all and...