Grid-System/index.html at main · ghostcode1999/Grid-System · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid System With CSS Grid</title>
    <link rel="icon" href="imgs/favicon.png" type="image/png">
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body class="wrapper">
    <!-- <button class="skip-to-content | btn">Skip To Content</button> -->
    <header class="primary-header">
      <a href="index.html" class="logo"> SimplTag </a>

      <nav>
        <ul class="nav-list">
          <li>Home</li>
          <li>About</li>
          <li>Blog</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <main class="wrapper">
      <section class="hero | row content no-gutter">
        <h1 class="main__title hero__title">
          Subgrid is what grid was meant to be
        </h1>
        <img class="hero__img" src="imgs/hero.jpg" alt="" class="hero-img" />
        <div class="hero__body | flow">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores,
            sunt voluptatum! Accusantium quis expedita sit!
          </p>
          <a class="btn" href="#">More info</a>
        </div>
      </section>

      <section class="sales-points | row sm-cols-2 lg-cols-3">
        <div class="sales-points__sales-point">
          <h2>Easier</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
          <button class="btn">Explore More...</button>
        </div>
        <div class="sales-points__sales-point offset-start-1 lg-col-5">
          <h2>Consistent</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
          <button class="btn">Explore More...</button>
        </div>
        <div class="sales-points__sales-point">
          <h2>Faster</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
          <button class="btn">Explore More...</button>
        </div>
      </section>

      <section class="more-stuff | row sm-cols-2">
        <h2 class="col-12 | text-center">More Stuff Here</h2>
        <p class="col-12 | text-center lead">CSS Grid make my life easier, you can make rows & columns easily, overlap things, break your grid system rules with no side effects and much much more...</p>
        <div class="sales-points__sales-point">
          <h2 class="sales-points__title">Faster</h2>
          <p class="sales-point__body">
            Delectus perferendis doloribus mollitia quibusdam facere eius!
          </p>
        </div>
        <div class="sales-points__sales-point">
          <h2 class="sales-points__title">Consistent</h2>
          <p class="sales-point__body">
            Delectus perferendis doloribus mollitia quibusdam facere eius!
          </p>
        </div>
        <div class="sales-points__sales-point">
          <h2 class="sales-points__title">Easier</h2>
          <p class="sales-point__body">
            Delectus perferendis doloribus mollitia quibusdam facere eius!
          </p>
        </div>
      </section>

      <section class="cta | row">
        <div class="flow">
          <h2>Sign up for our newsletter!</h2>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
            consequuntur repellat facilis provident dolorum laborum blanditiis
            veritatis, ipsa sequi cumque soluta quod fugiat dolorem quam.
          </p>
          <form>
            <label for="">Your email:</label>
            <input type="text" placeholder="sam@example.com" />
          </form>
        </div>
      </section>

      <section class="full-split | row sm-cols-2">
        <img src="imgs/full.png" alt="" />
        <div class="v-center">
          <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Neque
            quisquam distinctio laudantium velit similique a ducimus, quae sint,
            adipisci quidem eaque voluptate illum aut. Dolorum inventore illum
            molestiae atque possimus?
          </p>
        </div>
      </section>

      <section class="showcase | row sm-cols-2 lg-cols-3">
        <h2 class="col-12 | text-center">Time to eat</h2>
        <p class="col-12 | lead text-center">
          Some description for this section, let's call it a section-desc for
          example, it's just for showcase
        </p>

        <div class="showcase-card showcase-card--special">
          <img src="imgs/img-1.jpg" alt="some text" />
          <h3>Excited, Right?</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="showcase-card">
          <img src="imgs/img-2.jpg" alt="some text" />
          <h3>Read Docs</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="showcase-card">
          <img src="imgs/img-3.jpg" alt="some text" />
          <h3>Start Coding</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="showcase-card">
          <img src="imgs/img-4.jpg" alt="some text" />
          <h3>And Have Fun</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
        <div class="showcase-card">
          <img src="imgs/img-5.jpg" alt="some text" />
          <h3>And That's All</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </section>
    </main>
  </body>
</html>