-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdevwell.css
128 lines (114 loc) · 13.2 KB
/
devwell.css
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
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital@1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Chokokutai&family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Agdasima&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 300px;
text-shadow: 8px 8px 10px #0000008c;
background-color: #01102f;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 881 211' fill='white' aria-hidden='true' class='pointer-events-none absolute -right-44 top-14 w-%5B55.0625rem%5D origin-top-right rotate-%5B30deg%5D overflow-visible opacity-70'%3E%3Cdefs%3E%3Cfilter id=':R2pd6:'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='.5'%3E%3C/feGaussianBlur%3E%3C/filter%3E%3C/defs%3E%3Cpath stroke='purple' stroke-opacity='0.2' stroke-dasharray='1' stroke-dashoffset='1' pathLength='1' fill='transparent' d='M 247,103L261,86L307,104L357,36' class='invisible' style='stroke-dashoffset: 0; visibility: visible;'%3E%3C/path%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='247' cy='103' r='1' style='transform-origin: 15.4375rem 6.4375rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='261' cy='86' r='1' style='transform-origin: 16.3125rem 5.375rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='307' cy='104' r='1' style='transform-origin: 19.1875rem 6.5rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='357' cy='36' r='1' style='transform-origin: 22.3125rem 2.25rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cpath stroke='purple' stroke-opacity='0.2' stroke-dasharray='1' stroke-dashoffset='1' pathLength='1' fill='transparent' d='M 586,120L516,100L491,62L440,107L477,180L516,100' class='invisible' style='stroke-dashoffset: 0; visibility: visible; fill: rgba(255, 255, 255, 0.02);'%3E%3C/path%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='586' cy='120' r='1' style='transform-origin: 36.625rem 7.5rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='516' cy='100' r='1' style='transform-origin: 32.25rem 6.25rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='491' cy='62' r='1' style='transform-origin: 30.6875rem 3.875rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='440' cy='107' r='1' style='transform-origin: 27.5rem 6.6875rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='477' cy='180' r='1' style='transform-origin: 29.8125rem 11.25rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cpath stroke='purple' stroke-opacity='0.2' stroke-dasharray='1' stroke-dashoffset='1' pathLength='1' fill='transparent' d='M 733,100L803,120L879,113L823,164L803,120' class='invisible' style='stroke-dashoffset: 0; visibility: visible; fill: rgba(255, 255, 255, 0.02);'%3E%3C/path%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='733' cy='100' r='1' style='transform-origin: 45.8125rem 6.25rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='803' cy='120' r='1' style='transform-origin: 50.1875rem 7.5rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='879' cy='113' r='1' style='transform-origin: 54.9375rem 7.0625rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='823' cy='164' r='1' style='transform-origin: 51.4375rem 10.25rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='4' cy='4' r='1' style='transform-origin: 0.25rem 0.25rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='4' cy='44' r='1' style='transform-origin: 0.25rem 2.75rem; opacity: 0.2; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='36' cy='22' r='1' style='transform-origin: 2.25rem 1.375rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='50' cy='146' r='1' style='transform-origin: 3.125rem 9.125rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='64' cy='43' r='1' style='transform-origin: 4rem 2.6875rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='76' cy='30' r='1' style='transform-origin: 4.75rem 1.875rem; opacity: 0.2; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='101' cy='116' r='1' style='transform-origin: 6.3125rem 7.25rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='140' cy='36' r='1' style='transform-origin: 8.75rem 2.25rem; opacity: 0.2; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='149' cy='134' r='1' style='transform-origin: 9.3125rem 8.375rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='162' cy='74' r='1' style='transform-origin: 10.125rem 4.625rem; opacity: 0.2; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='171' cy='96' r='1' style='transform-origin: 10.6875rem 6rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='210' cy='56' r='1' style='transform-origin: 13.125rem 3.5rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='235' cy='90' r='1' style='transform-origin: 14.6875rem 5.625rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='275' cy='82' r='1' style='transform-origin: 17.1875rem 5.125rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='306' cy='6' r='1' style='transform-origin: 19.125rem 0.375rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='307' cy='64' r='1' style='transform-origin: 19.1875rem 4rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='380' cy='68' r='1' style='transform-origin: 23.75rem 4.25rem; opacity: 0.2; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='380' cy='108' r='1' style='transform-origin: 23.75rem 6.75rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='391' cy='148' r='1' style='transform-origin: 24.4375rem 9.25rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='405' cy='18' r='1' style='transform-origin: 25.3125rem 1.125rem; opacity: 0.2; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='412' cy='86' r='1' style='transform-origin: 25.75rem 5.375rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='426' cy='210' r='1' style='transform-origin: 26.625rem 13.125rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='427' cy='56' r='1' style='transform-origin: 26.6875rem 3.5rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='538' cy='138' r='1' style='transform-origin: 33.625rem 8.625rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='563' cy='88' r='1' style='transform-origin: 35.1875rem 5.5rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='611' cy='154' r='1' style='transform-origin: 38.1875rem 9.625rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='637' cy='150' r='1' style='transform-origin: 39.8125rem 9.375rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='651' cy='146' r='1' style='transform-origin: 40.6875rem 9.125rem; opacity: 0.2; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='682' cy='70' r='1' style='transform-origin: 42.625rem 4.375rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='683' cy='128' r='1' style='transform-origin: 42.6875rem 8rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='781' cy='82' r='1' style='transform-origin: 48.8125rem 5.125rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='785' cy='158' r='1' style='transform-origin: 49.0625rem 9.875rem; opacity: 0.2; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='832' cy='146' r='1' style='transform-origin: 52rem 9.125rem; opacity: 0.2; transform: scale(var(--motion-scale));' filter='url(%23:R2pd6:)'%3E%3C/circle%3E%3C/g%3E%3Cg class='opacity-0' style='opacity: 1;'%3E%3Ccircle cx='852' cy='89' r='1' style='transform-origin: 53.25rem 5.5625rem; opacity: 1; transform: scale(var(--motion-scale));'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
height: 520px;
}
:root {
--text-color: hsl(0, 0%, 100%);
}
.wrapper {
display: grid;
place-content: center;
background-color: transparent;
min-height: 0vh;
font-family: "Oswald", sans-serif;
font-size: clamp(1.2rem, 1rem + 10vw, 15rem);
font-weight: 700;
text-transform: uppercase;
color: var(--text-color);
margin-left: 18px;
}
.wrapper > div {
grid-area: 1/1/-1/-1;
}
.top {
clip-path: polygon(0% 0%, 100% 0%, 100% 48%, 0% 58%);
}
.bottom {
clip-path: polygon(0% 60%, 100% 50%, 100% 100%, 0% 100%);
color: transparent;
background: -webkit-linear-gradient(
177deg,
#92c5fe 53%,
var(--text-color) 65%
);
background: linear-gradient(177deg, #92c5fe 53%, var(--text-color) 65%);
background-clip: text;
-webkit-background-clip: text;
transform: translateX(-0.02em);
}
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500&display=swap");
.tagline {
font-size: 12px;
font-weight: 800;
margin-top: -10px;
margin-left: 80px;
color: mintcream;
font-family: "Dancing Script", cursive;
filter: drop-shadow(10px 20px 40px red);
}
.card {
height: 220px;
width: 250px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20px;
border: 2px solid #233457;
background-color: #2a3350;
margin-top: 25px;
border-radius: 10px;
}
#carousel-image {
max-height: 250px;
max-width: 150px;
}
#carousel-paragraph {
margin-left: 10px;
padding: 5px;
font-family: "Agdasima", sans-serif;
font-size: 18px;
color: #92c5fe;
max-height: 200px;
}
#active-time {
margin-left: 20%;
align-items: center;
transition: 0.5s;
font-size: 25px;
font-family: "Chokokutai", cursive;
text-shadow: 2px 2px 4px #000;
color: #92c5fe;
}
.water {
height: 100px;
display: flex;
}
.water__img {
height: 100px;
margin-top: 20px;
}
.water__prompt {
font-family: "Agdasima", sans-serif;
font-size: 18px;
color: #92c5fe;
margin-top: 50px;
}
.contact {
float: right;
margin-right: 20px;
color: #92c5fe;
}
.contact > ul {
list-style: none;
}