hello everyone and welcome back to a new tutorial where I will show you how to create a beautiful about us card using HTML and CSS.
Before we start coding I will show you first how to model the project using Photoshop. You have to know that's it's important for every web designer to know how to model their work before starting coding it, it will help him to see the final result, to better visualize his work and it will help you to make a clean code for your project. so let's start making it.
in this tutorial, I will only show you the source code of the project, i will soon make many tutorials on how to design your UI using photoshop
Source Code :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="card">
<img src="doctor%20code.png">
<h1>About us</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum pellentesque scelerisque. Proin iaculis ante velit, sit amet mollis lacus blandit non. Aenean sed dolor sed nibh feugiat dapibus a id mauris. Proin in neque eget metus dapibus tempor ac eu leo. Nunc vestibulum ut felis ac blandit. Pellentesque faucibus quam quis orci tincidunt tempor. In hac habitasse platea dictumst. Aenean arcu sem, feugiat sed nisl in, tempus rutrum mi.
</p>
<a href="#">See More</a>
</div>
</div>
</body>
</html>
and this is the CSS code
*{
margin: 0;
padding: 0;
outline: 0;
font-family: sans-serif;
}
body{
background-color: #fafafa;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 40%;
}
.card{
height: 300px;
background-color: #fff;
box-shadow: 0 2px 8px rgba(64,64,64,.5);
text-align: center;
padding: 10px;
}
.card img{
width: 200px;
position: absolute;
left: -100px;
top: -80px;
}
.card h1{
}
.card p{
width: 60%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-60%);
line-height: 1.5rem;
}
.card a{
position: absolute;
padding: 10px 20px;
bottom: calc(0% - 20px);
right: 10%;
background-color: #e47164;
color: #fff;
text-transform: uppercase;
text-decoration: none;
transition: .4s ;
}
.card a:hover{
transform: scale(1.3);
}
I hope you enjoyed this tutorial, if you loved it please don't forget to like our facebook page, subscribe to our youtube channel and follow us on Twitter.
make an animated about us card using html and css
Reviewed by Medics
on
April 28, 2019
Rating:
Reviewed by Medics
on
April 28, 2019
Rating:
No comments: