DEV Community: Codewithrandom Blogs

Rainbow Text Animation Using HTML and CSS

Codewithrandom Blogs — Mon, 19 Jun 2023 07:06:05 +0000

Hello and welcome to the Codewithrandom blog. We'll look at how to make a Rainbow Text Animation Using HTML and CSS. I hope you will enjoy our blog. We will teach you how to create rainbow text animation.

On Web pages, we frequently use various types of headings. In that heading, I want to use a variety of animations. This rainbow text effect will add a lot of interest to your plain text.

To make these animated rainbow text effects, I first created an HTML text. Then I used CSS to add colour here. A total of seven different colours have been used here.

Step1: Lets Start with adding some Basic HTML for Rainbow Text Animation

The HTML is hypertext markup language is the main structure of our webpage which will help us to display our content to the browser.

All the HTML document must start with <!doctypehtml> this helps the browser to understand the code written follows the lastest HTML format.

The HTML document itself begin With and end with .

The content that will be displayed in the brower comes under the body section

.Inside the body tag main content lies.

Now let's take a look at our HTML Code.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rainbow Text</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="rainbowText">Code With Random</div>
  </body>
</html>

We've included an external style link in our HTML's header.
We've added a div tag in the body of our HTML to contain our main text ("CodeWithRandom"). We will add the rainbow animation using CSS only in this text.

Now let's take look at our output without styling.

So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.

Step2: CSS code for Star Rating

Cascading Style Sheets is a style sheet language that is used to describe the presentation of a document written in a markup language like HTML or XML.

Now we will look at our CSS code.

body {
  background-color: #333;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

.rainbowText {
  font-family:arial black;
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
  animation: move 35s linear infinite;
}

@keyframes move {
    to {
        background-position: 4500vh;
    }
}
@media screen and (max-width:900px){
  .rainbowText{
    font-size:2rem;
  }
}

@media screen and (max-width:600px){
  .rainbowText{
    font-size:1rem;
  }
}

Now that we've included our CSS code in our article, let's go over it step by step.

Step1: First, we'll add a black background to the body of our webpage. The display is set to "flex," and the content is set to "centre." The height is defined as 100 vh.

body {
  background-color: #333;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
}

Step2: We will now add different colours to our text by using the ".rainbowText" class. The font family is "Arial," and the font size is "70px." Using the background-image property, we will now add a linear gradient with seven different colours to our text. We've also added a "move" animation with an infinite loop.

.rainbowText {
  font-family:arial black;
  font-size:70px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
  animation: move 35s linear infinite;
}

Step3: We also added some keyframes to our animation so that we can see the gradual changes of different colours in our text, which will look like a rainbow.

@keyframes move {
    to {
        background-position: 4500vh;
    }
}

Step4: Now we'll make our website more responsive. To add responsiveness, we used media query. We have defined two maximum screen widths (max-width: 900px): if the screen size of our window is equal to or less than the defined width, the font size of our text will change to 2 rem; another maximum screen width is defined at 600px; if the screen size of our window is less than the defined screen size, the font size of our text will change to 1.5 rem.

@media screen and (max-width:900px){
  .rainbowText{
    font-size:2rem;
  }
}

@media screen and (max-width:600px){
  .rainbowText{
    font-size:1rem;
  }
}

Now we have completed our css code.

We've finished styling our website. Let's take a look at our video preview now so we can fully grasp the concept of rainbow text animation.

We've finished our rainbow text animation project with HTML and CSS. This project was simple, but it taught you how to add different colours to text and how to add animation to text.

Now We have Successfully created our Rainbow Text Animation Project. You can use this project for your personal webpage and We hope you understood the project , If you any doub't feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Follow: codewithrandom

Written By : Arun

Code by : Arun

Create Reveal Text On Card Hover Using HTML and CSS

Codewithrandom Blogs — Mon, 19 Jun 2023 06:57:18 +0000

Hello Coder! Welcome to The Codewithrandom blog. In this article, we learn how to create a Reveal Text On Card Hover Using Html and Css. In this Project, We have a card with an image, and when we hover over the card text lines and buttons are shown on the card. so let's create this card on hover show text Using Only Html and Css.

In this quick tutorial, I show how you can show text above the Image when the user hovers over the image using only HTML and CSS, not jQuery and JavaScript.

I hope you enjoy our blog so let's start with a basic HTML structure for the Reveal Text On Hover.

There are two ways you can create a hover text for your HTML elements:

Adding the global title attribute for your HTML tags
Creating a tooltip CSS effect using :before selector

This tutorial will show you how to use both methods.

Html Code For Reveal Text On Card Hover:-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hover Reveal</title>
<!-- styles -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="card-wrapper">
<div class="card-top">
<img class="image" src="https://images.unsplash.com/photo-1499676763409-c0211693a66b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80">
</div>
<div class="card-bottom">
<span class="top-text">Premium Membership</span><br>
<span class="bottom-text">Join our membership program to download music for free, listen offline and skip songs</span>
<br>
<button class="button">Join Us</button>
</div>
</div>
</body>
</html>

There is all Html Code for the Reveal Text On Hover. Now, you can see output without CSS. then we write CSS for the Reveal Text On Hover.

CSS Code For Reveal Text On Card Hover:-

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@200&display=swap');
body {
position: relative;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Sarabun', sans-serif;
}
.image {
width: 100%;
height: 100%;
border-radius: 20px;
transition: all 0.3s ease-in-out;
z-index: 20;
box-shadow: 10px 10px 53px 0px rgba(0, 0, 0, 0.49);
}
.card-wrapper {
position: relative;
width: 400px;
height: 500px;
border-radius: 20px;
overflow: hidden;
transition: all 0.3s ease-in-out;
box-shadow: 10px 10px 53px 0px rgba(0, 0, 0, 0.49);
}
.card-wrapper:hover .image {
filter: blur(1.4px);
transform: scale(1.5);
overflow: hidden;
transition: all 0.3s linear;
box-shadow: inset -6px -1px 32px 0px rgba(0, 0, 0, 0.75);
}
.card-wrapper:hover .card-bottom {
transform: translate(0%, -50%);
transition: all 0.8s ease;
background-color: rgba(110, 122, 92, 0.7);
}
.card-top {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.card-bottom {
width: 100%;
position: absolute;
z-index: 20;
display: nonee;
top: 50%;
background-color: rgba(110, 122, 92, 0);
padding: 100px 20px;
color: #fff;
transform: translate(100%, -50%);
}
.top-text {
font-size: 25px;
line-height: 40px;
font-weight: bold;
letter-spacing: 1px;
}
.bottom-text {
font-size: 15px;
}
.button {
position: relative;
display: block;
outline: none;
cursor: pointer;
margin-top: 25px;
border: none;
border-radius: 3px;
background-color: #f8961e;
color: #fff;
padding: 5px 20px;
}

You can change the position of the text container using the top bottom left right CSS properties.

1.Bottom left – bottom: 0 and left: 0
2.Top right – top: 0 and right: 0
3.Top left – top: 0 and left: 0

We have completed our Reveal Text On Hover. Here is our final updated output With Html and CSS.

You can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thank You And Happy Learning!!!

Written by - Code With Random/Anki

Code by - anastasijaprogramer

Div Follows Mouse Cursor using HTML & JavaScript

Codewithrandom Blogs — Mon, 19 Jun 2023 06:38:18 +0000

Hello, today we're going to learn how to use HTML, CSS & JavaScript to create a Div Follows Mouse Cursor. By following these instructions, you can simply make this Div Follows Mouse Cursor in HTML, CSS & JavaScript. Simply by adhering to the procedures mentioned below, you will be able to develop this amazing Div Follows Mouse Cursor.

Step 1
The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements to make Div Follows Mouse Cursor Project.

Step 2
Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment in the Div Follows Mouse Cursor Project.

Step 3
At last we will use JS (JavaScript) which will add a logic to make the Div Follows Mouse Cursor Project functioning from the user end.

I hope you have got an idea about the project.

HTML Code for Div Follows Mouse Cursor

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Div Follows Mouse Cursor</title>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="my-div"></div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

First we'll start with creating the structure of the Div Follows Mouse Cursor project for that as you can see the above code we have used all the necessary elements & attributes to setup the structure. Let us know code the CSS part to add styling and aligned the tags.

CSS Code for Div Follows Mouse Cursor

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #8fc7f1, #7173f5);
  overflow: hidden;
}
#my-div {
  width: 6em;
  height: 6em;
  background-color: #ffffff;
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(16, 0, 54, 0.2);
  transition: 0.1s ease-out;
}

Second comes the CSS code, which is mentioned above in that we have styled for the structure we have padded as well as aligned the Geometric Art Generator project so that it is properly situated and doesn't get messy with suitable CSS elements. Now we have created the structure using HTML and styled the webpage using CSS its time to add the functionality using JavaScript in this project.

JavaScript Code for Div Follows Mouse Cursor

let myDiv = document.getElementById("my-div");
//Detect touch device
function isTouchDevice() {
  try {
    //We try to create TouchEvent. It would fail for desktops and throw error
    document.createEvent("TouchEvent");
    return true;
  } catch (e) {
    return false;
  }
}

const move = (e) => {
  //Try, catch to avoid any errors for touch screens (Error thrown when user doesn't move his finger)
  try {
    //PageX and PageY return the position of client's cursor from top left of screen
    var x = !isTouchDevice() ? e.pageX : e.touches[0].pageX;
    var y = !isTouchDevice() ? e.pageY : e.touches[0].pageY;
  } catch (e) {}
  //set left and top of div based on mouse position
  myDiv.style.left = x - 50 + "px";
  myDiv.style.top = y - 50 + "px";
};
//For mouse
document.addEventListener("mousemove", (e) => {
  move(e);
});
//For touch
document.addEventListener("touchmove", (e) => {
  move(e);
});

Last stage of the project the JavaScript in which we have added the logical and coded as per the requirement with some conditions. In this code we have defined the event listener function for moving of the mouse and clicking of the mouse. Let us see the Final Output of the project Div Follows Mouse Cursor using HTML, CSS & JavaScript (Source Code).

We have Successfully created our Div Follows Mouse Cursor using HTML, CSS & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Code Idea - codingartist

Written By – Harsh Sawant

Code By – harshh9

Create File Sharing App with JavaScript With Source Code

Codewithrandom Blogs — Mon, 19 Jun 2023 06:31:43 +0000

This project is totally based on sharing of files over the servers which is often referred to as a web app, which means web application.

Let me give a short intro of what is a web app with an example.

A web application is an application program that is stored under remote servers and used to deliver over the network with the help of a browser interface. Examples of web applications are online forms, shopping carts, conversion of files, and email programs like Gmail, which come under the web application category.

Likewise, we have created a web app with a File Sharing App using JavaScript in which the user can upload files over the internet and could see a preview of uploaded files with details before sharing. Also additionally it contains the size details of files sent and received with the date and time of the file. We could also see the recent files uploaded and received in the current section and the details of the received file.

So let us move on to start working on a project, first, we would add html code :

Html Code For File Sharing App:

