Type Here to Get Search Results !

Killer Responsive Blog Template Step By Step From Scratch (Pure HTML, CSS & JavaScript)

 

Killer Responsive Blog Template Step By Step From Scratch (Pure HTML, CSS & JavaScript)

 

Hello guys, welcome to this blog. Today we will learn how to make a responsive blog template using HTML, CSS. This blog covers the entire development of this blog design step by step.

We will make this blog template without any designing thinking or resources, just by coding from scratch to end. We will make different pages. You will also learn to develop a static website from this blog, it is important because it will mostly use all CSS properties. If you know the basics of HTML and refer to this blog you will get an idea about the use of CSS properties.

 

LET'S START

  • Setup of folder

  1. Create one folder named responsive blog template. 
  2. In this folder, we will open VS code and will make 4 HTML files named index.html, contact.html, blog.html, and search.html. 
  3. After that, we will create two directories named CSS(for CSS files) and js(for js files).

 

In the index.html file, we will create a boilerplate. If you are using a text editor and if there is no emmet abbreviation then you can type it there, and for your time convenience there is one shortcut in VS code(visual studio code) that is '!+Enter'. This will help you to create a boilerplate automatically and also give the title “iBlog - Heaven for bloggers”.

Code Index.html as described/written in the blog:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iBlog - Heaven for blogers</title>
</head>
<body>
    
</body>
</html>

 

Now in the <body> tag, we will create the structure of our website using HTML. First, we will use the <nav> tag for the navigation bar. The <nav> tag defines a set of navigation links. We will create a <nav> tag with a class named “navigation”. Then we will make two div blocks for content with a class named as “content” and a footer with a class named as“footer” as shown below :

<body>
    <nav class="navigation">
    
    </nav>
    <div class="content">
    
    </div>
    <div class="footer">
    
    </div>
</body>

 

  • Creating and linking CSS file 

We will create two files inside the CSS folder for styling. One file is named style.css and the other file is named utils.css.

Now we will link both the CSS files in the index.html file using the link tag.

The <link> tag defines the relationship between the current document and an external resource.

<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="css/style.css">

 

  • Styling navigation, content, and footer

We will target the <nav> tag and <div> blocks inside the style.css file with the help of the class name that we had given in the index.html file. Now we will add CSS properties to these three classes, which will be the height of random values and the background color temporarily to see exactly where the elements are and how much space they are taking up.

Code style.css as described/written in the blog:

.navigation {
  height: 74px;
  background-color: red;
}
 
.content {
  height: 95px;
  background-color: blue;
}
 
.footer {
  height: 50px;
  background-color: purple;
}

 

We will add CSS reset to avoid extra spaces. A CSS Reset is a short, often compressed set of CSS rules that reset the styling of all HTML elements to a consistent baseline.

* {
  margin: 0;
  padding: 0; 
}



The webpage will look as :

 

  • Formatting of website

Now, inside the utils.css file, we will create classes named max-width-1, max-width-2, m-auto, my-2and mx-1. For max-width-1 and max-width-2 we will set max-width property in VW(viewport width) units.  In m-auto, we will set the margin property auto to align the elements in the center. Now for mx-1 we will set the margin-top property that sets the top margin of an element and margin-bottom property that sets the bottom margin of an element.

You can refer to the code from the snippet given below :

Code utils.css as described/written in the blog:

.max-width-1 {
  max-width: 80vw;
}
 
.max-width-2 {
  max-width: 60vw;
}
 
.m-auto {
  margin: auto;
}
 
.my-2{
  margin-top: 32px;
  margin-bottom: 32px;
}
.mx-1{
  margin-left: 23px;
  margin-right: 23px;
}

 

  • Adding classes from the utils.css file 

We will add classes named max-width-1 and m-auto in <nav> and <div> block with class content as shown below :

        <nav class="navigation max-width-1 m-auto">
 
	</nav>
	<div class="content max-width-1 m-auto">
    
    	</div>
     	<div class="footer">
    
   	</div>

 

The webpage will look as :

 

CREATING NAVIGATION BAR

We will now divide the navigation bar into two parts as the left part and the right part so we will create one <div> block with the class named nav-left and another <div> block with the class named nav-right.

 

1. Creating the structure of the left part of the navigation bar

In the left part of the navigation bar, there will be a logo of the website and the name of web pages inside the website to navigate from one webpage to another.

For the logo, I have created one logo for this website you can also create or download of your choice, the logo which I have used is available in the source code at the end of the blog.

We will create a <a> tag,  the most important attribute of the <a> element is the href attribute, which indicates the link's destination. In href attribute, we will give “/” so when the logo is clicked the user will redirect to the homepage of the website. Now inside a <a> tag create <span> tag, and inside it will create <img> tag.  In the src attribute of <img> tag we will give the path of our image in the form of a string as shown below.

Code index.html as described/written in the blog:

<a href="/">
   <span><img src="img/logo.png" width="94px" alt=""></span>
</a>

 

For displaying the name of web pages in our website to navigate, we will construct a <ul> tag inside the <div> block with a class named nav-left.  Use the <ul> tag together with the <li> tag to create an unordered list.

We will put <li> tags inside this <ul> tag according to the number of pages we have on the website, and this <li> tag will be structured in such a way that <a> tag will be inside <li> tag, in which will write the name of the page and the path of the web page in the href attribute of the <a> tag as shown below.

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="/contact.html">Contact</a></li>
</ul>

 

The whole code inside the <div> block with class nav-left is given below.

        <div class="nav-left">
            <a href="/">
                <span><img src="img/logo.png" width="94px" alt=""></span>
            </a>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="/contact.html">Contact</a></li>
            </ul>
        </div>




The webpage will look as :

 

2. Creating the structure of the right part of the navigation bar

Now in the right part of the navigation bar, we will make a search bar and search button so for that inside the <div> block with class named nav-right we will create an <form> element which is used to create an HTML form for the user input. We will use the action attribute. Here we will give “/search.html” as we will handle search actions in the search.html page and the other attribute method will be “get”. 

Inside the <form> tag we will create an <input> tag and <button> tag. 

  • <input> tag we will add class named “form-input” and will also give attributes of <input> tag such as type, name, and placeholder as shown below :
