Categories: Uncategorized

How to Change Images using by Javascript | Apple Website Design

https://youtu.be/SyuJTbaLbys

HTML and JavaSCript Code

<!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">
    <link rel="stylesheet" href="styles.css">
    <title>practice</title>
</head>
<body>

    <div class="container">

            <div class="box-1">

                <img src="/img/default.jpeg" alt="" class="main-image">

            </div>

            <div class="box-2">

                <div class="childof-box-2" >

CSS Code

.container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.main-image{
    width: 400px;
    height: auto;
}

.childof-box-2{
    border: 2px solid grey;
    margin: 5px;
    border-radius: 6px;
}

.box-2 .childof-box-2 img{
    width: 100px;
    height: auto;
}

.childof-box-2.active{
    border: 2px solid royalblue;
}
reecry

Recent Posts

Insta360 – Videos keep exporting backwards | Wrong side render in insta360

https://youtu.be/0RRUOIvmuWA I realized that I had my camera set up incorrectly, so when I upload…

12 months ago

Make Animated progress step bar using Figma

https://youtu.be/C3oFfV20K_c Make Animated progress step bar using Figma

1 year ago

How to Hide All Grids in Figma

https://youtu.be/o3pSH_oRzko How to Hide All Grids in Figma

1 year ago

How to Create Responsive Tool tip in figma

https://youtu.be/hdSUylKSsho How to Create Responsive Tool tip in Figma

1 year ago

Pixel Grid not visible in figma | How to Turn on figma Pixel Grid

https://youtu.be/AEiH7dSDhKo Having issue in figma pixel grid? learn how to show/ hide figma pixel grid…

1 year ago

Fix External Monitor Lag on Mac OS Ventura

https://youtu.be/iilYzHg9LwQ There are some issues going on in ventura OS its still in development phase…

2 years ago