Clone Website using HTML,CSS and JavaScript (Source Code)

Clone Website using HTML, CSS, and JavaScript (Source Code)

Welcome to the Codewithrandom blog. In this blog, we learn how to create a clone website using HTML, CSS, and JavaScript. We created a Microsoft Homepage Clone Website in this article.

Developers can put their current knowledge to use and pick up new skills by cloning a home page. Through this practice, developers will gain a better understanding of web page design and how to accomplish the desired outcome.

Before we start with our step-by-step project explanation, let’s understand some basic concepts of a clone website.

I hope you enjoy our blog so let’s start with a basic HTML Structure for the Microsoft Clone Website.

50+ HTML, CSS & JavaScript Projects With Source Code

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: #fff;
    color: #000;
    font-size: 15px;
    line-height: 1.5;
}
a {
    color: #262626;
    text-decoration: none;
}
ul {
    list-style: none;
}
.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
} /* Nav */
.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 20px 0;
    font-size: 13px;
}
.main-nav .logo {
    width: 110px;
}
.main-nav ul {
    display: flex;
}
.main-nav ul li {
    padding: 0 10px;
}
.main-nav ul li a {
    padding-bottom: 2px;
}
.main-nav ul li a:hover {
    border-bottom: 2px solid #262626;
}
.main-nav ul.main-menu {
    flex: 1;
    margin-left: 20px;
}
.menu-btn {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 2;
    display: none;
}
.btn {
    cursor: pointer;
    display: inline-block;
    border: 0;
    font-weight: bold;
    padding: 10px 20px;
    background: #262626;
    color: #fff;
    font-size: 15px;
}
.btn:hover {
    opacity: 0.9;
}
.dark {
    color: #fff;
}
.dark .btn {
    background: #f4f4f4;
    color: #333;
} /* Showcase */
.showcase {
    width: 100%;
    height: 400px;
    background: url("https://i.ibb.co/zGSDGCL/slide1.png") no-repeat center
        center/cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-end;
    padding-bottom: 50px;
    margin-bottom: 20px;
}
.showcase h2,
.showcase p {
    margin-bottom: 10px;
}
.showcase .btn {
    margin-top: 20px;
} /* Home cards */
.home-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    margin-bottom: 40px;
}
.home-cards img {
    width: 100%;
    margin-bottom: 20px;
}
.home-cards h3 {
    margin-bottom: 5px;
}
.home-cards a {
    display: inline-block;
    padding-top: 10px;
    color: #0067b8;
    text-transform: uppercase;
    font-weight: bold;
}
.home-cards a:hover i {
    margin-left: 10px;
} /* Xbox */
.xbox {
    width: 100%;
    height: 350px;
    background: url("https://i.ibb.co/tBJGPD9/xbox.png") no-repeat center
        center/cover;
    margin-bottom: 20px;
}
.xbox .content {
    width: 40%;
    padding: 50px 0 0 30px;
}
.xbox p,
.carbon p {
    margin: 10px 0 20px;
} /* Carbon */
.carbon {
    width: 100%;
    height: 350px;
    background: url("https://i.ibb.co/72cgtsz/carbon.jpg") no-repeat center
        center/cover;
}
.carbon .content {
    width: 55%;
    padding: 100px 0 0 30px;
} /* Follow */
.follow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 30px 0 30px;
}
.follow * {
    margin-right: 10px;
} /* Links */
.links {
    background: #f2f2f2;
    color: #616161;
    font-size: 12px;
    padding: 35px 0;
}
.links-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    align-items: flex-start;
    justify-content: center;
}
.links li {
    line-height: 2.8;
} /* Footer */
.footer {
    background: #f2f2f2;
    color: #616161;
    font-size: 12px;
    padding: 20px 0;
}
.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer div {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
.footer div i {
    margin-right: 10px;
}
.footer ul {
    display: flex;
    flex-wrap: wrap;
}
.footer li {
    margin-right: 30px;
    margin-bottom: 20px;
}
@media (max-width: 700px) {
    .menu-btn {
        display: block;
    }
    .menu-btn:hover {
        opacity: 0.5;
    }
    .main-nav ul.right-menu {
        margin-right: 50px;
    }
    .main-nav ul.main-menu {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: #f2f2f2;
        width: 50%;
        height: 100%;
        border-right: #ccc 1px solid;
        opacity: 0.9;
        padding: 30px;
        transform: translateX(-500px);
        transition: transform 0.5s ease-in-out;
    }
    .main-nav ul.main-menu li {
        padding: 10px;
        border-bottom: #ccc solid 1px;
        font-size: 14px;
    }
    .main-nav ul.main-menu li:last-child {
        border-bottom: 0;
    }
    .main-nav ul.main-menu.show {
        transform: translateX(-20px);
    }
    .home-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .xbox .content p {
        display: none;
    }
    .xbox .content h2 {
        margin-bottom: 20px;
    }
    .carbon .content {
        width: 85%;
    }
    .links .links-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 500px) {
    .home-cards {
        grid-template-columns: 1fr;
    }
    .links .links-inner {
        grid-template-columns: 1fr;
    }
    .links .links-inner ul {
        margin-bottom: 20px;
    }
}

Step1:We’ll set the spacing and margin to “zero,” the box sizing property to “border box,” and the font-family property to “Poppins” using the universal selection (*).

Gym Website Using HTML and CSS With Source Code

We’ll now use the typeface family property to style the body. We will assign the font family to “Segoe UI” and the background property to “white.” We will change the font size to “15 px” and add a line height of 1.5 using the font size and line height properties.

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

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: #fff;
    color: #000;
    font-size: 15px;
    line-height: 1.5;
}

