@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=WindSong:wght@400;500&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Josefin Sans', sans-serif; } /*----- main -----*/ .portfolio .container{ max-width: 60%; } .img-port{ margin-top: 50px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 25px; } .img-port .image-item .image{ width: 100%; height: 380px; } .img-port .image-item .image img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .img-port .image-item{ position: relative; z-index: 2; overflow: hidden; } .img-port .image-item:before{ content: ''; position: absolute; width: 100%; height: 100%; display: none; top: 0; left: 0; right: 0; bottom: 0; background: rgba(245, 244, 244, 0.9); z-index: 5; } .img-port .image-item:hover.image-item:before{ display: block; } .img-port .image-item .overlay-port{ position: absolute; top: 130%; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 10; transition: 1s; cursor: pointer; } .img-port .image-item .overlay-port p{ font-size: 24px; font-style: italic; font-family: 'WindSong'; text-align: center; color: #3F4E4F; padding: 8px 0; } .img-port .image-item:hover .overlay-port{ top: 0; } /*---------------------------------------- Portfolio-extension ----------------------------------------*/ .portfolio-1 .container{ max-width: 60%; margin-top: 50px; } .img-port-1{ columns: 2 300px; gap: 10px; } .img-port-1 img{ margin-bottom: 10px; } .portfolio-1-credit .container{ max-width: 60%; margin: 10px auto; text-align: center; } .credit p{ display: inline-block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; color: #3F4E4F; } /*---------------------------------------- Love notes ----------------------------------------*/ .love-note{ background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(images/home-note.jpg); width: 100%; height: 60vh; margin-top: 10px; } .note-text h2{ margin-top: 30px; margin-bottom: 30px; text-align: center; color: #3F4E4F; font-family: 'WindSong'; font-size: 28px; font-weight: 400; font-style: italic; } .note .container{ max-width: 60%; } .note-detail, .note-detail-1{ display: grid; grid-template-columns: repeat(2, 1fr); text-align: center; margin-top: 50px; margin-bottom: 50px; } .note-img img, .note-img-1 img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .note-img-2 img{ display: none; } .note-text, .note-text-1{ padding: 0 20px; } .note-text p, .note-text-1 p{ font-size: 14px; color: #3F4E4F; } .line-note{ height: 1px; background: lightgray; } .line-note-2{ margin-top: 5px; height: 1px; background: lightgray; } .visit-us{ margin-top: 30px; display: flex; } .visit-detail p{ font-size: 14px; font-weight: 600; color: #8D7B68; text-transform: uppercase; } .visit-detail span{ margin-left: 50px; color: #3F4E4F; font-size: 22px; font-family: 'WindSong'; } /*---------------------------------------- press ----------------------------------------*/ .press .container{ max-width: 70%; } .press-title{ margin-top: 50px; display: flex; justify-content: center; } .press-title-text h2, .press-title-text-1 h2, .press-title-text-2 h2{ margin-top: 30px; margin-bottom: 30px; text-align: center; color: #3F4E4F; font-family: 'WindSong'; font-size: 28px; font-weight: 400; font-style: italic; } .press-title-text p{ padding: 0 100px; text-align: center; color: #3F4E4F; font-size: 14px; } .press-title-1{ justify-content: center; align-items: center; text-align: center; } .press-img-1{ display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; gap: 30px; cursor: pointer; } .press-img-1 img{ width: 280px; height: 280px; } .press-title-2{ justify-content: center; align-items: center; text-align: center; } .press-img-2{ display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; gap: 20px; } /*---------------------------------------- service ----------------------------------------*/ .service{ background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(images/service.jpg); width: 100%; height: 70vh; margin-top: 30px; } .service-content .container{ max-width: 60%; display: flex; flex-wrap: wrap; margin-top: 50px; margin-bottom: 50px; text-align: center; align-items: center; justify-content: center; } .service-text p { letter-spacing: 4px; color: #8D7B68; text-align: center; text-transform: uppercase; } .service-text span{ font-family: 'WindSong'; font-size: 30px; color: #3F4E4F; text-transform: lowercase; } .service-text-more p{ font-weight: 300; font-size: 20px; } .service-text-more span{ font-family: 'WindSong'; font-size: 30px; color: #3F4E4F; text-transform: lowercase; } .service-container{ display: grid; place-items: center; margin-inline: 1.5rem; padding-block: 5rem; } .service-card-container{ display: grid; row-gap: 3.5rem; } .card-text{ position: relative; overflow: hidden; } .card-img{ width: 327px; } .card-description{ width: 280px; background-color: #F3EEEA; padding: 1.5rem 1.5rem; box-shadow: 0 10px 25px hsla(0, 0%, 0%, 0.15); border-radius: 1rem; position: absolute; bottom: -9rem; left: 0; right: 0; margin-inline: auto; opacity: 0; transition: opacity 1s 1s; text-align: center; } .card-desc{ display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; color: #3F4E4F; } .service-card-title{ font-size: 14px; margin-bottom: 15px; } .service-card-button{ font-size: 14px; color: #3F4E4F; } .service-card-button:hover{ text-decoration: underline; } .card-text:hover .card-description{ animation: showdata 1s forwards; opacity: 1; transition: opacity 0.3s; } .card-text:hover{ animation: removedata 2s forwards; } .card-text:not(:hover){ animation: show-overflow 2s forwards; } .card-text:not(:hover) .card-description{ animation: remove-overflow 1s forwards; } @keyframes showdata{ 50%{ transform: translateY(-10rem); } 100%{ transform: translateY(-7rem); } } @keyframes removedata{ to{ overflow: initial; } } @keyframes remove-overflow{ 0%{ transform: translateY(-7rem); } 50%{ transform: translateY(-10rem); } 100%{ transform: translateY(0.5rem); } } @keyframes show-overflow{ 0%{ overflow: initial; pointer-events: none; } 50%{ overflow: hidden; } } /*---------------------------------------- about ----------------------------------------*/ .about .container{ max-width: 50%; } .about-title{ display: block; text-align: center; justify-content: center; } .about-title h3{ margin-top: 30px; margin-bottom: 30px; font-family: 'WindSong'; color: #3F4E4F; font-size: 24px; font-weight: 300; font-style: italic; } .about-title p{ font-size: 14px; color: #3F4E4F; } .about-us{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; cursor: pointer; text-align: center; justify-content: center; align-items: center; } .about-detail img{ width: 100%; height: 500px; object-fit: cover; object-position: center; } .about-detail h3{ margin-top: 10px; margin-bottom: 10px; text-align: center; font-size: 10px; color: #3F4E4F; text-transform: uppercase; } .about-detail p{ text-align: center; color: #3F4E4F; font-size: 22px; font-family: 'WindSong'; } /*---------------------------------------- contact-form ----------------------------------------*/ .contact-form .container{ max-width: 60%; } .contact-title h3{ margin-top: 30px; text-align: center; font-family: 'WindSong'; color: #3F4E4F; font-size: 24px; font-weight: 300; font-style: italic; } .contact-main{ position: relative; display: flex; justify-content: center; align-items: center; padding: 20px 10px; } .contact-box{ display: grid; grid-template-columns: repeat(2, 1fr); justify-content: center; align-items: center; } .left-box{ height: 100%; background: url(images/contact.jpg) no-repeat center; background-size: cover; } .right-box{ padding: 25px 40px; } .right-box h3{ position: relative; padding-bottom: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; color: #3F4E4F; } .right-box .content-title p{ font-size: 14px; color: #3F4E4F; } .right-box .content-title span{ font-size: 12px; color: #3F4E4F; } .field{ width: 100%; font-size: 16px; margin-bottom: 10px; } .right-box button{ padding: 10px 12px; margin-top: 20px; border: none; outline: none; background-color: #7E8A97; color: white; font-size: 12px; font-weight: 600; text-transform: uppercase; cursor: pointer; } .right-box button:hover{ background-color: #3F4E4F; } @media(width < 1500px){ .contact-form .container{ max-width: 80%; } } @media(width < 1200px){ .portfolio-1 .container{ max-width: 80%; } .note .container{ max-width: 90%; } .love-note{ margin-top: 50px; } .press-img-1 img{ width: 200px; height: 200px; } .press .container{ max-width: 80%; } .about .container{ max-width: 80%; } .contact-form .container{ max-width: 90%; } .right-box h3{ font-size: 20px; } .service{ margin-top: 50px; height: 50vh; } .love-note{ height: 50vh; margin-top: 50px; } } @media(width < 800px){ .portfolio-1 .container{ max-width: 90%; } .note .container{ max-width: 100%; } .press .container{ max-width: 100%; } .press-img-2{ gap: 10px; } .about .container{ max-width: 100%; } .about-detail img{ height: 350px; } .contact-form .container{ max-width: 100%; } } @media(width < 700px){ .note-detail, .note-detail-1{ grid-template-columns: repeat(1, 1fr); } .note .container{ max-width: 80%; } .note-img-2 img{ display: block; } .note-img-1 img{ display: none; } .note-text p, .note-text-1 p{ margin-top: 20px; } .press-img-1{ display: block; } .press-img-1 img{ width: 50%; height: 50%; } .press-img-2{ grid-template-columns: repeat(1, 1fr); } .contact-box{ grid-template-columns: 1fr; } } @media(width < 550px){ .portfolio .container{ max-width: 100%; } .portfolio-1 .container{ max-width: 100%; } .portfolio-1-credit .container{ max-width: 100%; } .note .container{ max-width: 100%; } .about .container{ max-width: 90%; } .about-us{ grid-template-columns: repeat(1, 1fr); } .service-container{ margin-inline: 1rem; } .card-description{ width: 250px; padding: 1rem; } } @media screen and (min-width: 768px){ .service-card-container{ grid-template-columns: repeat(2, 1fr); column-gap: 1.5rem; } } @media screen and (min-width: 1120px){ .service-card-container{ grid-template-columns: repeat(3, 1fr); } .card-img{ width: 350px; } .card-description{ width: 315px; padding-inline: 2rem; } }