HTML CODE: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>STEM Socity Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- code for navbar starts -->
<div class="navbar">
<div id="list">
<ul>
<li><a href="#"> Findٖٖ talent </li></a>
<li><a href="#"> For designers</li> </a>
<li><a href="#"> Inspiration</li> </a>
<li><a href="#"> Learn design</li> </a>
<li><a href="#"> Go Pro </li></a>
</ul>
<div id="button-login">
<button>Log In </button>
</div>
<div id="buttonsignup">
<button>Sign Up</button>
</div>
</div>
</div>
<!-- code for navbar ends here -->
<!-- Content code text starts from here -->
<div class="container">
<div id="main">
<p>Search To Get The Most Premium Designs Ever Created ! </p>
</div>
<div class="searchbar">
<input placeholder="Search Here : ">
</div>
</div>
<!-- content code text ends here -->
<!-- footer starts from here -->
<footer>
<div class="footercontent">
<h4 id="fordesignercoloumn">For Designers</h4>
<ul>
<li><a href="#">Explore design work</a></li>
<li><a href="#">Design Blog</a></li>
<li><a href="#">Overtime Podcast</a></li>
</ul>
</div>
<div class="footercontent">
<h4>Hire Designers</h4>
<ul>
<li><a href="#">Post A Job Opening</a></li>
<li><a href="#">Post a freelance Project</a></li>
<li><a href="#">Search For Designers</a></li>
</ul>
</div>
<div class="footercontent">
<h4>Company</h4>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="footercontent">
<h4>Design Resources</h4>
<ul>
<li><a href="#">Freelancing</a></li>
<li><a href="#">Design Hiring</a></li>
<li><a href="#">Creative Process</a></li>
</ul>
</div>
</footer>
</body>
</html>
CSS Code :
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); */
/* CSS for navbar */
body{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
/* #color: #0D0C22; */
display: flex;
flex-direction: column;
height: 100vh;
}
.navbar {
height: 100px;
/* width: 1px; */
padding: 0px 40px;
}
#list {
font-size: 14px;
display: flex;
justify-content: space-evenly;
padding-top: 40px;
}
li {
display: inline-block;
margin-right: 30px;
font-size: 17px;
}
.navbar li a {
text-decoration: none;
color: #0D0C22;
}
li :hover {
font-weight: bold;
}
button{
color: white;
border-radius: 5px;
background-color: #0D0C22;
height: 30px;
width: 60px;
border-style: none;
}
/* CSS for navbar ends here */
/* Content code text starts here */
#main {
font-weight: bold;
text-align: center;
}
.searchbar {
text-align: center;
align-items: center;
}
/* CONTENT CODE text ends here */
/* footer CSS starts from here */
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: #0D0C22;
color: #fff;
padding: 20px 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.footercontent {
display: block;
}
.footercontent h4 {
margin-bottom: 10px;
}
.footercontent ul {
list-style: none;
padding: 0;
margin: 0;
}
.footercontent li {
margin-top: 8px;
}
.footercontent li a {
text-decoration: none;
color: #fff; /* Link color */
}
Post a Comment