Webbserver - Love Blomberg

Show sourcecode

The following files exists in this folder. Click to view.

public_html/gamla-kurser/webbutv1/ovningar/css/

bento_grid.css
css_ovning-flexbox.css
css_ovning10.css
css_ovning11.css
css_ovning3.css
css_ovning8a.css
css_ovning8b.css
css_ovning9.css
css_ovning9_alt.css

bento_grid.css

106 lines ASCII Windows (CRLF)
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
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Maven+Pro&family=Oswald&display=swap');

:root {
  color-scheme: dark;
}

.bentobox {
  display: grid;
  justify-content: space-between;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  border-radius: 5px;
  width: 50vw;
  height: 75vh;
}

#item1 {
  grid-column: 1/2;
  grid-row: 1/4;
}

#item2 {
  grid-column: 2/4;
  grid-row: 1/1;
}

#item3 {
  grid-column: 4/5;
  grid-row: 1/1;
}

#item4 {
  grid-column: 2/3;
  grid-row: 2/2;
}

#item5 {
  grid-column: 3/4;
  grid-row: 2/2;
}

#item6 {
  grid-column: 2/3;
  grid-row: 3/3;
}

#item7 {
  grid-column: 3/4;
  grid-row: 3/3;
}

#item8 {
  grid-column: 4/5;
  grid-row: 2/4;
}

.item {
  border-radius: 15px;
  background-color: black;
  margin: 5px;
  transition: .5s ease-out;
  background: black; /* default color */

  /* "to left" / "to right" - affects initial color */
  background: linear-gradient(to left, black 50%, white 50%) right;
  background-size: 200%;
}

.item:hover {
  transform: scale(1.05);
  background-position: left;
  cursor: pointer;
}

.item h2 {
  color: white;
  font-family: 'Dela Gothic One', cursive;
  font-style: 'Delta Gothic One';
  font-weight: lighter;
  mix-blend-mode: difference;  
  text-align: center;
  font-size: 1.5em;
  margin: 10px;
  padding: 0;
  position: absolute;
}

.item img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  mix-blend-mode: multiply;
  overflow: hidden;
}

h1 {
  font-family: 'Dela Gothic One', cursive;
  font-style: 'Delta Gothic One';
  font-weight: lighter;
}

body {
  background-color: rgb(15, 15, 15);
}