This is my first landing Page Project. It is Based on HTML CSS code only. This whole code written by Ahmad Shafi .
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CV</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* CSS Variables */
:ROOT{
--main-color: #6E57E4;
--mian-white-color: #ffffff;
--main-bg-color: #FAFAFA;
--main-text-color: #555;
--main-link-color: #1E9FAB;
--main-link-hover-color: #1e9fab;
--name-p:#C0A631;
--main-black-color: #000;
--main-black-effect-color: #161616;
}
/* Global Styles */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
background-color: var(--main-bg-color);
color: var(--main-black-color);
}
html{
scroll-behavior: smooth;
}
button {
background-color: var(--main-white-color);
color: var(--main-text-color);
padding: 10px 20px;
border: 1px solid var(--main-color);
border-radius: 5px;
font-weight: 500;
font-size: 1em;
text-decoration: none;
}
button:hover{
background-color: var(--main-color);
color: var(--mian-white-color);
cursor: pointer;
transition: ease-in-out 0.3s;
}
<header>
<h3>Ahmadwebx <span>.</span></h3>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<button>
Download CV
</button>
</header>
/* CSS */
/* Header */
header{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background-color: var(--main-bg-color);
color: var(--mian-white-color);
padding: 20px 100px;
text-align: center;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
height: 15vh;
}
header span{
color: var(--main-text-color);
font-size: 40px;
}
header h3{
font-size: 1.7em;
color: var(--main-link-color);
}
/* Nav bar */
nav ul{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 30%;
}
nav ul li a{
list-style: none;
text-decoration: none;
flex-wrap: wrap;
color: var(--main-black-effect-color);
font-size: 1em;
}
nav ul li a:hover{
color: var(--main-color);
}
nav ul li a:active{
color: var(--main-color);
}
Result:
<div id="home" class="main-container">
<div class="main-content">
<div class="line">
<p class="name-tag">Ghulam Ahmad</p>
</div>
<h1 id="I-m">I'm <span>Web Designer</span></h1>
<!-- <p>Frontend Developer</p>
<p>UI/UX Designer</p> -->
<p>Experienced frontend developer with a passion for
creating visually stunning and user-friendly websites.
</p>
<div class="button">
<button id="b1">Hire me</button>
<button id="b2">Download CV <a href="#" class="fa fa-file-text-o"></a></button>
</div>
<div class="social-icon">
<div class="icon">
<a href="#" class="fa fa-facebook"></a>
</div>
<div class="icon">
<a href="#" class="fa fa-twitter"></a>
</div>
<div class="icon">
<a href="#" class="fa fa-linkedin"></a>
</div>
<div class="icon">
<a href="#" class="fa fa-github"></a>
</div>
</div>
</div>
<div class="main-image">
<img class="lazy lazy-hidden" decoding="async" src="//ahmadwebx.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="./cropped_image.png" alt=""><noscript><img decoding="async" src="./cropped_image.png" alt=""></noscript>
</div>
</div>
/* Main CSS*/
.main-container{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
margin: 2% 0;
height: 80vh;
}
.main-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: right;
width: 40%;
margin: 5% 10%;
}
div.line p.name-tag{
background-color: var(--name-p);
color: var(--mian-white-color);
display: inline;
padding: 3px 10px;
border-radius: 5px;
}
#I-m{
color: var(--main-color);
font-size: 3em;
margin: 15px 0;
}
#I-m span{
color: var(--main-link-color);
}
.button{
margin-top: 20px;
margin-bottom: 50px;
}
.button #b1{
background-color: var(--main-color);
color: var(--mian-white-color);
}
.button #b1:hover{
background-color: var(--main-link-hover-color);
color: var(--mian-white-color);
border: 1px solid var(--main-link-color);
}
.button #b2{
background-color: var(--main-bg-color);
color: var(--main-text-color);
border: none;
margin-left: 10px;
}
.button #b2:hover{
background-color: var(--main-color);
color: var(--mian-white-color);
}
/* Main Image */
.main-image{
display: flex;
justify-content: center;
align-items: center;
width: 60%;
}
.main-image img{
width: 300px;
height: 300px;
border-radius: 50%;
}
Result:
<div class="scroll-down">
<button> <a href="#" class="fa fa-chevron-down"></a> Scroll down</button>
</div>
<div id="about" class="about-me">
<h2>About Me</h2>
<div class="about-container">
<div class="intro">
<h3>My Introduction</h3>
<p>I am well-versed in HTML, CSS and JavaScript , and other cutting edge frameworks and libraries,which
allows me to implement interactive features. Additionally, I have experirence working with content
management systems (CMS) like WordPress.</p>
<button>Download CV <a href="#" class="fa fa-download"></a></button>
</div>
<div class="front-container">
<div class="front-end">
<h3>Front-end</h3>
<div class="front-end-p">
<p>HTML</p>
</div>
<div class="front-end-p">
<p>CSS</p>
</div>
<div class="front-end-p">
<p>JavaScript</p>
</div>
</div>
<div class="back-end">
<h3>Back-end</h3>
<div class="back-end-p">
<p>PHP</p>
</div>
<div class="back-end-p">
<p>C++</p>
</div>
</div>
<div class="tools">
<h3>Extras</h3>
<div class="extra-p">
<p>WordPress</p>
</div>
<div class="extra-p">
<p>Elementor</p>
</div>
</div>
</div>
</div>
</div>
/* Scrol down CSS */
.scroll-down{
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.scroll-down button{
display: flex;
justify-content: center;
align-items: center;
margin: 20px 0;
border: none;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
border-radius: 20px;
}
.scroll-down button:hover{
background-color: var(--mian-white-color);
cursor: pointer;
transition: ease-in-out 0.3s;
color: var(--main-color);
}
/* About */
.about-me{
display: flex;
flex-direction: column;
align-items: center;
margin: 2% auto;
width: 100%;
height: 90vh;
}
.about-container{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
width: 100%;
}
.intro{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color:var(--mian-white-color);
width: 40%;
padding: 3%;
margin: 5% 0;
border-radius: 20px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}
.intro h3{
color: var(--main-text-color);
margin-bottom: 20px ;
}
.intro button{
margin-top: 20px;
margin-left: 260px;
border-radius: 50px;
color: var(--mian-white-color);
background-color: var(--main-color);
padding: 10px 20px;
}
.intro button:hover{
background-color: var(--main-link-hover-color);
cursor: pointer;
transition: ease-in-out 0.3s;
}
.front-container{
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
margin: 8% 0;
width: 40%;
}
.front-end{
margin-left: -100px;
}
.back-end, .tools, .front-end{
display: flex;
flex-direction: column;
}
.front-end-p, .back-end-p, .extra-p{
margin: 3px 0;
display: flex;
flex-direction: row;
justify-content: left;
}
.front-end-p p, .back-end-p p, .extra-p p{
background-color: var(--main-color);
color: var(--mian-white-color);
display: inline;
margin: 3px 0;
padding: 3px 10px;
border-radius: 5px;
}
Result:
<div id="projects"class="projects">
<h2>Projects</h2>
<div class="project-container">
<div class="completed">
<a href="" class="fa-3x fa fa-briefcase"></a>
<h3>Completed</h3>
<p>15+ Finished Projects</p>
</div>
<div class="client">
<a href="" class="fa-3x fa fa-user-o"></a>
<h3>Clients</h3>
<p>10+ Happy Cients</p>
</div>
<div class="experience">
<a href="" class="fa-3x fa fa-shield"></a>
<h3>Experience</h3>
<p>2+ Years in the Field</p>
</div>
</div>
</div>
/* Project Container */
.projects{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2%;
margin-bottom: 3%;
width: 100%;
height: 90vh;
}
.project-container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center ;
margin-top: 50px;
}
.completed, .client , .experience{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 2% 3%;
background-color: var(--mian-white-color);
width: 400px;
height: 250px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
border-radius: 20px;
}
.fa-3x {
margin-bottom: 30px;
color: var(--main-link-hover-color);
}
.completed h3, .client h3, .experience h3{
color: var(--main-text-color);
margin-bottom: 20px;
}
Result:
<div id="contact" class="contact-container">
<h3>Get in Touch</h3>
<p>Do you have a project in your mind, contact me here</p>
<div class="contact-inner">
<div class="find-me">
<h3>Find Me<a href="" class="fa fa-hand-o-down"></a></h3>
<p>Email: ahmadwebx@gmail.com</p>
<p> +92 316 7325 390</p>
</div>
<div class="form">
<input type="text" name="" id="" placeholder="Name">
<input type="email" name="" id="" placeholder="Email">
<textarea name="" id="" cols="30" rows="10" placeholder="Message"></textarea>
<Button>send</Button>
</div>
</div>
</div>
/* Content */
.contact-container{
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
margin: 20px auto;
width: 90vw;
height: 70vh;
padding: 0 5%;
}
.contact-inner{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
padding: 3% 0;
}
.find-me{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--main-color);
color: var(--mian-white-color);
width: 50%;
padding: 3%;
height: 300px;
border-radius: 20px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
}
.find-me:hover{
background-color: var(--main-link-color);
transition: ease-in-out 0.3s;
}
.find-me p{
margin-top: 20px;
}
.form{
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 350px;
margin: 0 50px;
}
.form input {
height: 50px;
border: 1px solid var(--main-text-color);
border-radius: 50px;
padding: 20px;
margin: 10px 0;
width: 100%;
}
.form textarea{
padding: 20px;
border-radius: 10px;
margin: 10px 0;
height: 170px;
width: 100%;
}
.form button{
margin-top: 10px ;
margin-left: -400px ;
}
Result:
<div class="footer">
<h2>Ghulam Ahmad.</h2>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div class="social-icon">
<div class="icon">
<a href="#" class="fa fa-facebook"></a>
</div>
<div class="icon">
<a href="#" class="fa fa-twitter"></a>
</div>
<div class="icon">
<a href="#" class="fa fa-linkedin"></a>
</div>
<div class="icon">
<a href="#" class="fa fa-github"></a>
</div>
</div>
<p>Copyright <a href="" class="fa fa-copyright"></a> <span> Ahmadwebx</span> - All rights Reserved</p>
</div>
/* Footer CSS */
.footer{
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
height: 50vh;
margin-top: 70px;
}
.footer nav ul{
list-style: none;
text-decoration: none;
margin: 20px 0;
}
.footer p{
font-size: .9em;
margin-top: 20px;
}
.footer p span{
color: var(--main-color);
}
Result:
Ghulam Ahmad is an Excellent Writer, His magical words added value in growth of our life. Highly Recommended
4 Responses
Mashallah Bro Keep it up
Hello! I hope you’re having a great day. Good luck 🙂
Customize your logo stamp with our rubber stamp maker online
stamp creator online free [url=http://www.mystampready-constructor1.com/]http://www.mystampready-constructor1.com/[/url] .