simplegrid/index.html at master · drinkingChai/simplegrid · 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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name=viewport content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/fontawesome-free-5.0.1/web-fonts-with-css/css/fontawesome-all.css">
    <link rel="stylesheet" type="text/css" href="css/test.css">
  </head>
  <body>

    <nav>
      <ul class="w-90">
        <li class="logo"><a href="index.html">GridIt!</a></li>
        <li><a href="formdemo.html">Form Demo</a></li>
        <!-- <li><a href="">Form Demo</a></li> -->
      </ul>
    </nav>

    <main class="w-90">
      <div class="banner w-90-escape">
        <img src="http://via.placeholder.com/1600x600" alt="">
      </div>

      <div class="row">
        <div class="col-12"><h3>Grid</h3></div>
        <!-- <div class="col-4"><img src="http://via.placeholder.com/600x350" alt=""></div>
        <div class="col-4"><img src="http://via.placeholder.com/600x350" alt=""></div>
        <div class="col-4"><img src="http://via.placeholder.com/600x350" alt=""></div> -->
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-2"><img src="http://via.placeholder.com/150x75" alt=""></div>
        <div class="col-2"><img src="http://via.placeholder.com/150x75" alt=""></div>
        <div class="col-2"><img src="http://via.placeholder.com/150x75" alt=""></div>
        <div class="col-2 col-offset-2"><img src="http://via.placeholder.com/150x75" alt=""></div>
        <div class="col-2"><img src="http://via.placeholder.com/150x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-1"><img src="http://via.placeholder.com/75x75" alt=""></div>
        <div class="col-8 col-offset-2"><img src="http://via.placeholder.com/800x75" alt=""></div>
        <div class="col-12"><img src="http://via.placeholder.com/1600x90" alt=""></div>
      </div>

      <div class="row">
        <div class="col-12">
          <h3 class="text-center">Gallery</h3>
          <hr/>
        </div>
        <div class="col-4"><img src="http://via.placeholder.com/600x350" alt=""></div>
        <div class="col-4"><img src="http://via.placeholder.com/600x350" alt=""></div>
        <div class="col-4"><img src="http://via.placeholder.com/600x350" alt=""></div>
        <div class="col-4"><img src="http://via.placeholder.com/600x350" alt=""></div>
        <div class="col-4"><img src="http://via.placeholder.com/600x350" alt=""></div>
        <div class="col-4"><img src="http://via.placeholder.com/600x350" alt=""></div>
      </div>

      <div class="row">
        <div class="col-6">
          <h4>Lorem ipsum dolor sit amet</h4>
          <hr>
          <p>Integer euismod, tellus vitae bibendum placerat</p>
          <ul>
            <li>Morbi non vehicula enim</li>
            <li>Vestibulum gravida ac velit</li>
            <li>Nam sollicitudin eu tortor sed ornare</li>
          </ul>
          <br>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas dolor nisi. Aenean vel sodales justo. Donec vel condimentum nibh. Aenean et accumsan risus, eu mattis sem. Donec sodales eros sit amet lacus pellentesque, mattis feugiat leo semper. Donec vulputate vestibulum elit, ac hendrerit risus blandit faucibus. Aenean scelerisque, eros finibus pulvinar varius, enim metus hendrerit metus, eu lobortis augue ipsum a magna.</p>
        </div>
        <div class="col-6">
          <img src="http://via.placeholder.com/600x350" alt="">
        </div>
      </div>
    </main>

    <footer>
      <p>Made with <i class="fab fa-sass"></i> by Wasif Zaman</p>
    </footer>

  </body>
</html>