<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">
<div class="app-container">
  <div class="left-area">
    <button class="btn-close-left">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-x-circle" viewBox="0 0 24 24">
        <defs/>
        <circle cx="12" cy="12" r="10"/>
        <path d="M15 9l-6 6M9 9l6 6"/>
      </svg>
    </button>
    <div class="app-name">MyDocs</div>
    <a href="#" class="item-link active" id="pageLink">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-grid" viewBox="0 0 24 24">
        <defs />
        <path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z" />
      </svg>
    </a>
    <a href="#" class="item-link" id="pageLink">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-folder" viewBox="0 0 24 24">
        <defs />
        <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
      </svg>
    </a>
    <a href="#" class="item-link" id="pageLink">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-hard-drive" viewBox="0 0 24 24">
        <defs />
        <path d="M22 12H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h.01M10 16h.01" />
      </svg>
    </a>
    <a href="#" class="item-link" id="pageLink">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-settings" viewBox="0 0 24 24">
        <defs />
        <circle cx="12" cy="12" r="3" />
        <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
      </svg>
    </a>
    <button class="btn-logout">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-log-out" viewBox="0 0 24 24">
        <defs/>
        <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
      </svg>
    </button>
  </div>
  <div class="main-area">
    <button class="btn-show-right-area">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"/></svg>
    </button>
    <button class="btn-show-left-area">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    </button>
    <div class="main-area-header">
      <div class="search-wrapper" id="searchLine">
      <input class="search-input" type="text" placeholder="e.g. files.doc">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-search" viewBox="0 0 24 24">
        <defs/>
        <circle cx="11" cy="11" r="8"/>
        <path d="M21 21l-4.35-4.35"/>
      </svg>
    </div>
    </div>
    <section class="content-section">
      <h1 class="section-header">Quick Access</h1>
      <div class="access-links">
        <div class="access-link-wrapper">
          <div class="access-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
              <circle cx="8.5" cy="8.5" r="1.5"/>
              <polyline points="21 15 16 10 5 21"/>
            </svg>
          </div>
          <span class="access-text">Images</span>
        </div>
        <div class="access-link-wrapper">
          <div class="access-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music">
              <path d="M9 18V5l12-2v13"/>
              <circle cx="6" cy="18" r="3"/>                   <circle cx="18" cy="16" r="3"/>
            </svg>
          </div>
          <span class="access-text">Music</span>
        </div>
        <div class="access-link-wrapper">
          <div class="access-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play">
              <polygon points="5 3 19 12 5 21 5 3"/>
            </svg>
          </div>
          <span class="access-text">Video</span>
        </div>
        <div class="access-link-wrapper">
          <div class="access-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left">
              <line x1="17" y1="10" x2="3" y2="10"/>
              <line x1="21" y1="6" x2="3" y2="6"/>
              <line x1="21" y1="14" x2="3" y2="14"/>
              <line x1="17" y1="18" x2="3" y2="18"/>
            </svg>
          </div>
          <span class="access-text">Docs</span>
        </div>
        <div class="access-link-wrapper">
          <div class="access-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
              <polygon points="12 2 2 7 12 12 22 7 12 2"/>
              <polyline points="2 17 12 22 22 17"/>
              <polyline points="2 12 12 17 22 12"/>
            </svg>
          </div>
          <span class="access-text">Apps</span>
        </div>
        <div class="access-link-wrapper">
          <div class="access-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-circle">
              <circle cx="12" cy="12" r="10"/>
              <polyline points="8 12 12 16 16 12"/>
              <line x1="12" y1="8" x2="12" y2="16"/>
            </svg>
          </div>
          <span class="access-text">Download</span>
        </div>
      </div>
    </section>
    <section class="content-section">
       <div class="section-header-wrapper">
         <h1 class="section-header">Preview</h1>
         <a class="section-header-link">
           View in folders
         </a>
       </div>
      <div class="content-section-line">
        <div class="section-part left">
          <a class="image-wrapper">
            <div class="image-overlay">
              <div class="video-info">
                <div class="video-info-text">
                  <p class="video-name medium">Happiness & Tears</p>
                  <p class="video-subtext medium">45.5 MB</p>
                </div>
                <button class="btn-play"></button>
            </div>
            </div>
            <img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2251&q=80"/>
            <span class="video-time">10:32</span>
          </a>
        </div>
        <div class="section-part right">
          <div class="content-part-line">
            <a class="image-wrapper">
              <div class="image-overlay">
              <div class="video-info">
              <div class="video-info-text">
                <p class="video-name tiny">High Hopes</p>
                <p class="video-subtext tiny">50 MB</p>
              </div>
            </div>
            </div>
            <img src="https://images.unsplash.com/photo-1515552726023-7125c8d07fb3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80"/>
              <span class="video-time">02:35</span>
          </a>
            <a class="image-wrapper">
              <div class="image-overlay">
              <div class="video-info">
              <div class="video-info-text">
                <p class="video-name tiny">Imaginery you</p>
                <p class="video-subtext tiny">210.2 MB</p>
              </div>
            </div>
            </div>
              <img src="https://images.unsplash.com/photo-1542359649-31e03cd4d909?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80"/>
              <span class="video-time">04:15</span>
            </a>
          </div>
        </div>
      </div>
    </section>
    <section class="content-section">
      <div class="section-header-wrapper">
        <h1 class="section-header">Recent Files</h1>
        <a class="section-header-link">
          View all files
        </a>
      </div>
      <div class="files-table">
        <div class="files-table-header">
          <div class="column-header table-cell">Name</div>
          <div class="column-header table-cell size-cell">Size</div>
          <div class="column-header table-cell">Last Modified</div>
          <div class="column-header table-cell">Action</div>
        </div>
        <div class="files-table-row">
          <div class="table-cell name-cell pdf">Brandenburg.pdf</div>
          <div class="table-cell">42 MB</div>
          <div class="table-cell">Aug 26, 2020</div>
          <div class="table-cell action-cell">
            <button class="more-action"></button>
          </div>
        </div>
        <div class="files-table-row">
          <div class="table-cell name-cell jpg">TheLionsRoar.jpg</div>
          <div class="table-cell size-cell">500 KB</div>
          <div class="table-cell">Aug 26, 2020</div>
          <div class="table-cell action-cell">
            <button class="more-action"></button>
          </div>
        </div>
      </div>
    </section>
  </div>
  <div class="right-area">
    <button class="btn-close-right">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-x-circle" viewBox="0 0 24 24">
        <defs/>
        <circle cx="12" cy="12" r="10"/>
        <path d="M15 9l-6 6M9 9l6 6"/>
      </svg>
    </button>
    <div class="right-area-header-wrapper">
      <p class="right-area-header">Downloads</p>
      <button class="more-action"></button>
    </div>
    <div class="download-item-line">
      <div class="line-header">Today</div>
      <div class="download-area">
        <div class="download-item-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
            <defs></defs>
            <circle cx="256" cy="256" r="256" fill="#4b50dd"></circle>
            <path fill="#f5f5f5" d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
            <g fill="#f5f5f5" class="g">
              <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
              <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
            </g>
          </svg>
        </div>
        <div class="download-item-texts">
          <p class="download-text-header">Glitter.mp4</p>
          <p class="download-text-info">34.45 MB<span>Waiting for download</span></p>
        </div>
        <div class="download-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
            <defs/>
            <path d="M403.939 295.749l-78.814 78.833V172.125c0-10.557-8.568-19.125-19.125-19.125s-19.125 8.568-19.125 19.125v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043 0-7.478 7.478-7.478 19.584 0 27.042L289.208 431c4.59 4.59 10.863 6.005 16.812 4.953 5.929 1.052 12.221-.382 16.811-4.953l108.19-108.19c7.478-7.478 7.478-19.583 0-27.042-7.498-7.478-19.604-7.478-27.082-.019zM306 0C137.012 0 0 136.992 0 306s137.012 306 306 306 306-137.012 306-306S475.008 0 306 0zm0 573.75C158.125 573.75 38.25 453.875 38.25 306S158.125 38.25 306 38.25 573.75 158.125 573.75 306 453.875 573.75 306 573.75z"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="download-item-line">
      <div class="line-header">Yesterday</div>
      <div class="download-area">
        <div class="download-item-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
            <defs></defs>
            <circle cx="256" cy="256" r="256" fill="#4bc0dd"></circle>
            <path fill="#f5f5f5" d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
            <g fill="#f5f5f5" class="g">
              <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
              <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
            </g>
          </svg>
        </div>
        <div class="download-item-texts">
          <p class="download-text-header">Glitter.mp4</p>
          <div class="progress-bar">
            <span class="progress"></span>
          </div>
        </div>
        <div class="download-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 512 512">
            <defs/>
            <path d="M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0"/>
            <path d="M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0"/>
          </svg>
        </div>
      </div>
    </div>
    <div class="right-area-header-wrapper">
      <p class="right-area-header">File Received</p>
    </div>
    <div class="received-item-line">
      <div class="progress-line">
        <span class="time start">15:30</span>
        <span class="time end">18:30</span>
      </div>
      <div class="received-items-content">
        <div class="received-files">
          <div class="image-wrapper">
          <img src="https://images.unsplash.com/photo-1523987355523-c7b5b0dd90a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"/>
        </div>
        <div class="image-wrapper">
          <img src="https://images.unsplash.com/photo-1498855926480-d98e83099315?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"/>
        </div>
        <div class="image-wrapper">
          <img src="https://images.unsplash.com/photo-1492648272180-61e45a8d98a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"/>
        </div>
        </div>
        <div class="received-files-info">
          Received <span class="info-purple">3 images</span> total  <span class="info-purple">50.3 MB</span>
        </div>
      </div>
    </div>
  </div>
</div>

Now we have added the html code for the file sharing project. In this html code, we firstly added a search bar to search the files sent and received. We have included more section tags for adding specific elements like a file upload box, a button for upload, a download icon, and send icon for sharing files.

As it is a web app we have used bootstrap for aligning contents accurately for every screen size. You can see that in every div tag we have used a bootstrap snippet to alignment, as it is the best option for reducing the lines of code for a specific element's action on a different screen.

So as we now saw the html and its purposes included, it's time to move on to css to design the elements and make them look attractive. The css snippet for a respective project is down below.

CSS Code For File Sharing App:

* {
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

html, body {
  width: 100%;
  height: 100vh;
  margin: 0;
}

body {
  font-family: 'DM Sans', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  //background-image: url("https://images.unsplash.com/photo-1497541271502-639c540968b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80");
  background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
  background-position: center;
  background-size: cover;
  padding: 20px;
}

:root {
  --dark-font: #0f0f10;
  --light-font: #79798c;
}

a { text-decoration: none; cursor: pointer; }

.app-container {
  position: relative;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  max-height: 900px;
  background: linear-gradient(180deg, rgba(224,233,253,1) 0%, rgba(233,236,241,1) 90%);
  box-shadow: 0 0 0 10px rgba(255, 255, 255,.4);
  display: flex;
  overflow: hidden;
}

.left-area {
  padding: 32px;
  flex-basis: 1 0 132px;
  background-color: rgba(255, 255, 255,.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  //transition: all cubic-bezier(0.25, 0.1, 0.28, 1.54) .5s;
  transition: all 300ms cubic-bezier(0.190, 1.000, 0.560, 1.000);
  position: relative;
  overflow: auto;

  &.show {
    transform: translateX(0);
    opacity: 1;
  }
}

.app-name {
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--dark-font);
  margin-bottom: 32px;
}

.item-link {
  color: var(--light-font);
  margin-bottom: 32px;
  transition: .2s;

  &.active {
    color: var(--dark-font);
  }
}

.btn-logout {
  border: none;
  background-color: transparent;
  color: var(--light-font);
  margin-top: auto;
  cursor: pointer;
  transition: .2s;

  &:hover {
    color: var(--dark-font);
  }
}

.main-area {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background: linear-gradient(97deg, rgba(242,247,253,1) 0%, rgba(240,244,253,1) 90%);
  border-radius: 0 10px 10px 0;
  padding-bottom: 24px;
  position: relative;
}

.main-area-header {
  padding:24px 40px;
  background: linear-gradient(97deg, rgba(242,247,253,1) 0%, rgba(240,244,253,1) 90%);
}

.search-wrapper {
  border-radius: 4px;
  background-color: #fff;
  padding-right: 12px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--light-font);
  box-shadow: 0 2px 6px 0 rgba(136,148,171,.2),0 24px 20px -24px rgba(71,82,107,.1);
  overflow: hidden;
}

.search-input {
  border: none;
  flex: 1;
  outline: none;
  height: 100%;
  padding: 0 12px;
  font-size: 12px;
}


.right-area {
  flex-basis: 300px;
  flex-grow: 0;
  background: linear-gradient(180deg, rgba(224,233,253,1) 0%, rgba(233,236,241,1) 90%);
  transition: all 300ms cubic-bezier(0.190, 1.000, 0.560, 1.000);

  &.show {
    transform: translateX(0);
    width: 100%;
    opacity: 1;
  }
}

.content-section {
  display: block;
  margin-top: 32px;
  overflow-x: hidden;
  padding: 0 40px;
}

.section-header {
  font-size: 24px;
  line-height: 32px;
  margin-bottom: 16px;

  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &-link {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #8683d6;
  }
}

.access-links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -8px;
}

.access-icon {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  padding: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 36px;
    height: 36px;
  }
}

