Skip to content

Commit 9d9b6c8

Browse files
NishantGhanateNishantGhanate
committed
Flask/Greetings added
1 parent 80c4475 commit 9d9b6c8

2 files changed

Lines changed: 101 additions & 0 deletions

File tree

‎Flask/Template/Greetings.py‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
from flask import Flask, render_template
2+
app = Flask(__name__)
3+
4+
# e.g 127.0.0.1/Person1/JAjajjaa/Person2
5+
# Default is GET
6+
@app.route('/Greetings/<From>/<Message>/<To>' )
7+
def render_greeting(From,Message,To):
8+
return render_template('Greetings.html', From = From , Message = Message, To=To )
9+
10+
if __name__ == '__main__':
11+
app.run(debug = True)

‎Flask/Template/templates/Greetings.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!doctype html>
2+
<html>
3+
<body>
4+
<h1>Greeting Card</h1>
5+
<div class='cards'>
6+
<div class='card'>
7+
<div class='front face'>
8+
<h2> To : {{To}} </h2>
9+
</div>
10+
<div class="back face">
11+
<h2>{{Message}}</h2>
12+
<br>
13+
<h5> - From {{From}}</h5>
14+
</div>
15+
</div>
16+
</div>
17+
</body>
18+
</html>
19+
20+
<style>
21+
/* authour : https://codepen.io/makzan/pen/KCfGr */
22+
.cards {
23+
padding-top: 20px;
24+
padding-left: 30%;
25+
}
26+
.card {
27+
width: 280px;
28+
height: 280px;
29+
position: relative;
30+
perspective: 700px;
31+
32+
float: left;
33+
margin: 10px;
34+
}
35+
.card:hover .front{
36+
transform: rotateY(-77deg);
37+
}
38+
.card:hover .back {
39+
transform: rotateY(20deg);
40+
}
41+
.card:hover .face {
42+
transition: all 0.3s ease-out;
43+
44+
}
45+
.face {
46+
position: absolute;
47+
top: 0;
48+
left: 0;
49+
width: 100%;
50+
height: 100%;
51+
background: #0091aa;
52+
backface-visibility: hidden;
53+
transition: all 0.5s ease-out;
54+
transform-origin: 0 0;
55+
}
56+
.front {
57+
transform: rotateY(0deg);
58+
z-index: 2;
59+
}
60+
61+
.back {
62+
background: #0091aa;
63+
transform: rotateY(0deg);
64+
z-index: 1;
65+
}
66+
67+
/* Not related */
68+
* {
69+
box-sizing: border-box;
70+
}
71+
.back {
72+
padding: 3em;
73+
}
74+
.back h2{
75+
font-size: 1.5rem;
76+
text-align: center;
77+
margin-top: 0;
78+
}
79+
80+
.front h2{
81+
font-size: 1.5rem;
82+
text-align: center;
83+
margin-top: 30%;
84+
}
85+
86+
h1{
87+
text-align: center;
88+
}
89+
90+
</style>

0 commit comments

Comments
 (0)