-------------------------------------------------------------------------------------------------------------------------------
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="landingpage.css">
</head>
<body>
<div class="nav">
<div class="home">
<a href="#">Home</a>
</div>
<div class="servies">
<a href="#">servies</a>
</div>
<div class="contect">
<a href="#">contect</a>
</div>
</div>
<div class="logo">
<h1>logo</h1>
</div>
<div class="main">
<div class="con">
<h1>🤔what is web designing ?<br></h1>
<p>Web design is the art and science of creating visually appealing and functional websites.
It involves a careful balance of aesthetics, user experience, and technical expertise.
A well-designed website not only looks great but also ensures seamless navigation and accessibility for users across various devices.
Web designers use a combination of graphic design, coding, and user interface principles to craft websites that engage and inform visitors.
In today's digital age, effective web design is essential for businesses and individuals looking to make a lasting online impression.</p>
</div>
<div class="img">
<img src="image4.png" alt="image">
</div>
</div>
<div class="button">
<button type="button"><h3>knwo more</h3></button>
</div>
<div class="prize">
<div class="box1">
<h1>basic</h1>
<!-- <h4> you get </h4> -->
<p>
☞ introduction for html and css basic level <br>
☞ 3 project <br>
☞ doubt secton weekly 2 days after class <br>
☞ 12 hours of domind class <br>
☞ prize ₹2000 <br>
☞ Recoded classes access up to 6 mothns <br>
☞ resuma builing <br>
</p>
</div>
<div class="box2">
<h1>standed</h1>
<!-- <h4> you get </h4> -->
<p>
☞ introduction for html and css basic level <br>
☞ live classes daily 2 hours <br>
☞ 7 project <br>
☞ doubt secton weekly 4 days after class <br>
☞ 20 hours of domind class <br>
☞ prize ₹4500 <br>
☞ Recoded classes access up to 24 mothns <br>
☞ placement assistance <br>
☞ resuma builing <br>
</p>
</div>
<div class="box3">
<h1> primimum</h1>
<!-- <h4> you get </h4> -->
<p>
☞ introduction for html and css basic level <br>
☞ 25 project hands on <br>
☞ doubt secton daily after class <br>
☞ 30 hours of domind class <br>
☞ prize ₹6000 <br>
☞ Recoded classes access life time <br>
☞ litter of recommendation <br>
☞ placement assistance <br>
☞100% job guarantee <br>
☞ resuma builing <br>
☞soft skilles <br>
☞ assistance in entry level exam in MNCS <br>
</p>
</div>
</div>
</body>
</html>
________________________________________________________________________________________
css code
_____________________________________________________________
*{
margin: 0px;
padding: 0px;
}
/* img{
width: 25vw;
height: 25vw;
margin-right:70px;
} */
.img{
display: flex;
justify-content:flex-end;
align-items: center;
}
.main{
display: flex;
justify-content: center;
align-items: center;
gap:4vw;
}
.con{
margin-left:5vw;
padding: 0px;
}
.con h1{
color: white;
}
.con p{
color: aliceblue;
font-family: 'Times New Roman', Times, serif;
width: 45vw;
display: flex;
justify-content:flex-end;
align-items: center;
}
/* .logo{
height: 5vw;
background-color: black;
} */
.button{
margin-top: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.button button{
height: 40px;
width: 120px;
color: rgb(90, 80, 80);
background-color: whitesmoke;
}
.button :hover{
background-color: black;
box-shadow: 0px 0px 24px blue;
}
body{
background-color: black;
}
.nav{
display: flex;
gap: 55px;
align-items: center;
margin-left: 750px;
}
.home a{
text-decoration:none;
color: white;
margin-left: 25px;
font-size:3vw;
}
.servies a{
text-decoration:none;
color: white;
font-size:3vw;
}
.contect a{
text-decoration:none;
color: white;
font-size:3vw;
}
.end_div h1{
color: white;
}
.prize{
display: flex;
justify-content: center;
align-items: center;
gap: 35px;
border-radius: 5px white;
font-family: 'Times New Roman', Times, serif;
margin-top: 25px;
margin-left: 10vw;
margin-right: 10vw;
}
.box1{
width: 35vw;
height: 25vw;
background-color: azure;
box-shadow: 0px 0px 25px white;
}
.box1 h1{
display: flex;
justify-content: center;
align-items: center;
color:black;
font-size: 15px;
text-transform: uppercase;
color: black;
font-size: 30px;
}
.box1 h4{
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
.box2{
width: 35vw;
height: 25vw;
background-color: azure;
box-shadow: 0px 0px 25px white;
}
.box2 h1{
display: flex;
justify-content: center;
align-items: center;
color:black;
font-size: 15px;
text-transform: uppercase;
color: black;
font-size: 30px;
}
.box2 h4{
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
.box3{
width: 35vw;
height: 25vw;
background-color: azure;
box-shadow: 0px 0px 25px white;
}
.box3 h1{
display: flex;
justify-content: center;
align-items: center;
color:black;
font-size: 15vw;
text-transform: uppercase;
color: black;
font-size: 3vw;
}
.box3 h4{
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
.box3 p{
font-size: 1.15vw;
margin-left: 3vw;
margin-right: 1vw;
}
.box2 p{
font-size: 1.25vw;
margin-left: 3vw;
margin-right: 1vw;
}
.box1 p{
font-size: 1.25vw;
margin-left: 3vw;
margin-right: 1vw;
}
0 Comments