@import url('https://fonts.googleapis.com/css2?family=Prata&family=Quicksand:wght@400;600;700&display=swap'); :root { --max-width: 1024px; /* color */ --bg: #f1ebe4; --primary-color: #BF9376; --secondary-color: ; --text-white: #fff; --text-black: ; --text-gray: ; --text-dark: ; --text-light: ; --danger-color: ; --info-color: ; --success-color: ; --warning-color: ; --erro-color: ; --hot-color: ; /* fontsize */ --biger-size: ; --larger-title: ; --title-fs: 24px; --subtitle-fs: ; --menu-fs: ; --body-fs: ; --small-fs: ; /* font-family */ --script-font: script-font; --primary-font: 'Quicksand', sans-serif; --secondary-font: 'Prata', serif; /* section margin and padding */ --section-margin: 80px; --section-padding: 40px; --gap: 20px; /* effect */ --shadow-small: ; --shadow-medium: ; --shadow-large: ; --transition: .3s; } /* RESPONSEIVE ROOT */ /* Mobile */ @media only screen and (min-width: 540px) { :root { /* fontsize */ --biger-size: ; --larger-title: ; --title-fs: 24px; --subtitle-fs: ; --menu-fs: ; --body-fs: ; --small-fs: ; /* section margin and padding */ --section-margin: 80px; --section-padding: 40px; --gap: 20px; } } /* tablet small */ @media only screen and (min-width: 768px) { :root { /* fontsize */ --biger-size: ; --larger-title: ; --title-fs: 32px ; --subtitle-fs: ; --menu-fs: ; --body-fs: ; --small-fs: ; /* section margin and padding */ --section-margin: 80px; --section-padding: 40px; --gap: 20px; } } /* laptop */ @media only screen and (min-width: 1024px) { :root { /* fontsize */ --biger-size: ; --larger-title: ; --title-fs: 32px; --subtitle-fs: ; --menu-fs: ; --body-fs: ; --small-fs: ; /* section margin and padding */ --section-margin: 100px; --section-padding: 40px; --gap: 40px; } } /* deskop */ @media only screen and (min-width: 1280px) { :root { /* fontsize */ --biger-size: ; --larger-title: ; --title-fs: 32px; --subtitle-fs: ; --menu-fs: ; --body-fs: ; --small-fs: ; /* section margin and padding */ --section-margin: 120px; --section-padding: 40px; --gap: 40px; } } /* ==== 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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } i { color: initial; transition: initial; } svg { fill: initial; } /* 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; } html { scroll-behavior: smooth; } body { font-family: var(--primary-font); } /* ========= ELEMENT ========== */ /* BUTTON */ .btn { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); padding: 10px 20px; border-radius: 6px; border: 1px solid transparent; background: transparent; } .btn-rouded { display: flex; justify-content: center; align-items: center; border-radius: 50%; padding: 8px; cursor: pointer; } .btn-pill { display: flex; justify-content: center; align-items: center; border-radius: 999px; padding: 10px 20px; cursor: pointer; } .btn svg { fill: initial; } .btn i { font-size: 20px; } .btn-small { padding: 6px 12px; gap: 6; border-radius: 4px; font-size: 12px; } .btn-small i { font-size: 16px; } .btn-large { padding: 12px 24px; gap: 8; border-radius: 8px; font-size: 16px; } .btn-large i { font-size: 28px; } .btn-primary { background-color: var(--primary-color); border: 1px solid var(--primary-color); color: var(--text-white); } .btn-primary:hover { box-shadow: 0 0 10px var(--primary-color); } .btn-icon-small { display: inline-flex; justify-content: center; align-items: center; padding: 6px; transition: .3s; vertical-align: middle; } .btn-icon-small i { font-size: 16px; } .rounded { border-radius: 50%; } /* END BUTTON */ /* AMINATION */ .blur { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .bg_overlay { box-shadow: inset 0 0 0 2000px rgba(0 0 0 /.6) } .kenburns-top { -webkit-animation: kenburns-top 10s ease-out infinite both; animation: kenburns-top 10s ease-out infinite both } @-webkit-keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16% } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top } } @keyframes kenburns-top { 0% { -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transform-origin: 50% 16%; transform-origin: 50% 16% } 100% { -webkit-transform: scale(1.25) translateY(-15px); transform: scale(1.25) translateY(-15px); -webkit-transform-origin: top; transform-origin: top } } .tracking-in-expand { -webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both; } /** * ---------------------------------------- * animation tracking-in-expand * ---------------------------------------- */ @-webkit-keyframes tracking-in-expand { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes tracking-in-expand { 0% { letter-spacing: -0.5em; opacity: 0; } 40% { opacity: 0.6; } 100% { opacity: 1; } } .heartbeat { -webkit-animation: heartbeat 1.5s ease-in-out infinite both; animation: heartbeat 1.5s ease-in-out infinite both; } @-webkit-keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } @keyframes heartbeat { from { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 10% { -webkit-transform: scale(0.91); transform: scale(0.91); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 17% { -webkit-transform: scale(0.98); transform: scale(0.98); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 33% { -webkit-transform: scale(0.87); transform: scale(0.87); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 45% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } } /* ========= AND ANIMATION ========== */ /* ------------------------------------------------------------------------- */ /* ========= COMPONENT ========== */ main{ overflow: hidden; } .section-heading { margin-bottom: 40px; } .subtitle { font-size: var(--subtitle-fs); text-align: center; margin-bottom: 4px; } .section-title { font-size: var(--title-fs); font-weight: bold; font-family: var(--secondary-font); text-align: center; color: var(--primary-color); margin: 8px auto; } .img_bg { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .hidden { display: none; } /* TEXT */ .text-center { text-align: center; } .text-left { text-align: left; } .text-italic { font-style: italic; } .text-primary { color: var(--primary-color); } .uppercase { text-transform: uppercase; } .fw-bold { font-weight: bold; } .fw-semibold { font-weight: 600; } .group-button { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } /* ========= END COMPONENT ========== */ /* ------------------------------------------------------------------------- */ /* ========= THEMES ========== */ /* LAYOUT */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-center { display: flex; align-items: center; } .flex-center-center { display: flex; justify-content: center; align-items: center; } .grid { display: grid; } .grid-center { display: grid; justify-content: center; } .grid-center-center { display: grid; justify-content: center; justify-items: center; } /* ========= END THEMES ========== */ /* ------------------------------------------------------------------------- */ /* ====== MAIN CSS ============ */ #banner { background-color: var(--bg); position: relative; overflow: hidden; } .banner_top { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: .3; } .banner-container { z-index: 9; } .banner-card { position: relative; flex-direction: column; width: 480px; height: 100vh; } .banner-card .social-link { z-index: 999; } .bg-top-left { position: absolute; max-width: 250px; top: -90px; left: -20px; z-index: -1; } .bg-bottom-right { position: absolute; max-width: 250px; bottom: -80px; right: -20px; z-index: -1; } .banner-data { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; background-color: var(--bg); padding: 80px 40px; border-radius: 999px; width: 90%; max-width: 450px; aspect-ratio: 1/3; max-height: 700px; color: var(--primary-color); z-index: 1; } .banner-data-bg { background-color: var(--bg); position: absolute; width: 100%; height: 100%; border-radius: 999px; z-index: -1; } .banner-name { font-size: var(--title-fs); font-family: var(--secondary-font); } .bg-sub { position: absolute; max-width: 100px; bottom: 0px; right: 20px; z-index: 2; } .data-border { position: absolute; width: 95%; height: 95%; border: 1px solid var(--primary-color); border-radius: 999px; } .invitation-banner { text-align: center; display: flex; gap: 20px; flex-direction: column; } .time-banner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .banner_date { font-size: var(--title-fs); font-weight: bold; } .banner_date { border-top: 1px solid var(--primary-color); border-bottom: 1px solid var(--primary-color); width: 60%; max-width: 60px; } .banner-address { text-align: center; } .address-name { font-size: 20px; font-family: var(--secondary-font); margin: 6px auto; } /* ABOUT */ #about { background-image: linear-gradient( to top, var(--bg), #fff ); padding: 80px 0; } .about-container { display: grid; gap: 40px; } .about-card { position: relative; aspect-ratio: 1/1.3; z-index: 9; } .card-media { position: absolute; width: 100%; height: 100%; border-radius: 999px 999px 12px 12px; overflow: hidden; z-index: 1; } .card-media img { object-fit: cover; width: 100%; height: 100%; } .card-body { position: absolute; bottom: 0; right: 0; z-index: 2; border-radius: 999px 99px 12px 12px; width: 80%; height: 50%; padding: 20px; word-wrap: break-word; display: flex; flex-direction: column; justify-content: end; text-align: center; color: var(--text-white); background-image: linear-gradient( -45deg, var(--primary-color), transparent ); backdrop-filter: blur(10px); } .about-card:nth-child(2) .card-body{ left: 0; border-radius: 99px 999px 12px 12px; background-image: linear-gradient( 45deg, var(--primary-color), transparent ); } .card-body .groom_name, .card-body .bride_name { font-family: var(--secondary-font); font-size: var(--title-fs) } /* TIME LINE */ .time-line-section { display: grid; position: relative; justify-content: center; min-height: 100vh; color: var(--text-white); padding:120px 0; } .story_bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; object-fit: cover; z-index: -1; } .timeline-title{ font-family: var(--script-font); font-size: var(--fs-2); color: var(--main-color); text-align: center; margin-bottom: 40px; } .timeline-list { position: relative; display: grid; row-gap: 40px; } .timeline-list::before { content: ""; width: 1px; height: 90%; background-color: white; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) !important; } .timeline-item { display: grid; grid-template-columns: repeat(2,1fr); column-gap: 40px; align-items: center; justify-items: center; } .timeline-item:nth-child(even) .timeline-media { order: 1; } .timeline-media { background-color: var(--primary-color); padding: 8px; border-radius: 12px; } .timeline-media img { aspect-ratio: 1/1; object-fit: cover; max-width: 100%; border-radius: 8px; } .timeline-body { display: grid; justify-content: left; width: 100%; } .timeline-body .story-date { font-family: var(--secondary-font); font-size: var(--title-fs) } .timeline-body .title { font-family: var(--secondary-font); font-size: 20px; color: var(--primary-color); } /* COUNTDOWN */ #countdown-section { background-image: linear-gradient( to bottom, var(--bg), #fff ); } #countdown-section .subtitle { color: var(--text-white); } .count-down { background-image: linear-gradient( to top, var(--primary-color), #fff ); padding: 40px; border-radius: 99px 99px 0 0; display: flex; flex-direction: column; align-items: center; } #countdown { margin-top: 40px; display: flex; row-gap: 24px; justify-content: center; align-items: center; } #countdown ul { display: flex; flex-wrap: wrap; gap: var(--gap); } #countdown li { display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-white); } #countdown li span { display: block; font-size: var(--title-fs); font-weight: 600; font-family: var(--secondary-font); } #content { display: none; padding: 1rem; } #content span { font-family: var(--script-font); font-size: 4rem; padding: 0 .5rem; } /* ALBUM */ #album { padding: 80px 0; } .album { margin-top: 40px; display: grid; gap: var(--gap); grid-template-columns: 1fr 2fr 1fr; align-items: center; } .album-item { max-width: 100%; overflow: hidden; aspect-ratio: 1/1; overflow: hidden; border-radius: 12px; } .album-item img { object-fit: cover; width: 100%; height: 100%; } /* INVITATION */ #invitation { padding: 80px 0; } .invitation-container { margin-top: 40px; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, 320px); justify-content: center; margin-bottom: 80px; } .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; } .invitation-card img { max-width: 120px; aspect-ratio: 1/1; object-fit: cover; padding: 8px; background-color: var(--text-white); border-radius: 50%; } .card-title { font-size: var(--title-fs); font-family: var(--secondary-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; } /* GỬI QUà */ .section-gift { padding: 80px 0; background-image: linear-gradient( to top, var(--bg), #fff ); } .gift-container { display: grid; gap: var(--gap); margin-top: 40px; grid-template-columns: repeat(auto-fit, 320px); justify-content: center; } .gift-card { background-color: var(--text-white); padding: 20px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; box-shadow: 4px 4px 0 var(--primary-color); } .gift-qr { max-width: 300px; } .gift-body .groom_name, .gift-body .bride_name { font-family: var(--secondary-font); font-size: 20px; margin-bottom: 8px; } .social-link { display: inline-flex; justify-content: center; align-items: center; justify-items: center; width: 100%; gap: 8px; } .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: var(--text-white); } .social-link a:hover i { transform: translateY(-2px); } /* end GỬI QUà */ /* 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; } .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(--secondary-font); line-height: 1.6; } .thankyou-des { font-size: 20px; text-align: center; } .social { display: grid; row-gap: 16px; margin-top: 80px; text-align: center; } .social-link { display: inline-flex; align-items: center; gap: 16px; } .social-link img{ max-width: 28px; } /* END THANK YOU */ /* ====== END MAIN CSS ============ */ /* ------------------------------------------------------------------------- */ /* ====== RESPONSIVE ======= */ /* Small devices such as large phones (640px and up) */ @media only screen and (min-width: 540px) {} /* Medium devices such as tablets (768px and up) */ @media only screen and (min-width: 768px) { .bg-top-left, .bg-bottom-right { max-width: 300px; } .about-container { grid-template-columns: repeat(2,1fr); } .album { grid-template-columns: 1fr 2fr 1fr; } #time-line .section-title{ font-size: 54px; } .bg-top-left { top: -120px; } } /* Large devices such as laptops (1024px and up) */ @media only screen and (min-width: 1024px) {} /* Largest devices such as desktops (1280px and up) */ @media only screen and (min-width: 1280px) {}