WEB PROGRAMMING: BACKGROUND, HEADER, FOOTER
ASSIGNMENT NO. 5
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
header {
position:fixed;
font-family: 'Garamond';
top:0px;
left:0px;
width:100%;
height:10%;
color:#FFFFFF;
background-color: #F9D48599;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200% 50%;
font-size: 50px;
padding:15px;
}
footer {
text-align: center;
padding: 500px;
background-color: #FFFFFF00;
color: white;
font-size: 10px;
}
body {
background-image: url('gee.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
padding: 95px;
}
.frame1 {
background-color: #F7DFAC40;
color: #FFFFFF;
font-family: 'Garamond';
margin-left: 0px;
padding: 15px;
padding-top: 5px;
padding-left: 15px;
float: left;
width: 550px;
}
.frame2 {
width: 45%;
background-color: #F7DFAC40;
float: right;
font-family: 'Garamond';
color: #FFFFFF;
margin-left: 0px;
padding: 15px;
padding-top: .5px;
}
</style>
</head>
<header>ACQUIRE
</header>
<body>
<div class="frame1">
<form>
<h3>LAIDA </h3>
<p>In a world full of happily ever after</p>
<p>—I’d still choose you</p>
<p>As my reality ever after
</p>
</form>
<form>
<br><h3>TULA NG BUHAY KO</h3>
<p>Ikaw ang umpisa</p>
<p>Nilalaman</p>
<p>—At ang huling talata</p></br>
</form>
</div>
<form>
<div class="frame2">
<br><h3> ARTIST BLOCK </br> </h3>
<p>Blank page</p>
<p>Empty stage</p>
<p>Wasted ink</p>
<p>—Can't think </p>
<br><h3> SA AKING PAGUWI </br> </h3>
<p>Ngayon sa aking pag-uwi</p>
<p>Nariyan ang buwan</p>
<p>Hindi binigong bigyang liwanag</p>
<p>—Ang madilim na kawalan</p>
</div>
</form>
<footer>
<p>FIND ME ON MY SOCIALS</p>
<p><a href="https://aquire2021.blogspot.com/">ACQUIRE</a></p>
<p><a href="https://facebook.com/gee.gregorio">FACEBOOK</a></p>
<p><a href="https://instagram.com/gee.nelle">INSTAGRAM</a></p>
</footer>
</html>
RESULT:
Comments
Post a Comment