Skip to main content

Exercise 9: Iframe & Drop Down Menu

 






CODE FOR HTML;


<!DOCTYPE html>

<html>

<head>

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

<title> Iframe & Drop Down Menu </title>

<link rel="stylesheet" href="Exercise9iframe&dropdown.css">

</head>


<body>

<div class="navbar">

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

<a href="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/183696100_2901575863495019_8667639209325296233_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeGmZRPZmRmXrOArSHq09vPIKfIhC24RAaYp8iELbhEBpvFlFRJZ9cKWpyHOm3J-Tle-7AutVdLWleXZ1XrgIqBW&_nc_ohc=HTCL7Rxi8jAAX8t6M2L&_nc_ht=scontent.fmnl19-1.fna&oh=98676492910e87038adfb8cd76772c33&oe=60BD0C01" target="Jillian Dela Cruz">About</a>

<a href="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/184092486_2901582303494375_8241790509753611562_n.jpg?_nc_cat=102&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeEcGjkdkuVwe24baufG6zhykYhz_1E_MoGRiHP_UT8ygdaS2aeggh_uZtm0KJNtqmY2AUNQC7U_51goxmKAeRY3&_nc_ohc=EFWMqsC7uYcAX8X2RFv&_nc_ht=scontent.fmnl19-1.fna&oh=5ec2565718a16b28cc6502231ebefd05&oe=60BC4D14" target="Jil a.k.a. Raven">Contacts</a>

</div>

</div>

</div>

<div id="row1" class="row">

<div class="column1">


</div>

<div id="row1" class="row">

<div class="column2">

<h1 id="home"> HOME </h1> <h3> Annyeong! </h3>


<hr>

<h1> About </h1>

<iframe name="Jillian Marren Dela Cruz" src="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/183696100_2901575863495019_8667639209325296233_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeGmZRPZmRmXrOArSHq09vPIKfIhC24RAaYp8iELbhEBpvFlFRJZ9cKWpyHOm3J-Tle-7AutVdLWleXZ1XrgIqBW&_nc_ohc=HTCL7Rxi8jAAX8t6M2L&_nc_ht=scontent.fmnl19-1.fna&oh=98676492910e87038adfb8cd76772c33&oe=60BD0C01" width="100%" height="600px;">

</iframe>

<hr>

<h1> Artwork #1 </h1>

<iframe name="Self Artwork" src="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/181107917_2898527137133225_4194638926678216196_n.jpg?_nc_cat=107&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeEvAj1LLPaZ-hcYNDgrqLMttBR-f3jdBc-0FH5_eN0Fzzmnk6ajRpp3dzdoIsBv_xzEjgTxL_AqgStXwwY4NALI&_nc_ohc=Y2ft7-uFhNAAX80uCjh&_nc_ht=scontent.fmnl19-1.fna&oh=9088ab121248dfef10bdeb4189170176&oe=60BCFE53" width="100%" height="600px;">

</iframe>

<hr>

<h1> Artwork #2</h1>

<iframe name="Pray Artwork" src="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/181362384_2898527100466562_3906506728124936292_n.jpg?_nc_cat=107&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeE0pl9IjokTixgTzcs68rRWkK6lSXOruwSQrqVJc6u7BO0_hTNo0GilJNeQZx6a1RvL47OEGHUG4ZBKB8XSh5gv&_nc_ohc=NSpQbYegRcsAX90hy5t&_nc_ht=scontent.fmnl19-1.fna&oh=17efbbbb18b58c7ec9e2647c22683a7a&oe=60BE2722" width="100%" height="600px;">

</iframe>

</div>

</div>

<div id="row1" class="row">

<div class="column3">


</div>

<footer id="footer" style="background-color: #cbc6dc;padding: 20px;">

<p style="margin-left: 65px;color:#ffffff;"> My Artworks </p>

<a href="https://www.instagram.com/intheprocess_jillian/?hl=en" style= "margin-left:70px;color: #000000;"> My Instagram </a> <br>

</footer>

</body>

</html>


CODE FOR CSS;

* {
box-sizing: border-box;
}

body, html {
height: 100%;
min-height: 100vh;
margin: 0;
position: relative;
font-family: "Consolas";
background-repeat: no-repeat;
padding-bottom: 30px;
}

iframe:focus {
outline: none;
}

iframe[seamless] {
display: block;
}

.navbar {
overflow: hidden;
background-color: #cbc6dc;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px;  
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: #cbc6dc;
font-family: Arial Black;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #fffff;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #ffa38c;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #fffff;
}

.dropdown:hover .dropdown-content {
display: block;
}

.row::after {
content: "";
clear: both;
display: table;
}

[class*="col-"] {
float: left;
padding: 15px;
}

.column1 {
float: left;
width: 2%;
background-color: #cbc6dc;
height: 10px;
}

.column2 {
border: 10px solid #cbc6dc;
float: left;
width: 96%;
padding-left: 25px;
padding-right: 25px;
}

.column3 {
float: right;
width: 2%;
background-color: #cbc6dc;
height: 10px;
}

[class*="col-"] {
width: 100%;
}

@media only screen and (min-width: 600px) {
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

#footer {
position: relative;
height: 150px;
margin-top: -100px;
clear: both;
}

Comments

Post a Comment

Popular posts from this blog

Exercise 10: Animation (Finals Web Prog)

(Code for HTML:) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Exercise 010 Animated Web page</title> <link rel="stylesheet" href="Exercise10AnimatedWebpage.css"> </head> <body> <div> <h1 style="font-size:40px;"> ABOUT MYSELF  </h1> </div> <br> <br> <br> <br> <br> <br> <br> <br>  <p style="text-align: justify; text-indent: 50px;">  Hi I'm Jillian Marren Dela Cruz. You can call me "Jill or Jillian" i'm currently 3rd year Multimedia Arts Student. 20 years of Age. I chose multimeida because i want to enchance my skills and i'm willing to learn about everything. I'm November Babies and My zodiac sign is Sagittarius. The Sagittarius Traits is Curious and energetic, Sagittarius is one of the biggest travelers among all...
Post a Comment
Read more

Exercise 12: Chat Box (Finals Interactive)

  (CODE FOR HTML:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Chat Box </title> <link rel="stylesheet" href="Exercise12Chatbox.css"> </head> <body> <section> <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"> <span class="msg"> Rj: Hi! I Hope you doing well. Keep safe. See you soon </span> </div> </div> <div class="input-area"> <input id="name-input" type="name" size="12" style="margin-right:8px;" placeholder="Type your name"> <input id="message-input" ...
Post a Comment
Read more

12 Months/ Finding the Events

  <html> <body style="background-color:#CBC6DC;"> <h2><p style="font-family:century gothic;"> ENTER NUMBER OF MONTH:</p></h2> <br><input id="text_a" type="text;" /> <p id="answer"></p> <button onclick="myFunction()">Submit</button> <script> function myFunction() { var a=document.getElementById("text_a").value; if (a=="1")   { document.getElementById("answer").innerHTML="1 - January, New Year";   } else if (a=="2")   {
Post a Comment
Read more