bulma-templates/templates/grid-metro.html at master · csseditor/bulma-templates · 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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Metro Grid - Free Bulma template</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.1.0/css/bulma.min.css">
  <link rel="stylesheet" type="text/css" href="../css/grid-metro.css">
</head>
<body>
  <nav class="nav has-shadow" id="top">
    <div class="container">
      <div class="nav-left">
        <a class="nav-item" href="../index.html">
          <img src="../images/bulma.png" alt="Description">
        </a>
      </div>
      <span class="nav-toggle">
        <span></span>
        <span></span>
        <span></span>
      </span>
      <div class="nav-right nav-menu">
        <a class="nav-item is-tab is-active">
          Home
        </a>
        <a class="nav-item is-tab">
          Features
        </a>
        <a class="nav-item is-tab">
          Team
        </a>
        <a class="nav-item is-tab">
          Help
        </a>
        <span class="nav-item">
          <a class="button">
            Log in
          </a>
          <a class="button is-info">
            Sign up
          </a>
        </span>
      </div>
    </div>
  </nav>
  <section class="section app">
    <!-- Uncomment if you want to use a container <div class="container"> -->
      <div class="tile is-ancestor">
        <div class="tile is-parent">
        <article class="tile is-child notification is-warning has-text-centered stat-tile">
            <br>
            <p class="title">Hello World</p>
          </article>
        </div>
        <div class="tile is-parent">
        <article class="tile is-child notification is-info has-text-centered stat-tile">
            <p class="title">212</p>
            <p class="subtitle"><i class="fa fa-twitter"></i></p>
          </article>
        </div>
        <div class="tile is-parent">
        <article class="tile is-child notification is-primary has-text-centered stat-tile">
            <p class="title">212</p>
            <p class="subtitle"><i class="fa fa-facebook"></i></p>
          </article>
        </div>
        <div class="tile is-parent">
        <article class="tile is-child notification is-danger has-text-centered stat-tile">
            <p class="title">212</p>
            <p class="subtitle"><i class="fa fa-google"></i></p>
          </article>
        </div>
        <div class="tile is-parent">
        <article class="tile is-child notification is-dark has-text-centered stat-tile">
            <p class="title">212</p>
            <p class="subtitle"><i class="fa fa-github"></i></p>
          </article>
        </div>
      </div>
      <div class="tile is-ancestor">

        <div class="tile is-vertical is-8">
          <div class="tile">
            <div class="tile is-parent is-vertical">
              <article class="tile is-child notification is-primary">
                <p class="title">Vertical...</p>
                <p class="subtitle">Top tile</p>
              </article>
              <article class="tile is-child notification is-warning">
                <p class="title">...tiles</p>
                <p class="subtitle">Bottom tile</p>
              </article>
            </div>
            <div class="tile is-parent">
              <article class="tile is-child notification is-info">
                <p class="title">Middle tile</p>
                <p class="subtitle">With an image</p>
                <figure class="image is-4by3">
                  <img src="http://placehold.it/640x480">
                </figure>
              </article>
            </div>
          </div>
          <div class="tile is-parent is-bold">
            <article class="tile is-child notification is-danger">
              <p class="title">Wide tile</p>
              <p class="subtitle">Aligned with the right tile</p>
              <div class="content">
                <!-- Content -->
              </div>
            </article>
          </div>
        </div>

        <div class="tile is-parent">
          <article class="tile is-child notification is-success">
            <div class="content">
              <p class="title">Tall tile</p>
              <p class="subtitle">With even more content</p>
              <div class="content">
                <!-- Content -->
              </div>
            </div>
          </article>
        </div>
      </div>
     <!-- Uncomment if you want to use a container </div> -->
  </section>
  <script type="text/javascript" src="../js/bulma.js"></script>
</body>
</html>