CH11 Activities

In this example below you will see how to do a CH11 Activities with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by pete1281, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright pete1281 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CH11 Activities</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">

<head> <meta name="description " content= " Pacific Trails Resort offers a special lodging experience with lots of activities located on the California North Coast" >
   <title>Pacific Trails Resort</title>
   <meta charset="utf-8">
   <link href="pacific.css" rel="stylesheet" type="text/css">

</head>

<body>

   <div id="wrapper">

      <h1>Pacific Trails Resort</h1>

      <nav><strong>
         <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></strong>
         </ul>
      </nav>
<div id="content">

         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/trail.jpg" alt="Trail Picture" height= 250px width=350px / >
    <h3>Hiking</h3>
     <p>Pacific Trails Resort has 5 miles of hiking trails and is adjacent to a state park. Go it alone or join one of our guided hikes. </p>
    <h3> Kayaking</h3>
    <p>Ocean kayaks are available for guest use. </p>
    <h3> Bird Watching </h3>
    <p>While anytime is a good time for bird watching at Pacific Trails, we offer guided birdwatching trips at sunrise several times a week. </p>

         <div id="gallery">
            <ul>

 <li><a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo2.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo2thumb.jpg" width="100" height="75" alt="Rocky Coastline">
<span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo2.jpg" width="200" height="150" alt="Rocky coastline"><br>Rocky Coastline</span></a>
</li>
<li><a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo3.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo3thumb.jpg" width="100" height="75" alt="Clouds Moving In on the Coast">
<span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo3.jpg
" width="200" height="150" alt="clouds Moving In on the Coast"><br>Clouds Moving In on the Coast</span></a>
</li>
<li><a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo4.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo5thumb.jpg" width="100" height="75" alt="Waterfall Wear Big Sur">
<span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo4.jpg" width="200" height="150" alt="Waterfall Near Big Sur"><br>Waterfall Near Big Sur</span></a>
</li>
<li><a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo6.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo6thumb.jpg" width="100" height="75" alt="Ocean Sunset">
<span><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/photo6.jpg" width="200" height="150" alt="Oean Sunset"><br>Ocean Sunset</span></a>
</li>
</ul>
         </div>
      

      
<br><br>
         <div id="contact"><span class="resort">
           Pacific Trails Resort</span><br>
            12010 Pacific Trails Road<br>
            Zephyr, CA 95555<br>
            <br>
            888-555-5555<br>
            <br>
         </div>
     
         <div  id="footer"> Copyright &copy; 2013 Pacific Trails Resort<br>
            <a href="mailto:Kelsey@Peterson.com">Kelsey@Peterson.com</a>
        </footer>
         </div>
</body>

</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/pete1281/ch11-activities-gFIkC */
header, hgroup, nav, footer, figure, figcaption, aside, section, article {display:block
}
body {background: #ffffff; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/ptrbackground.jpg);
      font-family: Arial, Hevetica, san-serif;
}
h1 {background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/sunset.jpg);
        background-repeat:no-repeat;
        background-color: #000033;
        background-position: right;
        color: #FFFFFF;
}
nav { padding: 20px 5px 5px 20px;
      font-weight:bold;
      float:left;
      width:160px;
  
}
nav ul{list-style-type:none;
       margin: 0;
       padding-left: 0;
       font-size: 1.2em;
}
nav a{text-decoration:none; transition: background-color 3s ease-out;
}
nav a:link{color:#000033;}
nav a:visited{color:#344873;}
nav a:hover{color:#FFFFFF;}
h1 { margin-bottom: 0;
     padding: 10px;
     font-family:Georgia, "Times New Roman", serif;
}
h2 { color: #3399CC;
     font-family:Georgia, "Times New Roman", serif;
     text-shadow: 1px 1px 1px #ccc;
}
h3 { color: #000033;
  font-family:Georgian, "Times New Roman", serif;
}
dt { color: #000033;
}
.resort { color: #5C7FA3;
          font-weight:bold;
}
#content {padding: 1px 20px 20px 20px;
          background-color: #FFFFFF;
          margin-left: 190px;
          padding-left: 30px;
}
#content img{float:left;
             padding-right:20px;
             max-width:100%;
             height:auto;
}
#content ul{list-style-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/91758/marker.gif');
            list-style-position: inside;
}
#contact {font-size:90%;
}
#wrapper {width: 80%;
          margin: auto;
          background-color: #90C7E3;
          min-width: 960px;
          box-shadow: 5px 5px 5px #000033;
}
footer {padding: 20px;
        font-size:75%;
        font-style:italic;
        font-family:Georgia, "Times New Roman", Times, serif;
        margin-left: 190px;
        background-color: #FFFFFF;
}
table {border: 1px solid #3399CC;
       width: 80%;
       border-spacing: 0;
}
td, th {padding: 5px;
        border: 1px solid #3399CC;
}
td {text-align:center;
}
.text {text-align:left;
}
tr:nth-of-type(odd) { background-color:#F5FAFC;
}
#content img, #content video, #content embed { float:left; padding-right: 20px; }

#gallery img { height: 200px; text-align: left;}

Comments