HTML-CSS-Practice-Problems/level-3/step-4-possible-solution/solution.html at a7c53e295412683db14f706a15908d8073cc6dff · DevMountain/HTML-CSS-Practice-Problems · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>level-3</title>
    <link rel="stylesheet" href="../../base/base.css">


    <!--&lt;!&ndash; STEP 1 CSS FILE **** STEP 1 CSS FILE *** STEP 1 CSS FILE &ndash;&gt;-->
    <!--<link rel="stylesheet" href="./step-1.css">-->

    <!--&lt;!&ndash; STEP 2 CSS FILE **** STEP 2 CSS FILE *** STEP 2 CSS FILE &ndash;&gt;-->
    <!--<link rel="stylesheet" href="./step-2.css">-->

    <!-- STEP 3 CSS FILE MAKE RESPONSIVE -->
    <link rel="stylesheet" href="./responsive.css">

</head>
<body>

<main class="main-wrapper">
    <!-- Step-1.1 add a background image that take up the entire width of container -->
    <section class="main-top-section">
        <header class="top-header">

            <div class="menu">
                <!-- Step-1.2 add the path to the menu image on the src attribute -->
                <img class="menu-icon" src="../img/icons/MENU.png" alt="menu icon">
            </div>
            <div class="logo">
                <!-- Step-1.3 add the path to the dev-shop image on the src attribute -->
                <img class="logo-icon" src="../img/icons/dev-shop.png" alt="logo icon">
            </div>
            <div class="sign-in">
                <!-- Step-1.4 add the path to the sign-in image  on the src attribute -->
                <img class="sign-in-icon" src="../img/icons/Sign_In.png" alt="sign in  icon">
            </div>
        </header>

        <div class="bottom-container">
            <!-- Step-1.5 add the path to shop-deals image on the src attribute -->
            <img class="shop-icon" src="../img/icons/Shop_Deals.png" alt="shop icon">
        </div>
    </section>

    <section class="main-bottom-section">

        <div class="item tops">

            <!-- Step-2.1 add the path to tops image on the src attribute -->
            <img class="item-image" src="../img/Tops.png" alt="tops">

        </div>
        <div class="item bottoms">

            <!-- Step-2.2 add the path to bottoms image on the src attribute -->
            <img class="item-image" src="../img/bottoms.png" alt="tops">

        </div>

        <div class="full-width-item accessories">

            <!-- Step-2.3 add the path to accessories image on the src attribute -->
            <img class="item-image" src="../img/accessories.png" alt="tops">

        </div>

        <div class="large-item">

            <!-- Step-2.4 add the path to collection image on the src attribute -->
            <img class="item-image" src="../img/collection.png" alt="tops">

        </div>

        <div class="item kicks">

            <!-- Step-2.5 add the path to kicks image on the src attribute -->
            <img class="item-image" src="../img/kicks.png" alt="tops">

        </div>
        <div class="item hats">

            <!-- Step-2.6 add the path to hats image on the src attribute -->
            <img class="item-image" src="../img/hats.png" alt="tops">

        </div>

    </section>

</main>
</body>
</html>