Html and CSS 3-column preview card component
Ashwan Lal
![Ashwan Lal]()
Ashwan Lal
projektmanager || projektmanagement || projektplanung || projektabwicklung || projektkoordination || projektsteuerung??
Given below are the HTML and CSS files for a 3-column preview card component. By using these files, you can quickly set up a beautiful 3-column preview card and customize it to your liking.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="preconnect" >
<link rel="preconnect" crossorigin>
<link
rel="stylesheet">
<title>Frontend Mentor | 3-column preview card component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<section class="cards">
<div class="card sedans">
<img src="./images/icon-sedans.svg" alt="sedans">
<h1 class="card_title">Sedans</h1>
<p class="card_paragraph">
Chose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next
road trip.
</p>
<button class="card_btn sedans-btn">
Learn More
</button>
</div>
<div class="card suvs">
<img src="./images/icon-suvs.svg" alt="suvs">
<h1 class="card_title">Suvs</h1>
<p class="card_paragraph">
Take on SUV for its spacious interior, power, and versatility .Perfect for your next family vacation and off-road
adventures.
</p>
<button class="card_btn suvs-btn">
Learn More
</button>
</div>
<div class="card luxury">
<img src="./images/icon-luxury.svg" alt="luxury">
<h1 class="card_title">Luxury</h1>
<p class="card_paragraph">
Cruise in the best car brands without the bloated prices. Enjoy the enchanced comfort of a luxury rental and
arrive in style.
</p>
<button class="card_btn luxury-btn">
Learn More
</button>
</div>
</section>
</main>
<footer>
<div class="attribution">
Challenge by <a target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Sonu Dutta</a>.
</div>
</footer>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main{
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
.cards{
width: 70rem;
display: flex;
justify-content: center;
}
.card{
width: 29%;
/* height: 40%; */
padding: 5vh 5.4vh 5vh 6.5vh;
}
.sedans {
background-color:hsl(31, 77%, 52%) ;
border-radius: 10px 0 0 10px;
}
.suvs{
background-color: hsl(184, 100%, 22%);
}
.luxury{
background-color: hsl(179, 100%, 13%);
border-radius: 0 10px 10px 0;
}
.sedans-btn{
color:hsl(31, 77%, 52%) ;
}
.suvs-btn{
color: hsl(184, 100%, 22%);
}
.luxury-btn{
color: hsl(179, 100%, 13%);
}
.card_title{
font-family: 'Big Shoulders Display', cursive;
color: hsl(0, 0%, 95%);
font-size: 5.3vh;
text-transform: uppercase;
margin: .4em 0;
padding: 1.2rem 0;
}
.card_paragraph{
font-family: 'Lexend Deca', sans-serif;
font-size: 1.9vh;
line-height: 3.5vh;
color: hsla(0, 0%, 100%, 0.75);
margin-bottom: 4em;
}
.card_btn{
padding: 0.8rem 1.62rem;
border-radius: 2rem;
border: none;
background-color: hsl(0, 0%, 95%);
font-family: 'Lexend Deca', sans-serif;
font-size: 1.9vh;
cursor: pointer;
transition: all .5s;
}
.card_btn:hover{
background-color: rgba(255, 255, 255, 0);
color: hsl(0, 0%, 95%);
border: .1em solid hsl(0, 0%, 95%);;
}
footer{
position: relative;
}
.attribution{
text-align: center;
}
@media(max-width:1230px){
main{
width: 100%;
margin: 25rem 0;
}
.cards{
flex-direction: column;
align-items: flex-start;
}
.card{
width: 20rem;
margin:0 auto;
}
.sedans {
border-radius: 10px 10px 0 0;
}
.luxury{
border-radius: 0 0 10px 10px;
}
}
Assets