Advance CSS?

This contains flex, grid, and much more...

Project One – Blog Template?

Project One - Blog Template
Project One – Create a blog

 492 total views,  1 views today

Project One – Blog Template

We will be building a blog template. The final output will be as shown below:

 

We will be creating a blog by making use of the CSS you have learned so far.

Let’s create the HTML using header, nav, section, div, and footer and

a few more with an external style sheet named ‘style.css’.

 


<!DOCTYPE html>
 <html>
   <!-- Below the the head tag, where the title, the meta details, 
the styles and other links go  -->
  <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Blog Template</title>
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>


<body>


<header class="header">
   <div class="container">
      <div class="header-top d-flex">
         <div class="top-left">
            <a class="logo show-lg" href="#">Blog Template</a>
            <a class="logo show-sm" href="#">BT</a>
         </div>
         <div class="top-right">
            <ul class="right-nav">
               <li><a href="#">login</a></li>
               <li><a href="#">join</a></li>
               <li><a href="#">privacy policy</a></li>
               <li><a href="#" style="text-transform: uppercase;" href="#">faq</a></li>
            </ul>
         </div>
      </div>
   </div>

<!-- Here in nav tags, we provide all the links to other pages -->
   <nav class="nav">
      <button onclick="toggleButton()" class="toggle">
         <div></div>
         <div></div>
         <div></div>
      </button>
      <div class="container">
         <ul id="navigation" class="navbar">
            <li>
               <a href="#">home</a>
            </li>
            <li>
               <a class="active" href="#">blog</a>
            </li>
            <li>
               <a href="#">Technology</a>
            </li>
            <li>
               <a href="#">Fashion</a>
            </li>
            <li>
               <a href="#">Sports</a>
            </li>
            <li>
               <a href="#">about us</a>
            </li>
         </ul>
      </div>
   </nav>
</header>

 

Lets add some content which goes in side the body.

<!-- Start of the body content - give it an id of main-page -->
 <div class="container" id="main-page">

   <!-- Add Breadcrumbs -->
   <div class="breadcrumbs">
      <h4>home / <span> blog </span></h4>
   </div>

 

Now, add the first section of the blog using the <section >tag.

<!-- Section One -->   
<section>
      <img src="https://images.pexels.com/photos/572056/pexels-photo-572056.jpeg">
      <div class="section-info">
         <div>
            <a href="#">TECHNOLOGY</a>
         </div>
         <h2>It’s not a faith in technology. It’s faith in people.</h2>
         <ul class="blog-detail">
            <li class="posted-date">posted on <a href="#"> July 17, 2020 </a>-
            </li>
            <li class="by-admin">by<a href="#"> admin</a>-
            </li>
            <li class="comment">
               <a href="#">Leave a Comment</a>
            </li>
         </ul>
        <p>
            Lorem ipsum n pariatuquadrant.mnnlkkjjk k kj 
         </p>
         <button class="read-button">read more</button>
      </div>
   </section>

 

Similarly, create two more sections with different contents.

<!-- Section Two -->  
<section >
      <img src="https://images.pexels.com/photos/972995/pexels-photo-972995.jpeg">
      <div class="section-info">
         <div><a href="#">FASHION</a></div>
         <h2>Everything has beauty, but not everyone sees it.</h2>
         <ul class="blog-detail">
            <li class="posted-date">posted on <a href="#"> July 17, 2020 </a>-
            </li>
            <li class="by-admin">by<a href="#"> admin</a>-
            </li>
            <li class="comment"><a href="#">Leave a Comment</a>
            </li>
         </ul>
          <p>
            Lorem ipsum dolor sit amet consectetur adipiscing elit. Odit quas fugit ias non</p>
 <p>
            Lorem ipsum dolor sit amet consectetur adipiscing elit. Odit quas fugit ias non</p>
         <button class="read-button">read more</button>
      </div>
   </section>
<!-- Section Three --> 

