Daniel-Hellsten/Seasons.html at master · DanielHellsten/Daniel-Hellsten · 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!DOCTYPE html>
<html>
  <head>
    <title>Seasons!</title>
    <link rel="stylesheet" href="MyStyleSheet.css">
    <style>
      div{font-size:24;
p{
color:black

}

button {width: 50px;
  height: 30px;
  font-size: 24px;

  background-color: red;
}

}

button:hover {
background-color: yellow;

}


input[type=number] {

  background-color: yellow;
}

.blender {
  background-blend-mode: hard-light;
}
      div.bounce {
  width: 100px;
  padding: 20px;
  background: blue;
  font-family:Snell Roundhand, cursive;
  position: relative;
  animation: bounce 1s ease-in 2s 6 alternate none;
}
@keyframes bounce {
	from {
	  top: 0px;
	  left: 0px;
	  }
	to {
	  top: 150px;
	  left: 150px;
	}
}

}
      ol{font-family:Snell Roundhand, cursive;
      font-size:20px;}
h2{
font-family:Snell Roundhand, cursive;
font-size:20px;


}

p {
  font-size: 20px;
  font-family:Snell Roundhand, cursive;
}
.italic {
  font-style: italic;
  }
th{font-family:Snell Roundhand, cursive;}
tr{font-family:Snell Roundhand, cursive;}

#top {
  font-size:50px;


}
.name{font-family:Snell Roundhand, cursive;
  font-weight:bold;
}
    table{background-color: yellow}

    @media (min-width:400px){
    body{
      background:green
    }
    }
    @media (max-width:1380px){
    body{
      background:blue}}

    @media (min-height:400px){
    body{
      background:green
    }
    }

    @media (max-width:1380px){
    body{
      background:blue}}

}
%message {
  font-family:Georgia;
  font-size:20px ;
  font-weight:bold;
  margin: 5px;
}


p.hometown {
  background: yellow;
}
a { color: blue; }
ul { margin-left: 0; }

ol{
  color:yellow
}
ul{
  color:orange
}

div.col-sm{

  font-size: 15px;
}

div.col{
position:relative;
bottom: 230;
left: 1200;

}
.img-responsive{
  position:relative;
  bottom: 230;
  left: 1200;
}

.alert-heading{
font-family:Snell Roundhand, cursive;

}

    </style>

  </head>
  <body>


    <div id="top">
      Four<span class="name"> Seasons </span>in Finland!
    </div>
    <p color:"lightblue">Summer.</p>
    <p class="hometown"; color:"green">Fall.</p>

    <p color:"orange">Winter.</p>
    <p class="hometown" color:"blue">Spring.</p>


<p><b>Seasonal</b> fluctuations in the year cycle in Finland strongly.</p>

</div>

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">In everyday language,</h4>
  <p>Finland's four seasons - spring, summer, autumn and winter - each take about three months.</p>
  <hr>
  <p class="mb-0">The sharp differences in the seasonal variations are clearly visible in nature. Here are some examples:</p>
</div>

      <table border="3px" ; align="right"; width="200px" height="400px">

        <tr>
          <th><a href="/Users/danielhellsten/Documents/GitHub/DanHell4/Spring.html">Spring</a></th>
</tr>
        <tr>

          <td>
            Spring is the time of year that follows winter.
            The spring months are March, April and May. In spring, the climate
            gets warmer and the snow and ice begin to melt.
            Floods are common as much water is created when snow and ice melts.
            In spring, migratory birds also return from the south and this can be
            said to be a clear sign of spring.
          </td>
  </tr>
  </table>


   <table border="3px" ; align="right"; width="200px" height="400px">

        <tr>
          <th><a href="/Users/danielhellsten/Documents/GitHub/DanHell4/Winter.html">Winter</a></th>
  </tr>
        <tr>
          <td>
            After autumn, the next season is winter. The winter months are
            December, January and February.
            Winter is Finland's coldest season, and it is often frosty.
