DEV Community: Ajay Sharma

Destructuring in JavaScript

Ajay Sharma — Sat, 22 Oct 2022 07:21:00 +0000

How to Create Stopwatch Using HTML, CSS and JavaScript.

Ajay Sharma — Thu, 02 Sep 2021 18:09:39 +0000

Hello Everyone, In this Post We Will be Seeing How to Create Stopwatch Using HTML, CSS and JavaScript.

Here is The Live Link of Page https://stopwatch-using-js.netlify.app/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

Choose Any Text Editor (VSCode Recommended).
Create 3 Files in Current Project Directory, index.html, style.css and app.js.
Use Below HTML, CSS and JS Code To Build Your Page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stopwatch</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="watch">
            <div class="hourDiv">
                <h3 class="hour">01</h3>
                <p class="hourTitle">Hour</p>
            </div>
            <div class="minuteDiv">
                <h3 class="minute">30</h3>
                <p class="minuteTitle">Min</p>
            </div>
            <div class="secondDiv">
                <h3 class="second">01</h3>
                <p class="secondTitle">Sec</p>
            </div>
            <div class="milliSecondDiv">
                <h3 class="milliSecond">99</h3>
                <p class="milliSecondTitle">Millis</p>
            </div>
        </div>
        <div class="buttons">
            <button class="start button">Start</button>
            <button class="pause button">Pause</button>
            <button class="stop button">Reset</button>
        </div>
    </div>
    <script src="./app.js"></script>
    <script>
        let bodyWidth = screen.width;
        if(bodyWidth === 250) {
            alert("Web App Not Compatiable Choose Device Above 300 Width Otherwise UI Design Will be Messy.");
        }
    </script>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap');
