In: Computer Science
Our third project focuses on styling portions of your website. You should focus on your navigation, footer, text font, and general color scheme. Your navigation can be a traditional menu, drop down menu, “hamburger” menu, or a unique menu of your choosing. It must, however, be functional and relevant to your website if you choose to do something unique. Your footer must have a copyright for 2020 and at least few relevant links of your choosing. Your footer must be stylized and stuck to the bottom of your page, not floating around your screen as you scroll. We’ll view examples in class.
Feel free to use any colors, any readable font, images, etc. for your navigation and footer. Please limit color schemes to 5 colors or less (I’d prefer 3 or less personally) as to keep your website coherent and uniform. Make sure all text is readable and has high contrast with your background color choices. I look forward to seeing what color themes you choose in your website and how you utilize them! Your background color choices do not have to remain the same throughout the next CSS project - I know that things will change and develop over time, but I want to see your color theme on your site.
Your final submission should include: your project folder with the appropriate files as a zip file on blackboard. Assignments turned in late, via email, etc. will not be accepted. Do not wait until class to submit an assignment. Assignments are due BEFORE class. If you are experiencing technical difficulties email me and let me know so we can work them out in a timely fashion.
This is the main question, I also have some HTML that I need fixed from the previous project
This code contains both html and css. As per requirement I have created only header and footer.
<!-- ! IMPORTANT
please connect to internet to open this page as bootstrap is use in the page
-->
<html>
<head>
<title>This is webpage</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Geneva;
}
.navbar {
width: 100%;
text-align: center;
background-color: #4b2786;
color: white;
position: fixed;
z-index: 1;
top: 0;
left: 0;
grid-template-columns: repeat(5, 1fr);
display: grid;
}
.heading {
grid-column: 1/3;
margin-right: 80px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.navitems {
grid-column: 3/6;
}
.navitems div {
padding: 3px;
display: inline-block;
margin-right: 80px;
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
border-radius: 20px;
padding-inline-start: 0px;
margin-block-start: 0.2em;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 5px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
border-radius: 20px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navitems div:hover {
border-bottom: 1px solid red;
}
.footer {
position: fixed;
left: 0;
text-align: center;
bottom: 0;
width: 100%;
background-color: #4b2786;
color: white;
margin-top: 20px
}
.icons {
padding-top: 10px;
text-align: center;
}
.icons div {
display: inline-block;
width: 40px;
height: 30px;
background-color: black;
text-align: center;
}
.icons div {
display: inline-block;
}
.icons div:nth-child(2) {
font-size: 30px;
color: red;
}
.one div {
display: inline-block;
padding: 5px;
}
.copyright {
color: grey;
font-size: 0.8em;
padding-bottom: 10px;
}
.footerlink a{
text-decoration: none;
color:white;
}
</style>
</head>
<body>
<div class="navbar">
<div class="heading">
<span style="font-size:25px">Ω</span>
WELCOME YOU ALL
</div>
<div class="navitems">
<div class="dropdown">HAMBURGER
<ul class="dropdown-content">
<a href="#">ITEM 1</a>
<a href="#">ITEM 2</a>
<a href="#">ITEM 3</a>
<a href="#">ITEM 4</a>
<a href="#">ITEM 5</a>
<a href="#">ITEM 6</a>
</ul>
</div>
<div>PIZZA</div>
<div>CONTACT</div>
<div>REPORT</div>
</div>
</div>
<div id="container">
</div>
<div class="footer">
<div>
<div class="icons">
<div>we</div>
<div>♥</div>
<div>you</div>
</div>
<div class="gridfoot">
<div class="footerlink">
<div class="one">
<div><a href="#">Home</a></div>
<div><a href="#">Support</a></div>
<div><a href="#">Security</a></div>
</div>
<div class="two">
<div><a href="#">Terms of usage</a></div>
</div>
</div>
<div class="copyright">Copyright © 2020 IS448-TEST</div>
</div>
</div>
</div>
</body>
</html>