Akintunde O Oyelakin

<p>The code can be improved by implementing best practices such as using semantic HTML tags, consolidating CSS styles, optimizing images, using a CSS preprocessor, avoiding inline styles and scripts, adding alt attributes to images, and using relative units for font sizes and spacing. Additionally, the code could benefit from better organization and structure.</p>

<!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>Nike-fy</title>

    <link rel="stylesheet" href="styles/styles.css">
    <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHcAAAB3CAMAAAAO5y+4AAAAaVBMVEX///8AAADl5eX29vb5+fm8vLzs7OzKyspOTk7g4ODY2Nj8/PySkpKMjIyenp6bm5saGhrQ0NBcXFx1dXWnp6dtbW07Ozuurq7CwsIyMjJoaGh8fHxTU1MVFRUsLCwjIyNHR0eEhIQNDQ20t47jAAACCElEQVRoge3XyZaDIBAF0C6N4DzHKWpM/v8jWzO0RhHB4KLPqbsN+CJQCD8/CCGEEEIIIYQQQgj9O9phT9Z1zo8GPSZUK1Kbk0trR32mbrvVOeK1sKFQHUryJASPP3sEypPKTId6GUCbb41hC4G6UNuPoRdvL5i+HVGTqeVneLgJlEcAYCrIJIXXPkOvPq9y3mjf0v0yU4/8LnyGgmkIrRUy/MmvitcyqhLeqkiwIKuh9e7VTOjN/MuE8GKJdswfHXZl6lYQX8dQKAPx1ak1Q49MPpQYlxKmOrFpfXmUmnQu9Uz4JFCtU8Wz112ii5VWMCdSrR/e0yO4BvvBXWRC6Et/UtJ3X2O7rU7dbBkKtUDXOWecno2Gdl6HjFA42/Kpk9flvrBmJKwX7Qd44yu3qpk8hP3HSeSZDTMUsnTvt4ROH3NffPj1fuW27MxhExbZ+tmS+VyN69LpVy57cB8q7uFly3LobnlkW7YRrEzoy95pfaG8Z69q5Kt1xt2Raio4/iXbMTOJ8FeOJ5YLvbtqzmBOLZPapfvrZkbifeNC4fFadH6bZNcmvCoQSg1d1RdFSyC1zZXeX564m9LAPOZuurFhiZ9JZS0PSiNXWd0wrJVwvXmD/NKNEdq5hw3wKPoc62vsWwesYBYrr7qsbLPOTFJb0TVY1ImQI5cRQgghhBBCCCGEEELifgEUhRRaGyMaJgAAAABJRU5ErkJggg==" type="image/x-icon">
</head>