:root {
    --mainColor1: #3DBE29;
    --mainColor2: #EDC126; 
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    height: 100%;
    width: 100%;
}
body {
    font-family: 'Zen Loop', cursive;
    background-color: #CAD5E2;
    text-transform: uppercase;
    min-height: 100%;
    overflow: hidden;
}
.container {
    width: 60%;
    height: 100%;
    margin: 0 auto;
}
.watch {
    text-align: center;
    font-size: 5rem;
    font-weight: lighter;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hourDiv, 
.minuteDiv, 
.secondDiv, 
.milliSecondDiv {
    width: 20%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.hour, 
.minute, 
.second, 
.milliSecond {
    padding: 5px;
    background-color: var(--mainColor1);
}
.hourTitle, 
.minuteTitle, 
.secondTitle, 
.milliSecondTitle {
    background-color: var(--mainColor2);
    font-size: 3rem;
    padding: 5px;
    font-weight: bold;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.button {
    border: none;
    border-radius: 10px;
    font-size: 3rem;
    padding: 10px;
    width: 180px;
    font-weight: bold;
    font-family: 'Zen Loop', cursive;
}
.start {
    margin-right: 5%;
    color: var(--mainColor1);
    transition: 0.5s ease-in-out;
}
.start:hover {
    background-color: var(--mainColor2);
    color: #fff;
}
.pause {
    transition: 0.5s ease-in-out;
}
.pause:hover {
    background-color: #E03B8B;
    color: #fff;
}
.stop {
    margin-left: 5%;
    color: var(--mainColor2);
    transition: 0.5s ease-in-out;
}
.stop:hover {
    background-color: var(--mainColor1);
    color: #fff;
}
.buttons {
    margin-top: 2%;
    margin-bottom: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
    }
    .watch {
        font-size: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .hourTitle, 
    .minuteTitle, 
    .secondTitle, 
    .milliSecondTitle {
        font-size: 2rem;
    }
    .button {
        margin-top: 5%;
        margin-bottom: 5%;
        width: 50%;
    }
    .start, .stop {
        margin: 0;
    }
    .buttons {
        margin-top: 10%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}
@media screen and (max-width: 550px) {
    .watch {
        font-size: 2rem;
    }
    .hourTitle, 
    .minuteTitle, 
    .secondTitle, 
    .milliSecondTitle {
        font-size: 1.5rem;
    }
}

// Timer Field
let hourElement = document.querySelector(".hour");
let minuteElement = document.querySelector(".minute");
let secondElement = document.querySelector(".second");
let millisecondElement = document.querySelector(".milliSecond");

// Button Field
let startButton = document.querySelector(".start");
let pauseButton = document.querySelector(".pause");
let stopButton = document.querySelector(".stop");

// Counter Variable
let hour = 00;
let minute = 00;
let second = 00;
let millisecond = 00;
let interval;

window.onload = () => clearFields();

startButton.onclick  = function() {
    clearInterval(interval); // If Some Error Happen and Interval is Setup, It Will Clear That Interval
    interval = setInterval(startTimer, 10); // 
};
pauseButton.onclick = function() { 
    clearInterval(interval); // On Clicking Pause Buttom We Will Clear Interval
};
stopButton.onclick = function() {
    clearInterval(interval); // Clear Interval
    clearFields(); // Clear Timer Fields
}
function startTimer() {
    millisecond++;
    if(millisecond < 9) {
        millisecondElement.innerText = "0" + millisecond;
    }
    if(millisecond > 99) {
        second++;
        secondElement.innerText = "0" + second;
        millisecond = 0;
        millisecondElement.innerText = "0" + millisecond;
    }
    if(second > 60) {
        minute++;
        minuteElement.innerText = "0" + minute;
        second = 0;
        secondElement.innerText = "0" + second;
    }

    if(millisecond > 9) {
        millisecondElement.innerText = millisecond;
    }
    if (second > 9){
        secondElement.innerText = second;
    }
    if (minute > 9){
        minuteElement.innerText = minute;
    }
    if(hour > 9) {
        hourElement.innerText = hour;
    }
}

function clearFields() {
    hourElement.innerText = "00";
    minuteElement.innerText = "00";
    secondElement.innerText = "00";
    millisecondElement.innerText = "00";
}

How to Create Background-Changer Using HTML, CSS and JavaScript.

Ajay Sharma — Tue, 20 Jul 2021 16:36:32 +0000

Hello Everyone, In this Post We Will be Seeing How to Create Background Changer Using HTML, CSS and JavaScript.

Here is The Live Link of Page https://bg-changer-js.netlify.app/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

Choose Any Text Editor (VSCode Recommended).
Create 3 Files in Current Project Directory, index.html, style.css and app.js.
Use Below HTML, CSS and JS Code To Build Your Page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Changer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <div class="title">
            Click To Change Background
        </div>
    </div>
    <script src="./app.js"></script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#container {
    cursor: pointer;
    border: none;
    width: 50%;
    margin: 0 auto;
    margin-top: 50vh;
    background-color: #1B98F5;
    box-shadow: 0 0 20px #fff;
}
.title {
    color: #fff;
    font-size: 30px;
    font-weight: lighter;
    text-align: center;
    padding: 20px;
}

let containerElement = document.getElementById("container");

containerElement.addEventListener("click", changeColor);

function changeColor() {
    let random1 = Math.floor(Math.random() * 255 + 1);
    let random2 = Math.floor(Math.random() * 255 + 1);
    let random3 = Math.floor(Math.random() * 255 + 1);
    document.body.style.backgroundColor = `rgb(${random1}, ${random2}, ${random3})`;
}

JavaScript Array Methods.

Ajay Sharma — Sat, 17 Jul 2021 06:38:13 +0000

Hello Everyone
In This Article We Will be Seeing Different Array Methods.

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Create Array Either Using Square Braces or Using new Array() Class

let arr = [1,2,3,4,5];
let arr = new Array(length or element);

Methods

1. push(element)

arr.push(10); // Insert Element at Last of Array

2. pop()

arr.pop(); // Remove Last Element of Array and Return It

3. shift()

arr.shift(); // Remove First Element of Array and Return It

4. unshift(element)

arr.unshift(20); // Insert Element at First Position in Array

5. length ( Not a Method but a Property )

arr.length; // Return Length of Array

6. fill(item)

arr.fill(0); // Fill Entire Array With 0 or with Given Item

7. concat(array) ( Can Take Single Array or Multiple Arrays and Always Return New Array )

let arr1 = [1,2,3];
let newArray=arr1.concat([4,5,6]); // O/P = [1,2,3,4,5,6]

let arr2 = [1,2];
let newArray=arr2.concat([4,5], [7,8]); // O/P = [1,2,4,5,7,8]

8. find() (Take a Function Which Execute and Return First Value Which Satisfies Condition)

let arr = [1,2,3,4,5];
let found = arr.find(element => element > 2);
console.log(found); // O/P = 3

9. findIndex() (Take a Function Which Execute and Return First Value Index Which Satisfies Condition)

let arr = [1,2,3,4,5];
let found = arr.findIndex(element => element > 2);
console.log(found); // O/P = 2

10. sort() // Sort According to Aplhabet Order

let arr = [1,3,2,4,6];
arr.sort();
console.log(arr); // O/P = [1,2,3,4,6]

Note:- But This Method Will Not Sort Value Which is of 2 Digit, So We Need to Make Our Custom Function and Pass into Sort Method.

let arr = [1,4,2,45,6,7];
arr.sort((a,b) => a-b); // Change a or b according to you if you want in Ascending or Descending Order.
console.log(arr); // O/P = [1,2,4,6,7,45];

11. reverse()

let arr = [1,5,2,4,3];
let reversedArray = arr.reverse(); 
// Reverse Array and return Reference to Same Array
console.log(reversedArray); // O/P = [5,4,3,2,1]

12. slice(start, end) ( Extract Small Chunk of Array in Form of Array )

start => Starting Index From 0 and It is Included
end => Ending Index Which is Length - 1 and It is Not Included

let arr = [1,2,3,4,5];
let slicedArray = arr.slice(0,3);
console.log(slicedArray); // O/P = [1,2,3]

13. splice(start, deleteCount: Optional, element: Optional) ( Remove Element From Array and Can Also Insert New Elements In the Place of Removed Element )

let arr = [1,2,3,4,5];
let splicedArray1 = arr.splice(2); 
console.log(splicedArray1);

/*
Will Remove Array Element From Index 2 to End and Return in Form of Array.
O/P = [3,4,5]
*/

let splicedArray2 = arr.splice(2, 2 10, 30);
console.log(splicedArray2);

/*
Will Remove Array Element From Index 2 to End and Return in Form of Array.
O/P = [3, 4] // Spliced Array
O/P = [1,2,10,30,5] // Original Array After Inserting New Element InPlace of Removed Element.
*/

14. indexOf(element); ( Return Index of Given Element, If Element Not Found Return -1 )

let arr = [1,2,3,4,5];
console.log(arr.indexOf(5)); // O/P = 4

15. includes(element, startIndex: Optional) ( Search For Given Element If Found Return True Otherwise False )

let arr = [1,2,3,4,5];
console.log(arr.includes(5)); // O/P = true

console.log(arr.includes(2, 3)); // O/P = false, Because We Are Searching From Index 3 and 2 is Not Present in Array From Index 3.

How to Create Music Player UI Design Using HTML and CSS Only.

Ajay Sharma — Wed, 14 Jul 2021 19:21:23 +0000

Hello Everyone, In this Post We Will be Seeing How to Create Music Player UI Design Using HTML and CSS Only.

Here is The Live Link of Page https://music-player-ui-design.netlify.app/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

Choose Any Text Editor (VSCode Recommended).
Create 2 Files in Current Project Directory, index.html and style.css.
Use Below HTML and CSS Code To Build Your Page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player Design</title>
    <link href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Poppins:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container card">
        <div class="music-image">
            <img src="https://image.freepik.com/free-vector/elegant-musical-notes-music-chord-background_1017-20759.jpg" alt="Music Image">
        </div>
        <div class="music-description">
            <h1 class="music-name">Repeat</h1>
            <h5 class="music-artist-name">Jazzy B</h5>
            <div class="music-buttons">
                <span class="music-button-left">
                    <i class="fas fa-chevron-left"></i>
                    <i class="fas fa-chevron-left"></i>
                </span>
                <span class="music-button-pause">
                    <i class="fas fa-pause"></i>
                </span>
                <span class="music-button-right">
                    <i class="fas fa-chevron-right"></i>
                    <i class="fas fa-chevron-right"></i>
                </span>
            </div>
        </div>
    </div>
</body>
</html>

:root {
    --mainColor1: #538FFB;
    --mainColor2: #5B54FA;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-weight: lighter;
    font-family: Poppins, sans-serif;
    background-color: #CAD5E2;
    overflow: hidden;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 60%;
    transform: translate(-50%, -50%); 
}
.card {
    padding: 20px 50px;
    width: 500px;
    background: linear-gradient(to top right, var(--mainColor1), var(--mainColor2));
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 200px rgba(255, 255, 255, 0.7);
}
.music-image {
    width: 500px;
    height: 350px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
}
.music-image > img {
    width: 60%;
    height: 60%;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 200px rgba(255, 255, 255, 0.7);
}
.music-description {
    position: absolute;
    left: 20%;
    top: 60%;
    margin-top: 5%;
    color: #fff;
}
.music-name {
    margin-top: -5%;
    font-size: 40px;
    font-weight: 300;
}
.music-artist-name {
    font-size: 20px;
    font-weight: 250;
}
.music-buttons {
    margin-top: 5%;
    display: flex;
    width: 300px;
    justify-content: space-between;
    align-items: center;
}
.music-button-left, 
.music-button-pause, 
.music-button-right {
    cursor: pointer;
}

@media screen and (max-width: 550px) {
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .card {
        width: 400px;
    }
    .music-image {
        width: 500px;
        height: 350px;
        position: absolute;
        top: 50%;
        left: 77%;
    }
    .music-description {
        position: absolute;
        left: 15%;
        top: 60%;
    }
}

How to Create Custom Checkbox Animation Using HTML and CSS Only.

Ajay Sharma — Tue, 13 Jul 2021 08:46:59 +0000

Hello Everyone, In this Post We Will be Seeing How to Create Custom Checkbox Animation Using HTML and CSS only.

Here is The Live Link of Page https://checkbox-animation.netlify.app/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

Choose Any Text Editor (VSCode Recommended).
Create 2 Files in Current Project Directory, index.html and style.css.
Use Below HTML and CSS Code To Build Your Page.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Checkbox</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="one">
            <input type="checkbox" name="option1" id="option1">
            <label for="option1">
                <span class="name">Checkbox 1</span>
                <span class="icon"><i class="fa fa-check" aria-hidden="true"></i></span>
            </label>
        </div>
        <div class="two">
            <input type="checkbox" name="option2" id="option2">
            <label for="option2">
                <span class="name">Checkbox 2</span>
                <span class="icon"><i class="fa fa-check"></i></span>
            </label>
        </div>
        <div class="three">
            <input type="checkbox" name="option3" id="option3">
            <label for="option3">
                <span class="name">Checkbox 3</span>
                <span class="icon"><i class="fa fa-check"></i></span>
            </label>
        </div>
    </div>
</body>

</html>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-weight: lighter;
}
.container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
}
input {
    display: none;
}
label {
    position: relative;
    width: 290px;
    height: 50px;
    background-color: #ededed;
    margin: .5rem;
    padding: 0 1.5rem;
    overflow: hidden;
    font-size: 20px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
label::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 70px;
    background-color: #4DD637;
    transition: 0.5s ease;
    clip-path: circle(0px at 260px 25px);
}
.name {
    z-index: 1;
    transition: 0.5s;
}
.icon {
    display: block;
    transition: 0.5s;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    font-size: 20px;
    z-index: 1;
    color: #ededed;
    border: 2px solid #dbdbdb;
}
input:checked + label::after {
    clip-path: circle(100%);
}
input:checked + label .name {
    color: #fff;
}
input:checked + label .icon {
    border-color: #fff;
    color: #fff;
}

How to Create Different Animation on Button on Hover Using HTML and CSS Only .

Ajay Sharma — Sun, 11 Jul 2021 20:19:16 +0000

Hello Everyone, In this Post We Will be Seeing How to Create Different Animation on Button on Hovering Using HTML and CSS only.

Here is The Live Link of Page https://button-animation.netlify.app/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

Choose Any Text Editor (VSCode Recommended).
Create 2 Files in Current Project Directory, index.html and style.css.
Use Below HTML and CSS Code To Build Your Page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Design Animations</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="heading">
            Different Hover Animation on Buttons
        </div>
        <div class="buttons">
            <button class="btn1">Slide From Left</button>
            <button class="btn2">Slide From Right</button>
            <button class="btn3">Slide From Top</button>
            <button class="btn4">Slide From Bottom</button>
            <button class="btn5">Glow Animation</button>
        </div>
    </div>
</body>
</html>

:root {
    --primaryColor: #ff96ad;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.heading {
    font-weight: lighter;
    font-size: 30px;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
}
.buttons {
    display: grid;
    justify-content: center;
    align-items: center;
}
button {
    width: 250px;
    height: 50px;
    font-size: 20px;
    font-weight: lighter;
    text-align: center;
    cursor: pointer;
    border: 0;
    transition: 0.5s ease-in;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.btn1, .btn2, .btn3, .btn4, .btn5 {
    margin-bottom: 10px;
}
.btn1:hover, .btn2:hover, .btn3:hover, .btn4:hover, .btn5:hover {
    color: #fff;
}
button::before, button::after {
    content: "";
    background-color: var(--primaryColor);
    position: absolute;
    z-index: -1;
}

/* Button 1 */
.btn1::after {
    width: 0;
    left: 0;
    top: 0;
    height: 100%;
    transition-duration: 0.5s;
}
.btn1:hover::after {
    width: 100%;
}

/* Button 2 */
.btn2::after {
    width: 0;
    top: 0;
    right: 0;
    height: 100%;
    transition-duration: 0.5s;
}
.btn2:hover::after {
    width: 100%;
}

/* Button 3 */
.btn3::after {
    height: 0;
    left: 0;
    top: 0;
    transition-duration: .5s;
    width: 100%;
}
.btn3:hover::after {
    height: 100%;
}
/* Button 4 */
.btn4::after {
    height: 0;
    bottom: 0;
    left: 0;
    transition-duration: 0.5s;
    width: 100%;
}
.btn4:hover::after {
    height: 100%;
}

/* Button 5 */
.btn5:hover {
    background-color: var(--primaryColor);
    color: #fff;
    box-shadow: 0 0 5px var(--primaryColor), 0 0 200px var(--primaryColor);
}

How to Create Social Media Icon with Hover Animation Using HTML and CSS Only.

Ajay Sharma — Sat, 10 Jul 2021 14:01:26 +0000

Hello Everyone, In this Post We Will be Seeing How to Create Social Media Icon with Hover Animation Using HTML and CSS only.

Here is The Live Link of Page https://ajaysharma12799.github.io/Social-Media-Icon-with-Hover-Animation/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

Choose Any Text Editor (VSCode Recommended).
Create 2 Files in Current Project Directory, index.html and style.css.
Use Below HTML and CSS Code To Build Your Page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Icon with Hover Animation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="button">
            <div class="icon">
                <i class="fab fa-facebook"></i>
            </div>
            <span>Facebook</span>
        </div>
        <div class="button">
            <div class="icon">
                <i class="fab fa-twitter"></i>
            </div>
            <span>Twitter</span>
        </div>
        <div class="button">
            <div class="icon">
                <i class="fab fa-linkedin"></i>
            </div>
            <span>LinkedIn</span>
        </div>
    </div>
</body>
</html>

:root {
    --facebookColor: #4267B2;
    --twitterColor: #1DA1F2;
    --linkedinColor: #0077b5;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #CAD5E2;
}
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10vh;
}
.fab {
    font-size: 5rem;
}
.button{
    float: left;
    cursor: pointer;
    overflow: hidden;
    margin-top: 5%;
    transition: all .5s ease;
}
.button .icon {
    display: inline-block;
    text-align: center;
    width: 100%;
}
.button > span {
    opacity: 0;
    font-size: 25px;
}
.button:nth-child(1):hover {
    background-color: var(--facebookColor);
    color: #fff;
    border-radius: 10px;
    padding: 7px;
    text-align: center;
    padding: 20px;
    transition: all .5s ease;
}
.button:nth-child(2):hover {
    background-color: var(--twitterColor);
    color: #fff;
    border-radius: 10px;
    padding: 7px;
    text-align: center;
    padding: 20px;
    transition: all .5s ease;
}
.button:nth-child(3):hover {
    background-color: var(--linkedinColor);
    color: #fff;
    border-radius: 10px;
    padding: 7px;
    text-align: center;
    padding: 20px;
    transition: all .5s ease;
}
.button:nth-child(1):hover > span {
    opacity: 1;
    color: #fff;
    position: relative;
    top: 10px;
    border-bottom: 1px solid yellow;
    transition: all .5s ease;
}
.button:nth-child(2):hover > span {
    opacity: 1;
    color: #fff;
    position: relative;
    top: 10px;
    border-bottom: 1px solid yellow;
    transition: all .5s ease;
}
.button:nth-child(3):hover > span {
    opacity: 1;
    color: #fff;
    position: relative;
    top: 10px;
    border-bottom: 1px solid yellow;
    transition: all .5s ease;
}

How to Make Glowing Social Media Icon Using HTML and CSS Only.

Ajay Sharma — Fri, 09 Jul 2021 12:00:15 +0000

Hello Everyone, In this Post We Will be Seeing How to Glowing Social Media Icon Using HTML and CSS only.

Here is The Live Link of Glowing SocialMedia Page https://ajaysharma12799.github.io/Glowing-SocialMedia-Icon/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

Choose Any Text Editor (VSCode Recommended).
Create 2 Files in Current Project Directory, index.html and style.css.
Use Below HTML and CSS Code To Build Your Page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glowing Social Media Icons</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="facebook"><i class="fab fa-facebook"></i></div>
        <div class="instagram"><i class="fab fa-instagram"></i></div>
        <div class="twitter"><i class="fab fa-twitter"></i></div>
        <div class="linkedin"><i class="fab fa-linkedin"></i></div>
        <div class="github"><i class="fab fa-github"></i></div>
        <div class="youtube"><i class="fab fa-youtube"></i></div>
    </div>
</body>
</html>

:root{
    --fbColor: #4267B2;
    --instaColor: #cd486b;
    --twitterColor: #1DA1F2;
    --linkedinColor: #0077b5;
    --githubColor: black;
    --ytColor: #FF0000;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #CAD5E2;
}
.container {
    width: 50vw;
    margin: 0 auto;
    margin-top: 50vh;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
}
.fab {
    border: 1px solid;
    padding: 30px;
    font-size: 30px;
    border-radius: 50%;
    cursor: pointer;
}
.fab:hover {
    border: none;
    animation: grow 1s infinite alternate ease-in-out
}
.facebook:hover {
    background-color: var(--fbColor);
    color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 50px var(--fbColor);
}
.instagram:hover {
    background-color: var(--instaColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--instaColor);
}
.twitter:hover {
    background-color: var(--twitterColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--twitterColor);
}
.linkedin:hover {
    background-color: var(--linkedinColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--linkedinColor);
}
.github:hover {
    background-color: var(--githubColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--githubColor);
}
.youtube:hover {
    background-color: var(--ytColor);
    border-radius: 50%;
    color: #fff;
    box-shadow: 0 0 50px var(--ytColor);
}
@keyframes grow {
    from {
        transform: scale(1);
        font-size: 30px;
    }
    to {
        transform: scale(1.5);
        font-size: 50px;
    }
}
@media (max-width: 768px) {
    .container {
        margin: 0 auto;
        display: grid;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .fab {
        border: 1px solid;
        padding: 30px;
        font-size: 30px;
        border-radius: 50%;
        cursor: pointer;
    }
    .fab:hover {
        border: none;
        animation: grow 1s infinite alternate ease-in-out
    }
    .facebook, .instagram, .twitter, .linkedin, .github, .youtube {
        margin-top: 20%;
    }
}

How to Create Facebook Landing Page Using HTML and CSS Only.

Ajay Sharma — Fri, 09 Jul 2021 07:52:26 +0000

Hello Everyone, In this Post We Will be Seeing How to Create Facebook Landing Page Using HTML and CSS only.

Here is The Live Link of Landing Page https://ajaysharma12799.github.io/Facebook-Landing-Page/

Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/

Follow Me on Github https://www.github.com/ajaysharma12799/

Steps to Create :-

Choose Any Text Editor (VSCode Recommended).
Setup Directory Structure.
Use Below HTML and CSS Code To Build Your Page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook - Login or Signup</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <div class="text__wrapper">
            <div class="heading">
                <img src="./img/facebook.svg" alt="Facebook">
            </div>
            <p class="description">Facebook helps you connect and share with the people in your life.</p>
        </div>
        <div class="form__wrapper">
            <form class="form">
                <div>
                    <input type="text" name="Email_Mobile" id="Email_Mobile" placeholder="Email Address or Phone Number">
                </div>
                <div>
                    <input type="password" name="Password" id="Password" placeholder="Password">
                </div>
                <div>
                    <button type="submit" class="loginButton btn">Login</button>
                </div>
            </form>
            <a href="#" class="forgotPassword">Forgotten Password?</a>
            <button type="submit" class="registerButton btn">Create New Account</button>
        </div>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
:root {
    --primaryColor: rgb(25,119,242);
    --buttonColor: rgb(66,183,41);
    --bodyColor: rgb(239,242,245);
    --textColor: rgb(27,30,33);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--bodyColor);
    font-family: 'Roboto', sans-serif;

}
a {
    text-decoration: none; 
    color: var(--buttonColor);   
}
button {
    border: none;
}
a:hover {
    text-decoration: underline;
}
input {
    padding: 7px;
    margin: 2% 0;
    border: 1px solid lightgray;
    border-radius: 5px;
    width: 200px;
}
input::placeholder {
    color: gray;
    font-weight: lighter;
    font-size: 10px;
}
.btn {
    width: 100%;
    border-radius: 3px;
    color: #fff;
    padding: 6px;
}
#container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10%;
}
.text__wrapper {
    width: 37vw;
    margin-right: 3%;
    margin-top: 5%;
}
.heading {
    position: relative;
    top: -50%;
    left: -7%;
}
.heading > img {
    width: 350px;
}
.description {
    color: var(--textColor);
    font-weight: 900;
    font-size: 30px;
    float: left;
}
.form__wrapper {
    width: 300px;
    height: 250px;
    margin-top: 5%;
    background-color: #fff;
    padding: 5% 2% 5% 2%;
    border-radius: 5px;
    line-height: 150%;
    display: grid;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form {
    margin-top: -18%;
    margin-bottom: 7%;
}
.loginButton {
    background-color: var(--primaryColor); 
    color: #fff; 
    margin-top: 2%;
} 
.forgotPassword {
    color: var(--primaryColor);
    font-size: 10px;
    text-align: center;
}
.registerButton {
    background-color: var(--buttonColor); 
    color: #fff; 
    font-size: 10px;
    width: 60%;
    padding: 8px;
    font-weight: bold;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 3%;
}
/* Responsive Design */

/* Small Mobile Device */
@media (max-width: 320px) {
    #container {
        display: grid;
        margin-top: 10vh;
        justify-content: center;
    }
    .text__wrapper {
        width: 100%;
        margin-right: 3%;
        margin-top: -5%;
        text-align: center;
        margin: 0 auto;
    }
    .heading > img {
        width: 300px;
        position: relative;
        left: 8%;
    }
    .description {
        margin-bottom: 10%;
    }
    .form__wrapper {
        margin: 0 auto;
        height: 200px;
        background-color: #fff;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .form {
        margin-top: -5%;
    }
    .loginButton {
        background-color: var(--primaryColor); 
        color: #fff; 
        margin-top: 2%;
    } 
    .forgotPassword {
        color: var(--primaryColor);
        font-size: 10px;
        text-align: center;
    }
    .registerButton {
        background-color: var(--buttonColor); 
        color: #fff; 
        font-size: 10px;
        width: 60%;
        padding: 8px;
        font-weight: bold;
        margin: 0 auto;
    }
}

