JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Pacific Trails Resort</title>
<link rel="stylesheet" media="only screen and (max-width: 480px) "href="Pacific.css">
<meta charset="UTF-8">
</head>
<body>
<div class="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<div id="nav">
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="yurts.html">Yurts</a></li>
<li> <a href="activities.html">Activities</a></li>
<li> <a href="reservations.html">Reservations</a></li>
</ul>
</div>
<div id="content">
<h2>The Yurts at Pacific Trails Resort</h2>
<img src="yurt.jpg" height="250" width="320" alt="yurt">
<section>
<strong>What is a yurt?</strong>
<br>Our Luxury yurts are permanent structures four feet off the ground. Each yurt has canvas walls, a wooden floor, and a roof dome that can be opened.<br>
<br><strong>How are the yurts furnished?</strong>
<br>Each yurt is furnished with a queen-size bed with down quilt and gas-fired stove.The luxury camping experience also includes electricity and a sink with hot
and cold running water. Shower and restroom facilities are located in the lodge.<br>
<br><strong>What should I bring?</strong>
<br>Bring a sense of adventure and some time to relax! Most guests also pack
comfortable walking shoes and plan to dress for changing weather with layers
of clothing
</section>
<div class="clear">
</div>
<div id="footer">
<br>Copyright © 2013 Pacific Trails Resort
<br><a href="[email protected]">[email protected]</a>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
body {background-image: url(background.jpg);
color: #000033;
font-family: arial, verdana, sans-serif;}
h1 {background-image: url(sunset.jpg); background-color: #000033;
background-position: right; padding-left: 20px; background-repeat: no-repeat; height:72px; margin-bottom: 0;
color: #ffffff;
line-height: 200%;
font-family: Georgia, "Times New Roman", serif;}
h2 {color: #3399cc;
font-family: Georgia, "Times New Roman", serif;}
h3 {color: #000033;}
#content {padding-left: 20px; padding-top: 1px; padding-right: 20px; background-color: #FFFFFF; margin-left: 200px;}
#content ul {list-style-position: inside; }
#content img { float: left; padding-right: 20px; }
.clear { clear:both;}
dt {color: #00ff00;}
#nav {font-weight: Bold; float: left; width: 160px; padding: 20px 5px 5px 20px; background-color: #90c7e3; }
#nav a {text-decoration: none; }
#nav a:link {color: #000033; }
#nav a:visited {color: #344873; }
#nav a:hover {color: #FFFFFF; }
#nav ul { list-style-type: none; margin:0; padding-left: 0; }
.resort {color: #000033; font-size: 1.2em; }
#footer {font-size: .70em; font-style: italic; text-align: center; padding: 10px;}
.wrapper {background-color: #90C7E3;
margin-left: auto;
margin-right: auto;
min-width: 960px;
-webkit-box-shadow:
5px 5px 5px #1e1e1e;
-moz-box-shadow: 5px 5px 5px #1e1e1e;
box-shadow: 5px 5px 5px #1e1e1e;
}
#mobile { display: none;}
#desktop { display: inline;}