HTML-CSS-Practice-Problems/level-1/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>level-1</title>
    <link rel="stylesheet" href="../../base/base.css">

    <!-- STEP 1 CSS FILE **** STEP 1 CSS FILE *** STEP 1 CSS FILE -->
    <link rel="stylesheet" href="./step-1.css">

    <!-- STEP 2 CSS FILE **** STEP 2 CSS FILE *** STEP 2 CSS FILE -->
    <link rel="stylesheet" href="./step-2.css">

    <!-- STEP 3 CSS FILE **** STEP 3 CSS FILE *** STEP 3 CSS FILE -->
    <link rel="stylesheet" href="./step-3.css">

</head>
<body>
<main class="main-wrapper">

    <!-- Step-1.1 Position the header at the top of the screen-->
    <header class="header">

        <!-- Step-2.3 add styles to match the step-2 design  -->
        <div class="logo-container"></div>

        <!-- Step-2.4 add styles to match the step-2 design-->
        <div class="menu-container"></div>

    </header>

    <section class="main-section">

        <!-- Step-1.2 Position content-left to the left of the screen-->
        <div class="content-left">

            <!-- Step-2.1 add styles to match the step-2 design  -->
            <div class="profile-image-container"></div>

            <!-- Step-2.2 add styles to match the step-2 design-->
            <div class="profile-links-container"></div>

        </div>
        <!-- step-1.3 Position content-mid to the middle of the screen-->
        <div class="content-mid">

            <section class="content-container">

                <!-- Step-3.1 add styles to match the step-3 design. This is the header   -->
                <header class="content-mid-header"></header>

                <!-- Step-3.2 add styles to match the step-3 design. This is the content section  -->
                <div class="content">

                    <!-- Step-3.3 add some content  -->

                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                        accusantium doloremque laudantium, totam rem aperiam, Sed ut perspiciatis
                        unde omnis iste natus error sit voluptatem
                        accusantium doloremque laudantium, totam rem aperiam, </p>
                </div>

            </section>

        </div>

    </section>

    <!-- Step-1.4 Position the footer at the bottom of the screen-->
    <footer class="footer"> </footer>

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