tribute-page

index.html

<main id="main">
 <h1 id="title"> Ocean Travel </h1>
  <figure id="img-div"<figure>
    <img id="image"
src="https://cdn.pixabay.com/photo/2015/10/30/20/13/sunrise-1014713__480.jpg"
    alt="This is a picture of a boat in the ocean one could journey in."
    />
  <figcaption id="img-caption">This boat has paddles which can be rowed through the water.
   </figcaption>
   </figure>
   <section id="tribute-info">
  <h3>Ocean travel can be pretty complicated!</h3>
  <h3>If you are interested in learning more 
    <a
       id="tribute-link"
      href="https://oceantoday.noaa.gov/traveltheseas/"
       target="_blank"
       >paddle here</a>!
     </h3>
</section>
</main>
      
    
    
         

script.js

//coded by @wvinson43
const projectname='tribute-page';
localStorage.setItem('ocean_travel');

style.css

html{
  font-size: 12
}
body{
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: center;
  color: blue;
  background-color: aqua;
  margin: 0;
}
h1{
  font-size: 3rem;
  margin-bottom: 0;
}
@media(max-width: 400px){ h1{
  font-size: 4rem;
  line-size: 1.4;
 }
}
h2{
   font-size: 3rem;
  }
a{
  color: green;
}
a:visited{
  color: red;
}
#main{
  margin: 20px 5px;
  padding: 10px;
  border-radius: 2px;
  background:#F99;
}
@media(max-width: 400px){ #main{
  margin: 0;
 }
}
img{
  max-width: 100%;
  display: block;
  height: auto;
  margin: auto;
}
#img-div{
  background: maroon;
  padding: 15px
  margin:0;
}
#img-caption{
  margin: 15px 0 5px 0;
}
@media(max-width: 400px){
  #imgcaption{font-size: 1.8rem;
  }
}

tribute-page.markdown

tribute-page

A Pen by Wes Vinson on CodePen.

License.