Skip to content

Commit 0213581

Browse files
Tiago-RTiago-R
committed
Change header image
1 parent 932d80e commit 0213581

3 files changed

Lines changed: 69 additions & 20 deletions

File tree

‎css/menikah.css‎

Lines changed: 61 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ html {
1717
}
1818

1919
.header-wrapper {
20-
padding-bottom: 30px;
20+
padding-bottom: 0;
2121
}
2222

2323
.navbar-item {
@@ -39,19 +39,29 @@ html {
3939

4040

4141
.hero {
42-
/* background-image: url(https://picsum.photos/id/25/1920/1080); */
43-
background: linear-gradient(rgba(56, 46, 55, 0.75), rgba(94, 70, 95, 0.75)), rgba(0, 0, 0, 0.95) url(../image/gili.jpg) no-repeat;
42+
background: #111 url(../image/header.png) top center no-repeat;
4443
background-attachment: scroll;
45-
background-size: cover;
46-
background-position: center;
44+
background-size: 100% auto;
4745
background-repeat: no-repeat;
48-
/* min-height: 100vh; */
46+
width: 100%;
47+
aspect-ratio: 1194 / 1316;
48+
height: auto;
49+
overflow: hidden;
4950
color: white;
5051
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
51-
/* background-position-x: left 200px; */
5252
font-family: 'Raleway', sans-serif;
5353
}
5454

55+
.hero.is-large .hero-body,
56+
.hero .hero-body {
57+
padding: 0;
58+
min-height: 0;
59+
}
60+
61+
.hero>.space40px {
62+
display: none;
63+
}
64+
5565

5666

5767
.hero .title {
@@ -1107,7 +1117,7 @@ input#flap {
11071117
position: fixed;
11081118
inset: 0;
11091119
z-index: 9999999;
1110-
background: linear-gradient(180deg, #fff8fd 0%, #f8ecf8 100%);
1120+
background: linear-gradient(#fdfcfb, #f7f5f2);
11111121
}
11121122

11131123
.envelope-preloader {
@@ -1129,6 +1139,23 @@ input#flap {
11291139
transform-style: preserve-3d;
11301140
}
11311141

1142+
.envelope-stage::before {
1143+
content: "";
1144+
position: absolute;
1145+
left: 50%;
1146+
top: 2%;
1147+
width: min(96vw, 980px);
1148+
height: min(36vh, 320px);
1149+
transform: translateX(-50%) translateY(0);
1150+
pointer-events: none;
1151+
z-index: 9;
1152+
opacity: 0;
1153+
background:
1154+
radial-gradient(ellipse at 50% 12%, rgba(66, 39, 72, 0.42) 0%, rgba(66, 39, 72, 0.2) 34%, rgba(66, 39, 72, 0) 72%);
1155+
filter: blur(10px);
1156+
transition: opacity 0.75s ease, transform 1.1s cubic-bezier(.18, .82, .24, 1);
1157+
}
1158+
11321159
.envelope-stage::after {
11331160
content: "";
11341161
position: absolute;
@@ -1153,6 +1180,9 @@ input#flap {
11531180
background:
11541181
repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.02) 0 1px, transparent 1px 4px),
11551182
linear-gradient(180deg, rgba(253, 245, 252, 0.98) 0%, rgba(238, 220, 238, 0.98) 100%);
1183+
box-shadow:
1184+
inset 0 1px 0 rgba(255, 248, 255, 0.7),
1185+
inset 0 -18px 28px rgba(117, 83, 124, 0.1);
11561186
}
11571187

11581188
.envelope-letter {
@@ -1198,6 +1228,10 @@ input#flap {
11981228
background:
11991229
repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.017) 0 1px, transparent 1px 4px),
12001230
linear-gradient(115deg, rgba(248, 236, 247, 0.97) 0%, rgba(226, 200, 228, 0.97) 100%);
1231+
box-shadow:
1232+
inset 1px 0 0 rgba(255, 248, 255, 0.62),
1233+
inset -22px 0 28px rgba(109, 78, 114, 0.16),
1234+
inset 0 10px 16px rgba(255, 244, 255, 0.18);
12011235
z-index: 4;
12021236
}
12031237

@@ -1206,6 +1240,10 @@ input#flap {
12061240
background:
12071241
repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.017) 0 1px, transparent 1px 4px),
12081242
linear-gradient(245deg, rgba(248, 236, 247, 0.97) 0%, rgba(226, 200, 228, 0.97) 100%);
1243+
box-shadow:
1244+
inset -1px 0 0 rgba(255, 248, 255, 0.62),
1245+
inset 22px 0 28px rgba(109, 78, 114, 0.16),
1246+
inset 0 10px 16px rgba(255, 244, 255, 0.18);
12091247
z-index: 4;
12101248
}
12111249

