I want to ask how to make all the buttons in the different cards that have different lenght of the text be at the same place. The buttons should be at the end of the cards. This is what i want. And this is my HTML, CSS code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: #f0f0f0;
}
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 100px;
}
.card {
width: 325px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
margin: 20px;
}
.card img {
width: 100%;
height: auto;
}
.card-content {
padding: 16px;
}
.card-content h3 {
font-size: 28px;
margin-bottom: 8px;
}
.card-content p {
color: #666;
font-size: 15px;
line-height: 1.3;
}
.card-content .btn {
display: inline-block;
padding: 8px 16px;
background-color: #333;
text-decoration: none;
border-radius: 4px;
margin-top: 16px;
color: #fff;
}
</style>
<body>
<div class="card-container">
<div class="card">
<img
src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
/>
<div class="card-content">
<h3>This is title of card 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra
maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat
velit scelerisque in dictum non consectetur. urus in massa tempor
nec feugiat nisl pretium fusce id.
</p>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img
src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
/>
<div class="card-content">
<h3>This is title of cards 2 and it is longer</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img
src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
/>
<div class="card-content">
<h3>This is title of card 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat
pellentesque adipiscing commodo elit at imperdiet dui.
</p>
<a href="" class="btn">Read More</a>
</div>
</div>
</div>
</body>
</html>
Thank you for any futher answers. And if you have any other suggestions please let me know, thank you.
>Solution :
this will do the work,
expend snippet and run the code to to view on a wide screen
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: #f0f0f0;
}
.card-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 100px;
align-items: stretch;
}
.card {
display: flex;
flex-direction: column;
width: 325px;
background-color: #f0f0f0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
margin: 20px;
}
.card img {
width: 100%;
height: auto;
}
.card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
height: 100%;
}
.card-content h3 {
font-size: 28px;
margin-bottom: 8px;
}
.card-content p {
color: #666;
font-size: 15px;
line-height: 1.3;
}
.card-content .btn {
display: inline-block;
padding: 8px 16px;
background-color: #333;
text-decoration: none;
border-radius: 4px;
color: #fff;
}<body>
<div class="card-container">
<div class="card">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-content">
<div>
<h3>This is title of card 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra maecenas accumsan lacus vel facilisis volutpat. Aliquam etiam erat velit scelerisque in dictum non consectetur. Curus in massa tempor nec feugiat nisl pretium fusce id.</p>
</div>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-content">
<div>
<h3>This is title of cards 2 and it is longer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<a href="" class="btn">Read More</a>
</div>
</div>
<div class="card">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
<div class="card-content">
<div>
<h3>This is title of card 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Erat pellentesque adipiscing commodo elit at imperdiet dui.</p>
</div>
<a href="" class="btn">Read More</a>
</div>
</div>
</div>
</body>