.access-link-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 8px;

  &:nth-child(1) {
    .access-icon { background-color: #6166fe; }
  }

  &:nth-child(2) {
    .access-icon { background-color: #6166fe;}
  }

  &:nth-child(3) {
    .access-icon { background-color: #3275f7;}
  }

  &:nth-child(4) {
    .access-icon { background-color: #3275f7;}
  }

  &:nth-child(5) {
    .access-icon { background-color: #22244a;}
  }

   &:nth-child(6) {
    .access-icon { background-color: #22244a;}
  }
}

.access-text {
  color: var(--light-font);
  font-size: 12px;
  line-height: 24px;
}

.content-section-line,
.content-part-line {
  display: flex;
  justify-content: space-between;
}

.content-part-line {
  height: 100%;
}

.content-section-line { margin: 0 -8px; }

.section-part { flex-basis: 49%; }

.image-wrapper {
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  height: auto;
  position: relative;
  flex-basis: 48%;
  display: flex;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .2s ease-in;
  }

  &:hover img {
    transform: scale(1.125);
  }
}

.image-overlay {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0,16,34,0.8) 0%, rgba(240,244,253,0.2) 90%);
  padding: 12px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

.video-info-text {
 width: calc(100% - 40px);

  p { margin: 0; }
}

.video-name, .video-subtext {
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &.medium {
    font-size: 14px;
    line-height: 24px;
  }

  &.tiny {
    font-size: 12px;
    line-height: 16px;
  }
}

.video-info {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.video-subtext { opacity: .8; }

.files-table {
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgba(136,148,171,.2),0 24px 20px -24px rgba(71,82,107,.1);
  border-radius: 12px;
  padding: 12px;
  display: table;
  table-layout: auto;
  width: 100%;

  &-header {
    display: table-header-group;
  }

  &-row {
    display: table-row-group;
  }
}

.table-cell {
  display: table-cell;
  font-size: 12px;
  line-height: 16px;
  color: #000;
  padding: 8px;
}

.column-header {
  font-size: 12px;
  line-height: 16px;
  color: #888da9;
}

.name-cell {
  width: 40%;
  word-break: break-all;

  &.pdf:before {
    content: 'PDF';
    background-color: #e2e9f8;
    color: #5a8ff7;
  }

  &.jpg:before {
    content: 'JPG';
    background-color: #e4e2f1;
    color: #302d7d;
  }

  &:before {
    border-radius: 4px;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
  }
}

.size-cell {
  width: 20%;
}

.more-action {
  border: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23888da9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-more-horizontal' viewBox='0 0 24 24'%3E%3Cdefs/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 24px;
  height: 16px;
  outline: none;
  cursor: pointer;
}

.fixed.main-area-header {
  position: sticky;
  z-index: 2;
  top: 0;
  width: 100%;
  padding: 12px 40px;
  transition: .2s;
  animation: sticky .5s forwards;
}

@keyframes sticky {
  0% {
    transform: translatey(-88px);
  }

  100% {
    transform: translatey(0px);
  }
}

.video-time {
  position: absolute;
  z-index: 1;
  border-radius: 10px;
  padding: 4px 12px;
  background-color: rgba(139, 156, 163, .5);
  font-size: 10px;
  right: 12px;
  top: 12px;
  color: #fff;
}

.btn-play {
  border-radius: 50%;
  background-color: #fff;
  border: none;
  box-shadow: 0 2px 6px 0 rgba(136,148,171,.2),0 24px 20px -24px rgba(71,82,107,.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2322244a' stroke='%2322244a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.right-area {
  padding: 24px;
  overflow: auto;
}

.right-area-header {
  &-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .more-action {
      width: 24px;
      height: 24px;
    }
  }
}

.download-item-line {
  padding: 12px 0;
}

.line-header {
  font-size: 12px;
  line-height: 16px;
  color: #888da9;
}

.download-area {
  background-color: #eceffb;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
  margin-top: 12px;
  cursor: pointer;
}

.download-item-texts {
  padding: 0 12px;

  p {
    line-height: 16px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 150px;
  }
}

.download-text-header { font-size: 12px; }

.download-text-info {
  color: #888da9;
  font-size: 10px;

  span { margin-left: 8px;}
}

.download-item-icon {
  width: 32px;
}

.download-icon { width: 24px; fill: #4bc3a7; }

.progress-bar {
  height: 4px;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  background-color: #dadff3;
  margin: 6px 0;
}

.progress {
  height: 100%;
  width: 40%;
  background-color: #4bc0dd;
  display: block;
}

.received-item-line {
  height: 150px;
  width: 100%;
  padding-top: 12px;
  display: flex;
      padding-left: 4px;
}

.progress-line {
  height: 100%;
  width: 2px;
  background-color: #22244a;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  position: relative;

  &:before, &:after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #22244a;
    transform: translateX(-50%);
    left: 50%;
  }

  &:after { bottom: 0; }
}

.time {
  margin-left: 12px;
  font-size: 10px;
  color: #888da9;
}

.received-items-content {
  padding: 24px 10px;
}

.received-files {
  display: flex;
  height: 70%;

  .image-wrapper {
    margin-left: 6px;
    display: flex;
  }
}

.received-files-info {
  font-size: 12px;
  line-height: 16px;
  margin-left: 12px;
  margin-top: 12px;

  span {
    color: #7a8dc5;
  }
}

.btn-show-left-area,
.btn-show-right-area{
  position: absolute;
  top: 24px;
  width: 32px;
  height: 40px;
  border-radius: 4px;
  background-color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  cursor: pointer;

  display: none;
}

.btn-show-left-area {
  left: 0;
  border-radius: 0 4px 4px 0;
}

.btn-show-right-area {
  right: 0;
  border-radius: 4px 0 0 4px;
}

.btn-close-left,
.btn-close-right {
  border: none;
  background-color: transparent;
  position: absolute;
  top: 4px;
  right: 4px;
  color: var(--light-font);
  outline: none;
  cursor: pointer;

  display: none;
}

.show {
  .btn-close-left,
  .btn-close-right {
    display: block;
  }
}

@media screen and (min-width: 850px) and (max-width: 1042px) {
  .access-icon { padding: 16px; }

  .access-icon svg {
    width: 20px;
    height: 20px;
  }
}

@media screen and (max-width: 900px) {
  .right-area {
    transform: translateX(100%);
    position: absolute;
    opacity: 0;
    z-index: 2;
    height: 100%;
    box-shadow: 0 0 0 10px rgba(255, 255, 255,.4);
  }

  .btn-show-right-area { display: flex; }

  .access-icon svg {
    width: 36px;
    height: 36px;
  }
}

@media screen and (max-width: 768px) {
  .left-area {
    transform: translateX(-100%);
    opacity: 0;
    position: absolute;
    z-index: 2;
    height: 100%;
    background-color: #fff;
    background-image: none;
    box-shadow: 0 0 0 10px rgba(255, 255, 255,.4);
  }

  .btn-show-left-area { display: flex; }

  .content-section-line,
  .content-part-line {
    flex-direction: column;
  }
  .image-wrapper { margin: 10px 0; }

  .video-name.tiny, .video-subtext.tiny {
    font-size: 16px;
    line-height: 24px;
  }

  .access-link-wrapper {
    width: 33.3%;
  }
}

@media screen and (max-width: 520px) {
  body { padding: 0; }

  .app-container { border-radius: 0; }

  .content-section { padding: 0 20px; }

  .content-section-line { margin: 0; }
}

As for the html part, now we have come to the css part... Let's get started.

Firstly we have set the box-sizing to border-box and height to 100 view-port height to make the contents align to the center of the screen. Secondly, we used flex-box, and grid as major because it is a web app which means the design content would look the same on every device like colors, sizes, etc.

As we have now included specific icons and designed the icons with various colors for various actions. Images like docs, apps, video, audio, and download have been included so that we can narrate the file as with the help of specific images.

Last we used media queries to make some contents be changed in small screen sizes like menu bar hidden/visible with various link options and also changes in width and height of boxes used and lot more.

So that's for css, and one more thing to do is add java script, the explanation for the script is afterward of javascript code.

Javascript Code For File Sharing App:

$(document).ready(function () {
  $("a#pageLink").click(function () {
    $("a#pageLink").removeClass("active");
    $(this).addClass("active");
  });

  $(".btn-show-left-area").click(function () {
    $(".left-area").removeClass("show");
    $(".left-area").addClass("show");
  });

  $(".btn-show-right-area").click(function () {
    $(".right-area").removeClass("show");
    $(".right-area").addClass("show");
  });

  $(".btn-close-right").click(function () {
    $(".right-area").removeClass("show");
  });

  $(".btn-close-left").click(function () {
    $(".left-area").removeClass("show");
  });
});

$('.main-area').scroll( function() {
    if ($('.main-area').scrollTop() >= 88) {
       $('div.main-area-header').addClass('fixed');
    }
    else {
       $('div.main-area-header').removeClass('fixed');
    }
});

Here we came to the js part, in this, we are getting the menu bar element with the help of getelementbyid property in order to make the menu bar visible after clicking and hide it when clicked again. But it works on smaller screen sizes like mobile and tablet to look attractive and plays responsive design.

And the active list property was used to determine the current page with changes in specific content's background color, also we used the scroll property to discover the efficient visit of particular contents on the page. Simply relocates to a specific part of the page instantly.

So that's for javascript, now we can view our project output of how it works and look.

Hey there! We came to an end that's what the project looks like when we implement the code. Use the code mentioned below to make use of this project. Include correct links from official websites to avoid encountering errors.

Also, the project ui is similar to android ui as it is a web application. Simply it might vary in colors and effects on different screens.

If you find out this helpful, then make sure to follow codewithrandom on instagram for web development projects and front-end development stuff.

Refer code - aybuke ceylan

Written by - ragunathan s

YouTube Comment Template Using HTML and CSS

Codewithrandom Blogs — Mon, 19 Jun 2023 06:14:07 +0000

Hey learners..! Welcome to our today's blog with Codewithrandom. In this blog, we gonna learn how we can design a YouTube Comment Template Using HTML and CSS.

In this article, we are going to clone some parts of a real-time website this is nothing but our Youtube. We all know it very well and we can't be untouched by this site. We all know how it tremendously increases among the people from lockdown.

People are accepting it because they get benefits from every aspect. From gaining knowledge to earning money. Today Youtube is globally accepted. Well people I'm not going to explain youtube in brief.

Actually, I'm trying to bring you to focus on the project with this bit of theoretical knowledge. Learners let me know what you do after watching any YT video when you like it most and when it requires asking any doubt, we just comment it isn't.

Similarly, we are going to clone the Youtube comment template in this article. If you don't know How we can design so just join me on this blog and make sure your finger is free for scrolling down.

I hope you must have got an idea about the project.

Let's have a look at our project.

In the starting of our project will look like this as and when your cursor will hit the text area then onwards our project will be as:-

HTML Code For Comment Box:-

Here I'm not going to add a structure to the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.

We have the following part in the HTML section.
First, we have a container that will enclose all other parts of the comment section.
We have one h2 heading previewing Leave Us a Comment.
then we have form, In the form, we have a text area with a placeholder "Add Your Comment."
In the end, we have two buttons one is submitted, and canceled. Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.

HTML Code For YouTube Comment Template:-

<div class="container">
<h2>Leave Us a Comment</h2>
<form>
<textarea placeholder='Add Your Comment'></textarea>
<div class="btn">
<input type="submit" value='Comment'>
<button id='clear' href='#'>Cancel</button>
</div>
</form>
</div>

We will create a container for our comment structure using the div tag with the class container. Then, using the h2 tag selector, we will add a heading as "Leave Us a Comment." Finally, using the form tag and the textarea inside of it, we will create a textbox for adding the comment. Finally, using the input type submit, we will create a submit button, and using the button tag, we will create a cancel button for our YouTube template.

CSS Code For Comment Box:-

By CSS we will design our container and will bring in the center and then we will set the width of the text area and will bring it after the heading and we will design both buttons and initial it will be on hiding mode.

The Below code will analyze you more. So just add in your HTML half-complete file and wait to watch some magic.

CSS Code For YouTube Comment Template:-

<div class="container">
<h2>Leave Us a Comment</h2>
<form>
<textarea placeholder='Add Your Comment'></textarea>
<div class="btn">
<input type="su*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body
{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f6f6;
font-family: arial;
}
.container
{
width: 600px;
border: 2px solid #333;
padding: 15px 10px;
}
.container h2
{
text-align: center;
margin-bottom: 15px
}
textarea
{
height: 20px;
width: 100%;
border: none;
border-bottom: 2px solid #aaa;
background-color: transparent;
margin-bottom: 10px;
resize: none;
outline: none;
transition: .5s
}
input[type="submit"], button
{
padding: 10px 15px;
border: none;
outline: none;
border-radius: 5px;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
}
input[type="submit"]
{
color: #fff;
background-color: #273c75
}
button
{
color: #333;
background-color: transparent
}
.btn
{
display: none
}bmit" value='Comment'>
<button id='clear' href='#'>Cancel</button>
</div>
</form>
</div>

Step1: We will set the padding and margin to "zero" using the universal selector, and we will set the box sizing attribute to "border-box" for the box sizing.

The display will now be made to "flex" using the body tag selector. The items will then be centre-aligned using the align items property, and the height property will be used to set the body's height to 100vh. We have changed the comment box's background colour to "white."

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f6f6;
    font-family: arial;
}
.container
{
    width: 600px;
    border: 2px solid #333;
    padding: 15px 10px;
}

Step2: Now using the class (.container h2) we will add the styling to the heading we will align it to the center and also using the margin bottom property we will add a bottom margin of 15px

Now using the tag selector textarea we will set the height as 20px and the width is set as 100% also using the border bottom we will add a 2px border at the bottom of our text area and the background color of our textarea is as "transparent"

Now using the input type submit we will add padding of 10px and 15px respectively and using the border -radius property we will add a border radius of 5px to the text area to give a curved edge look

{
    width: 600px;
    border: 2px solid #333;
    padding: 15px 10px;
}
.container h2
{
    text-align: center;
    margin-bottom: 15px
}
textarea
{
    height: 20px;
    width: 100%;
    border: none;
    border-bottom: 2px solid #aaa;
    background-color: transparent;
    margin-bottom: 10px;
    resize: none;
    outline: none;
    transition: .5s
}

input[type="submit"], button
{
    padding: 10px 15px;
    border: none;
    outline: none;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}
input[type="submit"]
{
    color: #fff;
    background-color: #273c75
}
button
{
    color: #333;
    background-color: transparent
}
.btn
{
    display: none
}

JavaScript Code For Comment Box:-

In the Javascript part, we will add magic logic as initially only the heading and text area will be previewed and whenever you will hit the cursor on Textarea then both buttons will be pop-out.
And as we know there are two buttons we have added through HTML one is submitted and the second one is canceled.
Whenever You will click on the cancel buttons then again both buttons will be hidden and the layout will turn into the previous one.

For observing this magic for this project then you should add the js file with the rest of the HTML and CSS files and enjoy this project and deploy it on Github.

JS Code For YouTube Comment Template

var feild = document.querySelector('textarea');
var backUp = feild.getAttribute('placeholder');
var btn = document.querySelector('.btn');
var clear = document.getElementById('clear')
feild.onfocus = function(){
this.setAttribute('placeholder', '');
this.style.borderColor = '#333';
btn.style.display = 'block'
}
feild.onblur = function(){
this.setAttribute('placeholder',backUp);
this.style.borderColor = '#aaa'
}
clear.onclick = function(){
btn.style.display = 'none';
feild.value = '';
}

By this blog... We have learned how we can design a YouTube Comment Template Using HTML, CSS, and JavaScript.

Now I'm looking for your reviews.
So, How was the blog, Learners?

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.

I hope that I'm able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers' hearts with enthusiasm for writing more new blogs.

Thank You And Keep Learning!!!

You can follow me on Instagram

Written by Ankit Kumar

Code by Habastil1

Create Automatic Popup Window using HTML & JavaScript Code

Codewithrandom Blogs — Mon, 19 Jun 2023 05:56:46 +0000

Hey Guys, Welcome To Our Blog, In Today's Blog We Are Going To See How To Create An Automatic Popup Window Using HTML, CSS, and JavaScript. An Automatic Popup Window Is just a pop-up box with some information on it that displays the message during the loading of a webpage.

So Now We are going to create this project for that we are first adding the HTML code.

HTML Code For Automatic Popup Window

<div class='popup-onload'>
<div class='cnt223'>

<p>
We were affected by the fire next door and will remain closed until further notice.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

First we are creating two div classes with separate class name on it. Then we creating an paragraph tag to add a message that needs to be displayed. and then we are adding an anchor tag with close as option , which means it will close the pop up box when we click close and that is going to done with the help of Javascript.

Lastly we have closed our both div class.

So , The HTML code is completed. Now we go for an CSS to make the pop up box attractive.

CSS Code For Automatic Popup Window

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup-onload{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
    color: #555555;
    /* text-align: justify; */
    font-size: 20px;
    font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}

The CSS code will be explained in steps so it would be easy and efficient. So follow these steps given below.

STEP 1: First , We calling out the class name popup-onload and adding the properties like width , margin , display , position and z-index for alignments , fixing of positions for fixed content and displaying none of contents.

Second, We calling out the second class name and adding the exact properties of first div class and here the additional properties is just min -width , background , box-shadow for making it attractive.

.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}

.popup-onload{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}

STEP 2: The second step involves adding properties for paragraph that displayed in pop up box. The properties were common which is font size , font family and color of the text.

.cnt223 p{
clear: both;
    color: #555555;
    /* text-align: justify; */
    font-size: 20px;
    font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}

STEP 3: Now the last step involves adding of button to the close option with button CSS properties.

.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}

Now The CSS part has been completed. So The last one Is javascript for making the auto popup.

JavaScript Code(jQuery) For Automatic Popup Window

$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup-onload').show();
$('.close').click(function(){
$('.popup-onload').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});

The First part of JS is we are creating and declaring an HTML element inside of JS and store it in overlay variable. and assigning the content with append JS property. Now calling the div class and printing the show() method to display the box with message.

The Second Part is When we click on an empty area of webpage then the popup box would disappear.

The Last part is again we calling out a specific div class and adding a method for it like append , hide and remove which would act when we click close. the act contains closing of popup.

Now We have successfully completed adding the Source codes for our project. So we will go on to preview our project in the given output section.

Now We have Successfully created our Automatic Popup Window using HTML ,CSS and JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE - Rosy Babu

WRITTEN BY - Ragunathan S

Create a Pagination using HTML, CSS, and JavaScript

Codewithrandom Blogs — Mon, 19 Jun 2023 05:32:05 +0000

When we surf any download site or a site from which we can download movies, music, pictures, etc, or let's just consider an example of Google in which at the bottom there are some numbers in ascending order. That number basically indicates the number of pages found in a result for which the user is looking and that section is called Pagination.

So Hey coders Welcome back to Codewithrandom. Today we'll create Pagination Using Html, Css, and JavaScript which is situated at the bottom before the footer in that site which has vast content. I hope you have got an idea for the project.

HTML Code for Pagination

<div id="pagination"></div>

In this HTML Code on the name of the structure, we have just used the div tag and given id so that we can call it later. Let's style the Pagination Project using CSS3.

CSS Code for Pagination

html {
    height: 100%;
    width: 100%;
    background-color: #D7D7D7;
    background-image: -webkit-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:    -moz-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:     -ms-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:      -o-radial-gradient(contain, #F2F2F2, #D1D1D1);
    background-image:         radial-gradient(contain, #F2F2F2, #D1D1D1);
}
body {
    margin: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: Arial, sans-serif;
    background-image:url(image download link in codepen preview below);
}
body:before {
    content: '';
    display: inline-block;
    width: 0; height: 100%;
    vertical-align: middle;
}

#pagination {
    display: inline-block;
    vertical-align: middle;
    border-radius: 4px;
    padding: 1px 2px 4px 2px;
    border-top: 1px solid #AEAEAE;
    border-bottom: 1px solid #FFFFFF;
    background-color: #DADADA;
    background-image: -webkit-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:    -moz-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:     -ms-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:      -o-linear-gradient(top, #DBDBDB, #E2E2E2);
    background-image:         linear-gradient(top, #DBDBDB, #E2E2E2);
}
#pagination a, #pagination i {
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    color: #7D7D7D;
    text-align: center;
    font-size: 10px;
    padding: 3px 0 2px 0;
    -webkit-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
         -o-user-select:none;
            user-select:none;
}

#pagination a {
    margin: 0 2px 0 2px;
    border-radius: 4px;
    border: 1px solid #E3E3E3;
    cursor: pointer;
    box-shadow: inset 0 1px 0 0 #FFF, 0 1px 2px #666;
    text-shadow: 0 1px 1px #FFF;
    background-color: #E6E6E6;
    background-image: -webkit-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:    -moz-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:     -ms-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:      -o-linear-gradient(top, #F3F3F3, #D7D7D7);
    background-image:         linear-gradient(top, #F3F3F3, #D7D7D7);
}
#pagination i {
    margin: 0 3px 0 3px;
}
#pagination a.current {
    border: 1px solid #E9E9E9;
    box-shadow: 0 1px 1px #999;
    background-color: #DFDFDF;
    background-image: -webkit-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:    -moz-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:     -ms-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:      -o-linear-gradient(top, #D0D0D0, #EBEBEB);
    background-image:         linear-gradient(top, #D0D0D0, #EBEBEB);
}

In this CSS code we have imported a background image and aligned each and every necessary attributes and elements which are the requirement for building the project and also the image we have imported we have padded it from all the side so that it doesn't get messy and project should be displayed in proper way.

Now to make it responsive let's code the JavaScript part.Using the class selector, we will apply the styling to our pagination container after adding some background colour to the project's body in CSS. In addition, we'll change the padding and margin of our project from the browser's default values to zero using the body selector.

JavaScript Code for Pagination

/* * * * * * * * * * * * * * * * *
 * Pagination
 * javascript page navigation
 * * * * * * * * * * * * * * * * */

var Pagination = {

    code: '',

    // --------------------
    // Utility
    // --------------------

    // converting initialize data
    Extend: function(data) {
        data = data || {};
        Pagination.size = data.size || 300;
        Pagination.page = data.page || 1;
        Pagination.step = data.step || 3;
    },

    // add pages by number (from [s] to [f])
    Add: function(s, f) {
        for (var i = s; i < f; i++) {
            Pagination.code += '<a>' + i + '</a>';
        }
    },

    // add last page with separator
    Last: function() {
        Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
    },

    // add first page with separator
    First: function() {
        Pagination.code += '<a>1</a><i>...</i>';
    },



    // --------------------
    // Handlers
    // --------------------

    // change page
    Click: function() {
        Pagination.page = +this.innerHTML;
        Pagination.Start();
    },

    // previous page
    Prev: function() {
        Pagination.page--;
        if (Pagination.page < 1) {
            Pagination.page = 1;
        }
        Pagination.Start();
    },

    // next page
    Next: function() {
        Pagination.page++;
        if (Pagination.page > Pagination.size) {
            Pagination.page = Pagination.size;
        }
        Pagination.Start();
    },



    // --------------------
    // Script
    // --------------------

    // binding pages
    Bind: function() {
        var a = Pagination.e.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
            a[i].addEventListener('click', Pagination.Click, false);
        }
    },

    // write pagination
    Finish: function() {
        Pagination.e.innerHTML = Pagination.code;
        Pagination.code = '';
        Pagination.Bind();
    },

    // find pagination type
    Start: function() {
        if (Pagination.size < Pagination.step * 2 + 6) {
            Pagination.Add(1, Pagination.size + 1);
        }
        else if (Pagination.page < Pagination.step * 2 + 1) {
            Pagination.Add(1, Pagination.step * 2 + 4);
            Pagination.Last();
        }
        else if (Pagination.page > Pagination.size - Pagination.step * 2) {
            Pagination.First();
            Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
        }
        else {
            Pagination.First();
            Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
            Pagination.Last();
        }
        Pagination.Finish();
    },



    // --------------------
    // Initialization
    // --------------------

    // binding buttons
    Buttons: function(e) {
        var nav = e.getElementsByTagName('a');
        nav[0].addEventListener('click', Pagination.Prev, false);
        nav[1].addEventListener('click', Pagination.Next, false);
    },

    // create skeleton
    Create: function(e) {

        var html = [
            '<a>◄</a>', // previous button
            '<span></span>',  // pagination container
            '<a>►</a>'  // next button
        ];

        e.innerHTML = html.join('');
        Pagination.e = e.getElementsByTagName('span')[0];
        Pagination.Buttons(e);
    },

    // init
    Init: function(e, data) {
        Pagination.Extend(data);
        Pagination.Create(e);
        Pagination.Start();
    }
};



/* * * * * * * * * * * * * * * * *
* Initialization
* * * * * * * * * * * * * * * * */

var init = function() {
    Pagination.Init(document.getElementById('pagination'), {
        size: 30, // pages size
        page: 1,  // selected page
        step: 3   // pages before and after current
    });
};

document.addEventListener('DOMContentLoaded', init, false);

With javascript, we'll first create a variable for pagination, then convert the data inside of it. Using functions, we'll then make the function for our javascript and produce a string of numbers for the project. the number will then be displayed inside of our website utilizing the display property.

In this JavaScript we have made it responsive and for that the id which we have defined in the HTML code we have called it and then we have set the size for the pagination and set the size of each page because when you go to next page the size should be same as the previous. Let's see the output.

We have successfully created our Pagination using HTML, CSS, and JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By – Harsh Sawant

Code By – Dmitriy Karpov

Create Partial Border Using CSS

Codewithrandom Blogs — Mon, 19 Jun 2023 05:25:01 +0000

Hey Coder, Welcome To Our Codewithrandom Blog, In Today's Blog We Are Going To See How To Create An Create Partial Border Using CSS.

A partial border is an border which covers and left , right , top and bottom with stylish borders that have an gap in-between. Which impact used moreover in quotation lines. Like wise we are going to add these Partial Border with Css.

So, Let's Begin Our Partial Border Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

HTML Code For Partial Border:-

<div class="content-wrapper mobile-wrapper"> <blockquote> <p>“It’s not enough to just sell to you today, I want to sell to you 20 years from now. 
When you take care of customers, they’ll be back.” </p> <cite>- Charles Gray</cite> </blockquote> </div>

Yeah ! , Now we have added out the HTML code. First we creating an div class with specific name on it. As we are adding quotes as an content so we using the blockquote tag to make it look like an quotes and inside the paragraph tag we were adding the quote with the help of cite tag for making it to represent like an respective author of the quotes by making it in right format.

And Now we closing our div tag and moving out to CSS part for making it attractive and adding the partial borders.

Partial Border CSS Code:-

$brand-yellow: #E5B539;
.content-wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 6em auto;
}
.mobile-wrapper {
    @media only screen and (max-width: 865px) {
        padding-left: 2%;
        padding-right: 2%;
    }
}
blockquote {
    border: 3px solid $brand-yellow;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 20px;
    max-width: 636px;
    position: relative;
    p {
        font-family: Helvetica, Arial, Sans-Serif;
        font-size: 26px;
        font-weight: 700;
        padding: 0 34px;
    }
    &:before {
        content: "";
        display: block;
        position: absolute;
        width: 96%;
        top: -3px;
        left: 0;
        border: 3px solid white;
        position: inherit;
    }
    &:after {
        content: "";
        display: block;
        position: absolute;
        width: 96%;
        bottom: -3px;
        left: 0;
        border: 3px solid white;
        position: inherit;
    }
    cite {
        display: block;
        text-align: right;
        padding-right: 7%;
    }
}

Now We have added the respective CSS code. So let me explain this code in steps so it would be easy to understand.

STEP 1: First of all we are adding the color for border using SCSS single line color adder and then we calling out the first div name and adding the properties like width , margin and max-width for making to adjust on the required screen size which is an responsive.

Then again with the help of CSS media query we adding properties for the Tab screen size and make some small alignments in contents using the padding property.

$brand-yellow: #E5B539;
.content-wrapper {
    width: 100%;
    max-width: 1024px;
    margin: 6em auto;
}
.mobile-wrapper {
    @media only screen and (max-width: 865px) {
        padding-left: 2%;
        padding-right: 2%;
    }
}

STEP 2: Secondly , We started adding properties that would make attractive and quotes alignment for that we just calling out the blockquote tag and adding the properties like border with color , margin , padding , max-width for screens , and positions. for adding border color , making content to relative over other element , then adjusting it with margins and padding.

Then We calling out the paragraph tag and adding attractive font families , sizes , colors , weights and padding to make it big and attractive with correctly aligned.

blockquote{
    border: 3px solid $brand-yellow;
    margin: 0 auto;
    padding-right: 0;
    padding-left: 20px;
    max-width: 636px;
    position: relative;
    p{
        font-family: Helvetica, Arial, Sans-Serif;
        font-size: 26px;
        font-weight: 700;
        padding: 0 34px;
    }
}

STEP 3: Now We just calling the before and after properties and adding the exact elements that needs to be added on the before and after sections. The elements were display , position , width , top , left, bottom , and borders which were commonly added in both the properties and making some changes inn values for the required format.

&:before{
        content: '';
    display: block;
    position: absolute;
    width: 96%;
    top: -3px;
    left: 0;
    border: 3px solid white;
        position: inherit;
    }
    &:after{
        content: '';
        display: block;
        position: absolute;
        width: 96%;
        bottom: -3px;
        left: 0;
        border: 3px solid white;
        position: inherit;
    }

STEP 4: Now we came to last step , Here we just calling out the cite tag which contains author name and making it aligning using the text-align and padding properties with display format.

cite{
    display: block;
    text-align: right;
     padding-right: 7%;
}
}

Now We have Completed our Project By adding the required source codes. So we would now move on to making the preview of our project in the below Output Section.

Now We have Successfully created our Partial Border Using CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen section above.

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE - Matt Stele

WRITTEN BY - Ragunathan S

Create Custom Mouse Cursor Effects JavaScript

Codewithrandom Blogs — Mon, 19 Jun 2023 05:01:41 +0000

Hello and welcome to the Codewithrandom Blogs. In this blog, we will create a Custom Mouse Cursor with a hover effect using html, css, and javascript. We'll make a custom cursor, and when the user hovers the cursor over an element, the zoom circle effect with text movement will appear.

To emphasize particular website elements, users can create their own cursors. These personalized cursors are used to both improve the website's content's readability and to attract users' attention to a particular section of the site.

I hope you must have got an idea about the project.

So, let's get started on the Custom Cursor Project by adding the source codes. First, we're going to use HTML code.

Step1: HTML code for Custom Cursor

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Read More Button</title>
      <link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
      <link rel="stylesheet" href="style.css" />
   <body>
    <div class="nav-wrapper">
      <nav>
        <a href="#" class="hover-this"><span>Home</span></a>
        <a href="#" class="hover-this"><span>Our Story</span></a>
        <a href="#" class="hover-this"><span>Studio</span></a>
        <a href="#" class="hover-this"><span>Contact</span></a>
        <div class="cursor"></div>
      </nav>
    </div>
    <script src="index.js"></script>
   </body>
</html>

First, we create a div with the (nav-wrapper) class to hold our navbar content. In this project, we used JavaScript to create a navbar that will be used to displayed the mouse effect.
Now we'll use the nav tag to create the navbar, which will contain four anchor tags.
We'll use a span tag inside the anchor tag to specify the various navbar buttons, such as home, our story, studio, and contact.
We also created a blank div tag to create our custom cursor.
Now, just before the end of our body, we'll add a link to our JavaScript.

<script src="index.js"></script>

Let's take a look at our output which was created solely with HTML.

So we have added the HTML tags and Their contents, Now it’s time to make it attractive by adding the CSS code.

Before we can style our page, we must add the Google Fonts and external styling links to the head section of our html.

<link href="https://fonts.googleapis.com/css?family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />

Step2: CSS Code for Custom Mouse Cursor Effects

Cascading Style Sheets (CSS) is a markup language for describing the presentation of a document written in HTML or XML. CSS, like HTML and JavaScript, is a key component of the World Wide Web.

Now we will look at our CSS code

html, body {
  margin: 0;
  padding: 0;
  cursor: none;
}

.nav-wrapper {
  width: 100%;
  height: 100vh;
  background: #161616;
}

nav {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
}

.hover-this {
  transition: all 0.3s ease;
}

span {
  display: inline-block;
  font-family: 'Russo One', sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 36px;
  text-transform: uppercase;
  pointer-event: none;
  transition: transform 0.1s linear;
}

.cursor {
  pointer-events: none;
  position: fixed;
  padding: 0.3rem;
  background-color: #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: transform 0.3s ease;
}

.hover-this:hover ~ .cursor {
  transform:translate(-50%, -50%) scale(8);
}

@media(min-width: 900px) {
  nav {
    display: flex;
    justify-content: space-around;
  }
}

@media(max-width: 900px) {
  nav {
    top: 30%;
  }

  .hover-this {
    width: 100%;
    padding: 20px 0;
    display: inline-block;
  }
}

Now that we've included our CSS code in our article, let's go over it step by step.

**Step1:** To begin, we'll set the padding and margin to zero using the html and body tags. We also set the cursor to be none.

html, body {
  margin: 0;
  padding: 0;
  cursor: none;
}

Step2: Using the class selector (.nav-wrapper), we will now set the width to "100%," the height to "100vh," and the background colour to "black".

.nav-wrapper {
  width: 100%;
  height: 100vh;
  background: #161616;
}

Step3: Now using the nav tag we will the width as "100%" of our navbar . The margin for top and bottom is set to zero and for left and right as "auto". Using the text aligned property we will align the text at the center. The position is also defined as "absoute" . We also leave the half of the space from the top using top (50%).

nav {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
}

Step4: The ".hover-this" class is used to add the ease transition to our anchor elements. Now, we'll style the various navbar contents with the span tag. We set the display to "inline-block." The font family is set to "Russo One," and the font weight is set to "400." We set the font size to "36px." Using the text-transform property, we now convert all of the content to "uppercase." We also included a linear transition for 0.1s.

.hover-this {
  transition: all 0.3s ease;
}

span {
  display: inline-block;
  font-family: 'Russo One', sans-serif;
  font-weight: 400;
  color: #fff;
  font-size: 36px;
  text-transform: uppercase;
  pointer-events: none;
  transition: transform 0.1s linear;
}

Step5: We now set the pointer events to "none" by using the ".hover" class. We set the position to fixed, padding to 0.3 rem, and background colour to "white." The border radius was also set to 50%. We added 0.3s to make the transition easier. Using the hover selector on our ".cursor" class, we added the transform and scale properties to change the position and size of the element when the cursor is hovered over it.

.cursor {
  pointer-events: none;
  position: fixed;
  padding: 0.3rem;
  background-color: #fff;
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: transform 0.3s ease;
}

.hover-this:hover ~ .cursor {
  transform:translate(-50%, -50%) scale(8);
}

Step6: Now we'll make our website more responsive. We define the maximum width as "900px" using the media query if the size of the window is equal to or less than the defined width. The top position of the navbar is set to 30%, and we use the (.hover-this) attribute to set the width to 100%, top and bottom padding to 20 px, and display to inline block.

@media(max-width: 900px) {
  nav {
    top: 30%;
  }

  .hover-this {
    width: 100%;
    padding: 20px 0;
    display: inline-block;
  }
}

Now we have completed our css code and belowhere is the output after styling our webpage.

Step3: Custom Mouse Cursor Effects JavaScript Code

Even after applying the CSS and HTML, our cursor won't work until we will not add the functionality to cursor.

Now let's take a look at our javascript code

(function () {

    const link = document.querySelectorAll('nav > .hover-this');
    const cursor = document.querySelector('.cursor');

    const animateit = function (e) {
          const span = this.querySelector('span');
          const { offsetX: x, offsetY: y } = e,
          { offsetWidth: width, offsetHeight: height } = this,

          move = 25,
          xMove = x / width * (move * 2) - move,
          yMove = y / height * (move * 2) - move;

          span.style.transform = `translate(${xMove}px, ${yMove}px)`;

          if (e.type === 'mouseleave') span.style.transform = '';
    };

    const editCursor = e => {
          const { clientX: x, clientY: y } = e;
          cursor.style.left = x + 'px';
          cursor.style.top = y + 'px';
    };

    link.forEach(b => b.addEventListener('mousemove', animateit));
    link.forEach(b => b.addEventListener('mouseleave', animateit));
    window.addEventListener('mousemove', editCursor);

})();

To begin, we will create a function and, within it, two constant variables that will store the values of our that will be returned by our document query selector. Now we'll make a constant variable called "animateit" and a function with (e) as an object handler. Using this keyword, we will select our span element within the function. Now we'll make two objects (offsetX, offsetY) and store their values in our object handler. Now we'll make a variable move with the value 25.

Now, the condition in the xMove is for horizontal cursor movement, and the condition in the yMove is for vertical cursor movement. We will now add cursor movement using the span.style.transform method. We've also added a condition: if the object handler is equal to mouseleave, the cursor will only move to that point.

Using the edit cursor now adds the zoom effect to our text, and we've added a mouse event listener because moving the mouse causes the animation to start and stop.

We now have the functionality in our sidebar drop-down menu. Let's watch a quick video to see how it works.

Now We have Successfully created our Custom Mouse Cursor Effects JavaScript. You can use this project for your personal portfolio to make it more appealing. We hope you understood the project, If you have any doubts feel free to comment!!

If you find out this Blog helpful, then make sure to search code random on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Follow: codewithrandom

Written By : arun

Code by : Abdumalik

Create Gold Text Effect Using CSS

Codewithrandom Blogs — Mon, 19 Jun 2023 04:54:09 +0000

Hey Coder, Welcome To Our Codewithrandom Blog, In Today's Blog, We Are Going To See How To Create An Gold Text Effect Using HTML and CSS. A Gold Text is nothing that actually displays the text in golden color with a golden background using CSS Gradient Properties.

So, Let's Begin Our Gold Text Effect Project By Adding The Source Codes. For That, First, We Are Using The Html Code.

Gold Text Html Code:-

FF<div>
    <h1 data-heading="Winner" contenteditable>Winner</h1>
</div>

Here We first create a div class with header tag H1 inside to make a larger font. Then we gave the data heading to the winner, The winner is actually a class name of the header So it will be used to make the gold effect on the particular text.

Now That's off for HTML Code. So we begin adding CSS code for the golden effect on the required text.

Gold Text CSS Code:-

html {
    height: 100%;
}

body {
    background: radial-gradient(ellipse at center, #443501 0%,#000000 100%);
    height: 100%;
}

div {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
font-family: 'Playfair Display', serif;
    position: relative;
    text-transform: uppercase;  
    font-size: 18vw;
    margin: 0;
    font-weight: 400;
}

h1:after {
    background: none;
    content: attr(data-heading);
    left: 0;
    top: 0;
    z-index: -1;
    position: absolute;
    text-shadow: 
        -1px 0 1px #c6bb9f, 
        0 1px 1px #c6bb9f, 
        5px 5px 10px rgba(0, 0, 0, 0.4),
        -5px -5px 10px rgba(0, 0, 0, 0.4);
}

Here We have added our CSS code for the golden effect. First, we have added the total web size to 100% for every content that meets this size and we fixed out the background color using the CSS gradient property. and These come under Html and Body section.

Second, we just fixed the contents to be centered using flex-box properties and the height would be fixed to the same as the height = 100%, and the width is even 100%. These are dining inside of the div class which contains the text inside.

The Particular code for the above explanation is given.

html {
    height: 100%;
}

body {
    background: radial-gradient(ellipse at center, #443501 0%,#000000 100%);
    height: 100%;
}

div {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Now We started adding the properties for the text to make it a golden effect. For that First, we fixed out the text background color using gradient property, and the color of the text is set out to be white but also the filling color is set to transparent.

and lastly, we just add the repeated properties like font family, size, and positions, and the position is set to relative other content with respective backgrounds.

h1 {
    background: linear-gradient(to bottom, #cfc09f 22%,#634f2c 24%, #cfc09f 26%, #cfc09f 27%,#ffecb3 40%,#3a2c0f 78%); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #fff;
font-family: 'Playfair Display', serif;
    position: relative;
    text-transform: uppercase;  
    font-size: 18vw;
    margin: 0;
    font-weight: 400;
}

The Last One we are doing is setting the background to none after the h1 hover. and these were done by (h1: after) which means after dragging the mouse point to the text the properties inside will be worked.

The properties inside of (h1:after) are the background which is set to none and calling the data-heading for the content and the left and right are set to 0 then we are adding the text shadow using gradient properties.

h1:after {
    background: none;
    content: attr(data-heading);
    left: 0;
    top: 0;
    z-index: -1;
    position: absolute;
    text-shadow: 
        -1px 0 1px #c6bb9f, 
        0 1px 1px #c6bb9f, 
        5px 5px 10px rgba(0, 0, 0, 0.4),
        -5px -5px 10px rgba(0, 0, 0, 0.4);
}

Here we have completed our CSS code and also the project is completed which means we have successfully added the Gold text effect to the particular text.

But additionally, we are adding one property which is editable text when we click on that text the text will be editable and the effects won't be changed in even new text also.

Optional Code! No need to Use

So for that, we are using JavaScript code which is given below.

JavaScript Code For Edit Gold Text:-

var h1 = document.querySelector("h1");

h1.addEventListener("input", function() {
    this.setAttribute("data-heading", this.innerText);
});

Here We first call out the H1 content using Js Query Selector property and set the h1 using the event listener property to make it editable.

The editable is fully done by displaying it so for that we fix the data-heading using the set Attribute property to call the content for making it editable and for displaying it, the line this. inner Text was used.

Now We have completed the Java Script Code. and Hence We came to the end of this project but before that, we make sure to preview our project in the given output section.

Now We have Successfully created our Gold Text Effect Using HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page

REFER CODE - Mandy Michael

WRITTEN BY - Ragunathan S

Circular Progress Bar Using HTML and CSS

Codewithrandom Blogs — Mon, 19 Jun 2023 04:40:38 +0000

Hello Coder, Welcome to the Codewithrandom blog. Today we are going to create Circular Progress Bar Using HTML and CSS. The progress of a process in an application is shown via a progress bar. The amount of the process that has been finished and the amount that is still to be done are indicated by a progress bar. We will design the various parts of the progress bar using HTML, and we may customize the progress bar using the CSS attributes.

This tutorial will assist you if you wish to use HTML and CSS to make a Circular Progress Bar. Here, I'll demonstrate how to create a straightforward CSS circleProgress Bar.

This animation will change from 0 to the meaning that you have been given when you load the page. Although a portion of the text is animated, this text does not. It is pretty simply constructed.

This tutorial will walk you through each step I took to create the circular progress bar. You must be familiar with basic HTML and CSS concepts in order to create it.

Step1: Adding the basic Structure with Styling.

To begin with, we must include a container for our circular progress bar. We'll employ the fundamental HTML idea for it. The container for our circular progress bar will be made using the div tag.

<div class="container">

    </div>

Our circular progress bar now has a container. we will now use CSS concepts to add styling to our container.

We will add some styling to our website using the universal selector. We'll include a box-sizing as "border-box" using the box-sizing property. Padding and margin both have a value of "0."

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color:lightblue;
  height: 100vh;
  align-items: center;

}

Using the class selector (.container). The display is set to "flex," and we have set the space around each progress bar using the justify-content attribute. We'll give our project a light blue background colour by using the background-color attribute.

Step2: Adding the Circle

To build the Circular Progress Bar's we have used HTML and CSS. A new div with the class (progress) will be created inside of our container. Our project will get a circle by use of the class selector in our CSS.

<div class="container">
        <div class="progress">

        </div>
    </div>
.progress {
  width: 200px;
  height: 200px;
  font-size: 30px;
  color: #fff;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #07070c;
  text-align: center;
  line-height: 200px;
  margin: 20px;
  box-shadow: 2px 2px 2px 2px white;
}

.progress::after {
  content: "";
}

The class selector is utilised (.progress). The dimensions are 200px for both the width and the height. The font-size attribute will be used to set the font size to 30px. We'll make advantage of the border-radius feature to give the circular appearance. To create the appearance of a circle, we will set its border radius to 50%. The circle we're using now has a black background. In order to give our circle a 3D appearance, we have also included a box shadow.

Step3: Adding Input to the Circle.

Now, using the span tag, we'll add a numeric input to our circle and adjust the value's range from 0 to 85. To add the progress motion to our circular progress bar, we will make 3 divs from within our progress div. A div with a class will be created first (overlay).

<div class="container">
        <div class="progress">
            <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>

We will now add a 50% width and 100% height using the overlay. The position has a "absolute" setting as well. Our circle progress bar's half is styled by the overlay only. Using the background-color property, we added a black background to our overlay.

.progress .overlay {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #07070c;
}

Step 4: Adding Animation Progress Bar to the Circle.

The div we specified in our container tag will be used to add the progress. Two divs have been made and given the classes "left" and "right." We're going to use them to give our circle a progress bar.

<div class="container">
        <div class="progress">
            <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>

A progress bar will now be added utilizing two distinct classes (.left &.right). The height is set to 100%, and the width is set to 50%. We'll add solid, 10 px-wide borders using the border attribute. We will use the border radius to add a border radius of 100px to the top and right corner of our element.

Now to add the animation to our project we have used the simple concepts of CSS using animation property. An element can progressively switch from one style to another through animation. You are free to make as many CSS changes as you like, whenever you like. You must first define the animation's keyframes before you can use CSS animation. The styles that the elements will have at specific moments are stored in keyframes.

Here we used the animation as a load for 0.5sec and then using the linear forward we will add another animation.

Now we will use keyframe we will add the different styles at different time intervals using the keyframes only.

The progress bar will adjust in accordance with the value as we add three additional circular progress bars, each with a different value. Try adding more circular bars if you can make a single progress bar to go with it. You'll be able to understand things better as a result.

HTML Code:

<html>

<head>
    <link rel="stylesheet" href="style.css">
    <title>Cicrular Progress Bar </title>
</head>

<body>
    <div class="container">
        <div class="progress">
            <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="progress">
            <span class="title timer" data-from="0" data-to="70" data-speed="1500">70</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>

        <div class="progress">
            <span class="title timer" data-from="0" data-to="70" data-speed="1500">70</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>

        <div class="progress">
            <span class="title timer" data-from="0" data-to="85" data-speed="1800">85</span>
            <div class="overlay"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
</body>

</html>
CSS:
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background-color:lightblue;
  height: 100vh;
  align-items: center;

}

.progress {
  width: 200px;
  height: 200px;
  font-size: 30px;
  color: #fff;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #07070c;
  text-align: center;
  line-height: 200px;
  margin: 20px;
  box-shadow: 2px 2px 2px 2px white;
}

.progress::after {
  content: "%";
}

.progress .title {
  position: relative;
  z-index: 100;
}

.progress .overlay {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #07070c;
}

.progress .left,
.progress .right {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 10px solid gray;
  border-radius: 100px 0px 0px 100px;
  border-right: 0;
  transform-origin: right;
}

.progress .left {
  animation: load1 1s linear forwards;
}

.progress:nth-of-type(2) .right,
.progress:nth-of-type(3) .right {
  animation: load2 0.5s linear forwards 1s;
}

.progress:last-of-type .right,
.progress:first-of-type .right {
  animation: load3 0.8s linear forwards 1s;
}

@keyframes load1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@keyframes load2 {
  0% {
    z-index: 100;
    transform: rotate(180deg);
  }

  100% {
    z-index: 100;
    transform: rotate(270deg);
  }
}

@keyframes load3 {
  0% {
    z-index: 100;
    transform: rotate(180deg);
  }

  100% {
    z-index: 100;
    transform: rotate(315deg);
  }
}

Now We have Successfully created our Circular Progress Bar using HTML & CSS. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

follow : codewithrandom

Written By : arun

Code by : Arun

Facebook Clone Using HTML and CSS With Source Code

Codewithrandom Blogs — Mon, 19 Jun 2023 04:32:05 +0000

Hello Coder, Welcome to the Codewithrandom blog, In today's blog we are going to see how to create a Facebook Clone Using Html and Css With Source Code. Before going into the project let's see what is a Facebook Clone page.

A Facebook Clone is a public profile specifically created for billions of users and even for businesses, celebrities, and a lot more. It contains a profile with photos, a feed for thought, and all the posts and tags from the account you have created and logged into it. Also, the profile for influencing people may change, they have no friends but fans and we can like or feed on it.

So likewise we are going to create this Facebook Clone project with html, css, and javascript. Now let's get started with adding our html code.

Facebook Clone Html Code:-

<main>
  <div id="device-bar-1">
    <button></button>
    <button></button>
    <button></button>
  </div>
  <header>
    <div class="tb">
      <div class="td" id="logo">
        <a href="#"><i class="fab fa-facebook-square"></i></a>
      </div>
      <div class="td" id="search-form">
        <form method="get" action="#">
          <input type="text" placeholder="Search Facebook">
          <button type="submit"><i class="material-icons">search</i></button>
        </form>
      </div>
      <div class="td" id="f-name-l"><span>Himalaya's facebook</span></div>
      <div class="td" id="i-links">
        <div class="tb">
          <div class="td" id="m-td">
            <div class="tb">
              <span class="td"><i class="material-icons">person_add</i></span>
              <span class="td"><i class="material-icons">chat_bubble</i></span>
              <span class="td m-active"><i class="material-icons">notifications</i></span>
            </div>
          </div>
          <div class="td">
            <a href="#" id="p-link">
              <img src="https://imagizer.imageshack.com/img921/3072/rqkhIb.jpg">
            </a>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div id="profile-upper">
    <div id="profile-banner-image">
      <img src="https://imagizer.imageshack.com/img921/9628/VIaL8H.jpg" alt="Banner image">
    </div>
    <div id="profile-d">
      <div id="profile-pic">
        <img src="https://imagizer.imageshack.com/img921/3072/rqkhIb.jpg">
      </div>
      <div id="u-name">Himalaya Singh</div>
      <div class="tb" id="m-btns">
        <div class="td">
          <div class="m-btn"><i class="material-icons">format_list_bulleted</i><span>Activity log</span></div>
        </div>
        <div class="td">
          <div class="m-btn"><i class="material-icons">lock</i><span>Privacy</span></div>
        </div>
      </div>
      <div id="edit-profile"><i class="material-icons">camera_alt</i></div>
    </div>
    <div id="black-grd"></div>
  </div>
  <div id="main-content">
    <div class="tb">
      <div class="td" id="l-col">
        <div class="l-cnt">
          <div class="cnt-label">
            <i class="l-i" id="l-i-i"></i>
            <span>Intro</span>
            <div class="lb-action"><i class="material-icons">edit</i></div>
          </div>
          <div id="i-box">
            <div id="intro-line">Front-end Engineer</div>
            <div id="u-occ">I love making applications with Angular.</div>
            <div id="u-loc"><i class="material-icons">location_on</i><a href="#">Bengaluru</a>, <a href="#">India</a></div>
          </div>
        </div>
        <div class="l-cnt l-mrg">
          <div class="cnt-label">
            <i class="l-i" id="l-i-p"></i>
            <span>Photos</span>
            <div class="lb-action" id="b-i"><i class="material-icons">keyboard_arrow_down</i></div>
          </div>
          <div id="photos">
            <div class="tb">
              <div class="tr">
                <div class="td"></div>
                <div class="td"></div>
                <div class="td"></div>
              </div>
              <div class="tr">
                <div class="td"></div>
                <div class="td"></div>
                <div class="td"></div>
              </div>
              <div class="tr">
                <div class="td"></div>
                <div class="td"></div>
                <div class="td"></div>
              </div>
            </div>
          </div>
        </div>
        <div class="l-cnt l-mrg">
          <div class="cnt-label">
            <i class="l-i" id="l-i-k"></i>
            <span>Did You Know<i id="k-nm">1</i></span>
          </div>
          <div>
            <div class="q-ad-c">
              <a href="#" class="q-ad">
                <img src="https://imagizer.imageshack.com/img923/1849/4TnLy1.png">
                <span>My favorite superhero is...</span>
              </a>
            </div>
            <div class="q-ad-c">
              <a href="#" class="q-ad" id="add_q">
                <i class="material-icons">add</i>
                <span>Add Answer</span>
              </a>
            </div>
          </div>
        </div>
        <div id="t-box">
          <a href="#">Privacy</a> <a href="#">Terms</a> <a href="#">Advertising</a> <a href="#">Ad Choices</a> <a href="#">Cookies</a> <span id="t-more">More<i class="material-icons">arrow_drop_down</i></span>
          <div id="cpy-nt">Facebook &copy; <span id="curr-year"></span></div>
        </div>
      </div>
      <div class="td" id="m-col">
        <div class="m-mrg" id="p-tabs">
          <div class="tb">
            <div class="td">
              <div class="tb" id="p-tabs-m">
                <div class="td active"><i class="material-icons">av_timer</i><span>TIMELINE</span></div>
                <div class="td"><i class="material-icons">people</i><span>FRIENDS</span></div>
                <div class="td"><i class="material-icons">photo</i><span>PHOTOS</span></div>
                <div class="td"><i class="material-icons">explore</i><span>ABOUT</span></div>
                <div class="td"><i class="material-icons">archive</i><span>ARCHIVE</span></div>
              </div>
            </div>
            <div class="td" id="p-tab-m"><i class="material-icons">keyboard_arrow_down</i></div>
          </div>
        </div>
        <div class="m-mrg" id="composer">
          <div id="c-tabs-cvr">
            <div class="tb" id="c-tabs">
              <div class="td active"><i class="material-icons">subject</i><span>Make Post</span></div>
              <div class="td"><i class="material-icons">camera_enhance</i><span>Photo/Video</span></div>
              <div class="td"><i class="material-icons">videocam</i><span>Live Video</span></div>
              <div class="td"><i class="material-icons">event</i><span>Life Event</span></div>
            </div>
          </div>
          <div id="c-c-main">
            <div class="tb">
              <div class="td" id="p-c-i"><img src="https://imagizer.imageshack.com/img921/3072/rqkhIb.jpg" alt="Profile pic"></div>
              <div class="td" id="c-inp">
                <input type="text" placeholder="What's on your mind?">
              </div>
            </div>
            <div id="insert_emoji"><i class="material-icons">insert_emoticon</i></div>
          </div>
        </div>
        <div>
          <div class="post">
            <div class="tb">
              <a href="#" class="td p-p-pic"><img src="https://imagizer.imageshack.com/img923/2452/zifFKH.jpg" alt="Rajeev's profile pic"></a>
              <div class="td p-r-hdr">
                <div class="p-u-info">
                  <a href="#">Rajeev Singh</a> shared a memory with <a href="#">Himalaya Singh</a>
                </div>
                <div class="p-dt">
                  <i class="material-icons">calendar_today</i>
                  <span>January 28, 2015</span>
                </div>
              </div>
              <div class="td p-opt"><i class="material-icons">keyboard_arrow_down</i></div>
            </div>
            <a href="#" class="p-cnt-v">
              <img src="https://imagizer.imageshack.com/img923/8568/6LwtUa.jpg">
            </a>
            <div>
              <div class="p-acts">
                <div class="p-act like"><i class="material-icons">thumb_up_alt</i><span>25</span></div>
                <div class="p-act comment"><i class="material-icons">comment</i><span>1</span></div>
                <div class="p-act share"><i class="material-icons">reply</i></div>
              </div>
            </div>
          </div>
        </div>
        <div id="loading"><i class="material-icons">autorenew</i></div>
      </div>
      <div class="td" id="r-col">
        <div id="chat-bar">
          <div id="chat-lb"><i class="material-icons">contacts</i><span>Contacts</span></div>
          <div id="cts">
            <div class="on-ct active">
              <a href="#"><img src="https://imagizer.imageshack.com/img924/4231/JnFicn.jpg"></a>
            </div>
            <div class="on-ct active">
              <a href="#"><img src="https://imagizer.imageshack.com/img923/332/1abR4H.png"></a>
            </div>
            <div class="on-ct">
              <a href="#"><img src="https://imagizer.imageshack.com/img924/4231/JnFicn.jpg"></a>
            </div>
            <div class="on-ct active">
              <a href="#"><img src="https://imagizer.imageshack.com/img923/332/1abR4H.png"></a>
            </div>
            <div class="on-ct active">
              <a href="#"><img src="https://imagizer.imageshack.com/img924/4231/JnFicn.jpg"></a>
            </div>
            <div class="on-ct">
              <a href="#"><img src="https://imagizer.imageshack.com/img924/4231/JnFicn.jpg"></a>
            </div>
            <div class="on-ct">
              <a href="#"><img src="https://imagizer.imageshack.com/img923/332/1abR4H.png"></a>
            </div>
            <div class="on-ct" id="ct-sett"><i class="material-icons">settings</i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="device-bar-2"><i class="fab fa-apple"></i></div>
</main>

Now we have successfully added our html code. In this coding snippet, we first begin with adding the elements for the logo, notifications, and search bar using the main tag. All those contents belong inside the main section throughout the code.

Then we start adding the div tags for elements that the contents need to be added for this project. Inside some div tags, we were including the img tags for adding images that the project must contain, also some paragraph tags, header tags, and more were added for the contents that need to be included.

For font family and icons, it has separate links that are added from the other sources. And mainly the icons which are added from another source must come under the I tags with the name for it. Then the regular tags were added as per the contents implemented.

So that's off for html, now we move on to the css code for styling the elements.

Facebook Clone CSS Code:-

* {
  outline: none;
}

body {
  margin: 40px 0px;
  background-color: #385591;
}

body,
input,
button {
  font-family: Helvetica;
}

img {
  display: block;
  width: 100%;
  border: 0;
}

.tb {
  display: table;
  width: 100%;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  vertical-align: middle;
}

a {
  text-decoration: none;
}

button {
  padding: 0;
  border: 0;
  background-color: transparent;
}

::placeholder {
  color: #f1f1f1;
}

main {
  width: 1280px;
  margin: 0 auto;
  background-color: #e9ebee;
  box-shadow: 0px 8px 30px #1d2d4f;
  border-radius: 4px;
  overflow: hidden;
}

#device-bar-1 {
  text-align: right;
  padding: 6px;
  background-color: #000;
  overflow: hidden;
}

#device-bar-1 button {
  width: 15px;
  height: 15px;
  float: left;
  margin: 6px;
  border-radius: 50%;
  cursor: pointer;
}

#device-bar-1 button:first-child {
  background-color: #f35d5b;
}

#device-bar-1 button:nth-child(2) {
  background-color: #f6bd3a;
}

