Skip to main content

Simple Blogging Template Design | Rustcode

by Rustcode
Simple-Blogging-template-design-html-and-css


In this post, I will show you, how you can design a simple responsive and attractive blog using the basic concept of html and css. The blog that we are going to develop in this post has been created with the help of very simple html and css code.

RELATED POST:

Before we begin, we should take a look at the design so that we know how to write the code step by step. Our website design is something like this-

blog-sample-rustcode

I have divided this blog design into five parts which you will see in the blog design.  So let's see all the steps one by one

1. Header

2. Left Side Post

3. Right Side Post

4. Button

5. Footer

1. Header

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Simple Blogging Template Design | Rustcode</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
   <div id="header">
      <div id="logo">
         <h1><span>BLOG</span> Name</h1>
         <p>blog tagline</p>
      </div>
   </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700');
body{
    padding: 0px;
    margin: 0px;
    font-family: 'poppins', sans-serif;
    background: rgba(251, 251, 251, 1);
    }
    #header{
    background: #F39B6D;
    text-align: center;
    padding: 40px;
    font-weight: 700;
    }
    #logo span{
    color: white;
    }


2. Left Side Post

HTML(Button, Left And Right Post)

<div class="container">
   <div class="post">
   <div class="img-container">
      <img src="apple.jpg">
   </div>
   <div class="content-container">
      <a href="#">
         <h2>Everything About Apple</h2>
      </a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Aliquam pellentesque mi odio. Ut a magna non est rutrum iaculis. Pellentesque accumsan.
      </p>
   </div>
</div>
<p><br /></p>
<p><br /></p>
<div class="post reverse">
   <div class="img-container">
      <img src="website.jpg">
   </div>
   <div class="content-container">
      <a href="#">
         <h2>Website Development</h2>
      </a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Aliquam pellentesque mi odio. Ut a magna non est rutrum iaculis. Pellentesque accumsan.
      </p>
   </div>
</div>
<p><br /></p>
<p><br /></p>
<div class="post">
   <div class="img-container">
      <img src="logo-design.jpg">
   </div>
   <div class="content-container">
      <a href="#">
         <h2>Logo Designing</h2>
      </a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Aliquam pellentesque mi odio. Ut a magna non est rutrum iaculis. Pellentesque accumsan.
      </p>
   </div>
</div>
<p><br /></p>
<p><br /></p>
<div class="post reverse">
   <div class="img-container">
      <img src="font.jpg">
   </div>
   <div class="content-container">
      <a href="#">
         <h2>Best Font For Web</h2>
      </a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Aliquam pellentesque mi odio. Ut a magna non est rutrum iaculis. Pellentesque accumsan.
      </p>
   </div>
</div>
<p><br /></p>
<p><br /></p>
<div class="post">
   <div class="img-container">
      <img src="grid.jpg">
   </div>
   <div class="content-container">
      <a href="#">
         <h2>Why Grid Layout??</h2>
      </a>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         Aliquam pellentesque mi odio. Ut a magna non est rutrum iaculis. Pellentesque accumsan.
      </p>
   </div>
</div>
<p><br /></p>
<p><br /></p>
<div class="btn">
   <button>Read More</button>
</div>
<p><br /></p>
<p><br /></p>
</div>

Left Post CSS

.post{
position: relative;
margin: auto;
width: 80%;
padding-top: 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.img-container{
width: 40%;
}
.img-container img{
width: 100%;
max-height: 300px;
cursor: pointer;
transition: transform 0.2s;
}
.img-container img:hover{
transform: translateY(-10px);
box-shadow: -10px 10px 0px #F39B6D;
}
.content-container{
width: 50%;
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: left;
}
.content-container p{
font-weight: 600;
line-height: 1.9em;
color: grey;
text-align: left;
}
.content-container a{
color: #F39B6D;
}


3. Right Side Post

Right Post CSS

.reverse {
flex-direction: row-reverse;
}
.reverse > .img-container img:hover{
box-shadow: 10px 10px 0px #F39B6D;
}


4. Button

Button CSS

.btn button{
outline: none;
background: transparent;
color: #F39B6D;
border: 2px solid #F39B6D;
padding: 12px 0px;
width: 130px;
font-family: 'poppins', sans-serif;
cursor: pointer;
transition: all 0,5s;
}
.btn button:hover{
color: white;
background: #F39B6D;
}


5. Footer

Footer HTML

<footer>
   <div class="social-media">
   <span><i class="fa fa-facebook"></i></span>
   <span><i class="fa fa-youtube-play"></i></span>
   <span><i class="fa fa-instagram"></i></span>
</div>
<div class="copyright">
   <p>copyright &copy; 2012-20</p>
</div>
</footer>

Footer CSS

footer{
padding: 80px;
text-align: center;
background: #F39B6D;
color: white;
}
.social-media span{
margin: 8px 15px;
font-size: 24px;
cursor: pointer;
}
.social-media span:hover{
opacity: 0.8;
}


6. Responsive Design

@media screen and (max-width: 650px) {
.post{
    width: 90%;
    padding-top: 0px;
    }
    .img-container, .content-container{
    width: 100%;
    }
    .content-container h2{
    font-size: 20px;
    }
    .content-container p{
    font-size: 14px;
    }
    .img-container img:hover, .reverse > .img-container img:hover{
    box-shadow: none;
    transform: translateY(0px);
    }
    }


7. 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.


8. 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