<body>
    
    <div class="container">
        
        <div class="navbar">
            <h1><a href="#">NIKE-FY</a></h1>
            <div class="navi">
                <a href="#">home</a>
                <a href="#btn">products</a>
                <a href="#footer">contact</a>
            </div>
            <div class="icons">
                <a href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 3l-.743 2h-1.929l-3.474 12h-13.239l-4.615-11h16.812l-.564 2h-13.24l2.937 7h10.428l3.432-12h4.195zm-15.5 15c-.828 0-1.5.672-1.5 1.5 0 .829.672 1.5 1.5 1.5s1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5zm6.9-7-1.9 7c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5z"/></svg>
                </a>
                <a href="#">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 22c-3.123 0-5.914-1.441-7.749-3.69.259-.588.783-.995 1.867-1.246 2.244-.518 4.459-.981 3.393-2.945-3.155-5.82-.899-9.119 2.489-9.119 3.322 0 5.634 3.177 2.489 9.119-1.035 1.952 1.1 2.416 3.393 2.945 1.082.25 1.61.655 1.871 1.241-1.836 2.253-4.628 3.695-7.753 3.695z"/></svg>
                </a>
            </div>
            <div class="nav-switch">
                <div class="ham"></div>
                <div class="ham"></div>
                <div class="ham"></div>
            </div>
        </div>

        
        <div class="backdrop"></div>

        
        <div class="sidebar">
            <div class="heading">NIKE-FY</div>
            <div class="links">
                <a href="#">home</a>
                <a href="#btn">products</a>
                <a href="#footer">contact</a>
                <div class="icons1">
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 3l-.743 2h-1.929l-3.474 12h-13.239l-4.615-11h16.812l-.564 2h-13.24l2.937 7h10.428l3.432-12h4.195zm-15.5 15c-.828 0-1.5.672-1.5 1.5 0 .829.672 1.5 1.5 1.5s1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5zm6.9-7-1.9 7c-.828 0-1.5.671-1.5 1.5s.672 1.5 1.5 1.5 1.5-.671 1.5-1.5c0-.828-.672-1.5-1.5-1.5z"/></svg>
                    </a>
                    <a href="#">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 22c-3.123 0-5.914-1.441-7.749-3.69.259-.588.783-.995 1.867-1.246 2.244-.518 4.459-.981 3.393-2.945-3.155-5.82-.899-9.119 2.489-9.119 3.322 0 5.634 3.177 2.489 9.119-1.035 1.952 1.1 2.416 3.393 2.945 1.082.25 1.61.655 1.871 1.241-1.836 2.253-4.628 3.695-7.753 3.695z"/></svg>
                    </a>
                </div>
            </div>
            <div class="logo">
                <img src="images/nike-4-logo-png-transparent.png" alt="logo">
            </div>
        </div>

        
        <div class="content">
            <div class="main-first">
                <img src="images/bg.jpeg" alt="background" class="img-cont">
                <p class="text-cont">
                    JUST<br>
                    DO<br>
                    IT<br>
                    <img class="logo-img" src="images/nike-4-logo-png-transparent.png" alt="logo">
                </p>
            </div>

            <div class="jumbotron">
                <h1>Start your NIKE™️ journey</h1>
                <p>The new era of Air has landed—and it's ready for whatever's next.</p>
                <a href="#btn" id="btn" class="shop-btn">Shop</a>
            </div>

            <div class="shoe-1">
                <div class="vert"></div>
                <div class="horz" id="sh1"></div>
                <div class="shoe-desc">
                    <h1>Nike Air Max 2021</h1>
                    <p>
                        We could use a lot of superlatives to describe the Nike Air Max 2021.We could tell you that we've incorporated recycled materials to design a sneaker with at least 20% recycled content.Or that the new Air cushioning unit underfoot is our most revolutionary.Perhaps we'd call it the "the pinnacle of comfort"; waxing poetic about the cored-out foam midsole that gives you the lightest, softest feel.But maybe we just say it's modern meets technical with a splash of heritage DNA.
                    </p>
                    <p class="price">
                        R14,495
                    </p>
                </div>
                <img src="images/shoe1.jpeg" alt="shoe1" class="shoe-img">
                
            </div> 

            <div class="shoe-2">
                <img src="images/nike-just-do-it.jpg" alt="shoe1" class="shoe-img">
                <div class="vert2"></div>
                <div class="horz2" id="sh1"></div>
                <div class="shoe-desc">
                    <h1>Air Jordan 1 Low Travis Scott x Fragment</h1>
                    <p>
                        It's the rare sneaker that satisfies the "rule of three"—sometimes, having three minds is greater than one. In the case of Jordan Brand, Travis Scott and Hiroshi Fujiwara's Fragment Design, it was a case of three masterminds coming together to collaborate on not just any Air Jordan, but the beloved Air Jordan 1—a model both the Houston rapper and the Japanese designer have tapped for past Jordan Brand link-ups
                    </p>
                    <p class="price">
                        R13,495
                    </p>
                </div>
            </div>

            <div class="featured">
                <h1>Featured Items</h1>
                <h2>Hand picked for you!</h2>
                <div class="card-cont">
                    <div class="card">
                        <img src="images/img1.jpg" alt="shoe1" class="feat-img">
                        <p class="feat-txt">
                            White Yellow
                        </p>
                    </div>
                    <div class="card">
                        <img src="images/img2.jpg" alt="shoe2" class="feat-img">
                        <p class="feat-txt">
                            Red Acid Wash
                        </p>
                    </div>
                    <div class="card">
                        <img src="images/img3.jpg" alt="shoe3" class="feat-img">
                        <p class="feat-txt">
                            Varsity Maize
                        </p>
                    </div>
                </div>
            </div>

        </div>

        
        <div class="footer" id="footer">
            <div class="quick-links">
                <h1>Quick Links</h1>
                <a href="#">Home</a>
                <a href="#btn">Products</a>
                <a href="#">Send Us Feedback</a>
            </div>
            <div class="quick-links">
                <h1>About me</h1>
                <a href="#" target="_">
                    Github
                </a>
                <a href="#" target="_">
                    linkedIN
                </a>
                <a href="#">
                    Mail
                </a>
                <a href="#" target="_">
                    Instagram
                </a>
            </div>
            <div>
                <br>
                The images and trademark solely belong to<a href="https://www.nike.com/in/" target="_">NIKE</a>. I've just used the pictures for this demo project, violation of copy-right(s) is not intented.
            </div>
        </div>
    </div>
    <script src="js/sidebar.js"></script>
    <script src="js/mainDiv.js"></script>
