WEB PROGRAMMING (Midterm): CSS SIDEBAR NAVIGATION
ASSIGNMENT 2.3
RESULT:
HTML CODE:<!DOCTYPE html>
<html>
<head>
<title>CREATE THAT GEE</title>
<link rel="stylesheet" href="create.css">
</head>
<header>CREATE THAT GEE</header>
<div class="sidenav">
<a href="create.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="trad.html">TRADITIONAL</a>
<a href="digi.html">DIGITAL</a>
</div>
<body>
<section>
<h1>WHAT CATCHES YOUR ATTENTION?</h1>
<h4>Click it!</h4>
<hr>
<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>
</section>
<hr>
<section>
<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>
</section>
<hr>
<footer>
<p><h4>FIND ME ON MY SOCIALS</h4></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/create.gee">INSTAGRAM</a></p>
</footer>
</body>
</html>
CSS CODE:
header {
position:fixed;
font-family: 'century gothic';
top:0px;
left:0px;
width:100%;
height:15%;
color:#FFFFFF;
background:#533F67;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200% 50%;
font-size: 65px;
padding:10px;
padding-bottom: 0px;
}
body {
margin-top: 120px;
margin-left: 200px;
margin-right: 100px;
font-family: "century gothic";
background-color:#DBC7FF;
color: #038051;
margin-bottom: 100px;
}
img {
margin: 10px;
border: solid;
}
hr {
border: solid;
color: #24B484;
}
h1 {
font-size: 50px;
font: "center gothic";
margin-bottom: -10px;
color: #533F67;
}
h2 {
font-size: 35px;
font: "center gothic";
margin-bottom: 15px;
margin-top:20px;
}
h4 {
font-style: "regular"
font: "center gothic";
}
footer {
text-align: center;
padding: 10px;
background-color: #4FE3AB;
color: white;
font-size: 12px;
margin-top: 60px;
}
.sidenav {
width: 180px;
position: fixed;
z-index: 1;
top: 120px;
left: 10px;
background: #24B484;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #DCFFF2;
display: block;
}
.sidenav a:hover {
color: #064579;
}
Comments
Post a Comment