How to use CSS clip path in html page | New UI Webpage design using Html and CSS clip path | Animation on Landing page
New UI Webpage design using Html and CSS clip path
Learn How to make a New UI Webpage design using Html and CSS clip path. Web site Design Tutorial
Video Tutorial
For Download the image Click Here
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!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>Clip path Design</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<h5>Logo</h5>
</div>
<div class="nav-links">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</header>
<div class="topsection">
<h2>White Paper:</h2>
<h6>Transpotation Industry</h6><br>
<h6>White Paper</h6>
<button><a href="#"><i class="bi bi-file-arrow-down-fill"></i>Download Now</a></button>
</div>
<div class="bottomsection">
<div class="image1">
<img src="bicycle.png">
</div>
<div class="text">
<h3>About Us</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, aspernatur nesciunt, dolores omnis ad repudiandae iusto dicta nemo nihil culpa suscipit quod qui quasi in labore officiis aut architecto earum?</p>
</div>
</div>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Pacifico&family=Pattaya&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.7) url('img1.jpg');
background-size: cover;
background-position: center;
background-blend-mode: multiply;
}
header{
width: 100%;
height: 44px;
background: #fff;
}
nav{
display: flex;
justify-content: space-between;
}
.logo{
font-size: 35px;
padding: 0 35px;
font-family: 'Pattaya', sans-serif;
}
.logo h5{
color: #F54444;
}
.nav-links{
margin-right: 50px;
}
.nav-links ul{
padding-top: 13px;
}
.nav-links ul li{
display: inline-block;
padding-left: 20px;
}
.nav-links ul li a{
text-decoration: none;
color: #999;
transition: all .7s ease;
}
.nav-links ul li a:hover{
border: 1px solid #F54444;
padding: 5px;
transition: all .7s ease;
}
body::before{
content: '';
position: absolute;
left: 0;
top: 44px;
width: 100%;
height: 600px;
background: rgba(255, 255, 255, 0.50);
clip-path: polygon(0 0, 100% 0, 100% 29%, 0 57%);
z-index: -1;
}
body::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 500px;
background: rgba(245, 68, 68, 0.50);
clip-path: polygon(0 55%, 100% 21%, 100% 100%, 0 100%);
z-index: -1;
}
.topsection h2{
padding-top: 50px;
padding-left: 100px;
font-size: 35px;
font-family: 'Lobster', cursive;
color: #686866;
letter-spacing: 5px;
z-index: 10;
}
.topsection h6{
padding-left: 120px;
font-size: 30px;
color: #F54444;
font-family: sans-serif;
letter-spacing: 8px;
}
.topsection button{
width: 200px;
padding: 10px 20px;
margin: 50px 100px;
outline: none;
border: 1px solid #999;
cursor: pointer;
border-radius: 10px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: all .9s ease;
}
.topsection button:hover{
border: 1px solid #F54444;
transition: all .9s ease;
}
.topsection button a{
text-decoration: none;
color: #686866;
font-size: 15px;
transition: all .9s ease;
}
.topsection button:hover a{
color: #F54444;
transition: all .9s ease;
}
.topsection button a i{
margin-right: 10px;
font-size: 20px;
color: #F54444;
}
.bottomsection{
display: flex;
align-items: center;
justify-content: center;
}
.bottomsection .image1{
width: 50%;
}
.bottomsection .image1 img{
width: 450px;
margin-left: 100px;
}
.bottomsection .text{
width: 50%;
margin-top: 4%;
}
.bottomsection .text h3{
color: #1874F0;
font-size: 35px;
font-family: 'Pacifico', cursive;
}
.bottomsection .text p{
color: #999;
font-size: 20px;
margin-right: 10px;
}
Posts
No comments: