@import url('https://fonts.googleapis.com/css2?family=Coiny&family=Quicksand:wght@400;600;700&display=swap'); :root { /* color */ --primary-color : #000032; --secondary-color : #FFCB00; --bg :rgb(251, 250, 238) ; --bg2: #e2e2ff ; --text-white : #fff; --text-black : ; --body-bg : ; --main-bg : ; /* font family */ --main-font : ; --script-font: Coiny; --body-font: Quicksand; /* fontsize */ --title-fs: clamp(1.5rem, 1vw + 1.2rem, 2.5rem) ; --body-fs: clamp(.7rem, 1vw + .6rem, 1.3rem) ; --big-fs: clamp(2rem, 1vw + 2rem, 3.5rem) ; --fs-4: ; --fs-5: ; --fs-6: ; --fs-7: ; /* font-weight */ --fw-medium: ; --fw-semibold: 600; --fw-bold:700; /* 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; } /* 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 ========== */ .btn { position: relative; display: inline-flex; align-items: center; column-gap: 8px; text-transform: uppercase; padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; transition: .3s; z-index: 1; max-height: max-content; } .btn-primary { background-color: var(--primary-color); color: var(--text-white); border: 2px solid transparent; font-weight: bold; max-width: max-content; } .btn-primary:hover { border-color: var(--primary-color) ; background-color: var(--text-white); color: var(--primary-color); } .btn-primary i { font-size:inherit !important; } .btn-pri { color: var(--text-white); border-color: var(--text-white); background-color: var(--primary-color); } .btn-pri:hover { border-color: white; color: white; background-color: rgba(255, 255, 255, 0.5); } .section-title { text-align: center; font-size: var(--title-fs); font-family: var(--script-font); color: var(--primary-color); margin-bottom: 30px; } input, textarea { padding: 10px 20px; border: 1px solid var(--primary-color); border-radius: 4px; } .input-group { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 20px; } .hidden { display: none; } /* ========= AND ELEMENT ========== */ /* ------------------------------------------------------------------------- */ /* AMINATION */ .jello-horizontal { -webkit-animation: jello-horizontal 2s infinite both; animation: jello-horizontal 2s infinite both; } .bounce-top { -webkit-animation: bounce-top 2s infinite both; animation: bounce-top 2s infinite both; } @-webkit-keyframes jello-horizontal { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes jello-horizontal { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes bounce-top { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; } 24% { opacity: 1; } 40% { -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 82% { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 93% { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } } @keyframes bounce-top { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1; } 24% { opacity: 1; } 40% { -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 65% { -webkit-transform: translateY(-3px); transform: translateY(-3px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 82% { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 93% { -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 25%, 55%, 75%, 87% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 100% { -webkit-transform: translateY(0px); transform: translateY(0px); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1; } } /* END AMINATION */ /* ========= COMPONENT ========== */ /* ========= END COMPONENT ========== */ /* ------------------------------------------------------------------------- */ /* ========= THEMES ========== */ body { font-family: Quicksand; overflow-x: hidden; font-size: var(--body-fs); } main { overflow: hidden; } .container { max-width: 1200px; margin: auto; padding: 20px; } /* ========= END THEMES ========== */ /* ------------------------------------------------------------------------- */ /* ====== MAIN CSS ============ */ /* banner */ .banner { position: relative; background-color: var(--primary-color); min-height: 100vh; } .banner .address-name { color: var(--text-white); margin-top: 20px; } .bg-top-left { position: absolute; top: 0; left: 0; } .bg-top-right { position: absolute; top: 0; right: 0; } .bg-top-left img , .bg-top-right img { max-width: 120px; } .banner { display: grid; row-gap: 20px; } .main-invitation { display: grid; row-gap: 24px; } .banner .media { position: relative; display: grid; justify-content: center; align-items: center; justify-items: center; } .banner .media .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .banner .media .img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; max-width: 100%; } .banner .media .bg-1 , .banner .media .bg-2, .banner .media .bg-3, .banner .media .bg-4 { position: absolute; } .banner .media .bg-1 { top: 0px; left: 5px; max-width: 20vw; } .banner .media .bg-4 { bottom: 32px; left: 20px; max-width: 18vw; } .banner .media .bg-2 { top: 32px; right: 20px; max-width: 18vw; } .banner .media .bg-3 { bottom: 32px; right: 40px; max-width: 18vw; } .banner .bg-bottom-left, .banner .bg-bottom-right { position: absolute; bottom: 0; max-width: 40vw; z-index: 0; } .banner .bg-bottom-left { left: 0; } .banner .bg-bottom-right { right: 0; } .banner .data { display: grid; justify-content: center; justify-items: center; text-align: center; row-gap: 20px; line-height: 1.3; color: var(--text-white); } .banner .data h1, .banner .data .birth_day{ font-size: 32px; font-family: var(--script-font); } .banner .data h2 { font-size: 54px; font-family: var(--script-font); } .address-name { text-transform: uppercase; display: block; font-size: 24px; font-weight: var(--fw-semibold) } .data-time { font-size: 24px; text-transform: uppercase; font-weight: var(--fw-bold); } .data-button { display: inline-flex; column-gap: 12px; } /* ABOUT */ .about { padding: 80px 0; background-color: var(--bg); } .about-container { display: grid; justify-content: center; gap: 30px; grid-template-columns: repeat(auto-fit , minmax(240px, 450px)); } .about-media { border-radius: 4px 50px 4px 50px; overflow: hidden; aspect-ratio: 1/1; } .about-media img { object-fit: cover; width: 100%; height: 100%; } .about-title { font-size: var(--big-fs); font-family: var(--script-font); color: var(--primary-color); margin-bottom: 30px; } .about-birthday { font-size: 18px; font-family: var(--script-font); } .about-fm { display: grid; gap: 30px; margin-top: 40px; } .about-card { display: grid; gap: 20px ; grid-template-columns: repeat(2,1fr); align-items: center; } .about-card:nth-child(2) .card-media { order: 2; } .card-media { border-radius: 20%; overflow: hidden; aspect-ratio: 1/1; padding: 10px; background-color: var(--primary-color); } .card-data { display: flex; flex-direction: column; align-items: center; text-align: center; } .card-header { font-size: 20px; font-weight: bold; } .card-title { font-size: clamp(1.1rem , 1.1rem + 1vw , 1.5rem); font-family: var(--script-font); } .card-media img { object-fit: cover; object-position: center; width: 100%; height: 100%; border-radius: 20%; } /* TIMELINE */ .timeline { padding: 80px 0; background-image: url(../img/bg-form.png); } .timeline-des { max-width:680px; text-align: center; margin: 0 auto; } .timeline-container { display: grid; gap:40px; justify-content: center; margin-top: 40px; } .timeline-item { width: 95%; margin: 0 auto; max-width: 450px; background-color: var(--primary-color); color: var(--text-white); display: flex; flex-direction: column; row-gap: 20px; align-items: center; text-align: center; border-radius: 12px; box-shadow: 0 20px 20px rgba(0, 0, 0, 0.22); } .timeline-header { background-color: var(--bg); width: 100%; padding: 10px 20px; color: var(--primary-color); border-radius: 4px 4px 0 0; position: relative; } .rounded { position: absolute; top: 0; width: 50px; height: 50px; left: 50%; background-color: var(--secondary-color); display: flex; justify-content: center; align-items: center; border-radius: 50%; transform: translateX(-50%) translateY(-50%); } .rounded i { font-size: 24px; } .timeline-media { padding: 10px; display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; background-color: var(--secondary-color); } .timeline-media img { aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; } .timeline-body { display: flex; flex-direction: column; padding: 20px; } .timeline-time { font-family: var(--script-font); font-size: 18px; margin-bottom: 8px; } .timeline-date { font-size: var(--title-fs); font-family: var(--script-font); margin-top: 30px; display: block; } /* ALBUM */ .album { background-color: var(--bg); position: relative; } .album .section-top { position: relative; padding: 0 !important; margin: 0; background-color: white; min-height: 60px; } .album .section-top svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .album .elementor-shape-fill { fill: var(--bg); bottom: -20px; width: 100%; height: 100%; } .album .section-bottom { position: relative; padding: 0 !important; margin: 0; background-color: white; min-height: 60px; } .album .section-bottom svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-180deg) } .album-des { text-align: center; margin-bottom: 30px; } .section-bottom .elementor-shape-fill { fill: var(--bg); width: 100%; height: 100%; } .album-container { display: grid; gap: 30px; grid-template-columns: repeat(2, 1fr); } .album-item { aspect-ratio: 1/1; overflow: hidden; border-radius: 12px; -webkit-box-shadow: 3px 3px 8px 1px rgba(0,0,0,0.1); box-shadow: 3px 3px 8px 1px rgba(0,0,0,0.1); } .album-item img { object-fit: cover; width: 100%; height: 100%; } .messeger { padding: 80px 0; background: url(../img/bg-all.png); } .messeger-container { display: grid; justify-content: center; gap: 30px; } .list-messeger { display: grid; row-gap: 30px; } .messeger-item { border-radius: 12px; width: 100%; max-width: 600px; position: relative; } .messeger-item i { color: var(--secondary-color); opacity: .4; font-size: 80px; position: absolute; top: 20px; left: 20px; } .messeger-content { border-radius: 20px 20px 0 20px; padding: 12px; font-style: italic; box-shadow: 8px 8px 0 var(--bg2); background-color: var(--primary-color); color: var(--text-white); position: relative; } .messeger-name { font-size: var(--title-fs); font-family: var(--script-font); margin-top: 20px; float: right; } .messeger-form { display:flex; flex-direction: column; align-items: center; margin-top: 40px; } #form-messeger { display: none; } .form-title { font-size: 20px; color: var(--primary-color); font-family: var(--script-font); } #form1 { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; } #form1 button { margin: 0 auto; } /* COUNT-DOWW */ .countdown { background-color: var(--bg); border-radius: 4px 80px 4px 80px; padding: 40px 0; } .countdown-title { font-size: var(--title-fs); font-family: var(--script-font); text-align: center; color: var(--primary-color); } #countdown { } #countdown ul { display: grid; justify-content: center; align-items: center; grid-template-columns: repeat(auto-fit, 100px); color: var(--text-white); gap: clamp(10px , 10px + 1vw , 40px); margin-top: 30px; } #countdown ul li { display: grid; align-items: center; text-align: center; background-color: var(--primary-color); padding: 10px; border-radius:20px; } #countdown ul li span { font-size: var(--title-fs); font-family: var(--script-font); } /* END COUNT-DOWW */ /* LOCATION */ .location { padding: 80px 0; } .location-container { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); } .location-media { aspect-ratio: 4/3; border-radius: 2px 12px 2px 12px; overflow: hidden; box-shadow: 8px 8px var(--primary-color); } .location-media img { object-fit: cover; width: 100%; height: 100%; } .location-address { display: flex; flex-direction: column; align-items: center; gap: 12px; } .location-address i { font-size: var(--big-fs); } .address-name { font-family: var(--script-font); color: var(--primary-color); } .add-phone { font-weight: bold; } /* END LOCATION */ /* FORM XÁC NHẬN */ .form-container { background-color: var(--secondary-color); padding: clamp(20px , 20px + 2vw , 40px); display: grid; align-items: center; width: 100%; max-width: 780px; margin: 0 auto; border-radius: 4px 30px 4px 30px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.093); } #form2 { display: flex; flex-direction: column; } #form2 input , textarea ,select { background-color: rgba(255, 255, 255, 0.792); padding: 10px 20px; border-radius: 8px; border-color: transparent; box-shadow: 0 0 30px rgba(0, 0, 0, 0.093); width: 100%; max-width: 400px; margin: 0 auto; } #form2 input::placeholder { color: rgba(0, 0, 0, 0.439); } #form2 button { margin: 30px auto; } #form2 select { position: relative; padding-right: 32px !important; cursor: pointer; border: 2px solid var(--primary-color); } #form2 select i { position: absolute; right: 0; top: 50%; } .thankyou { background-color: var(--primary-color); color: var(--text-white); position: relative; } .thankyou .elementor-shape-fill { fill: white; } .thankyou-container { display: grid; justify-content: center; text-align: center; } .thankyou-title { font-size: var(--big-fs); font-family: var(--script-font); } /* END FORM XÁC NHẬN */ /* ====== END MAIN CSS ============ */ #gift-box { display: none; border-radius: 12px; } .gift-container { display: grid; gap: 30px; } .gift-card { padding: 20px; } .gift-media { padding: 10px; background-color: var(--primary-color); border-radius: 5%; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; max-width: 300px; margin: 0 auto; } .gift-media img { max-width: 100%; border-radius: 5%; } .gift-content { text-align: center; margin-top: 30px; max-width: 300px; } .right-fixed { position: fixed; bottom: 80px; right: clamp(20px, 20px + 1vw , 40px); display: flex; flex-direction: column; gap: 12px; } .right-fixed a { display: flex; justify-content: center; align-items: center; width: clamp(40px , 40px + 1vw , 60px); height: clamp(40px , 40px + 1vw , 60px); padding: 4px; border-radius: 50%; background-color: var(--bg); box-shadow: 0 20px 20px rgba(0, 0, 0, 0.259); } .right-fixed a img { max-width: clamp(26px , 26px + 1vw , 32px); } /* ------------------------------------------------------------------------- */ /* ====== RESPONSIVE ======= */ /* Small devices such as large phones (640px and up) */ @media only screen and (min-width: 480px) { .banner .media .img { max-width:480px; } } /* Medium devices such as tablets (768px and up) */ @media only screen and (min-width: 768px) { .main-invitation { display: grid; grid-template-columns: repeat(2,1fr); align-items: center; } .album-container { grid-template-columns: repeat(3,1fr); } .about-fm { grid-template-columns: repeat(2,1fr); margin-top: 80px; } } /* Large devices such as laptops (1024px and up) */ @media only screen and (min-width: 1024px) { .banner .media .img { max-width:600px; } .bg-top-left img , .bg-top-right img { max-width: 220px; } } /* Largest devices such as desktops (1280px and up) */ @media only screen and (min-width: 80em) { }