WEB PROGRAMMING: IMAGES
ASSIGNMENT NO. 4
-
CODES:
<!DOCTYPE html>
<html>
<head>
<style>
header {
position:fixed;
font-family: 'Garamond';
top:0px;
left:0px;
width:98%;
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-top:20px;
padding-right: 200px;
padding-bottom: 700px;
padding-left: 325px;
background-color: #FFFFFF00;
color: white;
font-size: 12px;
width: 500px;
}
body {
background-image: url('gee.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
padding: 90px;
color: white;
font-family: "Garamond";
font-size: 15px;
text-align: center;
}
.frame1 {
background-color: #F7DFAC40;
color: #FFFFFF;
font-family: 'Garamond';
margin-left: 0px;
padding-top: 10px;
padding: 10px;
float: left;
width: 517px;
}
.frame2 {
background-color: #F7DFAC40;
color: #FFFFFF;
font-family: 'Garamond';
padding-top: 10px;
padding: 10px;
float: right;
width: 517px;
height: 340px;
}
</style>
</head>
<header style="text-align: center;">ACQUIRE</header>
<body>
<p><h2 style="background-color:rgb(150, 99, 71); height: 27px; text-align: center; ">BEAUTIFICATION + CAPTURED + DIGITAL ARTS + VECTOR</h2> </p>
<p>Click to see the bigger picture.</p>
<div class="frame1">
<form>
<a href="aa.jpg">
<img src="aa.jpg" alt="GRACIA" width="100" height="165"></a>
<a href="a.jpg">
<img src="a.jpg" alt="MARGA" width="100" height="165"></a>
<a href="b.jpg">
<img src="b.jpg" alt="JUNVIC" width="100" height="165"></a>
<a href="c.jpg">
<img src="c.jpg" alt="ANDREA" width="100" height="165"></a>
<a href="d.jpg">
<img src="d.jpg" alt="STITCH" width="100" height="165"></a>
<a href="e.jpg">
<img src="e.jpg" alt="Submit" width="100" height="165"></a>
<a href="f.jpg">
<img src="f.jpg" alt="Submit" width="100" height="165"></a>
<a href="g.jpg">
<img src="g.jpg" alt="Submit" width="100" height="165"></a>
<a href="h.jpg">
<img src="h.jpg" alt="Submit" width="100" height="165"></a>
<a href="ii.jpg">
<img src="ii.jpg" alt="Submit" width="100" height="165"></a>
</form>
</div>
<form>
<div class="frame2">
<a href="m1.jpg">
<img src="m1.jpg" alt="GRACIA" width="100" height="165"></a>
<a href="g2.jpg">
<img src="g2.jpg" alt="MARGA" width="100" height="165"></a>
<a href="j1.jpg">
<img src="j1.jpg" alt="JUNVIC" width="100" height="165"></a>
<a href="e1.jpg">
<img src="e1.jpg" alt="ANDREA" width="100" height="165"></a>
<a href="1.jpg">
<img src="1.jpg" alt="STITCH" width="100" height="165"></a>
<a href="e2.jpg">
<img src="e2.jpg" alt="Submit" width="100" height="165"></a>
<a href="k1.jpg">
<img src="k1.jpg" alt="Submit" width="100" height="165"></a>
<a href="n2.jpeg">
<img src="n2.jpeg" alt="Submit" width="100" height="165"></a>
<a href="r2.jpg">
<img src="r2.jpg" alt="Submit" width="100" height="165"></a>
<a href="d2.jpg">
<img src="d2.jpg" alt="Submit" width="100" height="165"></a>
</form>
</div>
</body>
<fieldset style="border-color: #FFFFFF00; text-align: center; padding-top: 50px; padding-left: 0px;">
<label style="font-family: Garmond; font-size: 12px;">COMMENT</label>
<textarea name="Comment" rows="3" cols="50" text-align=center; placeholder="Type some text here"></textarea><br/>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction(){
alert("Thank's for visiting!");
}
</script>
</fieldset>
<footer>
<p style=" text-align:center">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