Hi, I hope you are well. Today I designed a template with html css. I hope you can use this template and enjoy it.
Html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Your Title</title>
</head>
<body>
<nav>
<div class="Logo-text">
<h1><span>name </span>Nickname</h1>
</div>
<a href="#" class="up">Home</a>
<a href="#">Skills</a>
<a href="#">Contact</a>
<a href="#">About</a>
<div class="logo">
<img src="resized_logo_UQww2soKuUsjaOGNB38o.png">
</div>
</nav>
<div class="page1">
<h1>Your Name</h1>
<h4>You can write your info here.</h4>
<p>You can see My dev to channel 👇</p>
<br>
<br>
<br>
<br>
<a href="#">View</a>
</div>
<div class="page2">
<div class="texts">
<h1>Your Name</h1>
<h3>Your job</h3>
<p>Lorem ipsum dolor sit amet. In voluptas exercitationem et quia consequatur a distinctio omnis est pariatur quia eos aperiam quibusdam qui neque nobis. Ab fugiat velit ut nesciunt explicabo id libero fuga aut rerum consequuntur et similique explicabo. Et adipisci voluptas sed rerum sequi ut sint aspernatur. Et voluptatem consequatur in aliquid odit hic consequatur voluptatem.
At culpa tempora est veritatis nihil nam voluptatem fugit. Id ipsa minima ex molestiae consequatur aut corporis quia qui pariatur rerum! Vel velit dicta ut voluptatum ipsum rem voluptatem enim quo accusamus explicabo! Sed tenetur quis sed vitae tenetur rem recusandae repellat.
At quia beatae sit nihil exercitationem qui rerum vitae aut impedit iste aut distinctio aperiam non unde accusantium ea nobis magni. Eum doloremque nostrum qui labore quas sit eligendi libero.</p>
</div>
<img src="resized_logo_UQww2soKuUsjaOGNB38o.png">
</div>
<div class="page3">
<div class="cards">
<div class="card1" href="https://en.wikipedia.org/wiki/Python_(programming_language)">
<br>
<br>
<br>
<br>
<br>
<a href="#">Your Skill</a>
</div>
<div class="card1">
<br>
<br>
<br>
<br>
<br>
<a href="#">Your Skill</a>
</div>
<div class="card1">
<br>
<br>
<br>
<br>
<br>
<a href="#">Your Skill</a>
</div>
</div>
</div>
<div class="page-contact">
<div class="contact-test">
<h1 class="c">Contact</h1>
</div>
<div class="ct1">
<h2>My Email:</h1>
<br>
<br>
<h2 class="ph">Phone number:</h2>
<br>
<br>
<h2>Git hub:</h2>
<br>
<br>
<h2>Instagram:</h2>
</div>
<div class="page-contact-text">
<h2>Your Gmail</h2>
<br>
<br>
<h2>Your phone number</h2>
<br>
<br>
<h2>Your id</h2>
<br>
<br>
<h2>Your Id</h2>
</div>
</div>
<br>
<footer>
<h1>Copyright ⎜ 2022</h1>
</footer>
</body>
</html>
Css :
*{
margin: 0;
padding: 0;
}
body{
background-color:cornsilk;
font-family:Arial, Helvetica, sans-serif;
}
nav{
top:0;
position:fixed;
width: 100%;
display:flex;
background-color:antiquewhite;
}
nav a{
margin:30px;
text-decoration:none;
color:black;
}
nav a:hover{
transition: 2s;
color:dodgerblue;
}
.Logo-text{
margin-top: 25px;
margin-left: 15px;
color:black;
}
.Logo-text span{
color:red;
}
.up{
margin-left: 395px;
}
.logo img{
width: 18%;
margin-left:335px;
height: 70px;
margin-top:5px;
}
.page1 h1{
text-align:center;
margin-top:200px;
font-size: 60px;
}
.page1 h4{
text-align: center;
margin-top: 60px;
font-size: 20px;
}
.page1 p{
text-align: center;
margin-top: 60px;
}
.page1 a{
text-decoration: none;
color: white;
background-color: black;
padding:10px;
border-radius: 12px;
padding-left: 25px;
padding-right: 25px;
margin-left:670px;
margin-top: 80px;
}
.page1 a:hover{
transition: 2s;
color: black;
background-color:grey;
}
.card1{
background-color:ivory;
width: 55%;
height:220px;
border-radius: 12px;
margin-left:120px;
margin-top:120px;
}
.card1:hover{
transition: 1s;
box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.card1 a{
text-decoration: none;
text-align: center;
margin-left: 65px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color:black;
font-size: 30px;
}
.cards{
display: grid;
grid-template-columns: auto auto auto;
}
.hi{
color:red;
text-align: center;
margin-left: 600px;
}
.page2{
margin-top:200px;
display: flex;
}
.page2 img{
width: 200%;
height: 500px;
border-radius: 21px;
margin-right: 105px;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
.page2 h1{
text-align: center;
}
.page2 h3{
text-align: center;
color:gray;
margin-top: 20px;
}
.page2 p{
text-align: left;
margin-top: 60px;
width: 50%;
margin-left: 205px;
}
.page-contact{
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
margin-top: 120px;
display: flex;
width:55%;
background-color:ivory;
border-radius: 20px;
height: 400px;
margin-left:310px;
}
.c{
text-align: center;
width: 780px;
}
.page-contact-text{
margin-top: 95px;
margin-left: 300px;
}
.ct1{
margin-top: 95px;
margin-left: -710px;
}
.ph{
width: 120%;
}
footer{
width: 100%;
background-color:rgb(243, 224, 195);
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
footer h1{
font-size:20px;
text-align: center;
}
.page-contact:hover{
transition: 2s;
box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
Top comments (0)