/* Average Mobile Devices */
@media (min-width: 320px) and (max-width: 480px) {
    #container {
        display: grid;
        margin-top: 10vh;
        justify-content: center;
    }
    .text__wrapper {
        width: 100%;
        margin-right: 3%;
        margin-top: -5%;
        text-align: center;
    }
    .heading > img {
        width: 350px;
        position: relative;
        left: 8%;
    }
    .description {
        margin-bottom: 5%;
    }
    .form__wrapper {
        width: 220px;
        height: 200px;
        margin-left: 3%;
        background-color: #fff;
        padding: 5% 2% 5% 2%;
        border-radius: 5px;
        margin: 0 auto;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .form {
        margin-top: -8%;
    }
    .loginButton {
        background-color: var(--primaryColor); 
        color: #fff; 
        margin-top: 2%;
    } 
    .forgotPassword {
        color: var(--primaryColor);
        font-size: 10px;
        text-align: center;
    }
    .registerButton {
        background-color: var(--buttonColor); 
        color: #fff; 
        font-size: 10px;
        width: 60%;
        padding: 8px;
        font-weight: bold;
        margin: 0 auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }
}

/* Tablet and IPads */
@media (min-width: 481px) and (max-width: 768px) {
    #container {
        display: grid;
        margin-top: 10vh;
        justify-content: center;
    }
    .text__wrapper {
        width: 100%;
        margin-right: 3%;
        margin-top: -5%;
        text-align: center;
    }
    .heading > img {
        width: 350px;
        position: relative;
        left: 8%;
    }
    .description {
        margin-bottom: 5%;
    }
    .form__wrapper {
        width: 220px;
        height: 220px;
        margin-left: 3%;
        background-color: #fff;
        padding: 5% 2% 5% 2%;
        border-radius: 5px;
        margin: 0 auto;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .form {
        margin-top: -8%;
    }
    .loginButton {
        background-color: var(--primaryColor); 
        color: #fff; 
        margin-top: 2%;
    } 
    .forgotPassword {
        color: var(--primaryColor);
        font-size: 10px;
        text-align: center;
    }
    .registerButton {
        background-color: var(--buttonColor); 
        color: #fff; 
        font-size: 10px;
        width: 60%;
        padding: 8px;
        font-weight: bold;
        margin: 0 auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }
}