samples/Alter.html at main · FNNtechdev/samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Altar Servers Appreciation Flip Card</title>
<style>
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #f8e8ff, #d5e8ff, #fdeacb);
    font-family: "Poppins", sans-serif;
  }

  .card-container {
    width: 350px;
    height: 500px;
    perspective: 1000px;
  }

  .card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1.2s ease;
  }

  .card-container:hover .card {
    transform: rotateY(180deg);
  }

  .side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px;
  }

  .front {
    background: #ffffffdd;
    backdrop-filter: blur(10px);
  }

  .front img {
    width: 120px;
    margin-bottom: 20px;
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }

  .front h2 {
    font-size: 26px;
    color: #4b2e83;
    text-align: center;
  }

  .back {
    background: #ffffffcc;
    backdrop-filter: blur(10px);
    transform: rotateY(180deg);
    text-align: center;
  }

  .back p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
    white-space: pre-line;
  }

  .footer {
    margin-top: 15px;
    font-weight: 600;
    color: #4b2e83;
  }
</style>
</head>
<body>

<div class="card-container">
  <div class="card">

    <!-- FRONT SIDE -->
    <div class="side front">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Crux_Gemma.svg/480px-Crux_Gemma.svg.png" alt="Processional Cross" />
      <h2>Altar Servers Appreciation</h2>
    </div>

    <!-- BACK SIDE -->
    <div class="side back">
      <p>
Thank you for your dedication, early mornings, and the reverence with which
you serve at the altar every Sunday.

Your discipline, teamwork, and humility bring grace, order, and beauty
to the celebration of the Holy Mass.

May God continue to bless you abundantly
for your faithful service.
      </p>

      <div class="footer">Head of Liturgy Department</div>
    </div>

  </div>
</div>

</body>
</html>