Blog Card - Simple CSS Card Design
close
Blog Card - Simple CSS Card Design

Blog Card - Simple CSS Card Design

Blog Card - Simple CSS Card Design

I always search to make my site responsive and somehow I found it this blog card and I want to share this with you.

By this you can make your site look responsive and beautiful so below is a source code provided you can simply copy the source code and use it where you want.

Good day developers today we are going to create Blog Card. as you know the HTML markup is vital for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.


Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Blog Card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
* {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
body {
display: flex;
font-family: "Roboto", sans-serif;
font-weight: 400;
color: #777;
background: #eedfcc;
font-size: 0.9375rem;
min-height: 100vh;
margin: 0;
line-height: 1.6;
align-items: center;
justify-content: center;
text-rendering: optimizeLegibility;
}
#container {
width: 30rem;
height: 13.625rem;
}
.blog-card {
display: flex;
flex-direction: row;
background: #fff;
box-shadow: 0 0.1875rem 1.5rem rgba(0, 0, 0, 0.2);
border-radius: 0.375rem;
overflow: hidden;
}
.card-link {
position: relative;
display: block;
color: inherit;
text-decoration: none;
}
.card-link:hover .post-title {
transition: color 0.3s ease;
color: #e04f62;
}
.card-link:hover .post-image {
transition: opacity 0.3s ease;
opacity: 0.9;
}
.post-image {
transition: opacity 0.3s ease;
display: block;
width: 100%;
object-fit: cover;
}
.article-details {
padding: 1.5rem;
}
.post-category {
display: inline-block;
text-transform: uppercase;
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.0625rem;
margin: 0 0 0.75rem 0;
padding: 0 0 0.25rem 0;
border-bottom: 0.125rem solid #ebebeb;
}
.post-title {
transition: color 0.3s ease;
font-size: 1.125rem;
line-height: 1.4;
color: #121212;
font-weight: 700;
margin: 0 0 0.5rem 0;
}
.post-author {
font-size: 0.875rem;
line-height: 1;
margin: 1.125rem 0 0 0;
padding: 1.125rem 0 0 0;
border-top: 0.0625rem solid #ebebeb;
}
@media (max-width: 40rem) {
#container {
width: 18rem;
height: 27.25rem;
}
.blog-card {
flex-wrap: wrap;
}
}
@supports (display: grid) {
body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0.625rem;
grid-template-areas: ". main main ." ". main main .";
}
#container {
grid-area: main;
align-self: center;
justify-self: center;
}
.post-image {
height: 100%;
}
.blog-card {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr;
}
@media (max-width: 40rem) {
.blog-card {
grid-template-columns: auto;
grid-template-rows: 12rem 1fr;
}
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div id="container">
<blog-card></blog-card>
</div>
<script type="text/x-template" id="blog-card">
<a class="card-link" href="#">
<article class="blog-card">
<img class="post-image" :src="image" />
<div class="article-details">
<h4 class="post-category">{{ category }}</h4>
<h3 class="post-title">{{ name }}</h3>
<p class="post-description">{{ desc }}</p>
<p class="post-author">By {{ author }}</p>
</div>
</article>
</a>
</script>
<script src="https://unpkg.com/vue"></script>
<script
src="js/index.js"></script>
</body>
</html>


Without CSS our this script (Blog Card) will never look excellent. So here we are the HTML markup is ready now we have to customize our HTML and it can be done using CSS.


So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.


Save It As style.css :

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  display: flex;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #777;
  background: #eedfcc;
  font-size: 0.9375rem;
  min-height: 100vh;
  margin: 0;
  line-height: 1.6;
  align-items: center;
  justify-content: center;
  text-rendering: optimizeLegibility;
}

#container {
  width: 30rem;
  height: 13.625rem;
}

.blog-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  box-shadow: 0 0.1875rem 1.5rem rgba(0, 0, 0, 0.2);
  border-radius: 0.375rem;
  overflow: hidden;
}

.card-link {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}
.card-link:hover .post-title {
  transition: color 0.3s ease;
  color: #e04f62;
}
.card-link:hover .post-image {
  transition: opacity 0.3s ease;
  opacity: 0.9;
}

.post-image {
  transition: opacity 0.3s ease;
  display: block;
  width: 100%;
  object-fit: cover;
}

.article-details {
  padding: 1.5rem;
}

.post-category {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.0625rem;
  margin: 0 0 0.75rem 0;
  padding: 0 0 0.25rem 0;
  border-bottom: 0.125rem solid #ebebeb;
}

.post-title {
  transition: color 0.3s ease;
  font-size: 1.125rem;
  line-height: 1.4;
  color: #121212;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
}

.post-author {
  font-size: 0.875rem;
  line-height: 1;
  margin: 1.125rem 0 0 0;
  padding: 1.125rem 0 0 0;
  border-top: 0.0625rem solid #ebebeb;
}

@media (max-width: 40rem) {
  #container {
    width: 18rem;
    height: 27.25rem;
  }

  .blog-card {
    flex-wrap: wrap;
  }
}
@supports (display: grid) {
  body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.625rem;
    grid-template-areas: ". main main ." ". main main .";
  }

  #container {
    grid-area: main;
    align-self: center;
    justify-self: center;
  }

  .post-image {
    height: 100%;
  }

  .blog-card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
  }

  @media (max-width: 40rem) {
    .blog-card {
      grid-template-columns: auto;
      grid-template-rows: 12rem 1fr;
    }
  }
}


So we have written HTML markup and customised it and now we will add some functionality in this project (Blog Card).


To make this project (Blog Card) work properly so for that we will use JavaScript.


So here is a JavaScript for our project (Blog Card) and also save it with the filename as provided. Make a new directory called js and put this file to that directory.


Save It As index.js :

Vue.component("blog-card", {
  template: "#blog-card",
  data: function data() {return {
      name: "10 Best Things to Do in Seattle",
      category: "Travel",
      image: "https://source.unsplash.com/DnWYw0zLJBg",
      author: "Katherine Kato",
      desc: "Seattle is a seaport city on the west coast of the United States..." };} });
new Vue({
  el: "#container" });

Consequence :

So here we are we have done and our project Blog Card is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name below is directory tree of the files and folders of this project.


  • Blog Card
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Blog Card) File :

File Size 3.06 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below.
Disqus Codes

No comments

Notifications

Disqus Logo