<section class="">
      <img src="https://images.pexels.com/photos/863988/pexels-photo-863988.jpeg">
      <div class="section-info">
         <div><a href="#">SPORTS</a></div>
         <h2>Enjoy the world, Enjoy in the sea.</h2>
         <ul class="blog-detail">
            <li class="posted-date">posted on <a href="#"> July 17, 2020 </a>-
            </li>
            <li class="by-admin">by<a href="#"> admin</a>-
            </li>
            <li class="comment"><a href="#">Leave a Comment</a>
            </li>
         </ul>
          <p>
            Lorem ma quadrant. dfgd gffgdfg fg fg fg
         </p>
         <button class="read-button">read more</button>
      </div>
   </section>

 

Let’s create a pagination link.

 <div class="pagination-wrapper">
      <ul class="pagination">
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
         <li><a href="#">6</a></li>
         <li><a href="#">next</a></li>
      </ul>
   </div>

 

Lastly, lets create the footer.

<footer class="footer">
   <div class="footer-top">
      <div class="footer-left">
         <p>Copyright © 2020 algorisys.</p>
      </div>
      <div class="footer-right">
         <p>Powered by algorisys</p>
      </div>
   </div>
</footer>

Below, we will add the end part of the template where we are using some javascript code for the responsive navigation menu. You can learn more about javascript here. Learn JavaScript

<!-- javascript code for menu -->
<script type="text/javascript">
function toggleButton() {
	 var x = document.getElementById("navigation");
	if (x.style.display === "block") { 
x.style.display = "none"; 
} else { 
x.style.display = "block"; 
} 
}
</script>

</body>
</html>

The CSS styles are given below.

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 16px;
	font-family: 'Raleway', sans-serif;
}

a {
	text-decoration: none;
}

ul {
	list-style-type: none;
}

.container {
	display: block;
	width: 100%;
	margin: 0 auto;
	clear: both;
}

.d-flex {
	display: flex;
}

.show-sm {
	display: block;
}

.show-lg {
	display: none;
}

.header {
	width: 100%;
	height: auto;
	display: block;
	overflow: hidden;
}

.logo {
	font-size: 30px;
	font-weight: bold;
	text-transform: capitalize;
	color: #ff6600;
}


.header-top {
	height: 70px;
	align-items: center;
	margin: 10px auto;
	display: flex;
	justify-content: space-between;
	padding: 0px 15px;
}


.right-nav {
	list-style: none;
}

.right-nav li {
	padding-left: 10px;
	padding-right: 10px;
	float: left;
}

.right-nav li a {
	font-size: 16px;
	text-transform: capitalize;
	font-weight: 500;
	color: #000;
	cursor: pointer;
}

.right-nav li a:hover {
	color: #ff6600;
}

.nav {
	background-color: #EEEEEE;
	display: block;
	overflow: hidden;
}

.navbar {
	margin: 0 auto;
	display: block;
	flex-wrap: wrap;
	justify-content: center;
}

.navbar li {
	border-bottom: 2px solid #fff;
}

.navbar li:first-child {
	border-top: 2px solid #fff;
}

.navbar li a {
	font-size: 14px;
	color: #000;
	font-weight: 500;
	letter-spacing: 1.2px;
	text-transform: capitalize;
	padding: 10px 20px;
	display: block;
	border-bottom: 4px solid transparent;
	margin: 0 auto;
	text-align: center;
	cursor: pointer;
}

.navbar li a:hover {
	color: #fff;
	background-color: #FF6600;
}

.navbar li a.active {
	color: #fff;
	background-color: #FF6600;
}

.toggle {
	padding: 5px 10px;
	background-color: transparent;
	border: 1px solid #ff6600;
	font-size: 18px;
	text-transform: capitalize;
	font-weight: 600;
	display: block;
	margin: 10px 15px;
	float: right;
	overflow: hidden;
	cursor: pointer;
}

.toggle div {
	width: 30px;
	height: 2px;
	background-color: black;
	margin: 6px 0;
}

#navigation {
	display: none;
}

#main-page {
	height: auto;
	margin: auto;
	overflow-x: hidden;
}

