crl.github.io/index.html at conquering-responsive-layouts · dedo-dev/crl.github.io · 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Oswald:wght@700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Final Challenge</title>
</head>
<body>

  <header>
    <div class="container row">
      <button class="nav-toggle">
        <span class="hamburger"></span>
      </button>
      <a href="#" class="logo">
        <img src="img/logo.svg" alt="final challenge">
      </a>
      <nav class="nav">
        <ul class="nav__list nav__list--primary">
          <li class="nav__item"><a href="#" class="nav__link">home</a></li>
          <li class="nav__item"><a href="#" class="nav__link">about</a></li>
          <li class="nav__item"><a href="#" class="nav__link">contact</a></li>
        </ul>
        <ul class="nav__list nav__list--secondary">
          <li class="nav__item"><a href="#" class="nav__link">sign in</a></li>
          <li class="nav__item"><a href="#" class="nav__link nav__link--button">sign up</a></li>
        </ul>
      </nav>
    </div>

  </header>

  <section class="hero-bg">

    <div class="hero container">
      <div class="hero__heading">
        <h1 class="hero__title">Responsive layouts <br class="mobile-none desktop-none"><span class="text-accent">don't have to be a struggle</span></h1>
      </div>
      <div class="hero__text">
        <p>Lorem ipsum dolor sit amet, consectetur
          adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua.</p>
        <a href="#" class="button">i want  to learn</a>
      </div>
    </div>

  </section>

  <section class="intro">

    <div class="container row">
      <div class="col">
        <h2 class="intro-title">Mobile-first</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque totam modi excepturi maxime sunt.</p>
      </div>
      <div class="col">
        <h2 class="intro-title">Efficent</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque totam modi excepturi maxime sunt.</p>
      </div>
      <div class="col">
        <h2 class="intro-title">Done right</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque totam modi excepturi maxime sunt.</p>
      </div>
    </div>

  </section>

  <main class="main container">

    <div class="primary-content">
      <section class="section">
        <div>
          <h2 class="section-title">It doesn't have to be so hard</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam.
          </p>
          <img src="img/the-image.jpg" alt="website sketches" class="section__img">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam.</p>
        </div>
      </section>
      <aside class="sidebar">
        <div class="sidebar__card">
          <h2 class="sidebar__card-title">Break it down</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque totam modi excepturi maxime sunt.</p>
        </div>
        <div class="sidebar__card">
          <h2 class="sidebar__card-title">Work your way up</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque totam modi excepturi maxime sunt.</p>
        </div>
        <div class="sidebar__card">
          <h2 class="sidebar__card-title">What's the craic</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex atque totam modi excepturi maxime sunt.</p>
        </div>
      </aside>
    </div>

  </main>

  <footer>
    <div class="container">
      <h2 class="footer__title">Just scratching the surface</h2>
      <div class="footer">
        <div class="about">
          <h3 class="footer__item-title">About our company</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing
            elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam.
          </p>
        </div>
        <div class="link">
          <h3 class="footer__item-title">Getting around</h3>
          <ul class="footer__list">
            <li class="footer__item"><a href="#" class="footer__link">Home</a></li>
            <li class="footer__item"><a href="#" class="footer__link">About</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Contact</a></li>
          </ul>
        </div>
        <div class="link">
          <h3 class="footer__item-title">Other things</h3>
          <ul class="footer__list">
            <li class="footer__item"><a href="#" class="footer__link">Lorem ipsum</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Dolor</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Sit amet</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Consectetur</a></li>
          </ul>
        </div>
        <div class="link">
          <h3 class="footer__item-title">And more</h3>
          <ul class="footer__list">
            <li class="footer__item"><a href="#" class="footer__link">Lorem ipsum</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Dolor</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Sit amet</a></li>
            <li class="footer__item"><a href="#" class="footer__link">Consectetur</a></li>
          </ul>
        </div>
      </div>
    </div>
  </footer>

  <script src="main.js"></script>

</body>
</html>