👉Let's Go To Code Editor
【I Am Using Visul Studio Code , Visul Studio Code Editer Is Very Good Code Editer If you Are A Biginner Then Obviously Use Visul Studio Code Editer Visul Stuio Code Editer Helping You & Writing Your Code】
1. Create A Best Responsive Protfolio Website Thats Look Very Good. Follow My Step And Create A Best Website. This Website Just a Strcter. You can Edit This Website Better Than Me.
👉Now Ready To Create A Website Let's Go:- Open Your Code Editer. I Use Visul Studio Code Editer You Can Use Any Code Editer. Open Your Code Editer And Create A Folder You Can Choose Any Name In Your Folder. Then Create A File It's Html File For Exampel Index.html. You Can Choose Any Nmae But Add .html. Then Create A New File It's Css File For Example Style.css. You Can Choose Any Name But Add .css . Now Your File Is Ready To Link With Your Css File In html File. For Exampel :-
👉Copy This Html Code:-
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">
<title>wwebsite</title>
<link rel="stylesheet" href
="css/style.css">
<link href="https:
//unpkg.com
/aos@2.3.1/dist/aos.css"
rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.
cloudflare.com
/ajax/libs/font-awesome
/6.0.0-beta3/
css/all.min.css">
</head>
<body>
<section>
<div class="hero">
<div class="home-content">
<h3>Sourav Wd</h3>
</div>
</div>
<div class="line">
<div class="line-box"></div>
</div>
<div class="home-text">
<div class="text-about">
<h1>Hey There I am Sourav
mandal</h1>
<p>Lorem, ipsum dolor sit
amet consectetur adipisicing
elit. Ut magni fuga delectus
maxime quasi ipsa
impedit accusamus? Repellat
molestias tempore esse numquam
nobis quod veritatis corporis
adipisci adolore asperiores et
optio, mollitia quasi magni
ratione aspernatur magnam,
voluptatum ea?</p>
<div class="icon">
<a href="#"><i class="fab fa-twitter"
></i></a>
<a href="#"><i class="fab fa-facebook">
</i></a>
<a href="#"><i class="fab fa-github">
</i></a>
<a href="#"><i class="fab fa-instagram">
</i></a>
</div>
</div>
</div>
<div class="next-line">
<div class="line-tow"></div>
</div>
<div class="booton-box">
<div class="box-1">
<a href="#">Contact</a>
</div>
</div>
</section>
<section>
<footer>
<div class="footer-bottom">
<p>copyright ©2022 SouavWD
Desigend By Sourav</p>
</div>
</footer>
</section>
</body>
</html>
Copy This Full Html Code And Paste Your Html File Then Copy Css Code
CSS:-
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: rgba(0,0,0,0.9)
url(../img/css.jpeg) repeat no-repeat;
background-size: cover;
background-blend-mode: darken;
}
.hero{
display: flex;
justify-content: center;
align-items: center;
}
.home-content{
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
border-radius: 150px;
margin-top: 3%;
border: 4px solid #fff;
}
.home-content h3{
font-size: 1.20rem;
color: #fff;
text-transform: uppercase;
font-weight: 200;
letter-spacing: 2px;
}
.line{
display: flex;
justify-content: center;
align-items: center;
}
.line-box{
width: 3px;
height: 70px;
background: #fff;
}
.home-text{
width: 100vw;
height: auto;
display: flex;
justify-content: center;
}
.text-about{
width: 50vw;
border-top: 2px solid #fff;
}
.text-about h1{
text-align: center;
color: #fff;
font-size: 25px;
margin-top: 3%;
font-weight: 200;
font-family: sans-serif;
}
.text-about p{
margin-top: 2%;
text-align: center;
font-size: 23px;
color: #fff;
}
.text-about::after{
content: '';
height: 2px;
width: 50vw;
background: linear-gradient
(135deg, rgba(246,8,8), #2b07fa);
display: block;
margin: auto;
}
.icon{
display: flex;
justify-content: center;
margin-top: 2%;
}
.icon i{
padding: 15px;
font-size: 25px;
color: #fff;
transform: all 0.3s ease-in-out;
}
.icon i:hover{
color: aqua;
}
.next-line{
display: flex;
justify-content: center;
align-items: center;
}
.line-tow{
width: 3px;
height: 70px;
background: #fff;
}
.booton-box{
display: flex;
justify-content: center;
align-items: center;
}
.box-1{
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 40px;
border-radius: 10px;
border: 3px solid #fff;
}
.box-1 a{
font-size: 16px;
list-style: none;
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-family: sans-serif;
}
.footer-bottom{
margin: 5%;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
background: linear-gradient
(135deg, rgba(246, 8, 8), #2b07fa);
}
.footer-bottom p{
font-size: 20px;
color: #fff;
font-family: sans-serif;
}
Copy This Css Code And Paste Your Css File
{Now Ready Your WebSite} Watch This
Awesome Website Full Video On YouTube
Link:- https://bit.ly/3t7owV1
(Thanks For Reding 💓) 👃
Creare A Awesome & Responsive Website
Reviewed by SouravWD
on
January 08, 2022
Rating:
Reviewed by SouravWD
on
January 08, 2022
Rating:
Nice Broo
ReplyDeleteOsm
Thanks man
DeleteSuperb 👍
ReplyDelete