Responsive layout is about using HTML and CSS to routinely resize, hide, reduce, or expand, a website, to make it appearance proper on all gadgets (computers, tablets, and phones).
Below is the video tutorials. watch and practices.
Website card is a powerful manner to give your enterprise details, multi function location, optimized for cell devices. As you are probable conscious, internet access from cell devices surpassed computing device about few years ago, so it’s miles more essential than ever for corporations to have a cell-pleasant presence. Internet cards provide a convenient way to archive this.
Whilst considering the format styling for a website it’s crucial to consider the meant purpose and target audience of the layout, the sources available for the internet site (text, snap shots, video, and hyperlinks), your very own layout preferences, and any current branding inclusive of a logo or print advertising and marketing material. Every of these will outline in component the layout selections that are made.
If you like this Responsive Cards design , then feel free to use it in your project. Copy the code by clicking on Copy button provided below.
Source Code:
First, you have to create two files. One of them is HTML, and the other one is CSS. After creating the files, paste the code provided below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Cards | By Code Info</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="box">
<img src="/pic/Img-1.jpg" />
<h3>Invesment</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem
nulla dolorum ducimus, tempora suscipit inventore obcaecati architecto
rem fuga possimus!
</p>
</div>
<div class="box">
<img src="/pic/Img-2.jpg" />
<h3>Work Palce</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem
nulla dolorum ducimus, tempora suscipit inventore obcaecati architecto
rem fuga possimus!
</p>
</div>
<div class="box">
<img src="/pic/Img-3.jpg" />
<h3>Creative Progress</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem
nulla dolorum ducimus, tempora suscipit inventore obcaecati architecto
rem fuga possimus!
</p>
</div>
</div>
</body>
</html>
body{
background-color: #fff;
font-family: 'Roboto', sans-serif;
}
.container{
display: flex;
width: 920px;
height: auto;
margin: 30px auto;
}
.box{
width: 32%;
height: auto;
border: 1px solid #ccc;
margin-right: 1%;
background: white;
border-radius: 10px;
transition: 0.9;
}
.box:hover{
box-shadow: 0 0 11px rgba(33, 33, 33, 0.5);
cursor: pointer;
}
img{
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
h3,p{
text-align: center;
color: rgb(104, 92, 92);
}
p{
font-size: 15px;
padding: 0 5px;
}
@media (max-width: 800px){
.container{
width: 100%;
}
}
@media (max-width: 600px){
.container{
width: 85%;
display: block;
}
.box{
width: 100%;
margin-bottom: 4%;
}
}
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.
