MIDTERM* WEB PROG Ex: 9 CSS flexbox and iframe

-

 





                                        




<!DOCTYPE html>

<html>

<head>

<style>


fieldset 
   {
background: #32a852;
  
   }
          
    body {background-color: #2a8017;}
    }
    
    
iframe:focus {

  outline: none;

}

iframe[seamless] {

  display: block;

}

.navbar {

  overflow: hidden;

  background-color: #121211;

}



.navbar a {

  float: left;

  font-size: 16px;

  color: #c6ff94;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}



.dropdown {

  float: left;

  overflow: hidden;

}



.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color:#c6ff94;

  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/darenkate.ojascastro.9/" target="iframe1">Facebook</a>

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

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

     

    </div>

  </div> 
  

  <div class="dropdown">

    <button class="dropbtn">Web Programming

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

    </button>

    <div class="dropdown-content">

      <a href="https://webbbprog.blogspot.com/2021/04/midtermwebpro-exercise-1-css-color.html" target="iframe1">Exercise 6</a>

      <a href="https://webbbprog.blogspot.com/2021/05/3-row-column.html" target="iframe1">Exercise 7</a>
      
      <a href="https://webbbprog.blogspot.com/2021/04/midterm-web-prog-ex-8-sidebar-navigation.html" target="iframe1">Exercise 8</a>
     
      <a href="https://webbbprog.blogspot.com/2021/04/midterm-web-prog-ex-8-sidebar-navigation.html" target="iframe1">Exercise 9</a>

    </a>

    </div>

  </div> 

<div class="dropdown">

    <button class="dropbtn">Interactive Media

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

    </button>

    <div class="dropdown-content">

      <a href="https://webbbprog.blogspot.com/2021/04/order-list.html" target="iframe1">Exercise 6</a>

      <a href="https://webbbprog.blogspot.com/2021/04/midterm-interactive-ex-7-select-box.html" target="iframe1">Exercise 7</a>

      <a href="https://webbbprog.blogspot.com/2021/04/midterm-interactive-ex-8-change-button.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://webbbprog.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://64.media.tumblr.com/4158076b53dca5726600ea493885b7ac/66e645f0f7b95fae-76/s1280x1920/2d7b1f51a4d0d01110de93fb87b9367fce749dbc.gifv" alt="foo" width= 100% height =550 valign="middle" ></img> 
  





  <hr size=10 color=#000> 

<img src="https://media1.tenor.com/images/bd15e97fa0954aa451d4d57f866fe210/tenor.gif?itemid=18273132" 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

FINAL* INTERACTIVE EX 11: Chat Box

-
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="Final Interactive Exercise 12 Chat box"> </head> <body> <section> <h1> Click the chat button below to start chatting </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://scontent.fmnl17-4.fna.fbcdn.net/v/t1.6435-9/119750405_2384811515158425_5837654595196179074_n.jpg?_nc_cat=104&ccb=1-3&_nc_sid=174925&_nc_eui2=AeGoOCv5B7EbHQm0GPd6xiTQo5YSZYd-j-qjlhJlh36P6uiVIMedAwR8ggszK-Ns8ZtNIsP2Ox1xR4PsBKq0JXXV&_nc_ohc=rnhO5oBjj5...
Read more

WEB PROGRAMMING Ex 5: Header & body

-
Image
  EXERCISE 5 <!DOCTYPE html> <html> <head> <style> body, html { height: 100%; margin: 0; font-family: Times New Roman; background: url("https://scontent.fmnl4-4.fna.fbcdn.net/v/t1.0-9/70242776_2439389376152255_8887865040120578048_o.jpg?_nc_cat=102&ccb=1-3&_nc_sid=19026a&_nc_eui2=AeHkihiUq9Ic1PXUZIssJEfOYW9wiVNLRmNhb3CJU0tGY6Xa9401SSnQH1MuuEybwdFa4t8Nlb-ouGKO21TKNz31&_nc_ohc=Mw1hJnaZVXsAX-6qAUV&_nc_ht=scontent.fmnl4-4.fna&oh=345e2eb735432a8d1623541351ac0cfc&oe=6083B8B5") fixed; background-repeat: no-repeat; background-position: 55% 29.5%; position: relative; } </style> </head> <body> <h2>Daren Kate A. Ojascastro</h2> <p>I'm a 21 years old and a 3rd year student in Perpetual taking a Bachelor of Multimedia Arts.Being a MMA student is so fun yet stressful.  Just imagine finising all of the projects and activity in the majors and also minors. Majors subject can cost you a l...
Read more