Webbserver - Love Blomberg

Show sourcecode

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

public_html/gamla-kurser/webbutv1/projekt/Cards/

cards.css
cards.html
vanilla-tilt.js
vanilla-tilt.min.js

cards.css

113 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
107
108
109
110
111
112
113
body {
  background-color: #0b0b26;
}

.container {
  display: block;
}

.card {
  float: left;
  display: grid;
  grid-template-columns: 25vw;
  grid-template-rows: 210px 250px 20px;
  grid-template-areas: "image" "text" "stats";

  border-radius: 18px;
  background: #1d1d1d;
  color: white;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
  font-family: 'Montserrat', sans-serif;
  text-align: justify;
  
  cursor: pointer;
  margin:30px;

  transform-style: preserve-3d;
  transform: perspective(1000px);
}

.card:hover {
  box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
}

.card-image {
  grid-area: image;
  background: linear-gradient(#fff0 0%, #fff0 70%, #1d1d1d 100%),url('https://live.staticflickr.com/1908/43096320430_75b9e98a1e_b.jpg');
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-size: cover;
}

.card-text {
  grid-area: text;
  margin: 25px;
  transform: translateZ(30px);
}
.card-text .date {
  color: rgb(255, 7, 110);
  font-size:13px;
}
.card-text p {
  color: grey;
  font-size:14px;
  font-weight: 300;
}
.card-text h2 {
  margin-top:0px;
  font-size:28px;
}

.card-stats {
  grid-area: stats; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;

  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background: rgb(255, 7, 110);
}

.card-stats .stat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  color: white;
  padding:10px;
}

.js-tilt-glare {
  border-radius: 18px;
}

.rgb::after {
  content:"";
  background: linear-gradient(45deg,
  #ff0000 0%, 
  #ff9a00 10%,
  #d0de21 20%,
  #4fdc4a 30%, 
  #3fdad8 40%,
  #2fc9e2 50%, 
  #1c7fee 60%, 
  #5f15f2 70%, 
  #ba0cf8 80%, 
  #fb07d9 90%, 
  #ff0000 100%  )
  repeat 0% 0% / 300% 100%;
  position: absolute;
  inset: -3px;
  border-radius: 16px;
  filter: blur(8px);
  transform: translateZ(-1px); /*or z-index */
  animation: rgb 6s linear infinite;
}

@keyframes rgb {
  0% {background-position: 0% 50%;}
  50% {background-position: 100% 50%;}
  100% {background-position: 0% 50%;}
}