this is my second challenge in frontmentor, but honestly I haven't practice for long time.....
I am practicing to create a 3-column preview card component and I have created it by 3 columns and one row. However, I found I could not able to moved the columns and row to the center of the page; I even tried to adjust the position of the columns by left, right by px or erm....etc.
Please advice how could I shift the columns to the center.
I have the other question, could I add any icon or button such as "learn more" into the columns?
The screenshot below is the complete of 3-column preview card component, and the url from codeply is what I have made. I will also put what I have created by html and css in here.
Thanks for your help and please kindly to support me to achieve it.
I think today is my time to back to the field.
/* build your own custom Bootstrap theme:
https://themestr.app
*/
/*font*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Big Shoulders Display', cursive;
font-weight: bold;
color: white;
}
p {
font-family: 'Lexend Deca', sans-serif;
font-weight: 400;
color: white;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
height: 200px;
}
.left{
border-radius: 5% 0 0 5%
}
.right {
border-radius: 0 5% 5% 0
}
/* Clear floats after the columns */
.row:after {
display: table;
clear: both;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
</head>
<body>
<div class="row">
<div class="column left" style="background-color:#ff8303;">
<article>
<h2>Sedans</h2>
<p> Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city
or on your next road trip.</p>
</article>
</div>
<div class="column" style="background-color:#126e82;">
<h2> SUVs</h2>
<p> Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation
and off-road adventures.</p>
</div>
<div class="column right" style="background-color:#2f5d62;">
<h2> Luxury</h2>
<p> Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury
rental and arrive in style.</p>
</div>
</div>
</body>
</html>from Recent Questions - Stack Overflow https://ift.tt/32Q5uEp
https://ift.tt/3nnpVSB
No comments:
Post a Comment