#device-bar-1 button:last-child {
  background-color: #44cc45;
}

/* Header */
header {
  padding: 15px 20px;
  background-color: #4267b2;
}

#logo {
  width: 30px;
}

#logo a {
  display: block;
}

#logo a i {
  font-size: 34px;
  color: #fff;
}

#search-form form {
  position: relative;
  width: 280px;
  font-size: 16px;
  padding: 8px 15px;
  padding-right: 37px;
  background-color: #3b5ca0;
  border-radius: 20px;
  margin-left: 15px;
}

#search-form form input {
  width: 100%;
  color: #fff;
  border: 0;
  background-color: transparent;
}

#search-form form button {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #f1f1f1;
  height: 22px;
  line-height: 1;
  cursor: pointer;
}

#search-form form button i {
  font-size: 22px;
}

#f-name-l {
  width: 1px;
  color: #fff;
  font-weight: bold;
  white-space: pre;
  padding-right: 20px;
}

#f-name-l span {
  padding-right: 28px;
  border-right: 1px solid #35518b;
}

#i-links {
  width: 1px;
}

#m-td {
  padding-right: 20px;
}

#m-td span {
  position: relative;
  cursor: pointer;
}

#m-td span.m-active:before {
  content: "5";
  position: absolute;
  top: -8px;
  right: 0px;
  color: #fff;
  font-size: 12px;
  padding: 4px 4px 3px 4px;
  background-color: #ff1e0e;
  border-radius: 3px;
  line-height: 1;
}

