WEB PROGRAMMING(Midterm): CSS Layout and Web Page concept
ASIGNMENT 2.2
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>CREATE THAT GEE</title>
<link rel="stylesheet" href="create.css">
</head>
<header>CREATE THAT GEE</header>
<ul>
<li><a href="create.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="trad.html">Taditional Arts</a></li>
<li><a href="digi.html">Digital Arts</a></li>
</ul>
<body>
<form>
<h1>WHAT CATCHES YOUR ATTENTION?</h1>
<h4>Click it!</h4>
<h2><a href="digi.html">LETS GO DIGITAL</h2>
<br>
<a href="digi.html">
<img src="light.jpg" alt="LIGHT"; width=" 300"; height="300"></a>
<a href="digi.html">
<img src="hope.jpg" alt="HOPE"; width=" 300"; height="300"></a>
<a href="digi.html">
<img src="beaut.jpg" alt="BEAUTY"; width=" 300"; height="300"></a>
<h2><a href="trad.html">BACK TO TRADITIONAL</h2>
<br>
<a href="trad.html">
<img src="t1.jpg" alt="1"; width=" 300"; height="300"></a>
<a href="trad.html">
<img src="t2.jpg" alt="2"; width=" 300"; height="300"></a>
<a href="trad.html">
<img src="t3.jpg" alt="3"; width=" 300"; height="300"></a>
</form>
</body>
</html>
CSS CODE:
header {
position:fixed;
font-family: 'century gothic';
top:0px;
left:0px;
width:100%;
height:15%;
color:#FFFFFF;
background:#720244;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200% 50%;
font-size: 65px;
padding:15px;
}
body {
margin-top: 120px;
margin-left: 100px;
margin-right: 100px;
font-family: "century gothic";
background-color: #5B091870;
}
form {
color: #6C0027
}
footer {
text-align: center;
padding: 25px;
background-color: #FFFFFF00;
color: white;
font-size: 12px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
RESULT:
Comments
Post a Comment