a {
    color: #262626;
    text-decoration: none;  
}

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

Step2:We will add styling to the navbar using the class selector; we will set the display to “flex”; we will position the items to the center using the align item property; and we will set the height to “60px” using the height property. Similarly, we will apply the styling to all other elements in our navbar.

.main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding: 20px 0;
    font-size: 13px;
}

.main-nav .logo {
    width: 110px;
}

.main-nav ul {
    display: flex;
}

.main-nav ul li {
    padding: 0 10px;
}

.main-nav ul li a {
    padding-bottom: 2px;
}

.main-nav ul li a:hover {
    border-bottom: 2px solid #262626;
}

.main-nav ul.main-menu {
    flex: 1;
    margin-left: 20px;
}

.menu-btn {
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 30px;
    z-index: 2;
    display: none;
}

.btn {
    cursor: pointer;
    display: inline-block;
    border: 0;
    font-weight: bold;
    padding: 10px 20px;
    background: #262626;
    color: #fff;
    font-size: 15px;
}

.btn:hover {
    opacity: 0.9;
}

.dark {
    color: #fff;
}

.dark .btn {
    background: #f4f4f4;
    color: #333;
}

Step3:Now we will add styling to the main content; we will add styling to the home card, showcase, and Xbox as needed. We need to create an exact replica of the website when styling a clone website, so to add styling, we need to comprehend what they used in creating or styling the website.

* Showcase */

.showcase {
    width: 100%;
    height: 400px;
    background: url("https://i.ibb.co/zGSDGCL/slide1.png") no-repeat center center/cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-end;
    padding-bottom: 50px;
    margin-bottom: 20px;
}

.showcase h2,
.showcase p {
    margin-bottom: 10px;
}

.showcase .btn {
    margin-top: 20px;
}


/* Home cards */

.home-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    margin-bottom: 40px;
}

.home-cards img {
    width: 100%;
    margin-bottom: 20px;
}

.home-cards h3 {
    margin-bottom: 5px;
}

.home-cards a {
    display: inline-block;
    padding-top: 10px;
    color: #0067b8;
    text-transform: uppercase;
    font-weight: bold;
}

.home-cards a:hover i {
    margin-left: 10px;
}


/* Xbox */

