grid-flex-practice/index.html at master · Polcat000/grid-flex-practice · 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CSS Grid Practice</title>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
        <script src="resources/main.js"></script>
        <link rel="stylesheet" href="resources/css/style.css">
        <link rel="stylesheet" href="vendors/css/animate.css">

    </head>

    <body>
        <div class="container grid">
            <nav class="nav">
                <p id="logo">CSS GRID</p>

            </nav>

            <div class="header">
                <ul>
                    <li>This</li>
                    <li>is</li>
                    <li>the</li>
                    <li>header</li>
                </ul>


            </div>

            <div class="sidebar">
                <button class="btn"><a href="next.html">Switch it up?</a></button>
            </div>
            <article id="content" class="content">
                <span class="mobile">
                    <p> "nav"<br>
                        "header"<br>
                        "sidebar"<br>
                        "content"<br>
                        "footer";</p>
                </span>
                <span class="desktop">
                    <p> "nav nav nav"<br>
                        "header header header"<br>
                        "sidebar content content"<br>
                        "sidebar content content"<br>
                        "footer footer footer";</p>
                </span>
            </article>
            <div class="footer">Footer</div>


        </div>
    </body>

</html>