Blog Entries - CSS Cards
close
Blog Entries - CSS Cards

Blog Entries - CSS Cards

Blog Entries - CSS Cards


Here is a simple blog interest or post style you can see it in the above image today we will build it like this so if you don't have much time to read this full article simply go below to the download section and download the source code.

Greetings programmers today we are going to make Blog Entries. As you know the HTML markup is basic 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 Entries</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header">
<h3 class="header-title">Latest entries</h3>
</div>
<div class="container">
<div class="items">
<div class="item">
<img class="item-image" src="https://source.unsplash.com/nTBW1cOY1qI">
<div class="item-content">
<h5 class="item-category">Food</h5>
<h4 class="item-title">Japanese Street Food</h4>
<p class="item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium cursus...</p>
</div>
</div>
<div class="item">
<img class="item-image" src="https://source.unsplash.com/5taAdeUtY5Q">
<div class="item-content">
<h5 class="item-category">Travel</h5>
<h4 class="item-title">Cherry Blossom Viewing</h4>
<p class="item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium cursus...</p>
</div>
</div>
<div class="item">
<img class="item-image" src="https://source.unsplash.com/HND8I5UpYFs">
<div class="item-content">
<h5 class="item-category">Travel</h5>
<h4 class="item-title">Tokyo Travel Guide</h4>
<p class="item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium cursus...</p>
</div>
</div>
<div class="item">
<img class="item-image" src="https://source.unsplash.com/ZrXJrX3ggAc">
<div class="item-content">
<h5 class="item-category">Language</h5>
<h4 class="item-title">Common Japanese Phrases</h4>
<p class="item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium cursus...</p>
</div>
</div>
<div class="item">
<img class="item-image" src="https://source.unsplash.com/fYMbcAHjtEo">
<div class="item-content">
<h5 class="item-category">Tips</h5>
<h4 class="item-title">How to Make Friends in Japan</h4>
<p class="item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium cursus...</p>
</div>
</div>
<div class="item">
<img class="item-image" src="https://source.unsplash.com/X7jQJCHE_UE">
<div class="item-content">
<h5 class="item-category">Tips</h5>
<h4 class="item-title">Random Facts About Japan</h4>
<p class="item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium cursus...</p>
</div>
</div>
<div class="item">
<img class="item-image" src="https://source.unsplash.com/_IFK3sjHjRk">
<div class="item-content">
<h5 class="item-category">Travel</h5>
<h4 class="item-title">Fun Things To Do in Japan</h4>
<p class="item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium cursus...</p>
</div>
</div>
<div class="item">
<img class="item-image" src="https://source.unsplash.com/9BZX2ctaRPM">
<div class="item-content">
<h5 class="item-category">Work</h5>
<h4 class="item-title">Working in Japan</h4>
<p class="item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium cursus...</p>
</div>
</div>
<div class="item">
<img class="item-image" src="https://source.unsplash.com/fNP1yBppKn0">
<div class="item-content">
<h5 class="item-category">Misc</h5>
<h4 class="item-title">Blog Introduction</h4>
<p class="item-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor pretium cursus...</p>
</div>
</div>
</div>
</div>
<script
src="js/index.js"></script>
</body>
</html>


So now we have completed our HTML markup and now it's time for CSS
Without CSS our this script (Blog Entries) will never look admirable. So here we are, our HTML markup is ready now we have to personalize 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=Hind:400,600,700");

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

body {
  min-height: 100vh;
  margin: 0;
  font-family: "Hind", sans-serif;
  font-weight: 400;
  background: #f7f6fe;
  -webkit-font-smoothing: antialiased;
}

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  padding: 5px 50px 5px;
}

h3.header-title {
  color: #343538;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 15px 0;
}

.items {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 0px 50px 40px 50px;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  perspective: 500px;
  -webkit-overflow-scrolling: touch;
}

.items.active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

.item-image {
  display: block;
  width: 100%;
  height: 40vh;
  object-fit: cover;
}

.item {
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.01),0 1px 2px rgba(0,0,0,0.07),0 5px 15px rgba(0,0,0,0.03);
  margin-right: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.item-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  flex: 1 0 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  margin-top: 0;
  padding: 1.2rem;
  width: 340px;
}

h4.item-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #343538;
  margin: 0.5rem 0 0.5rem;
}

.item-description {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #8a8a8a;
  margin: 0 0 1rem;
}

h5.item-category {
  display: inline-block;
  color: #339999;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0.5rem 0 0rem;
}


CSS styles a very much simple if you want to change them you can but for that you should have a knowledge about CSS language.
So we have written HTML markup and customised it and now we will add some functionality in this project (Blog Entries).


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


So here is a JavaScript for our project (Blog Entries) 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 :

const slider = document.querySelector('.items');
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
});

slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
});

slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
});

slider.addEventListener('mousemove', (e) => {
    if (!isDown) return; 
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 3;
    slider.scrollLeft = scrollLeft - walk;
});

Some image files are used in our project you can download them links are provided in the code view that source code you will find the links that are provided above in html code.


Result :

So here we are, We have done and our project Blog Entries 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 Entries
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Blog Entries) File :

File Size 3.03 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.


That's pretty much today's topic is completed and now I am winding it up and in the last I want to say that subscribe to the newsletters of this blog.


Thank you !



Disqus Codes

No comments

Notifications

Disqus Logo