#i-links i {
  color: #fff;
  font-size: 24px;
  padding: 0px 8px;
  vertical-align: middle;
}

#p-link {
  display: block;
  width: 34px;
  height: 34px;
  background-color: #f1f1f1;
  border-radius: 50%;
  overflow: hidden;
}

#p-link img {
  width: 100%;
}

/* Header finished */

/* Profile image header */
#profile-upper {
  position: relative;
}

#profile-d {
  position: absolute;
  left: 59px;
  bottom: 0px;
  right: 0px;
  height: 180px;
  z-index: 2;
}

#profile-banner-image {
  height: 360px;
  overflow: hidden;
  z-index: 1;
}

#profile-banner-image img {
  width: 100%;
  margin-top: -20%;
}

#profile-pic {
  width: 180px;
  height: 180px;
  border-radius: 3px;
  margin-top: 28px;
  overflow: hidden;
  box-shadow: 0 0 0 5px #fff;
}

#profile-pic img {
  width: 100%;
}

#u-name {
  position: absolute;
  top: 120px;
  left: 208px;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
}

#m-btns {
  position: absolute;
  right: 56px;
  bottom: 20px;
  width: 211px;
}

#m-btns .td {
  padding: 0 8px;
}

.m-btn {
  cursor: pointer;
  color: #0e0e0e;
  font-size: 14px;
  white-space: pre;
  padding: 5px 8px 6px 8px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 2px;
}