.xbox {
    width: 100%;
    height: 350px;
    background: url("https://i.ibb.co/tBJGPD9/xbox.png") no-repeat center center/cover;
    margin-bottom: 20px;
}

.xbox .content {
    width: 40%;
    padding: 50px 0 0 30px;
}

.xbox p,
.carbon p {
    margin: 10px 0 20px;
}


/* Carbon */

.carbon {
    width: 100%;
    height: 350px;
    background: url("https://i.ibb.co/72cgtsz/carbon.jpg") no-repeat center center/cover;
}

.carbon .content {
    width: 55%;
    padding: 100px 0 0 30px;
}


/* Follow */

.follow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 30px 0 30px;
}

.follow * {
    margin-right: 10px;
}


/* Links */

.links {
    background: #f2f2f2;
    color: #616161;
    font-size: 12px;
    padding: 35px 0;
}

.links-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 10px;
    align-items: flex-start;
    justify-content: center;
}

.links li {
    line-height: 2.8;
}

Step4:Using the class selector, we will now style the bottom of our Microsoft clone. (.footer). We’ll use the color property to change the font to “grey” and the background to “white.” The utmost width will be “1100px.”

Responsive Resume/CV Website Using HTML & CSS

We will now add responsiveness to the page using the media query. The utmost width will be set using the media query property. The information will automatically adjust as the window sizes get smaller.

.footer {
    background: #f2f2f2;
    color: #616161;
    font-size: 12px;
    padding: 20px 0;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer div {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.footer div i {
    margin-right: 10px;
}

.footer ul {
    display: flex;
    flex-wrap: wrap;
}

.footer li {
    margin-right: 30px;
    margin-bottom: 20px;
}

@media (max-width: 700px) {
    .menu-btn {
        display: block;
    }
    .menu-btn:hover {
        opacity: 0.5;
    }
    .main-nav ul.right-menu {
        margin-right: 50px;
    }
    .main-nav ul.main-menu {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background: #f2f2f2;
        width: 50%;
        height: 100%;
        border-right: #ccc 1px solid;
        opacity: 0.9;
        padding: 30px;
        transform: translateX(-500px);
        transition: transform 0.5s ease-in-out;
    }
    .main-nav ul.main-menu li {
        padding: 10px;
        border-bottom: #ccc solid 1px;
        font-size: 14px;
    }
    .main-nav ul.main-menu li:last-child {
        border-bottom: 0;
    }
    .main-nav ul.main-menu.show {
        transform: translateX(-20px);
    }
    .home-cards {
        grid-template-columns: repeat(2, 1fr);
    }
    .xbox .content p {
        display: none;
    }
    .xbox .content h2 {
        margin-bottom: 20px;
    }
    .carbon .content {
        width: 85%;
    }
    .links .links-inner {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .home-cards {
        grid-template-columns: 1fr;
    }
    .links .links-inner {
        grid-template-columns: 1fr;
    }
    .links .links-inner ul {
        margin-bottom: 20px;
    }
}

Now we have completed our Clone Website Section Of Css Code. Here is our updated output Html and Css.

10+ Javascript Projects For Beginners With Source Code

Html + Css Output

Now add javascript for the sidebar of the Microsoft Homepage.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

JavaScript Code For Clone Website

document
    .querySelector(".menu-btn")
    .addEventListener("click", () =>
        document.querySelector(".main-menu").classList.toggle("show")
    );

We’ll use the document.queryselector to select our HTML’s menu button, and then add a click event listener that we’ll toggle between to add and remove classes.

Create a Ping Pong Game Using JavaScript (Source Code)

Now we have completed our Clone Website using HTML, CSS, and JavaScript (Microsoft Clone Website). Here is our updated output with JavaScript. I hope you like the cloned Microsoft homepage. You can see output videos and project screenshots. See our other blogs and gain knowledge about front-end development.

Video output clone website html css js:

Codepen Preview Clone Website:

Simple Portfolio Website Using Html And Css With Source Code

In this post, we learn how to create a Microsoft Homepage Clone using simple HTML & CSS and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki