Skip to content

Commit 360040d

Browse files
DarLar57DarLar57
committed
w3s: add my new comment
Signed-off-by: Dariusz Larsen <dariusz.larsen@gmail.com>
1 parent fc26861 commit 360040d

File tree

1 file changed

+101
-0
lines changed

1 file changed

+101
-0
lines changed

Diff for: ‎index.html

+101
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,107 @@ <h3>Contribute</h3>
102102

103103
<!-- Insert your message below here -->
104104

105+
<!-- Dariusz Larsen's Start -->
106+
<div class="container-DL">
107+
<div class="flip-card-DL">
108+
<div class="flip-card-inner-DL" style="width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; position: relative;">
109+
<div class="flip-card-front-DL">
110+
<h1 class="flip-card-front-DL-h1">
111+
Thanks for all various courses of W3S !!!
112+
</h1>
113+
<p style="font-size: small;">hovering flips</p>
114+
</div>
115+
<div class="flip-card-back-DL">
116+
<h1 class="flip-card-back-DL-h1">
117+
Dariusz Larsen &#128077;
118+
</h1>
119+
<p style="font-size: medium;">Warsaw / POLAND</p>
120+
<p style="font-size: medium;">2025-01-16</p>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
126+
<style>
127+
.flip-card-DL:hover .flip-card-inner-DL {
128+
transform: rotateY(180deg);
129+
}
130+
131+
.flip-card-DL {
132+
font-family: 'Roboto', sans-serif;
133+
width: 350px;
134+
height: 400px;
135+
perspective: 1100px;
136+
}
137+
138+
.flip-card-back-DL {
139+
position: absolute;
140+
width: 100%;
141+
height: 100%;
142+
display: flex;
143+
flex-direction: column;
144+
justify-content: center;
145+
align-items: center;
146+
border: 1px solid blue;
147+
border-radius: 1rem;
148+
background: #000000;
149+
color: blue;
150+
box-shadow: 2px 10px 50px 10px blue;
151+
backface-visibility: hidden;
152+
transform: rotateY(180deg);
153+
}
154+
155+
.flip-card-back-DL-h1 {
156+
font-family: 'Roboto', sans-serif;
157+
font-size: 22px;
158+
background-color: black;
159+
color: lightblue;
160+
padding: 0.5rem 1rem;
161+
border: 0.25rem solid blue;
162+
box-shadow: 5px 5px 50px 10px blue;
163+
border-radius: 8px;
164+
margin: 0 0 0.5rem 0;
165+
}
166+
167+
.flip-card-front-DL {
168+
position: absolute;
169+
width: 100%;
170+
height: 100%;
171+
display: flex;
172+
flex-direction: column;
173+
justify-content: center;
174+
align-items: center;
175+
border: 1px solid yellow;
176+
border-radius: 1rem;
177+
background: yellow;
178+
color: #000000;
179+
box-shadow: -2px 10px 50px 10px black;
180+
backface-visibility: hidden;
181+
}
182+
183+
.flip-card-front-DL-h1 {
184+
font-family: 'Roboto', sans-serif;
185+
font-size: 22px;
186+
background-color: #000000;
187+
color: #ff8c00;
188+
padding: 0.5rem 1rem;
189+
margin: 40px;
190+
border: 0.25rem solid #ff8c00;
191+
box-shadow: 10px 10px 50px 10px blue;
192+
border-radius: 8px;
193+
}
194+
195+
.container-DL {
196+
display: flex;
197+
margin: 2rem 0.5rem;
198+
justify-content: center;
199+
gap: 1rem;
200+
flex-wrap: wrap;
201+
}
202+
203+
</style>
204+
<!-- Dariusz Larsen's End -->
205+
105206

106207
<h1>Thank you!</h1>
107208
<p>Hello from NYC where congestion pricing is now in effect!<p>

0 commit comments

Comments
 (0)