Project 2 - Sweet Eats Bakery - Weddngs

index.html

<link href="https://fonts.googleapis.com/css?family=Gaegu|Roboto" rel="stylesheet">

<div class="container">
  <h1>Sweet Eats Bakery</h1>
  <header>
    <nav>
      <a href="#">About</a>
      <a href="#">Cookies</a>
      <a href="#">Weddings</a>
      <a href="#">Catering</a>
      <a href="#">Contact</a>
    </nav>
    <img src="https://tk-assets.lambdaschool.com/bcf76f62-2431-4c22-b466-2e711f3da2b9_ui-i-bakery-main-header.png" alt="">
    <section class="about">
      <h2>About Sweet Eats Bakery</h2>
      <p>Marzipan jelly-o macaroon I love macaroon jujubes. Candy candy canes jujubes I love ice cream croissant. Lollipop donut icing I love liquorice gummi bears marzipan. Dragée jelly beans apple pie cotton candy lemon drops pastry candy msg powder.</p>
    </section>
  </header>
  <section class="wedding content-row">
    <div class="imgdiv">
      <img class="bodyimg" src="https://images.pexels.com/photos/169191/pexels-photo-169191.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
    </div>
    <div>
      <h2>Weddings</h2>
      <p>Married lavish, wedding cake. Marzipan topping bear claw soufflé gingerbread biscuit. Tiramisu gummi bears chocolate bar sugar plum icing.Marzipan topping bear claw soufflé gingerbread.
   </div> 
  </section>
  <section class="content-row">
    
    <div><h2>Menu Options</h2>
      <p><img class="bodyimg img2" src="https://images.pexels.com/photos/2306280/pexels-photo-2306280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="cake topper">Marzipan topping bear claw soufflé gingerbread biscuit. Tiramisu gummi bears chocolate bar sugar plum icing.Marzipan topping bear claw soufflé gingerbread biscuit. Tiramisu gummi bears chocolate bar sugar plum icing.Marzipan topping bear claw soufflé gingerbread biscuit. Tiramisu gummi bears chocolate bar sugar plum icingMarzipan topping bear claw soufflé gingerbread biscuit. Tiramisu gummi bears chocolate bar sugar plum icing chocolate bar sugar plum icingbear claw soufflé</p>
    
    
      
    </div>
  </section>
</div>

<footer>
  <div class="footer-content">
    <h3>Sweet Eats Bakery</h3>
    <nav>
      <a href="#">About</a>
      <a href="#">Cookies</a>
      <a href="#">Weddings</a>
      <a href="#">Catering</a>
      <a href="#">Contact</a>
    </nav>
    <p class="copyright">&copy; Sweet Eats 2018</p>
  </div>
</footer>

project-2-sweet-eats-bakery-weddngs.markdown

Project 2 - Sweet Eats Bakery - Weddngs

A Pen by Jay Will on CodePen.

License.

style.css

header nav a:hover{
  animation: navAnime .4s;
  animation: navAnime2 .4s;
  
}
@keyframes navAnime{
  0% {transform: translateY(0);}
  15% {transform: translateY(4px);}

}
@keyframes navAnime2{
  0% { box-shadow:0px 0px black;}
  3% { box-shadow:0px 0px black;}
  33% { box-shadow:0px 4px #F87B99;}
  30% {transform: translateY(-7px);}
  100% {transform: translateY(0);}
}
*{
  color:#3c373b;
}


h1{
  font-family: 'Gaegu', cursive;
  margin: 20px 0;
  font-size: 60px;
}

h2, h3{
  font-family: 'Gaegu', cursive;
  margin-bottom: 0;
  padding: 0 10px;
  font-size: 30px;
}


p{
  font-size: 16px;
  font-family: roboto;
  padding: 10px;
  line-height: 1.4;
  float: 
}

img{
  border-radius:10px;
}

.content-row{
  display: flex;
  border-radius:10px;
}
.content-row:hover{
  background:#F87B99;
  transition:1s;
}

.content-row div{
  margin:20px;
}

.container{
  width:600px;
  margin: 0 auto;
}

.container header nav a{
  margin: 0 10px;
  border: 1px solid lightgray;
  padding: 20px;
  display: inline-block;
  border-radius: 20px;
  color: white;
  text-decoration: none;
  margin-bottom: 20px;
  background-color:#F87B99
}

.container header nav a:hover{
  background-color:white;
  color:pink;
}

.wedding{
  margin-top:20px;
}


footer{
  width: 100%;
  background: #F87B99;
  border-top: 1px dashed white;
}

footer .footer-content{ 
  margin: 0 auto;
  width:600px;
  
}

footer .footer-content h3{
  padding: 0;
  margin: 20px 0;
}

footer nav{
  display: flex;
  align:center
}

footer a{
  margin: 10px;
  color: black;
  text-decoration: underline;
}


footer nav a:first-child {
  margin-left: 0;
}

footer nav a:hover{
  color:white;
}

footer .footer-content .copyright {
  padding: 20px 0;
  text-align:center;
}
.bodyimg{
  width:300px;
}
.bodyimg.img2{
  width:280px;
  float:right;
  margin:2px;
  
}
.container header nav a:active{
  border radius 20px;
  box-shadow:0px -1px black;
  transform: translateY(1)
}