theplayground/index.css at main · TheRobotCodingMan/theplayground · 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
body {
  background-color: #002266;
  color: white;
}

h1,
h2 {
  font-family: 'Rubik', sans-serif;
}

p {
  font-family: 'Oswald', sans-serif;
  margin: 10px;
  border-left: 6px solid #1ac9ff;
  background-color: #cecece;
  color: black;
}

.divp{
  width: 200px;
  height: 200px;
  background-color: red;
  transition: width 2s, height 2s, transform 2s;
}

#divp1:hover {
  width: 500px;
  height: 500px;
  transform: rotate(180deg);
}
.main {
  display: inline-flex;
}

.box {
  font-size: 17px;
  color: white;
  font-family: 'Oswald', sans-serif;
  border: none;
  margin: 8px;
}

#box1::after {
  content: "Hello! This is a moving div!";
  display: flex;
  transform: rotateX(180deg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .0) 10%, rgba(255, 255, 255, .5));
  -webkit-background-clip: text;
  color: white;
}