Skip to main content

Blog Card Design | Rustcode

by Rustcode
blog-card-design-html-and-css-Rustcode

Whenever we talk about blogging, it is very important that its interface must be attractive and smooth. To make a blog attractive, we will definitely need a good blog card, so in this article, I will learn how to design a blog card. The card in this article is made using a very simple HTML and CSS, so let's start.



1. HTML STRUCTURE 

<!DOCTYPE html>
<html>
<head>
  <title>Blog Card Design | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

	main content.

</body>
</html>


2. CONTENT

We are also including an image in the blog card design. You can download that image from here.

<div class="container">
   <div class="img-container">
      <img src="image.jpg">
   </div>
   <div class="content-container">
      <h2>Gaming</h2>
      <h1>Future Of Gaming Industry</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu odio ante.
          Curabitur efficitur ante a ex sagittis, at lobortis quam egestas. Phasellus tempor lorem risus, ut malesuada turpis placerat eget.
          Nunc eleifend diam blandit sapien congue, id dictum odio ultricies.</p>
      <a href="#" class="btn">Read More</a>
      <p><br /></p>
   </div>
</div>


3. CSS

The basic HTML structure is ready for us, now let's include the font-family plugin in this HTML document. You can download this plugin from here.

@import url('https://fonts.googleapis.com/css2?family=Poppins');
body{
font-family: "Poppins";
}
.container{
width: 400px;
margin: auto;
border-radius: 4px;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}
.img-container img{
width: 100%;
height: 100%;
border-radius: 4px 4px 0px 0px;
}
.content-container{
padding: 10px 20px;
}
h1{
font-size: 24px;
}
h2{
background: #39A9DB;
width: 80px;
font-size: 8px;
padding: 5px;
color: white;
text-align: center;
letter-spacing: 0.08rem;
text-transform: uppercase;
font-weight: 700;
}
p{
color: grey;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.02rem;
line-height: 1.3rem;
margin-bottom: 30px;
}
.btn{
background: #664EF7;
color: white;
font-size: 12px;
padding: 10px 20px;
letter-spacing: 0.04rem;
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
}
.btn:hover{
background: #7C66FF;
}


4. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment