@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro&family=Great+Vibes&family=Playfair+Display:wght@400;700&display=swap'); :root { /* color */ --primary-color :rgb(35, 35, 35) ; --bg :rgb(255 255 255 / 33%); --second-color : ; --text-white : #fff ; --text-black : ; --body-bg : ; --main-bg : ; --boder-color : rgba(236, 236, 236, 0.258); --box-bg: rgba(255, 255, 255, 0.346); --white : #fff; /* font-family */ --title-font : 'Playfair Display', serif; --script-font: 'Great Vibes', cursive; --body-font: 'Be Vietnam Pro', sans-serif; /* fontsize */ --fs-1: ; --fs-2: ; --fs-3: ; --fs-4: ; --fs-5: ; --fs-6: ; --fs-7: ; /* space */ --space-4 : 4px; --space-8 : 8px; --space-12 : 12px; --space-16 : 16px; --space-20 : 20px; --space-24 : 24px; --space-32 : 32px; --space-40 : 40px; --space-54 : 54px; --space-80 : 80px; /* section margin and padding */ --section-margin : 120px ; --section-padding : 40px ; /* effect */ --shadow : ; --blur : ; } /* ==== RESER CSS ==== */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* ========= ELEMENT ========== */ /** * ---------------------------------------- * animation kenburns-top-left * ---------------------------------------- */ /** * ---------------------------------------- * animation kenburns-bottom * ---------------------------------------- */ @-webkit-keyframes kenburns-bottom { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 84%; transform-origin: 50% 84%; } 100% { -webkit-transform: scale(1.25) translateY(15px); transform: scale(1.25) translateY(15px); -webkit-transform-origin: bottom; transform-origin: bottom; } } @keyframes kenburns-bottom { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 84%; transform-origin: 50% 84%; } 100% { -webkit-transform: scale(1.25) translateY(15px); transform: scale(1.25) translateY(15px); -webkit-transform-origin: bottom; transform-origin: bottom; } } .btn { display: inline-flex; align-items: center; padding: 12px 16px; border-radius: 8px; border: 1px solid transparent; transition: .3s; cursor: pointer; gap: 6px; } .btn-primary { background-color: var(--primary-color); color: var(--text-white); padding: 10px 24px ; border-radius: 12px; text-align: center; display: inline-flex; justify-content: center; align-items: center; } .btn span { display: none; } .btn-pri { border: 1px solid var(--boder-color); background-color: var(--boder-color); backdrop-filter: blur(10px); } .btn-pri:hover{ background-color: rgba(255, 255, 255, 0.639); color: var(--primary-color); } .group-button { display: inline-flex; gap: 16px; } .d-none { display: none; } /* ========= END ELEMENT ========== */ /* ------------------------------------------------------------------------- */ /* ========= COMPONENT ========== */ /* ========= END COMPONENT ========== */ /* ------------------------------------------------------------------------- */ /* ========= THEMES ========== */ body { font-family: var(--body-font); } section { overflow: hidden; } .container{ max-width: 1024px; margin: auto; padding: 24px; } .section-heading { text-align: center; padding: 24px 0; max-width: 1024px; margin: 0 auto; } .section-title { font-size: 36px; text-transform: uppercase; text-align: center; font-family: var(--title-font); letter-spacing: 8px; font-weight: 600; color: white; } .bg_overlay { box-shadow: inset 0 0 0 2000px rgba(0 0 0 /.6) } .img_bg { background-position: center; background-repeat: no-repeat; background-size: cover; } .social-link { display: inline-flex; justify-content: center; align-items: center; justify-items: center; width: 100%; gap: 8px; margin-top: 12px; } .social-link a { background-color: var(--primary-color); border-radius: 50%; width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; } .social-link a i{ font-size: 16px; transition: .3s; color: white; } .social-link a:hover i { transform: translateY(-2px); } /* ========= END THEMES ========== */ /* ------------------------------------------------------------------------- */ /* ====== MAIN CSS ============ */ .banner { position: relative; min-height: 100vh; display: grid; justify-items: center; align-items: center; text-align: center; color: var(--white) ; padding-bottom: 40px; } .banner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; z-index: -1; -webkit-animation: kenburns-bottom 20s ease-out infinite; animation: kenburns-bottom 20s ease-out infinite; } .overlay { background-color: var(--primary-color); position: absolute; width: 100%; left: 0; top: 0; height: 100%; opacity: .4; z-index: -1; } .banner .data { display: grid; row-gap: 20px; background-color: rgba(255, 255, 255, 0.145); padding: 80px 40px; border-radius: 999px 999px 0 0; aspect-ratio: 1/1; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(236, 236, 236, 0.258); } .banner .data p { font-size: 24px; } .banner-title { display: inline-flex; justify-content: center; align-items: center; column-gap: 20px; font-family: var(--title-font); text-transform: uppercase; font-size: 24px; } .banner-title span { font-family: var(--script-font); text-transform: capitalize; font-size: 40px; } .time { margin-top: 40px; } .banner_time { font-size: 24px; } .time::before { content: " "; width:100%; height: 1px; background-color:white; top: 0; left: 0; } .time::after { content: " "; width:100%; height: 1px; background-color:white; top: 0; left: 0; } .banner .name { font-size: 24px; font-weight: 600; font-family: var(--title-font); display: grid; align-items: center; column-gap: 20px; } .banner .name span { font-family: var(--script-font); } .location-name { font-size: 20px; font-family: var(--title-font) !important; } /* ABOUT */ .about-section { position: relative; display: grid; } .about-section .section-title { color: var(--primary-color); } .about { display: grid; row-gap: 40px; } .about-card { display: grid; } .about-card .media { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1/1; } .about-card .media .groom-img{ object-fit: cover; width: 100%; object-position: center; } .about-card span{ display: flex; font-family: var(--title-font); font-size: 24px; flex-direction: column; justify-content: center; align-items: center; padding: 16px; background-color:var(--box-bg); backdrop-filter: blur(10px); width: 150px; height:auto; border-radius: 999px 999px 0 0; margin: auto; transform: translateY(-100%); } .about-card span img { max-width: 40px; object-fit: contain; object-position: center center; margin: auto; } .about-card .body { display: grid; line-height: 1.4; justify-content: center; justify-items: center; padding: 16px; } .about-card .body .groom_name { font-family:var(--script-font); font-size: 24px; } .about-card .body .father_groom, .about-card .body .mother_groom { font-family: var(--title-font); font-size: 24px; } /* END ABOUT */ /* TIME LINE */ .time-line-section { position: relative; display: grid; justify-content: center; padding: 120px 0; margin-top: 80px; color: white; z-index: 9; } .timeline-list { position: relative; margin-top: 80px; display: flex; flex-direction: column; gap: 40px; } .timeline-item { display: grid; text-align: center; align-items: center; justify-items: center; max-width: 600px; gap: 12px; } .timeline-item::before{ content: ""; width: 1px; height: 60px; background-color: var(--text-white); border-radius: 999px; } .timeline-item:nth-child(1)::before { display: none; } .timeline-media { position: relative; } .timeline-media img { max-width: 200px; aspect-ratio: 1/1; object-fit: cover; object-position: center; width: 100%; height: 100%; overflow: hidden; border-radius: 999px 999px 12px 12px ; } .timeline-body { display: flex; flex-direction: column; gap: 8px; } .story-date{ font-family: var(--title-font); } .timeline-body .title { font-size: 24px; font-family: var(--script-font); } /* ALBUM */ .section-album { position: relative; display: grid; } .section-album .section-title { color: var(--primary-color); } .album { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; margin-bottom: 80px; } .album-item { border-radius: 8px; overflow: hidden; } .album-item img { transition: .3s; object-fit: cover; object-position: center; aspect-ratio: 1/1; } .album-item:hover img { transform: scale(1.2); } /* INVITATION */ #invitation { padding: 80px 0; } #invitation .section-title { color: var(--primary-color); } .invitation-container { margin-top: 40px; display: grid; gap:40px; grid-template-columns: repeat(auto-fit, 320px); justify-content: center; } .invitation-card { display: flex; flex-direction: column; align-items: center; padding: 20px; gap: 12px; background-color: var(--bg); border-radius:12px; max-width: 100%; text-align: center; border: 1px solid var(--primary-color); } .invitation-card img { max-width: 120px; aspect-ratio: 1/1; object-fit: cover; padding: 8px; background-color: white; border-radius: 50%; } .card-title { font-size: 24px; font-family: var(--title-font); } .invitation-body { } .invi_time { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-bottom: 12px; } .invi_group_time { display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 8px; } .invi_date_number { display: flex; justify-content: center; font-size: 24px; font-weight: bold; color: var(--primary-color); } .invi_date_text, .invi_year_text { border-top: 1px solid var(--primary-color); border-bottom: 1px solid var(--primary-color); padding: 4px 0; } .invi_amlich { font-style: italic; font-size: 14px; } /* COUNTDOWN */ .section-countdown { position: relative; color: var(--text-white); text-align: center; min-height: 50vh; margin-top: 120px; color: white; } .countdown-title { font-size: 32px; font-family: var(--title-font); } .countdown { display: flex; row-gap: 40px; flex-direction: column; justify-content: center; align-items: center; min-height: 50vh; } #countdown { display: flex; row-gap: 24px; justify-content: center; align-items: center; } #countdown ul { display: grid; grid-template-columns: repeat(2,100%); justify-content: center; align-items: center; gap: 20px; } #countdown li { display: flex; flex-direction: column; align-items: center; font-size: 16px; list-style-type: none; padding: 8px; text-transform: uppercase; border-radius: 8px; background-color: rgba(255, 255, 255, 0.269); color: white; backdrop-filter: blur(4px); } #countdown li span { display: block; font-size: 24px; font-weight: 600; font-family: var(--title-font); } #content { display: none; padding: 1rem; } #content span { font-family: var(--script-font); font-size: 4rem; padding: 0 .5rem; } .section-gift .section-title{ color: var(--primary-color); } /* THANK YOU */ .section-thankyou{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; color: var(--text-white); text-align: center; color: white; } .thankyou-body { display: flex; flex-direction: column; justify-content: center; align-items: center; } .thankyou-bg { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .thankyou-title { font-size: 64px; font-family: var(--script-font); line-height: 1.6; } .thankyou-des { text-align: center; margin-bottom: 40px; } /* END THANK YOU */ /* ====== END MAIN CSS ============ */ /* ------------------------------------------------------------------------- */ /* ====== RESPONSIVE ======= */ /* Small devices such as large phones (640px and up) */ @media (min-width: 40em) { .btn span { display:block; } .about { grid-template-columns: repeat(2,1fr); column-gap: 24px; } .time-line-item { font-size: 28px; } } /* Medium devices such as tablets (768px and up) */ @media (min-width: 48em) { .time-line-item { font-size: 36px; } .invitation { grid-template-columns: repeat(2,1fr); } .right-fixed i { font-size: 24px; } } /* Large devices such as laptops (1024px and up) */ @media (min-width: 64em) { .about-groom, .about-bride { padding: 40px 80px; } .album { grid-template-columns: repeat(3,1fr); } } /* Largest devices such as desktops (1280px and up) */ @media (min-width: 1280px) { .banner .name{ font-size: 40px; } }