@@ -1214,6 +1252,9 @@ input#flap {
12141252
background:
12151253
repeating-linear-gradient(0deg, rgba(132, 94, 140, 0.02) 0 1px, transparent 1px 4px),
12161254
linear-gradient(180deg, rgba(241, 224, 240, 0.97) 0%, rgba(212, 181, 214, 0.97) 100%);
1255+
box-shadow:
1256+
inset 0 2px 0 rgba(255, 244, 255, 0.58),
1257+
inset 0 -24px 34px rgba(109, 78, 114, 0.22);
12171258
z-index: 5;
12181259
}
12191260

@@ -1224,7 +1265,9 @@ input#flap {
12241265
linear-gradient(180deg, rgba(252, 240, 250, 0.97) 0%, rgba(231, 208, 231, 0.97) 100%);
12251266
transform-origin: top center;
12261267
transition: transform 1.1s cubic-bezier(.18, .82, .24, 1), filter 0.8s ease;
1227-
box-shadow: inset 0 -18px 26px rgba(109, 78, 114, 0.12);
1268+
box-shadow:
1269+
inset 0 -18px 26px rgba(109, 78, 114, 0.12),
1270+
inset 0 1px 0 rgba(255, 248, 255, 0.68);
12281271
z-index: 10;
12291272
transform: translateZ(4px) rotateX(0deg);
12301273
backface-visibility: hidden;
@@ -1289,8 +1332,9 @@ input#flap {
12891332
.preloader-hint {
12901333
bottom: calc(env(safe-area-inset-bottom, 0px) + 4.4vh);
12911334
font-family: 'Lato', sans-serif;
1335+
font-weight: bold;
12921336
font-size: clamp(0.78rem, 1.4vw, 0.95rem);
1293-
letter-spacing: 0.12em;
1337+
letter-spacing: 0.5em;
12941338
text-transform: uppercase;
12951339
}
12961340

@@ -1306,6 +1350,12 @@ input#flap {
13061350
.envelope-preloader.open .envelope-panel-flap {
13071351
transform: translateZ(4px) translateY(-1.2vh) rotateX(36deg);
13081352
filter: brightness(0.97);
1353+
box-shadow: inset 0 -14px 20px rgba(109, 78, 114, 0.14);
1354+
}
1355+
1356+
.envelope-preloader.open .envelope-stage::before {
1357+
opacity: 1;
1358+
transform: translateX(-50%) translateY(1.2vh);
13091359
}
13101360

13111361
.envelope-preloader.open .envelope-letter {
@@ -1363,4 +1413,4 @@ input#flap {
13631413
.preloader-hint {
13641414
bottom: calc(env(safe-area-inset-bottom, 0px) + 5vh);
13651415
}
1366-
}
1416+
}

‎image/header.png‎

2.25 MB
Loading

‎index.html‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@
6262
<button id="flap-button" class="envelope-seal" type="button" aria-label="Abrir envelope">
6363
<span class="envelope-seal-mark">PT</span>
6464
</button>
65-
<p id="introText" class="preloader-title">Convite de Casamento</p>
66-
<p id="hintText" class="preloader-hint">Clique no selo para abrir</p>
65+
<!-- <p id="introText" class="preloader-title">Convite de Casamento</p> -->
66+
<p id="hintText" class="preloader-hint">Toque para abrir</p>
6767
</div>
6868
</div>
6969

@@ -76,8 +76,8 @@
7676
</div>
7777
<ul class="right-sidebar">
7878
<!--gallery-->
79-
<li onclick="scrollToElement('mapa')"
80-
style="background-image: url('./image/maps.png'); filter: brightness(0) invert(1);"
79+
<li onclick="scrollToElement('rsvp')"
80+
style="background-image: url(./image/rsvp.png); filter: brightness(0) invert(1);">
8181
</li>
8282
<!--chat-->
8383
<li onclick="scrollToElement('contactos')"
@@ -92,9 +92,8 @@
9292
style="background-image: url(./image/time.png); filter: brightness(0) invert(1);">
9393
</li>
9494
<!--couple-->
95-
<li onclick="scrollToElement('rsvp')"
96-
style="background-image: url(./image/rsvp.png); filter: brightness(0) invert(1);">
97-
</li>
95+
<li onclick="scrollToElement('mapa')"
96+
style="background-image: url('./image/maps.png'); filter: brightness(0) invert(1);" </li>
9897
</ul>
9998
</div>
10099
</div>
@@ -105,7 +104,7 @@
105104
<section class="hero is-large">
106105
<!-- Begin Hero Content-->
107106
<div class="hero-body">
108-
<div class="container has-text-centered">
107+
<!-- <div class="container has-text-centered">
109108
<h2 class="title">Patrícia & Tiago</h2>
110109
<h4 class="subtitle tempatwaktu">
111110
@@ -116,7 +115,7 @@ <h4 class="subtitle tempatwaktu">
116115
14h00
117116
</h4>
118117
<h3 class="subtitle">Por favor, confirma a tua presença até 10 de março 🤍</h3>
119-
</div>
118+
</div> -->
120119
<!-- Start Countdown -->
121120
<!-- <div>
122121
<ul id="hitungmundur">

0 commit comments

Comments
 (0)