Welcome to Our High-Converting Landing Page
Discover the power of a well-crafted landing page designed to maximize conversions and drive results. Built with HTML and CSS, our landing page is tailored to capture your attention and guide you towards a specific action.
Discover the power of a well-crafted landing page designed to maximize conversions and drive results. Built with HTML and CSS, our landing page is tailored to capture your attention and guide you towards a specific action.
Features:
Focused Design: A clean and uncluttered layout that highlights the key message and call to action.
Responsive Layout: Optimized for all devices, ensuring a seamless experience whether you’re on a desktop, tablet, or smartphone.
Engaging Content: Compelling headlines and persuasive copy that encourage visitors to take the desired action.
Fast Loading Times: Quick load speeds to keep visitors engaged and reduce bounce rates.
Responsive Layout: Optimized for all devices, ensuring a seamless experience whether you’re on a desktop, tablet, or smartphone.
Engaging Content: Compelling headlines and persuasive copy that encourage visitors to take the desired action.
Fast Loading Times: Quick load speeds to keep visitors engaged and reduce bounce rates.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Developer | Landing Page</title>
<link rel="stylesheet" href="devpage.css"/>
</head>
<body>
<Section class="hero_section">
<div class="text_container">
<h2><span class="lg_text">Hi,</span> I am Nitesh Kumar</h2>
<h1 class="lg_text">Full Stack Developer</h1>
</div>
</Section>
<section class="blackbox">
<h2>
WORK, I CAN DO FOR <SPAN>YOU</SPAN>
</h2>
</section>
<section class="work">
<div class="griditem">
<div class="card">
<div class="imagecontainer">
<img src="images/web.png" alt="Web development" />
</div>
<div class="cardcontent">
<h3>Web Development</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Optio qui quia eos totam modi odit.</p>
</div></div></div>
<div class="griditem">
<div class="card">
<div class="imagecontainer">
<img src="images/mobile.png" alt="App dvelopment" />
</div>
<div class="cardcontent">
<h3>App Development</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Optio qui quia eos totam modi odit.</p>
</div>
</div></div>
<div class="griditem">
<div class="card">
<div class="imagecontainer">
<img src="images/uiux.png" alt="UiUx development" />
</div>
<div class="cardcontent">
<h3>UI UX Design</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Optio qui quia eos totam modi odit.</p>
</div>
</div>
</div>
</section>
<section class="bottomsection">
<div class="contact">
<h2>Contact Me</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sequi, hic? Quo repudiandae mollitia perspiciatis quos.</p>
<p> niteshtech2@ex.test </p>
</div>
<div class="aboutme">
<h2>About Me</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sequi, hic? Quo repudiandae mollitia perspiciatis quos.</p>
<p>niteshtech2@ex.test</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sequi, hic? Quo repudiandae mollitia perspiciatis quos.</p>
<p>niteshtech2@ex.test</p>
</div>
</section>
<footer>
<p> Project By Nitesh Kumar </p>
</footer>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght
@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')
*{
margin:0;
padding:0;
box-sizing:border-box
}
html,body{
line-height:1.4;
font-weight :300;
font-family: "Roboto", sans-serif;
}
.hero_section{
background-image: url(images/developer.png);
min-height: 100vh;
background-Position: center ;
background-size: cover;
background-repeat: no-repeat;
}
.text_container{
color:white;
max-width:900px;
margin: 0 auto;
padding: top 64px;
padding-left:18px;
}
.lg_text{
font-size:72px;
font-weight: 400;
}
.blackbox{
background-color: black;
padding:20px;
}
.blackbox h2{
color:white;
font-weight:300;
font-size:72px;
text-align:center;
}
.blackbox h2 span {
font-weight:400;
font-size: 96px
}
.work {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin: 20px 0px;
max-width: 1000px;
margin: 50px auto;
}
.card {
max-width:320px;
height:400px;
border-radius: 10px;
box-shadow: 3px 5px 5px rgba(1,1,1,0.2);
transition: 0.2s ease-in-out;
}
.griditem {
display: flex;
justify-content: center;
align-items: center;
}
.card:hover{
transform: scale(1.04);
box-shadow: 3px 5px 5px rgba(1,1,1,0.4);
transition: 0.2s ease-in-out;
}
.cardcontent{
padding: 15px;
}
.cardcontent h3 {
margin: 10px;
}
.bottomsection{
display:flex;
}
.contact{
background-color: skyblue;
}
.aboutme{
background-color: darkgreen;
}
.contact, .aboutme{
min-height: 300px;
padding
: 32px;
color:white
}
.aboutme p, .contact p {
margin-bottom: 20px;
}
.aboutme h2, .contact h2 {
font-size:64px;
font-weight: 300;
}
footer
{
text-align: center;
text-transform: uppercase;
background-color: black;
padding: 20px;
color:white;
}
@media (max-width:786px){
.hero_section{
min-height:50vh;
}
.text_container{
padding:10px 0;
text-align: center;
}
.lg_text
{
font-size: 32px
}
.blackbox h2{
font-size:24px;
}
.blackbox h2 span{
font-weight:400;
font-size:32px;
}
.bottomsection{
flex-direction:column;
}
h1{
font-size: 32px;
}
.aboutme h2, .contact h2 {
font-size:32px;
font-weight: 300;
}
}
Comments
Post a Comment