Skip to content

Commit 54ffd9c

Browse files
w3schools-testw3schools-test
authored
Merge branch 'master' into master
2 parents 718d426 + 421cac6 commit 54ffd9c

File tree

1 file changed

+108
-98
lines changed

1 file changed

+108
-98
lines changed

‎index.html

Lines changed: 108 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -109,106 +109,105 @@ <h3>Contribute</h3>
109109
</div>
110110
<!-- End of message from TXW4326 -->
111111

112-
<!--Message from Ragnaslav, cool cards BTW -->
113-
<div class="container-DLL">
114-
<div class="flip-card-DLL">
115-
<div class="flip-card-inner-DLL" style="width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; position: relative;">
116-
<div class="flip-card-front-DLL">
117-
<h1 class="flip-card-front-DLL-h1">
118-
From <b>Ukraine</b> with love!
119-
120-
</h1>
121-
<p style="font-size: small;">Hope this </p>
122-
</div>
123-
<div class="flip-card-back-DLL">
124-
<h1 class="flip-card-back-DLL-h1">
125-
Odesa &#128076;
126-
</h1>
127-
<p>Peaceful sky to all of us</p>
128-
</div>
129-
</div>
130-
</div>
131-
</div>
132-
133-
<style>
134-
.flip-card-DLL:hover .flip-card-inner-DLL {
135-
transform: rotateX(-180deg);
136-
}
137-
138-
.flip-card-DLL {
139-
font-family: 'Roboto', sans-serif;
140-
width: 350px;
141-
height: 400px;
142-
perspective: 1100px;
143-
}
144-
145-
.flip-card-back-DLL {
146-
position: absolute;
147-
width: 100%;
148-
height: 100%;
149-
display: flex;
150-
flex-direction: column;
151-
justify-content: center;
152-
align-items: center;
153-
border:ridge 2px #f3431c;
154-
border-radius: 2rem;
155-
background: #fff;
156-
color: blue;
157-
box-shadow: 2px 10px 50px 10px blue;
158-
backface-visibility: hidden;
159-
transform: rotateX(-180deg);
160-
}
161-
162-
.flip-card-back-DLL-h1 {
163-
font-family: 'Roboto', sans-serif;
164-
font-size: 22px;
165-
background-color: yellow;
166-
color: lightblue;
167-
padding: 0.5rem 1rem;
168-
border: 0.25rem solid blue;
169-
box-shadow: 5px 5px 50px 10px blue;
170-
border-radius: 8px;
171-
margin: 0 0 0.5rem 0;
172-
}
173112