.m-btn i {
  font-size: 16px;
  margin-right: 1px;
  vertical-align: middle;
}

.m-btn span {
  position: relative;
  top: 1px;
}

#edit-profile {
  position: absolute;
  right: 20px;
  bottom: 21px;
  line-height: 1;
  cursor: pointer;
}

#edit-profile i {
  display: block;
  color: rgba(255, 255, 255, 0.7);
}

#black-grd {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  height: 300px;
  background: linear-gradient(rgba(0, 0, 0, 0) 71%, rgba(0, 0, 0, 0.53));
  z-index: 1;
}
/* Profile image header finished */

/* Content area */
#main-content {
  padding: 55px 0px 0px 55px;
}

#l-col,
#m-col,
#r-col {
  vertical-align: top;
}

#l-col {
  width: 340px;
  padding-top: 6px;
}

.l-cnt {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 3px #ddd;
}

.l-mrg {
  margin-top: 28px;
}
.l-i {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 2px;
  background-size: auto;
  background-repeat: no-repeat;
  vertical-align: middle;
}

#l-i-i {
  background-image: url("https://imagizer.imageshack.com/img922/7749/C8tmwX.png");
  background-position: 0 -87px;
}

#l-i-p {
  background-image: url("https://imagizer.imageshack.com/img923/7847/sRapnM.png");
  background-position: 0 0;
}