</body>

</html>

<p>The code can be improved by removing duplicate properties, consolidating repeated CSS, using more descriptive class names, avoiding unnecessary comments, using shorthand properties, considering a CSS preprocessor, avoiding !important declarations, using consistent indentation/formatting, and using more specific selectors. Overall, the code could benefit from better organization and structure to improve readability and maintainability.</p>

@import url('https://fonts.googleapis.com/css2?family=Playfair:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Roboto:wght@300;400;500;700&family=Schibsted+Grotesk&display=swap');;
* {
    box-sizing: border-box;
}

html {
    height: 100%;
    margin: 0;
    scroll-behavior: smooth;
}

body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    position: relative;

}

a {
    margin: auto 1rem;
    text-decoration: none;
    color: white;
    transition: color 0.5s;
}

a:hover,
a:active{
    color: black;
}

.backdrop{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(58, 54, 54, 0.726);
    z-index: 101;
    transition: display 1s ease-out;
    display: none;
}

.sidebar{
    position: fixed;
    z-index: 102;
    right: 0;
    background: white;
    width: 70%;
    height: 100%;
    display: grid;
    grid-template-rows: 20% 60% 20%;
    justify-content: center;
    grid-template-areas:"br-name"
                        "links"
                        "logo";
    transform: translateX(100%);
    transition: transform .5s ease-out;
    display: none;
}

.heading{
    grid-area: br-name;
    font-size: 2rem;
    text-align: center;
    align-self: center;
}

.logo{
    grid-area: logo;
    justify-self: center;
    align-self: center;
}

.logo img{
    height: 100px;
}

.links{
    grid-area: links;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-self: center;
    align-self: center;
}

.links a{
    color: black;
    justify-self: center;
    transition: color .5s;
    margin: 1rem;
}

.links a:hover{
    color: grey;
}

.container {
    display: grid;
    grid-template-areas:"navbar"
                        "content" 
                        "footer";
}

.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: rgba(70, 68, 68, 0.7);
    color: white;
    padding: 1rem;
    z-index: 100;
    grid-area: navbar;
}

