Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<!--NAVBAR SECTION-->
<nav class="navbar">
<div class="content">
<div class="logo">
<a href="#"><img src="Images/logo.png" style="width: 80px; padding: 0;" alt="logo"></a>
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li><a href="#" class="active" style="color: #111;">Home</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
<!--NAVBAR SECTION-->
<!--GALLERY SECTOIN-->
<div class="banner" id="gallery">
<div class="right">
<div> <img src="Images/main-img.jpeg" style="width: 100%;" /></div>
<div><img src="Images/main-img.jpeg" style="width: 100%;"/></div>
</div>
<div> <img src="Images/main-1.jpg" style="width: 100%; padding-top: 200px;"/></div>
</div>
<hr>
<!--GALLERY SECTOIN-->
<!--ABOUT SECTOIN-->
<div class="about">
<div class="content" id="about">
<div class="title">Hi, I am <em>Naveen</em></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus, eum eius, hic aperiam odio! Quasi molestias magnam illo voluptatem iusto ipsam blanditiis, tempore cumque reiciendis quaerat vero tenetur, sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione, itaque consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit, odio cum incidunt labore molestiae quis non perferendis ipsam. Illum, in, deserunt. Ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit hic excepturi nobis id, eos dolor libero, nam assumenda, at culpa quos perspiciatis ratione ea modi! Natus sapiente a, explicabo sit quisquam eligendi esse provident eos enim doloremque blanditiis aut placeat veniam, libero nostrum quae. Ipsam, iste reprehenderit minima accusantium illo dolorem recusandae, ipsa autem quidem reiciendis a mollitia sit tenetur.</p>
</div>
</div>
<hr>
<!--ABOUT SECTOIN-->
<!--SERVICES SECTION-->
<div class="services-title" id="services">Services</div>
<div class="container">
<div class="box">
<div><img src="Images/pic-1.jpg" style="width: 25%; position: relative; left: 37%; "></div>
<p><b>HTML</b>(Hypertext Markup Language)is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<a href="https://www.w3schools.com/css/ "><i>For More</i></a>
</div>
<div class="box">
<div><img src="Images/pic-2.png" style="width: 25%;position: relative; left: 37%;"></div>
<p><b>CSS</b> (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript</p>
<a href="https://www.w3schools.com/css/ "><i>For More</i></a>
</div>
<div class="box">
<div><img src="Images/pic-3.png" style="width: 25%;position: relative; left: 37%;"></div>
<p><b>JAVASCRIPT</b> often known as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.</p>
<a href="https://www.w3schools.com/css/ "><i>For More</i></a>
</div>
</div>
<hr>
<!--SERVICES SECTION-->
<!--FOOTER SECTION-->
<section class="footer" id="footer">
<div class="footer-mainsec">
<h2>About</h2>
<div class="footer-subsec">
<ul>
<li><a href="#">About us</a ></li>
<li><a href="#">Blog</a ></li>
<li><a href="#">Tutorial</a ></li>
<li><a href="#">Reach me</a ></li>
</ul>
</div>
</div>
<div class="footer-mainsec">
<h2>Services</h2>
<div class="footer-subsec">
<ul>
<li><a href="#">HTML services</a ></li>
<li><a href="#">CSS services</a ></li>
<li><a href="#">Javascript</a ></li>
<li><a href="#">Front-end development</a ></li>
</ul>
</div>
</div>
<div class="footer-mainsec">
<h2>Gallery</h2>
<div class="footer-subsec">
<ul>
<li><a href="#">Computer</a ></li>
<li><a href="#">Coffee</a ></li>
<li><a href="#">Reviews</a ></li>
<li><a href="#">Food Tricks</a ></li>
</ul>
</div>
</div>
<div class="footer-mainsec">
<h2>Contact</h2>
<div class="footer-subsec">
<ul>
<li><a href="#">Tel: (+91) 0110 2115730</a ></li>
<li><a href="#">Time: 10:00 AM - 08:00 PM IST</a ></li>
<li><a href="#">Email: contact@abc.com</a ></li>
<li><a href="#">Registered address: Red-box, Sector 4</a ></li>
</ul>
</div>
</div>
</section>
<div class="footer-lower-section">
<p>
Copyright @2020 something pvtltd.
</p>
</div>
<!--FOOTER SECTION-->
<script>
const body = document.querySelector("body");
const navbar = document.querySelector(".navbar");
const menuBtn = document.querySelector(".menu-btn");
const cancelBtn = document.querySelector(".cancel-btn");
menuBtn.onclick = ()=>{
navbar.classList.add("show");
menuBtn.classList.add("hide");
body.classList.add("disabled");
}
cancelBtn.onclick = ()=>{
body.classList.remove("disabled");
navbar.classList.remove("show");
menuBtn.classList.remove("hide");
}
navbar.classList.add("sticky")
</script>Style.css
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::selection {
background: rgb(0, 123, 255, 0.3);
}
hr {
width: 50%;
margin-top: 50px;
margin-left: 25%;
margin-bottom: 10px;
}
.content {
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
/* NAVBAR styling*/
.navbar {
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
}
.navbar .display {
display: none;
}
.navbar.sticky {
background: #1b1b1b;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
.navbar .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list {
display: inline-flex;
}
.menu-list li {
list-style: none;
}
.menu-list li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 25px;
text-decoration: none;
transition: all 0.3s ease;
padding: 10px 10px;
border-radius: 3px;
}
.menu-list li a:hover {
background-color: #fff;
color: #111;
}
.icon {
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn {
position: absolute;
right: 30px;
top: 20px;
}
.active {
background-color: #fff;
color: #111;
}
/* NAVBAR styling*/
/* Gallery styling*/
.banner {
background: #fff right no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(600px, 0.5fr));
grid-row-gap: 0.1rem;
grid-column-gap: 0.2rem;
}
.right {
display: flex;
flex-direction: column;
float: right;
}
/* Gallery styling*/
/* ABOUT styling*/
.about {
padding: 30px 0;
width: 100vw;
background: linear-gradient(345deg, #eef2f5 40%, #fff 20%) center/cover;
background-attachment: fixed;
}
.about .title {
font-size: 38px;
font-weight: 700;
}
.about p {
padding-top: 20px;
text-align: justify;
}
/* ABOUT styling*/
/* SERVICE styling*/
.services-title {
font-size: 38px;
font-weight: 700;
padding: 30px 165px;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
grid-row-gap: 10px;
align-items: center;
min-height: 80vh;
background: linear-gradient(
rgb(53, 52, 52),
rgb(53, 52, 52) 50%,
#fff 50%,
#fff 100%
);
width: 100%;
flex-wrap: wrap;
padding-left: 120px;
}
.container .box {
position: relative;
width: 320px;
background: #fff;
padding: 40px 40px 40px;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.1);
}
.container .box h3 {
text-align: center;
}
/* SERVICE styling*/
/* FOOTER styling*/
.footer {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-column-gap: 10px;
grid-row-gap: 10px;
padding-left: 40px;
text-align: left;
padding-top: 30px;
background: #eef2f5;
}
.footer-subsec > ul {
list-style-type: none;
padding-left: 0;
}
.footer-subsec ul a {
text-decoration: none;
color: gray;
font-size: 13px;
}
.footer-lower-section {
margin: 0;
text-align: center;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 0;
color: gray;
background: #eef2f5;
}
/* FOOTER styling*/
@media (max-width: 1230px) {
.content {
padding: 0 60px;
}
}
@media (max-width: 1100px) {
.content {
padding: 0 40px;
}
}
@media (max-width: 900px) {
.content {
padding: 0 30px;
}
}
@media (max-width: 868px) {
body.disabled {
overflow: hidden;
}
.icon {
display: block;
}
.icon.hide {
display: none;
}
.navbar .menu-list {
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: #222;
transition: all 0.3s ease;
}
.navbar.show .menu-list {
left: 0%;
}
.navbar .menu-list li {
margin-top: 45px;
}
.navbar .menu-list li a {
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a {
margin-left: 0px;
}
}
@media (max-width: 380px) {
.navbar .logo a {
font-size: 27px;
}
}Hire Expert to create single page web application using HTML, CSS, JavaScript and contact us to get help in any HTML, CSS, JavaScript web project. Send your requirement details at realcode4you@gmail.com and get instant help with an affordable price.