Exercise 12 Responsive Web Page Design (WP)

 




HTML

<!DOCTYPE html>

<html>

<head>

    ​<meta name="viewport" content="width=device-width, initial-scale=1">


<style>


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: 16px;  

  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

Popular posts from this blog

Exercise 11 : Counting Drill Game (IMD)

Image
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Game 0v0 </title> <style> html { font-family: Century Gothic; margin-left: 20%; background-color: #17b8d4;     }        body { max-width: 100px; min-width: 480px;     } fieldset { background-color:#ae94e0; } button { background-color:#c9c012; color: black; border-radius: 30px; width: 200px; height: 60px; } </style> </head> <body> <h1>Count Game!!!</h1> <p> Let's count the shapes on the screen!!!</p> <fieldset> <canvas id="myCanvas" width="995" height="500" style="border:20px;"> </canvas> <label> How many shapes do you see??? </label> <input type="number" id="answer"> </input> <!-- <button id="colors" onclick="colors()" > Colors </but...
Read more

Exercise 12 Chat box (IMD)

Image
  HTML___ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Message Box </title> <link rel="stylesheet" href="Exercise 012 Chat box css.css"> </head> <body> <section> <h1> HI! Welcome to Alexa 👩 click the button to assist you </h1> <button class="chat-btn"> <b> CHAT </b> </button> <div id="chat-container" onclick="changeColor()" class="chat-popup"> <div class="chat-area"> <div class="income-msg"> <img src="https://i.ibb.co/31dgnVS/rikkaasa.png" class="Alexa" alt="Alexa"> <span class="msg"> What can I help you?  </span> </div> </div> <div class="input-area"> <input id="name-input" t...
Read more