Skip to content

Commit 477a037

Browse files
Tiago-RTiago-R
committed
Add new sections
1 parent 12ca606 commit 477a037

4 files changed

Lines changed: 382 additions & 32 deletions

File tree

‎css/menikah.css‎

Lines changed: 263 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,20 @@
11
@import url("https://fonts.googleapis.com/css?family=Lato|Raleway|Rouge+Script");
2+
3+
/* Envelope 3D flip fix */
4+
.envelope-container {
5+
perspective: 1000px;
6+
}
7+
8+
.flap {
9+
transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
10+
transform-origin: top center !important;
11+
transform-style: preserve-3d !important;
12+
}
13+
14+
input#flap:checked + .flap {
15+
transform: rotateX(180deg) !important;
16+
}
17+
218
.has-vertically-aligned-content {
319
display: flex;
420
flex-direction: column;
@@ -449,6 +465,7 @@ body.preloader-site {
449465
top: 0;
450466
left: 0;
451467
z-index: 9999999;
468+
cursor: pointer;
452469
}
453470

454471
.preloader-wrapper .preloader {
@@ -457,7 +474,8 @@ body.preloader-site {
457474
left: 50%;
458475
-webkit-transform: translate(-50%, -50%);
459476
transform: translate(-50%, -50%);
460-
width: 120px;
477+
width: 320px;
478+
overflow: visible;
461479
}
462480

463481

@@ -896,5 +914,248 @@ body.preloader-site {
896914
#floating-button .audio-play img {
897915
width: 20px;
898916
}
917+
/*End floating button*/
918+
919+
920+
/* body {
921+
height: 100vh;
922+
display: flex;
923+
justify-content: center;
924+
align-items: center;
925+
background-color: #e9f5db;
926+
} */
927+
928+
/* input#flap {
929+
display: none;
930+
} */
931+
932+
.envelope-container {
933+
position: relative;
934+
overflow: visible;
935+
perspective: 1000px;
936+
}
937+
938+
.envelope-back {
939+
position: relative;
940+
width: 320px;
941+
height: 200px;
942+
background-color: #718355;
943+
}
944+
945+
.envelope-back:before {
946+
content:"";
947+
position: absolute;
948+
background-color: rgba(0,0,0,0.07);
949+
width: 320px;
950+
height:10px;
951+
border-radius:50%;
952+
top:220px;
953+
}
954+
955+
.card {
956+
position: absolute;
957+
width:300px;
958+
height: 180px;
959+
background-color: white;
960+
top:10px;
961+
left:10px;
962+
display: flex;
963+
align-items: center;
964+
justify-content: center;
965+
font-size:40px;
966+
font-family: Brush Script MT;
967+
transition: .1s;
968+
z-index:1;
969+
cursor: pointer;
970+
}
971+
972+
.card-front {
973+
position: absolute;
974+
width:0;
975+
height:0;
976+
border-bottom: 100px solid #87986a;
977+
border-left: 160px solid transparent;
978+
border-right: 160px solid transparent;
979+
top:100px;
980+
left:0;
981+
z-index:3;
982+
}
983+
984+
.card-front:before, .card-front:after {
985+
content:"";
986+
position: absolute;
987+
border-bottom: 100px solid transparent;
988+
border-top: 100px solid transparent;
989+
height:0;
990+
width:0;
991+
}
992+
993+
.card-front:before {
994+
border-left: 161px solid transparent;
995+
border-right: 161px solid #97a97c;
996+
top:-100px;
997+
left:-162px;
998+
}
999+
1000+
.card-front:after {
1001+
border-right: 161px solid transparent;
1002+
border-left: 161px solid #97a97c;
1003+
top:-100px;
1004+
left:-160px;
1005+
}
1006+
1007+
.flap {
1008+
position: absolute;
1009+
width:0;
1010+
height:0;
1011+
border-top: 110px solid #b5c99a;
1012+
border-left: 160px solid transparent;
1013+
border-right: 160px solid transparent;
1014+
top:0;
1015+
left:0;
1016+
cursor: pointer;
1017+
transition: .3s;
1018+
transform-origin: top;
1019+
z-index:4;
1020+
}
1021+
1022+
#flap:checked + .flap {
1023+
transform: rotateX(180deg);
1024+
}
1025+
1026+
#flap:checked ~ .card-front {
1027+
z-index:7;
1028+
}
1029+
1030+
#flap:checked ~ .card {
1031+
z-index:4;
1032+
transform: translateY(-60px);
1033+
}
1034+
1035+
1036+
1037+
1038+
1039+
1040+
1041+
1042+
1043+
/* body {
1044+
height: 100vh;
1045+
display: flex;
1046+
justify-content: center;
1047+
align-items: center;
1048+
background-color: #e9f5db;
1049+
} */
1050+
1051+
input#flap {
1052+
display: none;
1053+
}
1054+
1055+
.envelope-container {
1056+
position: relative;
1057+
}
1058+
1059+
.envelope-back {
1060+
position: relative;
1061+
width: 320px;
1062+
height: 200px;
1063+
background-color: #718355;
1064+
}
1065+
1066+
.envelope-back:before {
1067+
content:"";
1068+
position: absolute;
1069+
background-color: rgba(0,0,0,0.07);
1070+
width: 320px;
1071+
height:10px;
1072+
border-radius:50%;
1073+
top:220px;
1074+
}
1075+
1076+
.card {
1077+
position: absolute;
1078+
width:300px;
1079+
height: 180px;
1080+
background-color: white;
1081+
top:10px;
1082+
left:10px;
1083+
display: flex;
1084+
align-items: center;
1085+
justify-content: center;
1086+
font-size:40px;
1087+
font-family: Brush Script MT;
1088+
transition: .1s;
1089+
z-index:1;
1090+
cursor: pointer;
1091+
}
1092+
1093+
.card-front {
1094+
position: absolute;
1095+
width:0;
1096+
height:0;
1097+
border-bottom: 100px solid #87986a;
1098+
border-left: 160px solid transparent;
1099+
border-right: 160px solid transparent;
1100+
top:100px;
1101+
left:0;
1102+
z-index:3;
1103+
}
1104+
1105+
.card-front:before, .card-front:after {
1106+
content:"";
1107+
position: absolute;
1108+
border-bottom: 100px solid transparent;
1109+
border-top: 100px solid transparent;
1110+
height:0;
1111+
width:0;
1112+
}
1113+
1114+
.card-front:before {
1115+
border-left: 161px solid transparent;
1116+
border-right: 161px solid #97a97c;
1117+
top:-100px;
1118+
left:-162px;
1119+
}
1120+
1121+
.card-front:after {
1122+
border-right: 161px solid transparent;
1123+
border-left: 161px solid #97a97c;
1124+
top:-100px;
1125+
left:-160px;
1126+
}
1127+
1128+
.flap {
1129+
position: absolute;
1130+
width:0;
1131+
height:0;
1132+
border-top: 110px solid #b5c99a;
1133+
border-left: 160px solid transparent;
1134+
border-right: 160px solid transparent;
1135+
top:0;
1136+
left:0;
1137+
cursor: pointer;
1138+
transition: .3s;
1139+
transform-origin: top;
1140+
z-index:4;
1141+
}
1142+
1143+
#flap:checked + .flap {
1144+
transform: rotateX(180deg);
1145+
}
1146+
1147+
#flap:checked ~ .card-front {
1148+
z-index:7;
1149+
}
1150+
1151+
#flap:checked ~ .card {
1152+
z-index:4;
1153+
transform: translateY(-60px);
1154+
}
1155+
1156+
1157+
1158+
1159+
1160+
8991161

900-
/*End floating button*/

0 commit comments

Comments
 (0)