Sample
Ankit Singh
Like this project
Posted Feb 15, 2023
This is a sample HTML page with CSS styling for a header, navigation bar, main section, and call-to-action section, including a media query.
Likes
0
Views
38
Tags
Here is sample of html,css and js(javascript) code to create basic homepage:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Advanced Homepage</title>
<style>
/* CSS reset */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* CSS styling for the page */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #eee;
padding: 10px;
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
nav a {
color: #333;
text-decoration: none;
font-size: 16px;
margin-right: 20px;
}
.main {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.main h2 {
font-size: 50px;
color: #333;
}
.cta {
background-color: #f33;
color: #fff;
padding: 20px;
text-align: center;
}
.cta h3 {
font-size: 30px;
margin: 0;
padding: 0;
}
.cta button {
background-color: #fff;
border: 2px solid #fff;
color: #f33;
font-size: 20px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
}
.cta button:hover {
background-color: #f33;
color: #fff;
}
/* Media query for mobile devices */
@media screen and (max-width: 768px) {
nav {
padding: 5px;
justify-content: space-between;
}
nav a {
font-size: 14px;
margin-right: 0;
}
.cta h3 {
font-size: 24px;
}
.cta button {
font-size: 16px;
}
}
</style>
</head>
<body>
<header>
<h1>Homepage</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">dark m.</a>
<a href="#">Contact</a>
</nav>
<section class="main">
<h2>Bio will go there.</h2>
</section>
<section class="cta">
<h3>Ready to get started?</h3>
<button>Click here</button>
</section>
</body>
</html>
It's just a sample.