JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Info</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id ="headwrap">
<header>
<h1><href="infopad.html"><img id ="logoHeader"src="logo.png" alt="InfoPad" /></h1>
</header>
<nav>
<ul>
<li id="contact"><a href="contact.htm">Contact & Send file</a></li>
<li id="payment"><a href="payment.htm">Make a payment</a></li>
<img id ="phoneimg"src="phone.png" alt="phone" /></li>
<img id ="emailimg"src="email.png" alt="email" /></li>
</ul>
</nav>
</div>
<section>
<article>
<p>
</p>
</article>
<img id ="example" src="9x12pad.png" alt="example pad img" />
</section>
</body>
</div>
<footer>
</footer>
</html>
CSS
div{
width: 1366px;
margin: 0 auto;
}
nav li{
display: inline;
float: left;
padding-left: 100px;
padding-top: 70px;
font-size: 25px;
font-weight: bold;
text-decoration: none;
font-family: Helvetica Neue,Helvetica, Geneva, sans-serif;
}
#phoneimg{
margin: 45px 5px auto auto;
float: right;
width: 200px;
}
#emailimg{
clear: right;
float: right;
width: 200px;
}
#headwrap{
background-color: grey;
overflow:hidden;
margin-bottom: 5px;
border-bottom: solid 1px black;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
a{
text-decoration: none;
color: #191919;
float: left;
}
#contact a:hover {
color: #F90;
background-color: #FFF;
}
#payment a:hover {
color: #F90;
background-color: #FFF;
}
#logoHeader{
width: 180px;
height: 100px;
float: left;
}
body{
font-family: Verdana, Geneva, sans-serif;
color: #191919;
background-color: #F5F5F5;
}
article{
width: 450px;
float: left;
padding: 0px 5px;
background-color: #DCDCDC;
font-size: 15px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #999;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
#advantage {
text-align: center;
}
#example{
margin-left: 20px;
width: 777.6px;
height: 583.2px;
}
footer{
text-align: center;
clear: left;
}