Skip to content

Instantly share code, notes, and snippets.

@yuis-ice

yuis-ice/blog-page-layout-with-article-cards.markdown

Created March 28, 2022 08:46
Show Gist options
  • Save yuis-ice/fefe7cf4ca2484df094c7fbf5ca6c9d1 to your computer and use it in GitHub Desktop.
Save yuis-ice/fefe7cf4ca2484df094c7fbf5ca6c9d1 to your computer and use it in GitHub Desktop.
Download ZIP
Blog Page Layout With Article Cards
Raw
blog-page-layout-with-article-cards.markdown
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="blog.css">
<title>Blog Page</title>
</head>
<body>
<div class="main-section">
<div class="card-container">
<img src="https://images.pexels.com/photos/929778/pexels-photo-929778.jpeg" alt="" class="cardImage">
<div class="card-text-container">
<span class="card-span"></span>
<h1 class="article-title">Gardening</h1>
<p class="article-descrip">Learn how to germinate seeds of fruits and vegetables and the seeds of your soul and mind. Breathe with us. Grow with us.</p>
<a href="#" target="_blank" class="read-more-button">Read More</a>
</div>
</div>
</div>
<div class="main-section">
<div class="card-container">
<img src="https://images.pexels.com/photos/64272/blossom-bloom-flower-red-64272.jpeg" alt="" class="cardImage">
<div class="card-text-container">
<span class="card-span"></span>
<h1 class="article-title">Self Care</h1>
<p class="article-descrip">Here's some tips on how not to let the man or whoever tf is overbearing in your life get you down. Sometimes, you just gotta be a monk.</p>
<a href="#" target="_blank" class="read-more-button">Read More</a>
</div>
</div>
</div>
<!--https://images.pexels.com/photos/64272/blossom-bloom-flower-red-64272.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=2&h=750&w=1260 -->
</body>
</html>
Raw
style.css
html, body {
margin: 0;
padding: 0;
font-family: arial;
box-sizing: border-box;
}
.main-section {
height: 100%;
display: flex;
flex-basis: column nowrap;
align-items: center;
justify-content: center;
background-color: white;
}
.card-span {
display: inline-block;
width: 3.125em;
height: 0.25em;
background-color: #66aa77;
margin-bottom: 1.875em;
}
.card-container {
background-color: black;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 1.875em;
box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.45);
}
.cardImage {
width: 100%;
}
.article-title {
font-weight: 600;
font-size: 2em;
margin: 0 0 0.9em;
}
.article-descrip {
font-weight: 300;
line-height: 1.25em;
margin: 0 0 1.9em 0;
}
.read-more-button {
text-decoration: none;
text-transform: uppercase;
color: #66aa77;
font-weight: bold;
font-size: 0.8em;
position: relative;
display: inline-block;
z-index: 1;
padding: 0.3125em;
left: -0.3125em;
}
.read-more-button:hover {
color: #66aa77;
}
.read-more-button::before {
content: '';
z-index: -1;
position: absolute;
top: calc(50%);
left: 0;
width: 100%;
height: 40%;
pointer-events: none;
background: #6FDEC9;
transform: scale3d(0, 1, 1);
transform-origin: 0% 50%;
transition: transform 0.33s;
}
.read-more-button:hover::before {
transform: scale3d(1, 1, 1);
transform-origin: 0% 50%;
}
.cardImage {
height: 300px;
width: 100%;
background-position: center;
background-size: cover;
}
.card-text-container {
margin: 60px 45px 55px;
}
@media screen and (min-width: 768px) {
.card-container {
flex-direction: row;
width: 100%;
}
.cardImage {
height: 26.25em;
min-width: 22.5em;
background-size: cover;
}
.card-text-container {
margin: 0 3.75em;
max-width: 41.25em;
}
}
@media screen and (min-width: 1024px) {
.card-container {
max-width: 75em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment