sanic_start

start.html
208 строк · 6.4 Кб
Перенос по словам
1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Document</title>
7
  <link rel="stylesheet" href="https://unpkg.com/bulma@1.0.0/css/bulma.min.css">
8
  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
9
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
10
  <link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
11
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
12
  <style>
13
    @media(max-width: 500px) {
14
      .reverse-columns {
15
        flex-direction: column-reverse;
16
        display: flex;
17
      }
18
    }
19

20
    .titled {
21
      font-family: 'Merriweather', serif !important;
22
      font-size: 58px !important;
23
      font-weight: 400 !important;
24
      line-height: 64px !important;
25
    }
26

27
    .subtitled {
28
      font-family: 'Merriweather', serif !important;
29
      font-size: 22px !important;
30
      font-weight: 400 !important;
31
      line-height: 36px !important;
32
    }
33
  </style>
34
</head>
35

36
<body>
37
  <!-- NavBar va a todo lo ancho -->
38
  <nav class="navbar" role="navigation" aria-label="main navigation">
39
    <div class="navbar-brand">
40
      <a class="navbar-item" href="/">
41
        <img src="/static/media/foto_1.jpg" width="40" height="40">
42
      </a>
43
    </div>
44

45
    <div class="navbar-menu">
46

47
      <div class="navbar-end">
48
        <a class="navbar-item" href="/">
49
          Home
50
        </a>
51

52
        <a class="navbar-item">
53
          BUY
54
        </a>
55

56
        <a class="navbar-item">
57
          ILLUSTRATION SERIES
58
        </a>
59

60
        <a class="navbar-item">
61
          EXCLUSIVE ILLUSTRATIONS
62
        </a>
63

64
      </div>
65
    </div>
66
  </nav>
67

68
  <!-- Hero del producto -->
69
  <section class="hero is-white is-fullheight">
70
    <div class="hero-body">
71
      <div class="container">
72
        <div class="columns  is-vcentered reverse-columns">
73
          <div class="column
74
          is-10-mobile 
75
          is-10-tablet 
76
          is-5-desktop 
77
          is-5-widescreen 
78
          is-5-fullhd " data-aos="fade-down">
79
            <h1 class="title titled is-1 mb-6">
80
              Evolving business with technology
81
            </h1>
82
            <div class="buttons">
83
              <button class="button is-yellow">Esablished technical teams</button>
84
              <button class="button">Less-technical teams</button>
85
            </div>
86
          </div>
87
          <div data-aos="fade-right" class="column
88
          is-10-mobile 
89
          is-10-tablet 
90
          is-4-desktop 
91
          is-7-widescreen 
92
          is-4-fullhd is-offset-1-fullhd">
93
            <figure class="image is-square">
94
              <img src="/static/media/foto_1.jpg">
95
            </figure>
96
          </div>
97

98
        </div>
99
      </div>
100
    </div>
101
  </section>
102

103
  <section class="hero is-white is-fullheight">
104
    <div class="hero-body">
105
      <div class="container">
106
        <div class="columns  is-vcentered">
107
          <div data-aos="fade-left" class="column
108
          is-10-mobile is-offset-1-mobile
109
          is-10-tablet is-offset-1-tablet
110
          is-4-desktop is-offset-1-desktop
111
          is-4-widescreen is-offset-1-widescreen
112
          is-4-fullhd is-offset-1-fullhd">
113
            <figure class="image is-square">
114
              <img src="/static/media/foto_1.jpg">
115
            </figure>
116
          </div>
117
          <div data-aos="fade-down" class="column
118
          is-10-mobile is-offset-1-mobile
119
          is-10-tablet is-offset-1-tablet
120
          is-5-desktop is-offset-1-desktop
121
          is-5-widescreen is-offset-1-widescreen
122
          is-5-fullhd is-offset-1-fullhd">
123
            <h1 class="titled title is-1 mb-6">
124
              absurd illustrations that make sense
125
            </h1>
126
            <h2 class="subtitled subtitle">
127
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum cupiditate dolorum vitae dolores
128
              nesciunt totam magni quas.
129
            </h2>
130
          </div>
131

132
        </div>
133
      </div>
134
    </div>
135
  </section>
136

137
  <section class="hero is-white is-fullheight">
138
    <div class="hero-body">
139
      <div class="container">
140
        <div class="columns  is-vcentered reverse-columns">
141
          <div data-aos="fade-right" class="column
142
          is-10-mobile is-offset-1-mobile
143
          is-10-tablet is-offset-1-tablet
144
          is-5-desktop is-offset-1-desktop
145
          is-5-widescreen is-offset-1-widescreen
146
          is-5-fullhd is-offset-1-fullhd">
147
            <h1 class="title titled is-1 mb-6">
148
              absurd illustrations that make sense
149
            </h1>
150
            <h2 class="subtitle subtitled">
151
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum cupiditate dolorum vitae dolores
152
              nesciunt totam magni quas.
153
            </h2>
154
          </div>
155
          <div data-aos="fade-down" class="column
156
          is-10-mobile is-offset-1-mobile
157
          is-10-tablet is-offset-1-tablet
158
          is-4-desktop is-offset-1-desktop
159
          is-4-widescreen is-offset-1-widescreen
160
          is-4-fullhd is-offset-1-fullhd" data-aos="fade-up">
161
            <figure class="image is-square">
162
              <img src="/static/media/foto_1.jpg">
163
            </figure>
164
          </div>
165

166
        </div>
167
      </div>
168
    </div>
169
  </section>
170

171
  <section class="hero is-medium has-text-centered">
172
    <div class="hero-body">
173
      <div class="container">
174
        <div class="columns is-centered">
175
          <div data-aos="zoom-in-up" class="column is-8">
176
            <h1 class="title titled is-1 mb-6">
177
              Primary bold title <span id="typewriter"></span>
178
            </h1>
179
            <h2 class="subtitle subtitled">
180
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laborum cupiditate dolorum vitae dolores
181
              nesciunt totam magni quas.
182
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
183
            </h2>
184
          </div>
185
        </div>
186

187
      </div>
188
    </div>
189
  </section>
190

191

192
  <script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/2.13.1/core.min.js"></script>
193
  <script>
194
    new Typewriter('#typewriter', {
195
      strings: ['typewriter', 'Effect', 'typewriter.js', 'example'],
196
      autoStart: true,
197
      loop: true,
198
    });
199
  </script>
200
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
201
  <script>
202
    AOS.init({
203
      once: true
204
    });
205
  </script>
206
</body>
207

208
</html>
209
sanic_start

Использование cookies