<input class="form-input" type="text" name="query" placeholder="Article Search">
  • <button> tag we are giving class named “btn” to <button> and text Search inside the <button> element as shown below :
<button class="btn">Search</button>

 

The whole code inside the <div> block with class nav-left is given below.

        <div class="nav-right">
            <form action="/search.html" method="get">
                <input class="form-input" type="text" name="query" placeholder="Article Search">
                <button class="btn">Search</button>
            </form>
 
        </div>

 

The webpage will look as :

 

  • Importing fonts and creating variables in utils.css

We will import two fonts from google fonts in utils.css file as shown below,

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@500&display=swap");

 

Now we will create variables inside the root selector. We will make three variables. The first variable will be named --main-bg-color and store the value of color in it and the other two variables will be for font so we'll name them as font1 and font2. Inside the variable named font1, we will store the font-family "Baloo Bhaina 2, cursive" and inside the variable named font2, we will store the font-family "Roboto,  sans-serif" which are imported  from the google fonts as shown below:

:root { 
  --main-bg-color: #bd6418;
  --font1: "Baloo Bhaina 2", cursive;
  --font2: "Roboto", sans-serif;
}

 

Let’s create a class named font1 and font2. Inside font1 we will set css property font-family with variable named  --font1 using var() function and inside class named font2 we will set css property font-family with variable named --font2 using var() function as shown below.

.font1 {
  font-family: var(--font1);
}
.font2 {
  font-family: var(--font2);
}

 

STYLING NAVIGATION BAR 

Now in style.css files first we will style the class navigation,  Here we will use flexbox layout in navigation. We will set a CSS property display as flex, by adding this property our <div> block with a class named nav-left will be shifted automatically on the right side of the navigation bar because the default value is a row of flex-direction property. We will use a variable named font1 in the font-family property for navigation by using the var() function to insert the value of a CSS variable such as var(--font1). Now we will comment out the background-color property red which we had given temporarily to understand how much space is taken by the elements and also giving more CSS properties such as Margin-top : 25px, justify-content, Align-items and height.

Code style.css as described/written in the blog:

.navigation {
  display: flex;
  font-family: var(--font1);
  margin-top: 25px;
  justify-content: space-between;
  align-items: center;
  height: 74px;
  /* background-color: red; */
}

 

The webpage will look as :


1. Writing CSS for the left-side part of the navigation bar in style.css

We will target class named .nav-left and giving CSS property display flex so that the elements inside the block will display horizontally in a row as we discuss earlier flex-direction property is row by default.

.nav-left {
  display: flex;
}

 

Now we will style the <ul> tag inside the <div> block whose class name is nav-left, for that we will target that <ul> tag like this .nav-bar ul and also give the display property flex to display the <li>(list items) in a row. To display all the <li>(list items) in the center we will use align-items property to center in flexbox, we will also give some more CSS properties like margin, font-size, and padding-bottom as shown below.

.nav-left ul {
  display: flex;
  align-items: center;
  margin: 0 77px;
  font-size: 22px;
  padding-bottom: 23px;
}

 

Now we have to style the <li> tag which is inside the <ul> tag in the <div> block of class named nav-left. So now we will target this <li>(list items) like this .nav-left ul li. In this we will give CSS property list-style as none so that the bulleted style in list items to order the list will be vanished and give the font-family property by using variable --font2 which we have created in utils.css file for that we will use the var() function to insert the value of a CSS variable such as var(--font2) and also giving margin property to create space around elements as shown below.

.nav-left ul li {
  list-style: none;
  font-family: var(--font2);
  margin: 0 14px;
}

 

At this point if you see our webpage names for navigation it will look like a link of blue color with underline, to design this we have to style <a> tag which is in <li> tag of <ul> tag in <div> block with a class named nav-left so we will target this <a> like this .nav-left ul li a and giving CSS property text-decoration as none to remove the underline and color to change the color black. You can refer to the code from the snippet given below.

.nav-left ul li a {
  text-decoration: none;
  color: black;
}

 

Here we will use :hover selector in the .nav-left ul li a so that when the cursor will go on the button, the given CSS will be applied on the <a> tag until the cursor is on that <a> tag. We will use a variable named --main-bg-color in the color property for the button by using the var() function to insert the value of a CSS variable such as var(--main-bg-color ) and will also add CSS property font-weight as bolder, you can refer the code from snippet given below.

.nav-left ul li a:hover {
  color: var(--main-bg-color);
  font-weight: bolder;
}

 

The webpage will look as :

 

2. Writing CSS for the right side of the navigation bar in utils.css

We will target the form-input class given to <input> tag inside the index.html file and will add the font-family property of CSS. For the font-family property let's use a variable named --font1 created in the utils.css file and also given more CSS properties to .form-input such as padding: 0px 5px, padding-top: 3px, font-size: 16px, border: 2px solid black, border-radius: 4px and margin: 0 13px. you can refer to the code from the snippet given below.

.form-input {
  font-family: var(--font1);
  padding: 0px 5px;
  padding-top: 3px;
  font-size: 16px;
  border: 2px solid black;
  border-radius: 4px;
  margin: 0 13px;
}

 

Now we will target the class named btn given to <button> tag inside index.html file and will add the font-family property of CSS. For the font-family property let's use a variable named --font1 created in the utils.css file. We will use the var() function to insert the value of a CSS variable such as var(--font1), also given more CSS properties to .btn such as padding: 0px 5px, padding-top: 3px, border: 2px solid black, border-radius: 6px, cursor: pointer and transition:  all 0.3s ease-in-out. you can refer to the code from the snippet given below.

