Skip to content

Commit ea14757

Browse files
w3schools-testw3schools-test
authored
Merge branch 'master' into master
2 parents af49205 + 9eac91f commit ea14757

File tree

1 file changed

+146
-96
lines changed

1 file changed

+146
-96
lines changed

‎index.html

Lines changed: 146 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
</style>
3636
</head>
3737

38+
3839
<body>
3940

4041
<!-- Content -->
@@ -101,106 +102,124 @@ <h3>Contribute</h3>
101102

102103
<!-- Insert your message below here -->
103104

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>
123-
</div>
124-
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-
}
105+
106+
<!-- Message from shakti-kc -->
107+
<div style="background-color: blue; color: #fff; padding: 20px; border-radius: 5px; margin: 2rem 0;">
108+
<h1>Hellow World!!</h1>
165109

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-
}
110+
<h2>Sauti Was Here.</h2>
111+
112+
113+
</div>
114+
<!-- End Message from shakti-kc -->
181115

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-
}
116+
<!-- Message from TXW4326 -->
117+
<div class="w3-panel w3-leftbar w3-light-grey">
118+
<p class="w3-xlarge w3-serif">
119+
<i>"Make it as simple as possible, but not simpler."</i></p>
120+
<p>Albert Einstein</p>
121+
</div>
122+
<!-- End of message from TXW4326 -->
123+
193124

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

202-
</style>
203-
<!--Ragnaslav's message end-->
204223

205224
<!--IcyJuicyBob's message start-->
206225
<div class="w3-container w3-round-large w3-card-4"
@@ -4295,6 +4314,18 @@ <h1 style="size: 70px;">Hello W3Schools! Thank you for the awesome tutorial.
42954314
from Russia.</p>
42964315
</div>
42974316
<!-- End of message from lanshead -->
4317+
4318+
<!-- Message from Waqas-->
4319+
<div
4320+
style="color: #092834; max-width: 640px; background-color: #66B032; text-align: center; font-family: Papyrus, Fantasy; border-radius: 10px; margin: 10px auto 10px auto;">
4321+
<h1 style="size: 70px;">Good work Keep it up.
4322+
</h1>
4323+
<p
4324+
style="display: flex; align-items: flex-end; font-size: 20px; padding-left: 400px;">
4325+
by Waqas
4326+
from Pakistan.</p>
4327+
</div>
4328+
<!-- End of message from Waqas -->
42984329

42994330
<!-- message from KInd-->
43004331
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
@@ -15974,6 +16005,25 @@ <h1>Hello W3 Schools for creating page on git & github. </h1>
1597416005
</div>
1597516006
<!-- End Message from Toffree -->
1597616007

16008+
<!-- Message from Anas -->
16009+
<div style="width: 100%; height: 60px; background-color: #042b30; color: white; font-size: 20px; border-radius: 15px; text-align: center; display: flex; justify-content: center;">
16010+
<p>
16011+
Greetings from Anas from Egypt!
16012+
</p>
16013+
</div>
16014+
<!-- End Message from Anas -->
16015+
<!-- Message from spyde3rx -->
16016+
<div style="background-color: #000; color: #fff; padding: 20px; border-radius: 5px; margin: 20px;">
16017+
<h1>Hello from <strong>spyde3rx</strong></h1>
16018+
<p>Thank you for the great tutorials!</p>
16019+
<div style="width: 200px; height: 120px; margin-top: 20px;">
16020+
<div style="background-color: #FFCD00; height: 60%;"></div>
16021+
<div style="background-color: #003893; height: 20%;"></div>
16022+
<div style="background-color: #CE1126; height: 20%;"></div>
16023+
</div>
16024+
</div>
16025+
<!-- End Message from spyde3rx -->
16026+
1597716027
<!-- End user messages -->
1597816028

1597916029
</div>

0 commit comments

Comments
 (0)