In winter, you can also see beautiful Northern Lights in Finland.
Northern Lights are light phenomena that consist of colorful, dancing and
varying patterns in the night sky.
          </td>
  </tr>
  </table>

<table border="3px" ; align="right"; width="200px" height="400px">

      <tr>
        <th><a href="/Users/danielhellsten/Documents/GitHub/DanHell4/Autumn.html">Fall</a></th>
  </tr>
      <tr>
        <td>The fall months are September, October and November.

          In the fall, the weather gets cold and it rains a lot.
          A sure sign of fall is the phenomenon called fall colors.
          Fall colors mean a phenomenon whereby plants lose their colors.
          As the days go by and the night shorter, the plants know that it is
          spring, not fall.
        </td>
</tr>
</table>

<table border="3px" ; align="right"; width="200px" height="400px">
<tr>
  <th><a href="/Users/danielhellsten/Documents/GitHub/DanHell4/summer.html">Summer</a></th>
</tr>
<tr>
  <td>For many people, summer is the most beautiful season in Finland.
      Summer culminates in the Midsummer
     celebration in June. In this case, the so-called nightless night.
     A nightless night is a natural phenomenon where the sun does not l
     ower below the horizon during the day.
The summer months are June, July and August.
  </td>
      </tr>
    </table>


<img src= "/Users/danielhellsten/Documents/GitHub/DanHell4/four-seasons-summer-tree-431413.jpg" width= "300" height="400";>

<div class="container">
  <div class="row">
    <div class="col-sm">
      <h2>The people of eight seasons.

  The old people lived in and out of nature. The Peasant and the Sami people had to know carefully-</h2>
    </div>
    <div class="col-sm">
      <ol>
        <li>The nature cycle.</li>
        <ul>
          <li>The variations in the weather.</li>
          <li>The thickness of the snow.</li>
          <li>The bite of the frost.</li>
          <li>The best spawning grounds for spring.</li>
          <li>The first fines of summer.</li>
        </ul>
        <li>Eight seasons.</li>
      </ol>
    </div>
  </div>
</div>


    <div class="container">
      <div class="row">
        <div class="col-sm">
          <h2>The eight seasons are divided into four main seasons and four intermediate seasons.</h2>
        </div>
        <div class="col-sm">
          <ol>
            <li>Spring</li>
            <ul>
              -A tree stump of snow.
            </ul>
            <ul>
              -Ice departure.
            </ul>
            <li>Summer</li>
            <ul>
              -The midnight sun.
            </ul>
            <ul>
              -Harvesting.
            </ul>
            <li>Fall</li>
            <ul>
              -Fall colors.
            </ul>
            <ul>
              -The first snow.
            </ul>
            <li>Winter</li>
            <ul>
              -Christmas polar night.
            </ul>
            <ul>
              -Frosts.
            </ul>
          </ol>
        </div>
      </div>
    </div>


    <div class="container">
      <div class="row">
        <div class="col">Spring</div>
        <a href="/">
          <img class="img-responsive" src="/Users/danielhellsten/Documents/GitHub/DanHell4/8721736176_e08bd617c1_w.jpg" width="200" height="100">
        </a>
        <div class="col">Summer</div>
        <a href="/">
          <img class="img-responsive" src="/Users/danielhellsten/Documents/GitHub/DanHell4/8765306126_b1c9990726_c.jpg" width="200" height="100">
        </a>
        <div class="w-100"></div>
        <div class="col">Fall</div>
        <a href="/">
          <img class="img-responsive" src="/Users/danielhellsten/Documents/GitHub/DanHell4/2965039360_25ea1f5b01_c.jpg" width="200" height="100">
        </a>
        <div class="col">Winter</div>
        <a href="/">
          <img class="img-responsive" src="/Users/danielhellsten/Documents/GitHub/DanHell4/aurora-aurora-borealis-clouds-624015.jpg" width="200" height="100">
        </a>
      </div>
    </div>


    <form>
    <input name="name" type="number" placeholder="Your favorite number!">
<button>Submit</button>
    </form>


<div class="bounce">Seasons!</div>


 <div class="topright"></div>
  </body>
</html>