├── cc.js
├── README.md
├── index2.html
└── style.css
/cc.js:
--------------------------------------------------------------------------------
1 | function addClass() {
2 | document.body.classList.add("sent");
3 | }
4 |
5 | sendLetter.addEventListener("click", addClass);
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # contact form
2 | # send message to ur email ❤️🔥
3 | 
4 |
--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 | Enter message and click button "Send"
12 |
35 | Thank you for your message
36 |
37 |
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @use postcss-nested;
2 | @import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700);
3 | * {
4 | box-sizing: border-box;
5 | }
6 | body {
7 | margin: 0;
8 | padding: 0;
9 | background-color: #c8e7d8;
10 | color: #4e5e72;
11 | text-align: center;
12 | font-family: monospace;
13 | overflow: hidden;
14 | }
15 | h1, p {
16 | margin: 0;
17 | padding: 0;
18 | }
19 | h1 {
20 | font-size: 2rem;
21 | font-family: 'Dancing Script';
22 | }
23 | small {
24 | display: block;
25 | padding: 1rem 0;
26 | font-size: 0.8rem;
27 | transition: opacity 0.33s;
28 | }
29 | textarea, input, button {
30 | line-height: 1.5rem;
31 | border: 0;
32 | outline: none;
33 | font-family: inherit;
34 | appearance: none;
35 | }
36 | textarea, input {
37 | color: #4e5e72;
38 | background-color: transparent;
39 | background-image: url("data:image/svg+xml;utf8,");
40 | }
41 | textarea {
42 | width: 100%;
43 | height: 8rem;
44 | resize: none;
45 | }
46 | input {
47 | width: 50%;
48 | margin-bottom: 1rem;
49 | &[type=text]:invalid, [type=email]:invalid {
50 | box-shadow: none;
51 | background-image: url("data:image/svg+xml;utf8,");
52 | }
53 | }
54 | button {
55 | padding: 0.5rem 1rem;
56 | border-radius: 0.25rem;
57 | background-color: rgba(78, 94, 114, 0.9);
58 | color: white;
59 | font-size: 1rem;
60 | transition: background-color 0.2s;
61 | &:hover,:focus {
62 | outline: none;
63 | background-color: rgba(78, 94, 114, 1);
64 | }
65 | }
66 | input[type=text]:focus,
67 | input[type=email]:focus,
68 | textarea:focus {
69 | background-image: url("data:image/svg+xml;utf8,");
70 | outline: none;
71 | }
72 | .wrapper {
73 | width: 35rem;
74 | background-color: white;
75 | }
76 | .letter {
77 | position: absolute;
78 | left: 0;
79 | right: 0;
80 | top: 0;
81 | width: 30rem;
82 | margin: auto;
83 | perspective: 60rem;
84 | }
85 | .side {
86 | height: 12rem;
87 | background-color: #fcfcf8;
88 | outline: 1px solid transparent;
89 | &:nth-of-type(1) {
90 | padding: 2rem 2rem 0;
91 | border-radius: 1rem 1rem 0 0;
92 | box-shadow: inset 0 0.75rem 2rem rgba(229, 225, 187, 0.5);
93 | }
94 | &.side:nth-of-type(2) {
95 | padding: 2rem;
96 | border-radius: 0 0 1rem 1rem;
97 | box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.05), inset 0 -0.57rem 2rem rgba(229, 225, 187, 0.5);
98 | text-align: right;
99 | }
100 | }
101 | .envelope {
102 | position: absolute;
103 | left: 0;
104 | right: 0;
105 | top: 0;
106 | margin: auto;
107 | }
108 | .envelope.front {
109 | width: 10rem;
110 | height: 6rem;
111 | border-radius: 0 0 1rem 1rem;
112 | overflow: hidden;
113 | z-index: 9999;
114 | opacity: 0;
115 | }
116 | .envelope.front::before, .envelope.front::after {
117 | position: absolute;
118 | display: block;
119 | width: 12rem;
120 | height: 6rem;
121 | background-color: #e9dc9d;
122 | transform: rotate(30deg);
123 | transform-origin: 0 0;
124 | box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
125 | content: '';
126 | }
127 | .envelope.front::after{
128 | right: 0;
129 | transform: rotate(-30deg);
130 | transform-origin: 100% 0;
131 | }
132 | .envelope.back {
133 | top: -4rem;
134 | width: 10rem;
135 | height: 10rem;
136 | overflow: hidden;
137 | z-index: -9998;
138 | opacity: 0;
139 | transform: translateY(-6rem);
140 | &::before {
141 | display: block;
142 | width: 10rem;
143 | height: 10rem;
144 | background-color: #e9dc9d;
145 | border-radius: 1rem;
146 | content: '';
147 | transform: scaleY(0.6) rotate(45deg)
148 | }
149 | }
150 | .result-message {
151 | opacity: 0;
152 | transition: all 0.3s 2s;
153 | transform: translateY(9rem);
154 | z-index: -9999;
155 | }
156 | .sent {
157 | & .letter {
158 | animation: scaleLetter 1s forwards ease-in /*,
159 | pushLetter 0.5s 1.33s forwards ease-out*/ ;
160 | }
161 | & .side:nth-of-type(1) {
162 | transform-origin: 0 100%;
163 | animation: closeLetter 0.66s forwards ease-in;
164 | }
165 | & .side:nth-of-type(1) h1, .side:nth-of-type(1) textarea {
166 | animation: fadeOutText 0.66s forwards linear;
167 | }
168 | & button {
169 | background-color: rgba(78, 94, 114, 0.2);
170 | }
171 | & .envelope {
172 | animation: fadeInEnvelope 0.5s 1.33s forwards ease-out;
173 | }
174 | & .result-message {
175 | opacity: 1;
176 | transform: translateY(12rem);
177 | }
178 | & small {
179 | opacity: 0;
180 | }
181 | }
182 | .centered {
183 | position: absolute;
184 | left: 0;
185 | right: 0;
186 | margin: 1rem auto;
187 | }
188 | @keyframes closeLetter {
189 | 50% {transform: rotateX(-90deg);}
190 | 100% {transform: rotateX(-180deg);}
191 | }
192 | @keyframes fadeOutText {
193 | 49% {opacity: 1;}
194 | 50% {opacity: 0;}
195 | 100% {opacity: 0;}
196 | }
197 | @keyframes fadeInEnvelope {
198 | 0% {opacity: 0; transform: translateY(8rem);}
199 | /*90% {opacity: 1; transform: translateY(4rem);}*/
200 | 100% {opacity: 1; transform: translateY(4.5rem);}
201 | }
202 | @keyframes scaleLetter {
203 | 66% {transform: translateY(-8rem) scale(0.5, 0.5);}
204 | 75% {transform: translateY(-8rem) scale(0.5, 0.5);}
205 | 90% {transform: translateY(-8rem) scale(0.3, 0.5);}
206 | 97% {transform: translateY(-8rem) scale(0.33, 0.5);}
207 | 100%{transform: translateY(-8rem) scale(0.3, 0.5);}
208 | }
209 |
210 | /*
211 | @keyframes pushLetter {
212 | 0% {transform: translateY(-8rem) scale(0.3, 0.5);}
213 | 50% {transform: translateY(-8rem) scale(0.3, 0.5);}
214 | 90% {transform: translateY(-8.5rem) scale(0.3, 0.5);}
215 | 100% {transform: translateY(-8rem) scale(0.3, 0.5);}
216 | }
217 | */
218 |
219 |
--------------------------------------------------------------------------------