Website Design Created With Advance Css :-
-----------------------------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------------------------
Hello friends, as you know that we upload many coding projects, that too for free so that you can learn coding easily. Let us discuss the topic of today's coding project. If you want to create project html and css as shown in the image above then copy the code below and paste it on your code runner.
-----------------------------------------------------------------------------------------------------------------------------
Index:-
<!DOCTYPE html>
<html>
<head>
<title>WBPS Code | Home</title>
<link rel="stylesheet" type="text/css" href="wbpscode.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@200&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@600&family=Yanone+Kaffeesatz:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<section class="navsection">
<div class="logo">
<h1>WBPS Code</h1>
</div>
<nav>
<a href="#">Home</a>
<a href="https://wbpscode.blogspot.com">Codes</a>
<a href="#">Profile</a>
<a href="#">About</a>
<a href="contact-us.html">Contact</a>
</nav>
</section>
<main>
<div class="leftside">
<h3>Hello</h3>
<h1>I Am Priyanshu Kumar</h1>
<h2>Web Developer And Youtuber</h2>
<a href="https://wbpscode.blogspot.com/" class="btn1">Hire Me</a>
<a href="contact-us.html" class="btn2">Contact Me</a>
</div>
<div class="rightside">
<img src="img.png" alt="">
</div>
</header>
<div class="footer"><p class="footer-text">Created By <a href="https://wbpscode.blogspot.com" class="footer-link">WBPS Code</a>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------
Contact -Us:-
<!DOCTYPE html>
<html>
<head>
<title>Contact Us</title>
<link rel="stylesheet" type="text/css" href="wbpscode.css">
</head>
<header>
<section class="navsection">
<div class="logo">
<h1>WBPS Code</h1>
</div>
<nav>
<a href="index.html">Home</a>
<a href="https://wbpscode.blogspot.com">Codes</a>
<a href="#">Profile</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</section>
<main>
<div class="leftside">
<input type="text" placeholder="Enter Your Name" class="name"><br><br>
<input type="text" placeholder="Enter Your Email" Class="email"><br><br>
<input type="text" placeholder="Your Matter Here......." class="matter">
</div>
<div class="rightside">
<img src="img.png" alt="">
</div>
</main>
</header>
<div class="footer"><p class="footer-text">Created By <a href="https://wbpscode.blogspot.com" class="footer-link">WBPS Code</a>
</div>
</html>
-----------------------------------------------------------------------------------------------------------------------------
Style:-
*{
margin:0;
padding:0;
font-family: 'Yanone Kaffeesatz', sans-serif;
}
header{
width: 100%;
height:100%;
background-image:linear-gradient(to left, #fff 85%, #c3f5ff 15%);
}
.navsection{
width:100%;
height:20vh;
display:flex;
justify-content:space-around;
align-items:center;
background-image:linear-gradient(to top, #fff 80%, #c3f5ff 20%);
}
.logo{
width: 40%;
color: #fff;
background-image:linear-gradient(#8d98e3 40%, #871aee 60%);
padding-left: 100px;
box-sizing: border-box;
}
.logo h1{
text-transform:uppercase;
font-size: 1.6rem;
animation: scroll 2s linear infinite;
animation-direction: alternate;
font-family: 'Rubik', sans-serif;
}
@keyframes scroll{
from{
padding-left:40px;
}
to{
padding-right: 40px;
}
}
nav{
width:60%;
justify-content:space-around;
display:flex;
float: left;
}
nav a{
text-decoration: none;
text-transform: uppercase;
color:#000;
font-weight: 900;
font-family: 'Source Sans Pro', sans-serif;
font-size:20px;
position: relative;
padding: -14px 11px;
}
nav a:first-child{
color:#4458dc;
}
nav a:before{
content: "";
position:absolute;
top:0;
left:0;
width:0;
height:100%;
border-bottom: 2px solid #4458dc;
transition: all 0.4s linear;
}
nav a:hover:before{
width:100%
}
main{
height:80vh;
display:flex;
justify-content: space-around;
align-items:center;
}
.rightside{
width:auto;
height:350px;
background-color: #c3f5ff;
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% ;
}
.rightside img{
max-width: 400px;
height:auto;
}
.leftside{
color:#000;
text-transform:uppercase;
margin-right: 150px;
}
.leftside h3{
font-size: 40px;
margin-bottom: 35px;
position:relative;
}
.leftside h3:after{
content: "";
width:450px;
height:3px;
position:absolute;
top:80%;
left:23%;
background: #000;
}
.leftside h1{
margin-top: 25px;
font-size:50px;
margin-bottom: 30px;
}
.leftside h2{
margin-top: 20px;
font-size:20px;
font-weight: 100;
margin-bottom: 20px;
}
.btn1, .btn2{
text-decoration:none;
font-weight:100;
font-size:20px;
text-align:center;
padding:12px 25px;
cursor:pointer;
text-transform:uppercase;
border-radius:5px;
display:inline-block;
margin-right: 50px;
color: #000;
background: white;
border:2px solid #4458dc ;
box-shadow:0 10px 30px rgba(118,85,225,0.3);
}
.btn1:hover, .btn2:hover{
background-image:linear-gradient( to right,#4458dc 0%,#854fee 100%);
color:#fff;
}
/*Design Contact Us Page Designing Code Start From Here*/
.name{
width:220px;
height:30px;
}
.email{
width:250px;
height:30px;
}
.matter{
width:350px;
height:90px;
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
margin: 10px 0 10px 0;
font-size: 20px;
text-align:center;
color: white;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0);
transition: transform 0.5s;
background: #24cfaa;
border: 1px solid #24cfaa;
}
.footer:hover{
background-color: #fa6060;
}
.footer-text{
margin: 10.1px 0;
font-family: sans-serif;
}
.footer-link{
color: #ffffff;
text-decoration: none;
margin-right:5px;
}
.footer-link:hover{
color:#24cfaa;
}
-----------------------------------------------------------------------------------------------------------------------------
If you want input of any other project, then visit our website and if any project which you think should be in our website, then comment and if you want to share your project with us, then email it to us.
Let us tell you that when you send your project to us, then send a screenshot of the project with it and send a photo and name along with it that you want to show to the public.
-----------------------------------------------------------------------------------------------------------------------------
Published By:-
WBPS Code(Priyanshu Sharma)
0 Comments