casita sedona
Casita Sedona
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Casita Sedona</title>
<meta charset="utf-8">
<link rel="stylesheet" href="casita.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Casita Sedona</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms/Canyon%20Room.html">Canyon Room</a></li>
<li><a href="rooms/Javelina%20Room.html">Javelina Room</a></li>
<li><a href="events/Weekend%20Events.html">Weekend Events</a></li>
<li><a href="events/Festivals.html">Festivals</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
<div id="content">
<h2>This is the Home Page</h2>
<h3>This is a Subheading</h3>
<img src="scenery.jpg" alt="Casita Sedona">
<p>This is a paragraph of sentences. This is a paragraph of sentences. This is a paragraph of sentences. This is a paragraph of sentences. This is a paragraph of sentences. This is a paragraph of sentences.</p>
<h3>This is a Subheading</h3>
<p>This is a paragraph of sentences. This is a paragraph of sentences. This is a paragraph of sentences. This is a paragraph of sentences. This is a paragraph of sentences. This is a paragraph of sentences.</p>
</div>
<footer>Copyright © 2014 xinyin</footer>
</div>
</body>
</html>
casita CSS
body {background-color: #330000;
font-family:Verdana,Arial,sans-serif;}
#wrapper{
width:960px;
margin:auto;
background-color:#F4E8EC;
color:#330000;
box-shadow: 5px 5px 5px #000000;
}
h1{ background-image:url('logo.gif');
background-repeat:no-repeat;
background-color:#F4E8BC;
HEIGHT:110px;
FONT-FAMILY:georgia,"Times-New-Roman",serif;
font-size:4.5em;
padding-left:220px;
padding-top:20px;
text-shadow:3px 3px 3px #907450;
margin-bottom:0;
}
nav{padding-top:10px;
float:left;
width:200px;}
nav ul{list-style-type:none;
padding-left:20px;}
nav li{padding-bottom: 5px;
font-weight:bold;}
nav a { text-decoration:none; }
nav a:link { color: #330000; }
nav a:visited{ color: #90745D; }
nav a:hover { color: #3F4632; }
#content { background-color: #FFFFCC;
margin-left: 200px;
padding: 1px 20px 20px 20px;
min-height: 300px;
}
#content img { float: right;
padding: 20px;
}
footer { background-color: #FFFFCC;
margin left: 200px;
padding: 20px;
text-align: center;
font-size: small;
font-style: italic;
}
contact.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Casita Sedona</title>
<meta charset="utf-8">
<link rel="stylesheet" href="casita.css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Casita Sedona</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="rooms/Canyon%20Room.html">Canyon Room</a></li>
<li><a href="rooms/Javelina%20Room.html">Javelina Room</a></li>
<li><a href="events/Weekend%20Events.html">Weekend Events</a></li>
<li><a href="events/Festivals.html">Festivals</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav>
<div id="content">
<h2>This is the Contact Page</h2>
</div>
<footer>Copyright © 2014 xinyin</footer>
</div>
</body>
</html>
Comments
Post a Comment