.breadcrumbs {
	display: block;
	overflow: hidden;
	margin: 30px auto 15px;
	padding: 0px 15px;
}

.breadcrumbs h4 {
	font-size: 16px;
	font-weight: 600;
	color: #75777d;
	text-transform: capitalize;
}

section {
	height: auto;
	margin: 60px auto;
	display: block;
	overflow: hidden;
	padding: 0px 15px;
}

section img {
	height: 255px;
	margin: 0 auto;
	flex: 1;
	display: block;
	overflow: hidden;
}

section:nth-child(odd) img {
	padding-right: 20px;
}

section:nth-child(even) img {
	order: 2;
}

.section-info {
	flex: 2;
	height: auto;
	display: block;
	margin-top: 30px;
}

.section-info div a {
	color: #ff6600;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: bold;
	display: block;
}

.section-info div a:hover {
	text-decoration: underline;
}

.section-info p {
	margin-top: 20px;
	letter-spacing: 1px;
	font-size: 15px;
}

.blog-detail {
	list-style: none;
	margin-top: 10px;
	margin-bottom: 10px;
	display: block;
	overflow: hidden;
}

.blog-detail li {
	float: left;
	color: #75777d;
	font-size: 14px;
}

.posted-date {
	padding-right: 10px;
}

.by-admin {
	padding-right: 10px;
}

.comment {
	padding-left: 10px;
}

.blog-detail li a {
	color: #ff6600;
}

.read-button {
	padding: 10px 17px;
	color: #ffffff;
	letter-spacing: 1.2px;
	background-color: #ff6600;
	border: 1px solid #ff6600;
	text-transform: capitalize;
	margin-top: 30px;
	font-weight: 600;
}

.pagination-wrapper {
	width: 100%;
	height: auto;
	margin: 80px auto 20px auto;
	display: block;
	overflow: hidden;
}

.pagination {
	width: 80%;
	height: auto;
	display: flex;
	justify-content: center;
	margin: 0 auto;
}

.pagination li {
	padding: 5px;
}

.pagination li a {
	background-color: #ff6600;
	border: 1px solid #ff6600;
	padding: 10px 17px;
	display: block;
	color: #ffffff;
	font-weight: 600;
}

.footer {
	width: 100%;
	height: auto;
	overflow: hidden;
	background-color: #000000b0;
	border-top: 30px solid #EEEEEE;
	display: block;
	margin: auto;
	margin-top: 40px;
}

.footer-top {
	width: 80%;
	height: auto;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 20px;
}

.footer-left {
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
}

.footer-right {
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
}

 

To make the above site responsive, we need to add some media queries in our CSS for the site. This will create a responsive site with a responsive menu for the smaller screens.

/***media query***/

@media screen and (min-width: 768px) {
	.show-sm {
		display: none;
	}
	.show-lg {
		display: block;
	}
	.container {
		display: block;
		width: 80%;
		margin: 0 auto;
		clear: both;
	}
	.navbar {
		margin: 0 auto;
		display: block;
	}
	.navbar li {
		float: left;
		margin-left: 15px;
		margin-right: 15px;
		border-bottom: none;
	}
	.navbar li:first-child {
		margin-left: 0px;
		border-top: none;
	}
	.navbar li a {
		font-size: 14px;
		padding: 20px;
	}
	.navbar li a:hover {
		color: #ff6600;
		border-bottom: 4px solid #000;
		background-color: transparent;
	}
	.navbar li a.active {
		color: #ff6600;
		border-bottom: 4px solid #000;
		background-color: transparent;
	}
	.toggle {
		display: none;
	}
	#navigation {
		display: block;
	}
	section {
		display: flex;
		padding: 0px;
	}
	.section-info {
		margin-top: 0px;
	}
	section img {
		height: 300px;
		margin: 0 0;
	}
	section:nth-child(even) img {
		order: 2;
		padding-left: 20px;
	}
}

We are done with the blog template. You can check the final result in the browser.

The source code of the blog can be downloaded below.

Download