#l-i-k {
  background-image: url("https://imagizer.imageshack.com/img922/5617/QpPVKn.png");
}

.cnt-label {
  position: relative;
  padding-right: 24px;
  margin-bottom: 15px;
}

.cnt-label span {
  position: relative;
  top: 2px;
  color: #707070;
  font-size: 18px;
}

.lb-action {
  position: absolute;
  top: 0px;
  right: 0px;
  cursor: pointer;
}

.lb-action i {
  display: block;
  color: #ccc;
  font-size: 18px;
}

#b-i i {
  font-size: 24px;
}

#i-box {
  color: #797979;
  font-size: 14px;
  line-height: 1.3;
}

#intro-line {
  margin-top: 17px;
}

#u-occ {
  margin: 10px 0px;
}

#u-occ a {
  color: #2196f3;
}

#u-loc i {
  color: #2196f3;
  font-size: 16px;
  margin-left: -3px;
  margin-right: 2px;
  margin-top: -1px;
  vertical-align: middle;
}

#u-loc a {
  position: relative;
  top: 1px;
  color: #2196f3;
}

#photos {
  padding: 2px;
  margin: 15px -20px -20px -20px;
}

#photos .td {
  width: 33.333%;
  height: 112px;
  border: 2px solid #fff;
  box-sizing: border-box;
  background-color: #f1f1f1;
  background-position: 50% 25%;
  background-size: cover;
}