.btn {
  font-family: var(--font1);
  padding: 0px 20px;
  padding-top: 3px;
  font-size: 16px;
  border: 2px solid black;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

 

We will use :hover selector in the .btn class so that when the cursor goes on the button, the given CSS will be applied on the button until the cursor is in the button. We will add the CSS property color as white and will use a variable named --main-bg-color in the background property for the button by using the var() function to insert the value of a CSS variable such as var(--main-bg-color ) as shown below.

.btn:hover {
  color: white;
  background: var(--main-bg-color);
}

 

The webpage will look as :

 

CREATING CONTENT PART OF THE WEBSITE

At first in the <div> block of content, we will add a class named my-2 for the margin of top and bottom created in utils.css.Then we will divide the content into two parts such as left and right, In the left part of the content we will write headings and paragraphs of content, On the right side of the content, we will display the image, which I will download from the internet, you can also download or use of your choice, and if you need the same image used by me in this blog, you will find it in the source code at the end of the blog we have named the image as home.svg.

 

1. Creating the structure of the left part of the content 

We will create a child <div> block with class name content-left inside the <div> block of class named content in index.html file. In that child block, we will add <h1> tag (defines the most important heading) for content heading. Here we will write the heading “The heaven for bloggers” inside the <h1> tag. Now inside the <div> block with class named content-left and below <h1> tag we will create a <p> tag(defines a paragraph). Inside <p> tag I will add some sample text, you can also use Lorem Ipsum(which is a dummy or placeholder text) or if you are willing to use the same text which I have used in this blog you can refer to the code from the snippet given below.

Code index.html as described/written in the blog:

  <div class="content-left">
            <h1>The heaven for bloggers</h1>
            <p>iBlog is a website which lets you submit an article which upon approval will be up on our website and you
                can get a good amount of reach from here!</p>
            <p>My Halloween decorations are staying in the box this year. To be honest, they didn’t make it out of the
                box last year either. My Halloween spirit has officially been bludgeoned to death by teenagers who no
                longer care and a persistent October fear of the Northern California wildfires. And speaking of fear,
                isn’t there more than enough of that going around? Maybe all of us can pretend that Halloween isn’t even
                happening this year?</p>
        </div>

 

2. Creating the structure of the right part of the content 

Now let's construct another child <div> block with class name content-right inside the <div> block of class named content in index.html file. Inside this child block, we will add <img> tag(used to embed an image in an HTML page) and will give the src attribute specifying the URL of the image as shown below.

        <div class="content-right">
            <img src="img/home.svg" alt="iBlog">
        </div>

 

3. Creating horizontal line for separation

Next, we shall add a horizontal line at above and below of the content part for that we will use the <hr> tag that defines a thematic break in an HTML page (e.g. a shift of topic). So now we will create a <div> block with class named max-width-1 and m-auto inside the <body> tag and below the <div> block created for content . Then we will add <hr> tag inside this div<block> as shown below.

    <div class="max-width-1 m-auto">   
        <hr>
    </div>


The webpage will look as :

After seeing this image of the website, you will think what kind of website this is!! But just wait CSS is yet to be written, as you know CSS gives style to elements.

 

STYLING CONTENT PART

At first, we will comment out the property background-color blue and purple given to class content and footer. Now in class named content we will set a CSS property display as flex, by adding this property our <div> block with a class named content-left will be shifted automatically on the right side because the default value is a row of flex-direction property. Now add some more CSS properties to style content such as height: 100%, margin-top: 32px, padding: 9px, and position: relative. you can refer to the code from the snippet given below.

Code style.css as described/written in the blog:

.content {
  /* background-color: blue; */
  display: flex;
  height: 100%;
  margin-top: 32px;
  padding: 9px;
  position: relative; 
}

 

1. Writing CSS for the left-side part of the content in style.css

We will target the <div> block on the left side of the content by a class name .content-left, inside this class we will use CSS property font-family and for value, we will use a variable named --font1 created in utils.css file using var() function. Now giving property display as flex and flex-direction as column so that <h1> tag and <p> tag inside <div> block of class content will align vertically, adding more CSS properties such as justify-content: center, padding: 49px and z-index: 1. you can refer to the code from the snippet given below.

.content-left {
  font-family: var(--font1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 49px;
  z-index: 1;
}

 

2. Writing CSS for right-side part of the content in style.css

 Here will target <div> block of the right side of the content by a class named .content-right, Now we will add some CSS properties such as display: flex, align-items: center, and justify-content: center. you can refer to the code from the snippet given below.

.content-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

 

Now we have to style <img> tag which is inside the <div> block with class named content-right so we will target that <img> tag like this .content-right img and giving css properties such as height: 355px, border: 2px solid black and border-radius: 20px. you can refer to the code from the snippet given below :

.content-right img {
  height: 355px;
  border: 2px solid black;
  border-radius: 200px;
}

 

3. Adding background image for content

For adding an image in the background of the content we will use ::after selector that inserts something after the content of each selected element. The image that will be used is downloaded from the internet you can also download it of your choice or if you are willing to use the same image used by me you can get it from the source code given at the end of the blog, Inside ::after selector of the content we will insert some CSS properties such as :content: "", background-image: url("../img/11.svg"), position: absolute, width: 100%, height: inherit, opacity: 0.15 and border-radius: 12px. you can refer to the code from the snippet given below.

.content::after {
  content: "";
  background-image: url("../img/11.svg");
  position: absolute;
  width: 100%;
  height: inherit;
  opacity: 0.15;
  border-radius: 12px;
}

 

The webpage will look as :

 

CREATING FOOTER

In the <div> tag of the class named footer constructed inside index.html file, we will add the copyright and name of the website inside the <p> tag, now let's add a link of a Vecteezy website using <a> tag in the footer because the images used in this blog downloaded from Vecteezy website. We will also add text in the <a> tag for giving credits as shown below.

Code index.html as described/written in the blog:

    <div class="footer">
        <p>Copyright &copy; iBlog.com </p>
        <a href="https://www.vecteezy.com/free-vector/typewriter">Vector Credits: Vecteezy</a>
    </div>

 

  • Styling footer in style.css

Inside the style.css file, we targeted the <div> block with the class named footer, in that first we will comment out the height property of CSS, then we will set CSS property display as flex, after that, we will set flex-direction as a column so that the <p> tag and <a> tag inside the footer will align in a row. For background-color, here we will use a variable named --main-bg-color by using the var() function to insert the value of a CSS variable such as var(--main-bg-color ), adding some more CSS properties such as align-items: center, justify-content: center and color: white.

You can refer to the code from the snippet given below :

.footer {
  /* height: 50px; */
  display: flex;
  flex-direction: column;
  background-color: var(--main-bg-color);
  align-items: center;
  justify-content: center;  
  color: white;
 }

 

Now we will add CSS property color as white in <a> tag inside <div> block with the class named footer to make the link text visible as shown below.

.footer a {
  color: white;
}

 

The webpage will look as :

 

ARTICLES IN WEBSITES

We will display the list of articles headings and some details on the home page of our website, for that let's create a <div> block with class name home-articles and will also add some utils classes such as max-width-1, m-auto, and font2(this class is for font and not created yet but it will be later). Inside this <div> block we will add <h2> tag (used to define HTML headings) and will give the heading "Featured Articles". We will make this article part such that there will be radio buttons to select the year so users will be able to view the blog of the selective year and these buttons will be displayed on the right side of the articles.

1. Creating structure for year box

We will create a child <div> block with class named year-box and adjust-year inside the <div> block with class named home-articles. Now inside this <div> block of a class named year-box, we will construct three <div> blocks such as in the first <div> block we will add <h3> tag to give heading “year” then we will use the radio button. The <input type="radio"> defines a radio button, this <input> tag specifies an input field where the user can enter data. The attribute name of the <input> tag of both the radio buttons should be the same to make it possible for selecting one button at a time.

 

  • Styling Year box

Now to style the year box, we will target <div> with a class named year-box and giving some CSS properties such as :position: absolute, right: 0px, top: 100px, width: 234px, height: 255px and font-size: 18px. you can refer to the code from the snippet given below.

Code style.css as described/written in the blog:

.year-box {
  position: absolute;  
  right: 0px;
  top: 100px;
  width: 234px;
  height: 255px;
  font-size: 18px;
}

 

Let’s style all the child <div> blocks of <div> block with class named year-box to give space vertically between them, for that we will target the div inside class year-box and will set CSS property margin used to create space around elements, outside of any defined borders. We will give a margin 12px vertically and 0px horizontally as shown below.

.year-box div {
  margin: 12px 0px;
}

 

2. Creating structure for articles

Now in the index.html file inside <div> block with class named home-articles and below <div> block with class named year-box we will create a <div> block with class named home-article. Now inside this <div> block that we have created, we will add two child <div> blocks, one for image and the second for details of the article. In the first <div> block we will add a class named home-article-img and will add <img> tag in that to add image and should give the path URL of an image in the src attribute of <img> tag. Now at the second <div> block, we will add a class named home-article-content, Inside this will create <a> tag which defines a hyperlink, which is used to link from one page to another so giving the path of blogpost.html page as the value of href attribute of <a> tag and we will give the heading of our blog post in <h3> tag as a text of <a> tag. Then below <a> tag we will write the Author name inside <div> block and next, we will add a <span> tag for date and time as shown below.

Code index.html as described/written in the blog:

        <div class="home-article">
            <div class="home-article-img">
                <img src="img/3.png" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html">
                    <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                </a>
 
                <div>Author Name</div>
                <span>07 January | 6 min read</span>
            </div>
        </div>

 

We will replicate this code for more 7 times with different images by assuming we have a total of 8 articles on our website as shown below.

<div class="home-article">
            <div class="home-article-img">
                <img src="img/3.png" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html">
                    <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                </a>
 
                <div>Author Name</div>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/1.png" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html">
                    <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                </a>
 
                <div>Author Name</div>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/2.png" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html">
                    <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                </a>
 
                <div>Author Name</div>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/1.png" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html">
                    <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                </a>
 
                <div>Author Name</div>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/11.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html">
                    <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                </a>
 
                <div>Author Name</div>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/3.png" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html">
                    <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                </a>
 
                <div>Author Name</div>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/2.png" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html">
                    <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                </a>
 
                <div>Author Name</div>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/11.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html">
                    <h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3>
                </a>
 
                <div>Author Name</div>
                <span>07 January | 6 min read</span>
            </div>
</div>

 

  • Styling articles

We will target <div> block by a class named home-articles, in that adding some CSS property to design such as padding: 18px, background-color: rgb(248, 239, 239, 0.5), margin-top: 23px and position: relative as shown below.

.home-articles {
  padding: 18px;
  background-color: rgb(248, 239, 239, 0.5);
  margin-top: 23px;
  position: relative;
}

 

Now we will style the list of articles by targeting a class named .home-article given to every <div> block of articles in that we will add a CSS property display as flex. As we discussed earlier, the default direction of flex is row, so all the elements inside this div will align horizontally in a row so  the image and article will display in a row. Also adding margin property of CSS used to create space around elements, outside of any defined borders as shown below.

.home-article {
  display: flex;
  margin: 25px;
}

 

Let's set the width of the image inside <div> blog by targeting with the class named such as .home-article img. In this, we will add CSS property width which sets the width of an element, here we will set 300px of width for image as shown below.

.home-article img {
  width: 300px;
}

 

We will style the content part of the article by targeting the class named .home-article-content given to the child <div> block inside the <div> block with the class named home-article. Inside this, we will add a CSS property align-self that specifies the alignment for the selected item inside the flexible container and we will also give CSS property padding as shown below.

.home-article-content {
  align-self: center;
  padding: 25px;
}

 

Now, if you look at the heading of our content that is also a link, so they have some links properties such as they are blue and they are underlined, so we will add CSS property color set as black and text-decoration as none, shown below.

.home-article-content a {
  color: black;
  text-decoration: none;
}

 

The webpage will look as :

CREATING SEARCH PAGE

The file named search.html created earlier, in that we will copy all code from index.html except content part and changing the heading name of articles list from “Featured Articles” to “Search Results” as shown below :

Code search.html as described/written in the blog:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/utils.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/mobile.css">
    <title>iBlog - Heaven for bloggers</title>
</head>
<body>
    <nav class="navigation max-width-1 m-auto">
        <div class="nav-left">
            <a href="/">
                <span><img src="img/logo.png" width="94px" alt=""></span>
            </a>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="/contact.html">Contact</a></li>
            </ul>
        </div>
        <div class="nav-right">
            <form action="/search.html" method="get">
                <input class="form-input" type="text" name="query" placeholder="Article Search">
                <button class="btn">Search</button>
            </form>
 
        </div>
 
    </nav>
 
 
    <div class="max-width-1 m-auto"><hr></div>
    <div class="home-articles max-width-1 m-auto font2">
        
        <h2>Search Results</h2>
        <div class="year-box adjust-year">
            <div>
                <h3>Year </h3>
            </div>
            <div>
                <input type="radio" name="year" id=""> 2020
            </div>
            <div>
                <input type="radio" name="year" id=""> 2021
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/11.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html"><h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3></a>
                
                <span>Author Name</span>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/11.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html"><h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3></a>
                
                <span>Author Name</span>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/11.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html"><h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3></a>
                
                <span>Author Name</span>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/home.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html"><h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3></a>
                
                <span>Author Name</span>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/11.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html"><h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3></a>
                
                <span>Author Name</span>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/11.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html"><h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3></a>
                
                <span>Author Name</span>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/11.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html"><h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3></a>
                
                <span>Author Name</span>
                <span>07 January | 6 min read</span>
            </div>
        </div>
        <div class="home-article">
            <div class="home-article-img">
                <img src="img/11.svg" alt="article">
            </div>
            <div class="home-article-content font1">
                <a href="/blogpost.html"><h3>Lorem ipsum dolor sit amet consectetur adipisicing.</h3></a>
                
                <span>Author Name</span>
                <span>07 January | 6 min read</span>
            </div>
        </div>
         
    </div>
 
    <div class="footer">
        <p>Copyright &copy; iBlog.com </p>
         <a href="https://www.vecteezy.com/free-vector/typewriter">Vector Credits: Vecteezy</a> 
    </div>
</body>
</html>

 

The search page of the website will look as :

 

CONTACT PAGE

We will create a contact page where users can submit their details to contact.

  • Structuring contact page

The contact.html page which we have created earlier will copy the navigation bar and footer from the index.html file and we will create a separate CSS file for the contact page named contact.css. First, we will link the contact.css, style.css and utils.css  file in the contact.html file by using the <link> tag.

Code contact.html as described/written in the blog:

    <link rel="stylesheet" href="css/utils.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/contact.css">

 

Now below the <nav> bar we will create a <div> block with a class named “contact-content”(will be styled in contact.css file) and some classes utils.css such as font1, max-width-1, m-auto. Inside this <div> block we will create a child <div> block by adding class names from utils.css such as max-width-1, m-auto, and mx-1 inside this we will give the heading “Feel Free To Contact” with the help of <h2> tag and we will create child <div> tag for contact form with class name contact-form, now inside this, we will create form such as we will create input tag for name, phone, email inside <div> block with class named form-box individually and we will also create a textarea inside <div> block with class named form-box after that we will create a submit button using <button> tag that we will create inside <div> block with class named form-box.

You can refer to the code from the snippet given below.

    <div class="contact-content font1 max-width-1 m-auto">
        <div class="max-width-1 m-auto mx-1">
            <h2>Feel Free to Contact Us</h2>
            <div class="contact-form">
                <div class="form-box">
                    <input type="text" placeholder="Enter Your Name">
                </div>
                <div class="form-box">
                    <input type="text" placeholder="Enter Your Phone Number">
                </div>
                <div class="form-box">
                    <input type="text" placeholder="Enter Your Email Id">
                </div>
                <div class="form-box">
                    <textarea name="" id="" cols="30" rows="10" placeholder="How may we help you?"></textarea>
                </div>
                <div class="form-box">
                    <button class="btn">Submit</button>
                </div>
 
            </div>
        </div>
 
    </div>

 

  • Styling contact page

We will style the contact form inside contact.css. We will target the <div> block by a class named contact-content, we will add CSS properties such as height: 100vh, margin-top: 32px, padding: 9px, position: relative and overflow: hidden. You can refer to the code from the snippet given below.

Code contact.css as described/written in the blog:

.contact-content{  
    height: 100vh;
    margin-top: 32px;
    padding: 9px;
    position: relative; 
    overflow: hidden;
  }

 

Now we will give the background image using ::after selector which inserts something after the content of each selected element so we will select the class name using ::after selector such as .contact-content::after inside this we will add css properties as content: "", background-image: url("../img/11.svg"), position: absolute, top:0, width: 100%, height: inherit, opacity: 0.15, border-radius: 12px and z-index: -1.

You can refer to the code from the snippet given below.

.contact-content::after {
    content: "";
    background-image: url("../img/11.svg");
    position: absolute;
    top:0;
    width: 100%;
    height: inherit;
    opacity: 0.15;
    border-radius: 12px;
    z-index: -1;
}

 

Let’s style the <input> tags and <textarea> which is inside the <div> block with class named form-box individually so we will target them like this form-box input, textarea and inside this we will add some CSS properties such as width: 52vw, padding: 0px 6px, margin: 7px 0, font-size: 18px, font-family: var(--font1), border: 2px solid var(--main-bg-color) and border-radius: 5px. You can refer to the code from the snippet given below.

.form-box input, textarea{
  width: 52vw;
  padding: 0px 6px;
  margin: 7px 0;
  font-size: 18px;
  font-family: var(--font1);
  border: 2px solid var(--main-bg-color);
  border-radius: 5px;
}

The webpage will look as :

 

CREATING BLOG POST PAGE

  •  Structuring blog post

Inside blogpost.html file we will copy navigation bar with <hr> inside <div> block and footer. Below <hr> of the navigation bar first we will insert an image for that we will create <div> block with class named post-img and inside this <div> block we will create <img> tag and giving the path of image in src that is an attribute of <img> tag as shown below.

Code blogpost.html as described/written in the blog:

    <div class="post-img">
        <img src="img/11.svg" alt="">
    </div>

 

Now below this <div> block with class named post-image we will create one another <div> block with class named blog-post-content and we will also use some utils.css classes named m-auto, max-width-2, m-auto and my-2, Inside it, we will create <h1> tag with class name font1(for font) and giving heading “The heaven for bloggers”. Now we will create child <div> block with class named blogpost-meta inside <div> block with class named blog-post-content and below <h1> tag, inside it, we will create two child <div> blocks such as first <div> block for details of article like author name and date so we will give the class named author-info to this <div> block, the second <div> block will be for social media icons for example tweeter, LinkedIn and Facebook so we will give the class named social. The icons were created by <svg> tag inside the <div> with a class named social. You can also copy or refer to the code form snippet given below.

    <div class="blog-post-content m-auto max-width-2 m-auto my-2">
        <h1 class="font1">The heaven for bloggers</h1>
        <div class="blogpost-meta">
            <div class="author-info">
                <div>
                <b>
                  Author - Bill Gates (CEO Microtek)
                </b>
                </div>
                <div>04 January. 6 min read</div>
            </div>
            <div class="social">
                <svg width="29" height="29" class="hk"><path d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z"></path></svg>
 
                <svg style="background: black;
                border-radius: 21px;" width="29" height="29" viewBox="0 0 29 29" fill="none" class="hk"><path d="M5 6.36C5 5.61 5.63 5 6.4 5h16.2c.77 0 1.4.61 1.4 1.36v16.28c0 .75-.63 1.36-1.4 1.36H6.4c-.77 0-1.4-.6-1.4-1.36V6.36z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M10.76 20.9v-8.57H7.89v8.58h2.87zm-1.44-9.75c1 0 1.63-.65 1.63-1.48-.02-.84-.62-1.48-1.6-1.48-.99 0-1.63.64-1.63 1.48 0 .83.62 1.48 1.59 1.48h.01zM12.35 20.9h2.87v-4.79c0-.25.02-.5.1-.7.2-.5.67-1.04 1.46-1.04 1.04 0 1.46.8 1.46 1.95v4.59h2.87v-4.92c0-2.64-1.42-3.87-3.3-3.87-1.55 0-2.23.86-2.61 1.45h.02v-1.24h-2.87c.04.8 0 8.58 0 8.58z" fill="#fff"></path></svg>
 
                <svg width="29" height="29" class="hk"><path d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79"></path></svg>
 
            </div>
        </div>
 
    /div>

 

Inside this <div> block with class named blog-post-content and below the <div> block with class named blogpost-meta. We will create five <p> tags with class named font1(for font) and adding some text inside <p> tag for content you can also add any text you want or you can also copy it from the code snippet given below.

    <div class="blog-post-content m-auto max-width-2 m-auto my-2">
        <h1 class="font1">The heaven for bloggers</h1>
        <div class="blogpost-meta">
            <div class="author-info">
                <div>
                    <b>
                        Author - Bill Gates (CEO Microtek)
                    </b>
                </div>
                <div>04 January. 6 min read</div>
            </div>
            <div class="social">
                <svg width="29" height="29" class="hk">
                    <path
                        d="M22.05 7.54a4.47 4.47 0 0 0-3.3-1.46 4.53 4.53 0 0 0-4.53 4.53c0 .35.04.7.08 1.05A12.9 12.9 0 0 1 5 6.89a5.1 5.1 0 0 0-.65 2.26c.03 1.6.83 2.99 2.02 3.79a4.3 4.3 0 0 1-2.02-.57v.08a4.55 4.55 0 0 0 3.63 4.44c-.4.08-.8.13-1.21.16l-.81-.08a4.54 4.54 0 0 0 4.2 3.15 9.56 9.56 0 0 1-5.66 1.94l-1.05-.08c2 1.27 4.38 2.02 6.94 2.02 8.3 0 12.86-6.9 12.84-12.85.02-.24 0-.43 0-.65a8.68 8.68 0 0 0 2.26-2.34c-.82.38-1.7.62-2.6.72a4.37 4.37 0 0 0 1.95-2.51c-.84.53-1.81.9-2.83 1.13z">
                    </path>
                </svg>
 
                <svg style="background: black;
                border-radius: 21px;" width="29" height="29" viewBox="0 0 29 29" fill="none" class="hk">
                    <path
                        d="M5 6.36C5 5.61 5.63 5 6.4 5h16.2c.77 0 1.4.61 1.4 1.36v16.28c0 .75-.63 1.36-1.4 1.36H6.4c-.77 0-1.4-.6-1.4-1.36V6.36z">
                    </path>
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M10.76 20.9v-8.57H7.89v8.58h2.87zm-1.44-9.75c1 0 1.63-.65 1.63-1.48-.02-.84-.62-1.48-1.6-1.48-.99 0-1.63.64-1.63 1.48 0 .83.62 1.48 1.59 1.48h.01zM12.35 20.9h2.87v-4.79c0-.25.02-.5.1-.7.2-.5.67-1.04 1.46-1.04 1.04 0 1.46.8 1.46 1.95v4.59h2.87v-4.92c0-2.64-1.42-3.87-3.3-3.87-1.55 0-2.23.86-2.61 1.45h.02v-1.24h-2.87c.04.8 0 8.58 0 8.58z"
                        fill="#fff"></path>
                </svg>
 
                <svg width="29" height="29" class="hk">
                    <path
                        d="M23.2 5H5.8a.8.8 0 0 0-.8.8V23.2c0 .44.35.8.8.8h9.3v-7.13h-2.38V13.9h2.38v-2.38c0-2.45 1.55-3.66 3.74-3.66 1.05 0 1.95.08 2.2.11v2.57h-1.5c-1.2 0-1.48.57-1.48 1.4v1.96h2.97l-.6 2.97h-2.37l.05 7.12h5.1a.8.8 0 0 0 .79-.8V5.8a.8.8 0 0 0-.8-.79">
                    </path>
                </svg>
 
            </div>
        </div>
        <p class="font1">In communications and information processing, code is a system of rules to convert
            information—such as a letter, word, sound, image, or gesture—into another form, sometimes shortened or
            secret, for communication through a communication channel or storage in a storage medium. An early example
            is the invention of language, which enabled a person, through speech, to communicate what they thought, saw,
            heard or felt to others. But speech limits the range of communication to the distance a voice can carry, and
            limits the audience to those present when the speech is uttered . The invention of writing, which converted
            spoken language into visual symbols, extended the range of communication across space and time.
 
            The process of encoding converts information from a source into symbols for communication or storage.
            Decoding is the reverse process, converting code symbols back into a form that the recipient understands,
            such as English or/and Spanish.
 
            One reason for coding is to enable communication in places where ordinary plain language, spoken or written,
            is difficult or impossible. For example, semaphore, where the configuration of flags held by a signaler or
            the arms of a semaphore tower encodes parts of the message, typically individual letters and numbers.
            Another person standing a great distance away can interpret the flags and reproduce the words sent.</p>
        <p class="font1">In communications and information processing, code is a system of rules to convert
            information—such as a letter, word, sound, image, or gesture—into another form, sometimes shortened or
            secret, for communication through a communication channel or storage in a storage medium. An early example
            is the invention of language, which enabled a person, through speech, to communicate what they thought, saw,
            heard or felt to others. But speech limits the range of communication to the distance a voice can carry, and
            limits the audience to those present when the speech is uttered . The invention of writing, which converted
            spoken language into visual symbols, extended the range of communication across space and time.
 
            The process of encoding converts information from a source into symbols for communication or storage.
            Decoding is the reverse process, converting code symbols back into a form that the recipient understands,
            such as English or/and Spanish.
 
            One reason for coding is to enable communication in places where ordinary plain language, spoken or written,
            is difficult or impossible. For example, semaphore, where the configuration of flags held by a signaler or
            the arms of a semaphore tower encodes parts of the message, typically individual letters and numbers.
            Another person standing a great distance away can interpret the flags and reproduce the words sent.</p>
        <p class="font1">In communications and information processing, code is a system of rules to convert
            information—such as a letter, word, sound, image, or gesture—into another form, sometimes shortened or
            secret, for communication through a communication channel or storage in a storage medium. An early example
            is the invention of language, which enabled a person, through speech, to communicate what they thought, saw,
            heard or felt to others. But speech limits the range of communication to the distance a voice can carry, and
            limits the audience to those present when the speech is uttered . The invention of writing, which converted
            spoken language into visual symbols, extended the range of communication across space and time.
 
            The process of encoding converts information from a source into symbols for communication or storage.
            Decoding is the reverse process, converting code symbols back into a form that the recipient understands,
            such as English or/and Spanish.
 
            One reason for coding is to enable communication in places where ordinary plain language, spoken or written,
            is difficult or impossible. For example, semaphore, where the configuration of flags held by a signaler or
            the arms of a semaphore tower encodes parts of the message, typically individual letters and numbers.
            Another person standing a great distance away can interpret the flags and reproduce the words sent.</p>
        <p class="font1">In communications and information processing, code is a system of rules to convert
            information—such as a letter, word, sound, image, or gesture—into another form, sometimes shortened or
            secret, for communication through a communication channel or storage in a storage medium. An early example
            is the invention of language, which enabled a person, through speech, to communicate what they thought, saw,
            heard or felt to others. But speech limits the range of communication to the distance a voice can carry, and
            limits the audience to those present when the speech is uttered . The invention of writing, which converted
            spoken language into visual symbols, extended the range of communication across space and time.
 
            The process of encoding converts information from a source into symbols for communication or storage.
            Decoding is the reverse process, converting code symbols back into a form that the recipient understands,
            such as English or/and Spanish.
 
            One reason for coding is to enable communication in places where ordinary plain language, spoken or written,
            is difficult or impossible. For example, semaphore, where the configuration of flags held by a signaler or
            the arms of a semaphore tower encodes parts of the message, typically individual letters and numbers.
            Another person standing a great distance away can interpret the flags and reproduce the words sent.</p>
    </div>

 

After this we will add <hr> tag for horizontal line inside the <div> block with class named max-width-1 and m-auto as shown below.

    <div class="max-width-1 m-auto">
        <hr>
    </div>

 

Let's copy the <div> block with the class named home-articles inside blogpost.html file but only with three articles wrapped inside the child <div> block with class named row and also change the heading given inside <h2> tag to “People who read this also read”. In the <div> block with class named home-article we will also add one more class named more-post(will be styled in blogpost.css file). You can refer to the code from the snippet given below.

<div class="home-articles max-width-1 m-auto font2">
        <h2>People who read this also read</h2>
        <div class="row">
 
 
            <div class="home-article more-post">
                <div class="home-article-img">
                    <img src="img/11.svg" alt="article">
                </div>
                <div class="home-article-content font1 center">
                    <a href="/blogpost.html">
                        <h3>Learn more about Machine Learning techniques in India by joining this channel</h3>
                    </a>
 
                    <div>Author Name</div>
                    <span>07 January | 6 min read</span>
                </div>
            </div>
            <div class="home-article more-post">
                <div class="home-article-img">
                    <img src="img/1.png" alt="article">
                </div>
                <div class="home-article-content font1 center">
                    <a href="/blogpost.html">
                        <h3>Learn more about Machine Learning techniques in India by joining this channel</h3>
                    </a>
 
                    <div>Author Name</div>
                    <span>07 January | 6 min read</span>
                </div>
            </div>
            <div class="home-article more-post">
                <div class="home-article-img">
                    <img src="img/2.png" alt="article">
                </div>
                <div class="home-article-content font1 center">
                    <a href="/blogpost.html">
                        <h3>Learn more about Machine Learning techniques in India by joining this channel</h3>
                    </a>
 
                    <div>Author Name</div>
                    <span>07 January | 6 min read</span>
                </div>
            </div>
 
        </div>
    </div>

  •  Styling blog post page

We will create one new file named blogpost.css inside a folder named CSS. All the styling for the blog post page will be done inside the blogpost.css file. So at first we will target the <div> block of an image by a class named post-img and give CSS property height of 404px and overflow as hidden to hide the overflow of elements in the webpage as shown below.

.post-img{
    height: 404px;
    overflow: hidden; 
}

 

Now we will target the image inside the <div> block with class named post-img by selecting like this .post-img img and will set the CSS property width(that sets the width of an element) to 100% as shown below.

.post-img img{
    width: 100%;
}

 

We will target <h1> tag inside <div> block with class named blog-post-content by selecting like this .blog-post-content h1 and will set the css property text-align as center that specifies the horizontal alignment of text in an element as shown below.

.blog-post-content h1{
    text-align: center;
}

 

Let's set the font-size of <p> tags inside the <div> block with class named blog-post-content so we will select that <p> tag such as blog-post-content p as shown below.

.blog-post-content p{
    font-size: 18px; 
}

 

Now let’s style the <div> block in which we have added details of posts such as author name, date, and social media icons. We will target that <div> block by a class named .blogpost-meta and will give some CSS properties such as display as flex to make the element flexbox and justify-content as space-between that aligns the flexible container's items when the items do not use all available space on the main-axis horizontally as shown below.

.blogpost-meta{ 
    display: flex;
    justify-content: space-between;
}

 

We will give the margin(used to create space around elements, outside of any defined borders) of 12px vertically in the author name of the post, targeting by a class named author-info as shown below.

.author-info{
    margin: 12px 0;
}

 

Now we will target <div> block inside the <div> block with class named author-info such as .author-info div and inside it we will add some CSS properties such as padding(used to generate space around an element's content, inside of any defined borders) of 4px vertically and for font-family we will add a variable named --font2 by using var() function as shown below.

.author-info div{
    padding: 4px 0px;
    font-family: var(--font2);
}

 

Let's style the social media icon, targeting by a class named social and giving some CSS properties such as padding-right: 53px, align-self: center, and cursor: pointer. You can refer to the code from the snippet given below.

.social{
    padding-right: 53px;
    align-self: center;
    cursor: pointer;
}

 

The webpage will look as :

 

We will give the display flex property to the class named row given to the <div> block in which three articles are wrapped. As we discussed earlier, the default flex-direction is row so the elements inside this <div> block will align horizontally in a row. You can refer to the code from the snippet given below.

.row{
    display: flex;
}

 

Now we will style the class named more-post added in the <div> block with a class named home-article. We will target by a class named more-post and will add some CSS properties such as flex-direction as a column that specifies the direction of the flexible items and align-items as the center which specifies the default alignment for items inside the flexible container as shown below.

.more-post{
    flex-direction: column; 
    align-items: center;
}

 

The webpage will look as :

MAKING WEBSITE RESPONSIVE

We will create a new file named mobile.css inside the folder named CSS and we will add a media query inside the mobile.css file. It is a CSS technique introduced in CSS3. It uses the @media rule to include a block of CSS properties only if a certain condition is true to know more about media queries click here. We will set max-width 1200 px so when the width of the webpage is less than 1200 px the CSS written inside the media query will be fired.

Code mobile.css as described/written in the blog:

@media screen and (max-width: 1200px) {
}

 

We will link the mobile.css file with all other HTML files like as shown below:

<link rel="stylesheet" href="css/mobile.css">

 

Inside this media query, we will write the CSS for the following elements to make it responsive.

1. Navigation bar

Let's style the class named navigation, We will add CSS properties flex-direction(property specifies the direction of the flexible items) as column and we will give margin from the bottom using CSS property margin-bottom as 23px as shown below.

  .navigation {
    flex-direction: column;
    margin-bottom: 23px;
  }

 

Now we will target the left part of the navigation bar by a class named nav-left and will add CSS property flex-direction as column and text-align(specifies the horizontal alignment of text in an element) as the center. You can refer to the code from the snippet given below.

  .nav-left {
    flex-direction: column;
    text-align: center;
  }

 

The navigation bar will look like this when it will open on small screen devices :

 

2. Content

We will target the right part of the content by a class named content-right and will give the CSS property display(specifies the display behavior of an element) as none as shown below.

  .content-right {
    display: none;
  }

 

The content part will look like this when it will open on small screen devices :

 

3. Home page articles

Let's give the CSS property flex-direction as a column so the elements present inside the block will align horizontally in a column. You can refer to the code from the snippet given below.

.home-article {
    flex-direction: column;
  }

 

We want to move the image of the article in the center so we will target it by a class named home-article-img and will give CSS property text-align as center. You can refer to the code from the snippet given below.

home-article-img {
  text-align: center;
}

 

Now we will give width in VW(viewport width) units to <img> inside the <div> block with a class named home-article so we will target <img> such as .home-articles img. You can refer to the code from the snippet given below.

.home-article img {
  width: 70vw;
}

 

Home page articles will look like this when it will open on small screen devices :

 

4. Year box 

First we will target the <div> block with a class named year-box and will add some CSS properties such as top: 25px, left: 60vw,font-size: 11px and display: flex. You can refer to the code from the snippet given below.

  .year-box {
    top: 25px;
    left: 60vw;
    font-size: 11px;
    display: flex;
  }

 

Now we will target the child <div> block inside <div> with a class named year-box such as .year-box div and will add CSS property padding as 0px horizontally and 3px vertically. Also adding margin as 0px as shown below.

  .year-box div {
    padding: 0 3px;
    margin: 0;
  }

Let’s target a class named adjust-year as given in the <div> block with the class named year-box. Inside it, we will add some CSS properties such as position: static, height: auto, padding: 12px 0px, display: flex, justify-content: flex-end and width: 100%. You can refer to the code from the snippet given below.

  .adjust-year {
    position: static;
    height: auto;
    padding: 12px 0px;
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }

 

Year box will look like this when it will open on small screen devices :

 

5. Forms

We will target the class named form-input given to the <input> tag with a name query for search on the right side of the navigation bar. We will set its width to 50% as shown below.

  .form-input {
    width: 50%;
  }

 

Now we will target the <input> tags and <textarea> tag in the contact.html file inside <div> blocks with a class named form-box. Inside it we will give CSS property width as 66vw(viewport width) as shown below.

  .form-box input,
  textarea {
    width: 66vw;
  }

 

Contact form input in contact page will look like this when it will open on small screen devices:

 

6. Blog post page

First, we will target the image given to the post by a class named .post-img and will give the CSS property height(sets the height of an element) as auto as shown below :

  .post-img {
    height: auto;
  }

 

Now we will target the <div> block where the social media icons are wrapped with the class named .social and will set its padding as 0px. You can refer to the code from the snippet given below.

  .social {
    padding: 0;
  }

Blog post page will look like this when it will open on small screen devices :

 

Let’s target the <div> block with a class named row that has wrapped three articles and we will set the property flex-direction as a column so the articles will be displayed vertically in a row. You can refer to the code from the snippet given below.

  .row {
    flex-direction: column; 
  }

 

Blog post page will look like this when it will open on small screen devices :

Tags

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.