Exercise 10 animated web page

on

  <!DOCTYPE html>


<html>


<head>


<style>


div { 

background-color: red; 

animation-name: example;

animation-duration: 15s; 

    animation-iteration-count: infinite;

}


@keyframes example 

{

 from {background-color: violetn;}

to {background-color: yellow;}


 10% {background-color: violet;}

 25% {background-color: blue;}

 35% {background-color: yellow;}

 40% {background-color: green;}

 45% {background-color: grey;}



.p1{ font-size:10px; color: red ;

animation-name: p1;

animation-duration: 4s; }



fieldset 

   {

 background: #9e4333;

  

   }

          

    body {background-color: #00A4E4;}

    }

    

    

iframe:focus {


  outline: none;


}


iframe[seamless] {


  display: block;


}


.navbar {


  overflow: hidden;


  background-color: #121211;


}




.navbar a {


  float: left;


  font-size: 16px;


  color: #9e4333;


  text-align: center;


  padding: 14px 16px;


  text-decoration: none;


}




.dropdown {


  float: left;


  overflow: hidden;


}




.dropdown .dropbtn {


  font-size: 20px;  


  border: none;


  outline: none;


  color:#9e4333;


  padding: 14px 16px;


  background-color: inherit;


  font-family: inherit;


  margin: 0;


}




.navbar a:hover, .dropdown:hover .dropbtn {


  background-color: orange;


}


.dropdown-content {


  display: none;


  position: absolute;


  background-color: #f9f9f9;


  min-width: 160px;


  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);


  z-index: 1;


}


.dropdown-content a {


  float: none;


  color: blue;


  padding: 12px 16px;


  text-decoration: none;


  display: block;


  text-align: left;


}


.dropdown-content a:hover {


  background-color:orange;


}


.dropdown:hover .dropdown-content {


  display: block;


}


footer{

    clear:both;

}


*{box-sizing:border-box}

html{background:;}

footer,header{background: #00b4de; color: #fbfbfb; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; text-align: center; padding: 2em 0;}




</style>


</head>


<body>

<fieldset>


<div class="navbar">


  <a href="#home">Home</a>


  

  

  <div class="dropdown">


    <button class="dropbtn">social accounts


      <i class="fa fa-caret-down"></i>


    </button>


    <div class="dropdown-content">


      <a href="https://www.facebook.com/adrian.guisihan.3" target="iframe1">Facebook</a>


      <a href="https://www.instagram.com/adywooooow/" target="iframe1">Instagram</a>


      <a href="https://twitter.com/adywooooow" target="iframe1">E twitter </a>


     


    </div>


  </div> 

  


  <div class="dropdown">


    <button class="dropbtn">Javascript 


      <i class="fa fa-caret-down"></i>


    </button>


    <div class="dropdown-content">


      <a href="https://webprogramming09.blogspot.com/2021/04/blog-post.html" target="iframe1">Exercise 6</a>


      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-7-select-box-price-list.html" target="iframe1">Exercise 7</a>

      

      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-8-change-button-properties.html" target="iframe1">Exercise 8</a>


    </a>


    </div>


  </div> 


<div class="dropdown">


    <button class="dropbtn">HTML 


      <i class="fa fa-caret-down"></i>


    </button>


    <div class="dropdown-content">


      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-6-external-css-style-of-color.html" target="iframe1">Exercise 6</a>


      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-7-css-layout-and-web-page.html" target="iframe1">Exercise 7</a>


      <a href="https://webprogramming09.blogspot.com/2021/04/exercise-8-css-side-bar-navigation.html" target="iframe1">Exercise 8 </a>


     


    </div>


  </div> 


</div>




<div style="padding: 55px 32px;height:3500px; WIDTH="100%">



  <h2 id="home"> HOME Fixed Full-height Side Nav</h2>

 


 <iframe name ="iframe1" src="https://webprogramming09.blogspot.com/" width="100%" height=600px> 


 </iframe>

 <br>

<br>



<iframe name ="iframe2" src="https://www.bing.com/" noframe width="100%" height=200px>  </iframe>


  <hr size=10 color=#000>  



<br>



  

  <p id="news">News</p>


  <img src="https://media.giphy.com/media/3o6UBpHgaXFDNAuttm/giphy.gif" alt="foo" width= 100% height =550 valign="middle" ></img> 

  




  <hr size=10 color=#000> 

    <p id="contact">My Art Works</p>


  <a href="https://ibb.co/qFXZ2HR"><img src="https://i.ibb.co/4g9Q0bj/bg.png" alt="bg" border="0"></a>


  <hr size=10 color=#000> 


<img src="https://media.giphy.com/media/3o6Zt6KHxJTbXCnSvu/giphy.gif " alt="foo" width= 100% height =500 valign="middle" border="10" ></img> 


</div>


        <footer>

            &copy; 2021 | Adywooooow

          

        </footer>

<br>



</fieldset>


</body>



</html>


Comments

Post a Comment