Skip to content

Commit 421cac6

Browse files
w3schools-testw3schools-test
authored
Merge pull request #3888 from Ragnaslav/patch-2
Updated Ragnaslav's message in index.html
2 parents e7e5216 + 35c65ba commit 421cac6

File tree

1 file changed

+96
-98
lines changed

1 file changed

+96
-98
lines changed

‎index.html

Lines changed: 96 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -101,106 +101,104 @@ <h3>Contribute</h3>
101101

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

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

125-
<style>
126-
.flip-card-DLL:hover .flip-card-inner-DLL {
127-
transform: rotateX(-180deg);
128-
}
129-
130-
.flip-card-DLL {
131-
font-family: 'Roboto', sans-serif;
132-
width: 350px;
133-
height: 400px;
134-
perspective: 1100px;
135-
}
136-
137-
.flip-card-back-DLL {
138-
position: absolute;
139-
width: 100%;
140-
height: 100%;
141-
display: flex;
142-
flex-direction: column;
143-
justify-content: center;
144-
align-items: center;
145-
border:ridge 2px #f3431c;
146-
border-radius: 2rem;
147-
background: #fff;
148-
color: blue;
149-
box-shadow: 2px 10px 50px 10px blue;
150-
backface-visibility: hidden;
151-
transform: rotateX(-180deg);
152-
}
153-
154-
.flip-card-back-DLL-h1 {
155-
font-family: 'Roboto', sans-serif;
156-
font-size: 22px;
157-
background-color: yellow;
158-
color: lightblue;
159-
padding: 0.5rem 1rem;
160-
border: 0.25rem solid blue;
161-
box-shadow: 5px 5px 50px 10px blue;
162-
border-radius: 8px;
163-
margin: 0 0 0.5rem 0;
164-
}
165-
166-
.flip-card-front-DLL {
167-
position: absolute;
168-
width: 100%;
169-
height: 100%;
170-
display: flex;
171-
flex-direction: column;
172-
justify-content: center;
173-
align-items: center;
174-
border: 1px solid black;
175-
border-radius: 1rem;
176-
background: linear-gradient(to bottom,rgb(255, 94, 0),white, green) !important ;
177-
color: #000000;
178-
box-shadow: -2px 10px 50px 10px black;
179-
backface-visibility: hidden;
180-
}
181-
182-
.flip-card-front-DLL-h1 {
183-
font-family: 'Roboto', sans-serif;
184-
font-size: 22px;
185-
background-color: rgba(255, 94, 0, 0.785);
186-
color: black;
187-
padding: 0.5rem 1rem;
188-
margin: 40px;
189-
border: 0.25rem double black;
190-
box-shadow: 15px 10px 40px 10px white;
191-
border-radius: 100px;
192-
}
193-
194-
.container-DLL {
195-
display: flex;
196-
margin: 2rem 0.5rem;
197-
justify-content: center;
198-
gap: 1rem;
199-
flex-wrap: wrap;
200-
}
201-
202-
</style>
203-
<!--Ragnaslav's message end-->
204202

205203
<!--IcyJuicyBob's message start-->
206204
<div class="w3-container w3-round-large w3-card-4"

0 commit comments

Comments
 (0)