.navi {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.icons,
.icons1{
    display: flex;
    justify-content: space-between;    
}

.icons svg,
.icons1 svg{
    transition: height .5s,width .5s;
}

.icons svg:hover,
.icons1 svg:hover{
    color: white;
    height: 35px;
    width: 35px;
}

.nav-switch{
    width: 3rem;
    justify-self: center;
    align-self: center;
    margin-right: 2rem;
    display: none;
    outline: none;
}

.ham{
    width: 90%;
    height: .25rem;
    background-color: white;
    margin: .5rem;
    transition: color .5s;
}

.content {
    grid-area: content;
    width: 100%;
    margin-top: 112px;
}

.main-first {
    position: relative;
    height: 90vh;
    width: 100%;
    background: #FBFBFB;
    display: grid;
    grid-template-columns: 60% 40%;
}

.img-cont {
    background: url('../images/bg.jpeg'), #FBFBFB;
    height: 95vh;
    background-size: cover;
    position: absolute;
    left: -10rem;
    bottom: 1.5rem;
    z-index: 0;
    background-repeat: no-repeat;
    transform: translateX(-40rem);
    transition: transform 1.2s ease-out;
}

.text-cont {
    cursor: context-menu;
    opacity: 0.5;
    z-index: 1;
    position: absolute;
    font-size: 5rem;
    text-align: right;
    right: 7rem;
    top: 1rem;
    width: 30rem;
    transform: translateX(150%);
    transition: transform 1s ease-out;
    /* display: none; */
}

.logo-img{
    width: 250px;
}

.jumbotron {
    background: rgba(70, 68, 68, 0.7);
    position: relative;
    text-align: center;
    height: 28rem;
    padding: 2rem;
    color: white;
}

.jumbotron h1 {
    font-size: 3rem;
}

.jumbotron p {
    font-size: 1.5rem;
}

.shop-btn {
    padding: 2rem;
    background-color: black;
    position: relative;
    bottom: -5rem;
    font-size: 1.5rem;
    transition: box-shadow .5s;
    border: 1px solid white;
    border-radius: 5px;
}

.shop-btn:hover {
    box-shadow: 0px 0px 7px 10px rgba(211, 206, 206, 0.904);
    color: rgba(128, 128, 128, 0.795);
}

.shoe-1,
.shoe-2{
    display: grid;
    padding: 6rem;
    justify-content: center;
    position: relative;
}

.shoe-1{
    grid-template-columns: 60% 40%;
    background-color: #F6F6F6;
}

.shoe-2{
    grid-template-columns: 40% 60%;
    background-color: #57BBF9;
}

.vert {
    height: 70%;
    width: 2rem;
    background: #57BBF9;
    position: absolute;
    left: 3.5rem;
    top: 1.25rem;
    transition: height .5s ease-out;
    
}

.horz {
    width: 40%;
    height: 2rem;
    background: #57BBF9;
    position: absolute;
    left: 1.5rem;
    top: 2.5rem;
}

.vert2 {
    height: 70%;
    width: 2rem;
    background: black;
    position: absolute;
    right: 3.5rem;
    bottom: 1.25rem;
    transition: height .5s ease-out;
}

.horz2 {
    width: 40%;
    height: 2rem;
    background: black;
    position: absolute;
    right: 1.5rem;
    bottom: 2.5rem;
}

.shoe-desc {
    width: 60%;
    border: 1px solid black;
    padding: 3rem;
    margin: 3rem 5rem;
    position: relative;
    transition: box-shadow .5s ease-out;
}

.shoe-desc:hover{
    box-shadow: 2px 2px 10px 10px rgba(112, 103, 103, 0.514);
}

.shoe-2 .shoe-desc{
    justify-self: end;
}

.shoe-img {
    background-repeat: no-repeat;
    background-size: cover;
    height: 35rem;
    transition: height .5s ease-out;
}

.shoe-img:hover{
    height: 40rem;
}

.price{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1rem;
    font-size: 1.5rem;
    margin: 0;
    color: white;
    background: rgba(70, 68, 68, 0.7);
}

.featured{
    text-align: center;
}

.featured h1{
    font-size: 3rem;
    padding: 1.5rem;
}

.featured h2{
    font-size: 1.5rem;
    padding: 2rem;
}

.card-cont{
    display: grid;
    grid-template-columns: repeat(3,27%);
    column-gap: 2rem;
    justify-content: center;
}

.card{
    background: #f5f5f5;
    transition: height .5s, box-shadow .5s;
}

.card:hover{
    box-shadow: 2px 2px 10px 10px rgba(112, 103, 103, 0.514);
}

.feat-img{
    height: 300px;
}

.feat-txt{
    font-size: 1rem;
    padding: 2rem;
}

.footer {
    grid-area: footer;
    background: black;
    color: white;
    margin-top: 3rem;
    display: grid;
    padding: 2rem;
    grid-template-columns: 40% 40% 15%;
}

.quick-links{
    display: flex;
    flex-direction: column;
}

.footer a:hover{
    color: gray;
}

@media (min-width: 320px) and (max-width: 425px){
    .nav-switch{
        display: block;
    }

    .navi{
        display: none;
    }

    .icons{
        display: none;
    }

    .main-first {
        grid-template-columns: 100%;
    }

    .jumbotron {
        background: rgba(70, 68, 68, 0.7);
        position: relative;
        text-align: center;
        height: 18rem;
        padding: .5rem;
    }
    
    .jumbotron h1 {
        font-size: 1.5rem;
    }
    
    .jumbotron p {
        font-size: 1rem;
        padding: 1rem;
    }

    .img-cont{
        width : 95%;
        height : auto;
        left: 1rem;
    }
    
    .text-cont{
        text-align: center;
        font-size: 2rem;
        right: 6rem;
        width: 10rem;
       
    }

    .shop-btn{
        padding: 1rem;
        font-size: 1rem;
        bottom: -3rem;
    }

    .logo-img {
        width: 125px;
    }

    .featured h1{
        font-size: 1.5rem;
    }

    .featured h2{
        font-size: 1rem;
    }

    .feat-img{
        height: 200px;
    }

    .card-cont{
        grid-template-columns: 90%;
        row-gap: 1.5rem;
    }

    .shoe-1,
    .shoe-2{
        padding: 1rem;
        grid-template-columns: 100%;
    }

    .shoe-desc{
        padding: 1.5rem;
        width: 85%;
        margin: 2rem auto;
    }

    .shoe-img{
        height: 13rem;
        justify-self: center;
    }

    .shoe-img:hover{
        height: 15rem;
    }

    .vert,
    .vert2,
    .horz,
    .horz2{
        display: none;
    }

    .footer{
        grid-template-columns: 100%;
        text-align: center;
    }
}

@media (min-width: 425px) and (max-width: 768px){
    .nav-switch{
        display: block;
    }

    .navi{
        display: none;
    }

    .icons{
        display: none;
    }

    .main-first {
        grid-template-columns: 100%;
    }

    .jumbotron {
        background: rgba(70, 68, 68, 0.7);
        position: relative;
        text-align: center;
        height: 23rem;
        padding: .5rem;
    }
    
    .jumbotron h1 {
        font-size: 2rem;
    }
    
    .jumbotron p {
        font-size: 1.5rem;
        padding: 1rem;
    }

    .img-cont{
        width : 95%;
        height : auto;
        left: 1rem;
    }
    
    .text-cont{
        text-align: center;
        font-size: 3rem;
        right: 6rem;
        width: 10rem;
        
    }

    .shop-btn{
        padding: 1.5rem;
        font-size: 1.5rem;
        bottom: -3rem;
    }

    .logo-img {
        width: 125px;
    }

    .featured h1{
        font-size: 2rem;
    }

    .featured h2{
        font-size: 1.5rem;
    }

    .feat-img{
        height: 300px;
    }

    .card-cont{
        grid-template-columns: 90%;
        row-gap: 1.5rem;
    }

    .shoe-1,
    .shoe-2{
        padding: 2rem;
        grid-template-columns: 100%;
    }

    .shoe-desc{
        padding: 1.5rem;
        width: 85%;
        margin: 2rem auto;
    }

    .shoe-img{
        height: 20rem;
        justify-self: center;
    }

    .shoe-img:hover{
        height: 23rem;
    }

    .vert,
    .vert2,
    .horz,
    .horz2{
        display: none;
    }

    .footer{
        grid-template-columns: 100%;
        text-align: center;
    }
}

@media (min-width: 769px) and (max-width: 1024px){
    .nav-switch{
        display: block;
    }

    .navi{
        display: none;
    }

    .icons{
        display: none;
    }

    .main-first {
        grid-template-columns: 100%;
    }

    .jumbotron {
        background: rgba(70, 68, 68, 0.7);
        position: relative;
        text-align: center;
        height: 23rem;
        padding: .5rem;
    }
    
    .jumbotron h1 {
        font-size: 2rem;
    }
    
    .jumbotron p {
        font-size: 1.5rem;
        padding: 1rem;
    }

    .img-cont{
        width : 95%;
        height : auto;
        left: 1rem;
    }
    
    .text-cont{
        text-align: center;
        font-size: 4rem;
        right: 6rem;
        width: 10rem;
        transition: transform .5s;
        
    }

    .shop-btn{
        padding: 1.5rem;
        font-size: 1.5rem;
        bottom: -3rem;
    }

    .logo-img {
        width: 125px;
    }

    .featured h1{
        font-size: 2rem;
    }

    .featured h2{
        font-size: 1.5rem;
    }

    .feat-img{
        height: 300px;
    }

    .card-cont{
        grid-template-columns: 90%;
        row-gap: 1.5rem;
    }

    .shoe-1,
    .shoe-2{
        padding: 2rem;
        grid-template-columns: 100%;
    }

    .shoe-desc{
        padding: 1.5rem;
        width: 85%;
        margin: 2rem auto;
    }

    .shoe-img{
        height: 20rem;
        justify-self: center;
    }

    .shoe-img:hover{
        height: 23rem;
    }

    .vert,
    .vert2,
    .horz,
    .horz2{
        display: none;
    }

    .footer{
        grid-template-columns: 100%;
        text-align: center;
    }
}


<p>The code can be improved by using modern JavaScript features such as let and const, adding comments to explain the purpose of the code and functions, using descriptive variable names, considering event delegation instead of adding multiple event listeners, and using requestAnimationFrame for smoother animations. Additionally, the code could benefit from better organization and structure.</p>

<p>The code could be improved by using more modern JavaScript syntax, such as const and querySelectorAll. Additionally, using CSS animations instead of setTimeout can improve performance and avoid potential bugs. Error handling and comments could also make the code more maintainable.</p>

A simple landing page for a shopping website (NIKE).

Code Analysis

Submission details

No comments so far

Code Analysis

Analysis data

Submission details

No comments so far