#photos .tb .tr:nth-child(1) .td:nth-child(1) {
  background-image: url("https://imagizer.imageshack.com/img922/8637/NN4aPj.jpg");
}

#photos .tb .tr:nth-child(1) .td:nth-child(2) {
  background-image: url("https://imagizer.imageshack.com/img923/528/iJy0X5.jpg");
}

#photos .tb .tr:nth-child(1) .td:nth-child(3) {
  background-image: url("https://imagizer.imageshack.com/img923/9781/26phSy.jpg");
}

#photos .tb .tr:nth-child(2) .td:nth-child(1) {
  background-image: url("https://imagizer.imageshack.com/img921/8417/svxO7y.jpg");
}

#photos .tb .tr:nth-child(2) .td:nth-child(2) {
  background-image: url("https://imagizer.imageshack.com/img921/6488/i2Hb4U.jpg");
}

#photos .tb .tr:nth-child(2) .td:nth-child(3) {
  background-image: url("https://imagizer.imageshack.com/img921/2453/J7PICR.jpg");
}

#photos .tb .tr:nth-child(3) .td:nth-child(1) {
  background-image: url("https://imagizer.imageshack.com/img921/3021/8uZZY2.jpg");
}

#photos .tb .tr:nth-child(3) .td:nth-child(2) {
  background-image: url("https://imagizer.imageshack.com/img923/3992/22mL29.jpg");
}

#photos .tb .tr:nth-child(3) .td:nth-child(3) {
  background-image: url("https://imagizer.imageshack.com/img921/2711/JXSt41.jpg");
}

#k-nm {
  color: #b8b8b8;
  font-size: 15px;
  font-style: normal;
  margin-left: 8px;
  cursor: pointer;
}

.q-ad-c {
  padding: 2px;
}

.q-ad {
  display: block;
  padding: 8px;
  border: 1px solid #eeeeee;
  background-color: #fafafa;
  border-radius: 4px;
}

.q-ad img {
  display: inline;
  width: 24px;
  height: 24px;
  margin-right: 5px;
  vertical-align: middle;
}

.q-ad span {
  position: relative;
  top: 1px;
  color: #242424;
  font-size: 14px;
  text-align: center;
}

#add_q {
  color: #858585;
  text-align: center;
  margin-top: 10px;
  background-color: #fff;
  border-color: #f1f1f1;
}

#add_q i {
  font-size: 17px;
  margin-right: -3px;
  vertical-align: middle;
}

#add_q span {
  color: #858585;
  font-size: 12.4px;
  position: relative;
  top: -1px;
}

#t-box {
  font-size: 14px;
  color: #686868;
  padding-top: 24px;
  line-height: 18px;
}

#t-box a {
  margin-right: 5px;
}

#t-box a,
#t-more {
  color: #999;
}

#t-more {
  cursor: pointer;
}

#t-more i {
  font-size: 15px;
  vertical-align: middle;
}

#cpy-nt {
  margin-top: 4px;
}

#m-col {
  padding: 0px 55px;
}

.m-mrg {
  margin-bottom: 28px;
}

#p-tabs {
  position: relative;
  font-size: 13px;
  color: #919191;
  text-align: center;
  padding: 13px 20px;
  margin-top: -64px;
  background-color: #fff;
  box-shadow: 0px 3px 3px #ddd;
  z-index: 3;
}

#p-tabs-m .td {
  width: 16.6666667%;
  cursor: pointer;
}

#p-tabs-m .td.active {
  color: #ee6000;
}

#p-tabs-m span {
  position: relative;
}

#p-tabs-m .td.active span:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: -13px;
  height: 4px;
  background-color: #ee6000;
}

#p-tabs-m .td i {
  display: block;
  font-size: 24px;
  margin-bottom: 5px;
}

#p-tab-m {
  width: 1px;
  color: #ccc;
  cursor: pointer;
}

#p-tab-m i {
  margin-right: -4px;
}

#composer {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 3px #ddd;
}

#c-tabs-cvr {
  padding-bottom: 12px;
  border-bottom: 1px solid #ececec;
}

#c-tabs {
  width: auto;
  color: #919191;
}

#c-tabs .td {
  position: relative;
  width: 1px;
  padding: 0px 15px;
  white-space: pre;
  cursor: pointer;
}

#c-tabs .td:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0px;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background-color: #eaeaea;
}

#c-tabs .td:first-child {
  padding-left: 0px;
}

#c-tabs .td:last-child {
  padding-right: 0;
}

#c-tabs .td:last-child:after {
  display: none;
}

#c-tabs .td span {
  position: relative;
}

#c-tabs .td.active {
  color: #373737;
}

#c-tabs .td.active span:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: -20px;
  width: 10px;
  height: 10px;
  border: 1px solid transparent;
  border-color: transparent #ececec #ececec transparent;
  margin: 0 auto;
  background-color: #fff;
  transform: rotateZ(45deg);
}

#c-tabs .td i {
  font-size: 21px;
  margin-right: 4px;
  vertical-align: middle;
}

#c-tabs .td span {
  position: relative;
  top: 1px;
  font-size: 15px;
}

#c-c-main {
  position: relative;
  padding-top: 15px;
}

#p-c-i {
  width: 50px;
  border-radius: 50%;
  overflow: hidden;
}

#p-c-i img {
  display: block;
  width: 100%;
}

#c-inp {
  padding-left: 20px;
}

#c-inp input {
  width: 100%;
  font-size: 20px;
  border: 0;
  padding: 0;
  margin: 0;
}

#c-c-main input::placeholder {
  color: #666;
}

#insert_emoji {
  position: absolute;
  right: -2px;
  bottom: -10px;
  cursor: pointer;
}

#insert_emoji i {
  display: block;
  color: #ccced6;
  font-size: 21px;
}

.post {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 3px 3px #ddd;
}

.p-p-pic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
}

.p-p-pic img {
  width: 100%;
  display: block;
  border: 0;
}

.p-r-hdr {
  vertical-align: top;
  padding-left: 20px;
}

.p-u-info {
  color: #5a5959;
  font-size: 15px;
  margin-bottom: 7px;
}

.p-u-info a {
  color: #4267b2;
}

.p-dt {
  color: #a8a8a8;
  font-size: 13px;
}

.p-dt i {
  font-size: 14px;
  margin-right: 2px;
}

.p-dt span {
  position: relative;
  top: -2px;
}

.p-opt {
  position: relative;
  right: -3px;
  width: 1px;
  color: #ccc;
  cursor: pointer;
  vertical-align: top;
}

.p-cnt-v {
  display: block;
  margin: 20px -20px;
  cursor: pointer;
}

.p-acts {
  overflow: hidden;
}

.p-act {
  width: 24px;
  height: 24px;
  color: #a3a6aa;
  cursor: pointer;
}

.p-act span {
  position: relative;
  top: 1px;
  width: 20px;
  font-size: 15px;
  color: #a3a6aa;
}

.like {
  margin-right: 36px;
}

.like,
.comment {
  width: 50px;
  float: left;
}

.p-act i {
  vertical-align: middle;
}

.like i,
.comment i {
  margin-right: 6px;
}

.share {
  float: right;
  transform: rotateY(180deg);
  margin-right: -1px;
}

#loading {
  text-align: center;
  padding: 40px 0px;
}

#loading i {
  color: #4267b2;
  font-size: 32px;
  display: block;
}
/* Content area finished */

/* Chat bar */
#r-col {
  position: relative;
  width: 150px;
}

#chat-bar {
  position: absolute;
  top: -55px;
  right: 55px;
  bottom: 0px;
  left: 0px;
}

#chat-lb {
  color: #3a5795;
  font-size: 16px;
  text-align: center;
  margin: 23px 0px;
}

#chat-lb i {
  font-size: 18px;
  margin-right: 4px;
  vertical-align: middle;
}

#chat-lb span {
  position: relative;
  top: 2px;
}

.on-ct {
  position: relative;
  width: 50px;
  height: 50px;
  margin: 28px auto 0 auto;
  border-radius: 50%;
}

#cts .on-ct:first-child {
  margin-top: 0px;
}

.on-ct img {
  border-radius: 50%;
}

.on-ct.active:after {
  content: "";
  position: absolute;
  top: 3px;
  right: 2px;
  width: 10px;
  height: 10px;
  background-color: #2ecd18;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 3px #e9ebee;
  z-index: 1;
}

#ct-sett {
  margin-top: 55px;
}

#ct-sett i {
  color: #3a5795;
  padding: 13px;
  background-color: #d8e4ff;
  border-radius: 50%;
  cursor: pointer;
}
/* Chat bar finished */

/* Footer */
#device-bar-2 {
  padding: 9px 0px 13px 0px;
  background-color: #000;
}

#device-bar-2 i {
  display: block;
  width: 40px;
  color: #fff;
  font-size: 40px;
  text-align: center;
  margin: 0 auto;
}
/* Footer finished */

Now we have added our css code successfully. In this code, we first mark the outline property to none in order to avoid cursor blink which means it reflects in black color when we touch on it. Then in the body section, we assigned values to the margin as required and start styling every element present in the html code.

We are using id instead of class in the div tags which is on html code. So we mention those ids with (hashtag) in the css part. For a better profile, there is more alignment css properties that take place which you can see from the 10th line of code to the end of code. For a better view, we implemented the flex-box code in every element.

Afterward, the regular and common properties were just added for the elements, but animate properties with parent and child classes were implemented to get the best animation experience on it.

So that's for css, but here we add some small lines of javascript code for specific code which are given below.

Note:- This is an optional code for adding in our Facebook clone, we use this code for the footer of the Facebook clone where every year's date changes automatically, hope you get it.

JavaScript Code:

var date = new Date();
document.getElementById("curr-year").innerHTML = date.getFullYear();

Here there are just two lines of javascript code and it is mainly represented for adding dates in the project. Simple, just we creating a new date function and with the help of javascript id property we are getting a specific id presented in html code and making to show the date with the full year with the help of js property - inner HTML.

That's all for javascript, now we can preview our project in the output section.

Now we have successfully created our Facebook Clone Using Html And Css. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

If you find out this blog helpful? , then make sure to search Codewithrandom on Google for front-end projects with source codes and make sure to follow the codewithrandom Instagram page.

Refer code - Himalaya singh

Written by - ragunathan s