html and css design with free source code 2020
If your project needs a neat and flexible means for online representation, consider Intense Free, which is a Bootstrap HTML template for any kind of business. Due to its smart and clean design.
Due to its smart and clean design, flexible and customizable elements, it allows being utilized for various types of projects. Its layout looks trendy, without excessive and overloading details, which makes the appearance attractive and user-friendly. What's more, Intense Free is absolutely responsive and adaptive to all screen types, so the users can access your online page from any device. The code and structure of the theme fit the Google guidelines, which contributes to reaching high search results. In addition, the basic components include but are not limited to cross-browser compatibility, stick-to-top menu, Google fonts, newsletter subscription form, and animation effects.
html and css design with free source code 2020
<!DOCTYPE html>
<html>
<head>
<title>Best Gaming Laptop 2020</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
header{
width: 100%;
height: 100vh;
background: #1a52f9;
background-image: linear-gradient(19deg,#1a52f9 0%, #b721ff 84%);
}
.main{
width: 100%;
height: 15vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.logo a{
text-transform: uppercase;
color: #fff;
text-decoration: none;
font-size: 1.5rem;
}
.menu a{
color: #fff;
text-transform: capitalize;
text-decoration: none;
padding: 10px;
position: relative;
font-size: 0.9rem;
margin: 5px;
}
.menu a:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
border-top: 1px solid #5dade2;
transition: all 0.3s linear;
}
.menu a:hover:before{
width: 100%
}
.menu a:first-child:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid #5dade2;
transition: all 0.3s linear;
}
.menu a:after{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 100%;
border-bottom: 1px solid #5dade2;
transition: all 0.3s linear;
}
.menu a:hover:after{
width: 100%
}
.menu a:first-child:after{
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border-bottom: 1px solid #5dade2;
transition: all 0.3s linear;
}
.button a{
color: #fff;
text-decoration: none;
background: #d565ef;
padding: 10px 30px;
font-size: 14px;
border-radius: 5px;
border:1px solid #d565ef;
transition: all 0.3s linear;
}
.button a:hover{
background: transparent;
background-image: linear-gradient(19deg,#b721ff 0%,#1a52f9 84%);
}
.content{
width: 100%;
height: 85vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.img{
width: 300px;
height: 300px;
background-image:linear-gradient(rgba(183,33,255,0.2),rgba(183,33,255,0.2)), url('profile.jpg');
background-size: 100% 100%;
border-radius: 50%;
box-shadow: 2px 3px 4px #1a52f9;
}
.center h1{
color: #fff;
text-transform: uppercase;
font-size: 2.8rem;
font-weight: 500;
}
.center h2{
color: #fff;
text-transform: uppercase;
font-size: 1rem;
padding: 10px 0;
font-weight: 300;
}
.right a{
text-decoration: none;
color: #fff;
}
.right a i{
width: 30px;
height: 30px;
display: block;
background: #d565ef;
margin: 5px 0;
text-align: center;
border-radius: 50%;
border:1px solid #b721ff;
padding: 5px 0;
transition: all 0.3s linear;
}
.right a i:hover{
background: transparent;
background-image: linear-gradient(19deg,#b721ff 0%,#1a52f9 84%);
}
</style>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<a href="https://webwithaamir.blogspot.com/">Web With Aamir</a>
</div>
<div class="menu">
<a href="https://webwithaamir.blogspot.com/">Home</a>
<a href="https://webwithaamir.blogspot.com/">Services</a>
<a href="https://webwithaamir.blogspot.com/">Gallery</a>
<a href="https://webwithaamir.blogspot.com/">About</a>
<a href="https://webwithaamir.blogspot.com/">Contact</a>
</div>
<div class="button">
<a href="https://webwithaamir.blogspot.com/">Login</a>
</div>
</div>
<div class="content">
<div class="left">
<div class="img"></div>
</div>
<div class="center">
<h1>I Am Aamir Saleem</h1>
<h2>Full Stack Web Developer / Youtuber</h2>
</div>
<div class="right">
<a href="https://webwithaamir.blogspot.com/"><i class="fa fa-facebook"></i></a>
<a href="https://webwithaamir.blogspot.com/"><i class="fa fa-youtube"></i></a>
<a href="https://webwithaamir.blogspot.com/"><i class="fa fa-twitter"></i></a>
<a href="https://webwithaamir.blogspot.com/"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</header>
</body>
</html>
0 Comments