174-
.flip-card-front-DLL {
175-
position: absolute;
176-
width: 100%;
177-
height: 100%;
178-
display: flex;
179-
flex-direction: column;
180-
justify-content: center;
181-
align-items: center;
182-
border: 1px solid black;
183-
border-radius: 1rem;
184-
background: linear-gradient(to bottom,rgb(255, 94, 0),white, green) !important ;
185-
color: #000000;
186-
box-shadow: -2px 10px 50px 10px black;
187-
backface-visibility: hidden;
188-
}
189-
190-
.flip-card-front-DLL-h1 {
191-
font-family: 'Roboto', sans-serif;
192-
font-size: 22px;
193-
background-color: rgba(255, 94, 0, 0.785);
194-
color: black;
195-
padding: 0.5rem 1rem;
196-
margin: 40px;
197-
border: 0.25rem double black;
198-
box-shadow: 15px 10px 40px 10px white;
199-
border-radius: 100px;
200-
}
201-
202-
.container-DLL {
203-
display: flex;
204-
margin: 2rem 0.5rem;
205-
justify-content: center;
206-
gap: 1rem;
207-
flex-wrap: wrap;
208-
}
113+
<!--Message from Ragnaslav, cool cards BTW -->
114+
<div class="container-DLL">
115+
<div class="flip-card-DLL">
116+
<div class="flip-card-inner-DLL" style="width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; position: relative;">
117+
<div class="flip-card-front-DLL">
118+
<h1 class="flip-card-front-DLL-h1">
119+
From <b>Ukraine</b> with peace!
120+
</h1>
121+
</div>
122+
<div class="flip-card-back-DLL">
123+
<h1 class="flip-card-back-DLL-h1">
124+
Greetings from Odesa &#128076;
125+
</h1>
126+
<p>Peaceful sky to all of us</p>
127+
</div>
128+
</div>
129+
</div>
130+
</div>
131+
132+
<style>
133+
.flip-card-DLL:hover .flip-card-inner-DLL {
134+
transform: rotateX(-180deg);
135+
}
136+
137+
.flip-card-DLL {
138+
font-family: 'Roboto', sans-serif;
139+
width: 350px;
140+
height: 400px;
141+
perspective: 1100px;
142+
}
143+
144+
.flip-card-back-DLL {
145+
position: absolute;
146+
width: 100%;
147+
height: 100%;
148+
display: flex;
149+
flex-direction: column;
150+
justify-content: center;
151+
align-items: center;
152+
border: ridge 2px #f3431c;
153+
border-radius: 2rem;
154+
background: #fff;
155+
color: blue;
156+
box-shadow: 2px 10px 50px 10px blue;
157+
backface-visibility: hidden;
158+
transform: rotateX(-180deg);
159+
}
160+
161+
.flip-card-back-DLL-h1 {
162+
font-family: 'Roboto', sans-serif;
163+
font-size: 22px;
164+
background-color: yellow;
165+
color: lightblue;
166+
padding: 0.5rem 1rem;
167+
border: 0.25rem solid blue;
168+
box-shadow: 5px 5px 50px 10px blue;
169+
border-radius: 8px;
170+
margin: 0 0 0.5rem 0;
171+
}
172+
173+
.flip-card-front-DLL {
174+
position: absolute;
175+
width: 100%;
176+
height: 100%;
177+
display: flex;
178+
flex-direction: column;
179+
justify-content: center;
180+
align-items: center;
181+
border: 1px solid black;
182+
border-radius: 1rem;
183+
background: linear-gradient(to bottom, blue, yellow) !important;
184+
color: #000000;
185+
box-shadow: -2px 10px 50px 10px black;
186+
backface-visibility: hidden;
187+
}
188+
189+
.flip-card-front-DLL-h1 {
190+
font-family: 'Roboto', sans-serif;
191+
font-size: 22px;
192+
background-color: rgba(0, 0, 255, 0.7);
193+
color: yellow;
194+
padding: 0.5rem 1rem;
195+
margin: 40px;
196+
border: 0.25rem double black;
197+
box-shadow: 15px 10px 40px 10px white;
198+
border-radius: 100px;
199+
}
200+
201+
.container-DLL {
202+
display: flex;
203+
margin: 2rem 0.5rem;
204+
justify-content: center;
205+
gap: 1rem;
206+
flex-wrap: wrap;
207+
}
208+
</style>
209+
<!--Ragnaslav's message end-->
209210

210-
</style>
211-
<!--Ragnaslav's message end-->
212211

213212
<!--IcyJuicyBob's message start-->
214213
<div class="w3-container w3-round-large w3-card-4"
@@ -15979,6 +15978,17 @@ <h1>Hello W3 Schools for creating page on git & github. </h1>
1597915978
</p>
1598015979
</div>
1598115980
<!-- End Message from Anas -->
15981+
<!-- Message from spyde3rx -->
15982+
<div style="background-color: #000; color: #fff; padding: 20px; border-radius: 5px; margin: 20px;">
15983+
<h1>Hello from <strong>spyde3rx</strong></h1>
15984+
<p>Thank you for the great tutorials!</p>
15985+
<div style="width: 200px; height: 120px; margin-top: 20px;">
15986+
<div style="background-color: #FFCD00; height: 60%;"></div>
15987+
<div style="background-color: #003893; height: 20%;"></div>
15988+
<div style="background-color: #CE1126; height: 20%;"></div>
15989+
</div>
15990+
</div>
15991+
<!-- End Message from spyde3rx -->
1598215992

1598315993

1598415994
<!-- End user messages -->

0 commit comments

Comments
 (0)