Web page design

mitchellbedford-mitchellbedford.bitbucket.io-c29e7e31d5aa/groupwork1/css/styles.css

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Kumbh Sans', sans-serif; scroll-behavior: smooth; } .navbar { background: #131313; height: 100px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; position: sticky; top: 0; z-index: 999; background-image: url(../images/logo.png); background-position: left 100px center; background-size: contain; background-repeat: no-repeat; } .navbar__container { display: flex; justify-content: space-between; height: 80px; z-index: 1; width: 100%; max-width: none; margin: 0 auto; padding: 0 50px; } .navbar__menu { display: flex; align-items: center; list-style: none; } .navbar__item { height: 80px; } .navbar__links { color: #fff; display: flex; align-items: center; justify-content: center; width: 125px; text-decoration: none; height: 100%; transition: all 0.3s ease; } .navbar__btn { display: flex; justify-content: center; align-items: center; padding: 0 1rem; width: 100%; } .button { display: flex; justify-content: center; align-items: center; text-decoration: none; padding: 10px 20px; height: 100%; width: 100%; border: none; outline: none; border-radius: 4px; background: #833ab4; background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); color: #fff; transition: all 0.3s ease; } .navbar__links:hover { color: #9518fc; transition: all 0.3s ease; } @media screen and (max-width: 960px) { .navbar__container { display: flex; justify-content: space-between; height: 80px; z-index: 1; width: 100%; max-width: 1300px; padding: 0; } .navbar__menu { display: grid; grid-template-columns: auto; margin: 0; width: 100%; position: absolute; top: -1000px; opacity: 1; transition: all 0.5s ease; z-index: -1; } .navbar__menu.active { background: #131313; top: 100%; opacity: 1; transition: all 0.5s ease; z-index: 99; height: 60vh; font-size: 1.6rem; } #navbar__logo { padding-left: 25px; } .navbar__toggle .bar { width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background: #fff; } .navbar__item { width: 100%; } .navbar__links { text-align: center; padding: 2rem; width: 100%; display: table; } .navbar__btn { padding-bottom: 2rem; } .button { display: flex; justify-content: center; align-items: center; width: 80%; height: 80px; margin: 0; } #mobile-menu { position: absolute; top: 20%; right: 5%; transform: translate(5%, 20%); } .navbar__toggle .bar { display: block; cursor: pointer; } #mobile-menu.is-active .bar:nth-child(2) { opacity: 0; } #mobile-menu.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } #mobile-menu.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } } /* Hero Section */ .hero { padding: 200px 0; background-image: url("../images/main-sunset.jpg"); background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; height: 800px; object-fit: contain; } .hero__container { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; height: 90%; text-align: center; padding: 20px; } .hero__heading { font-size: 100px; margin-bottom: 24px; color: #fff; } .hero__heading span { background: #ee0979; background: -webkit-linear-gradient(to right, #ff6a00, #ee0979); background: linear-gradient(to right, #ff6a00, #ee0979); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -mo-text-fill-color: transparent; } .hero__description { font-size: 45px; background: #da22ff; background: #833ab4; background: -webkit-linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); background: linear-gradient(to right, #833ab4, #fd1d1d, #fcb045); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; } .highlight { border-bottom: 4px solid rgb(132, 0, 255); transition: 0.2s; } @media screen and (max-width: 768px) { .hero__heading { font-size: 60px; } .hero__description { font-size: 40px; } } /* About Section */ .main { background-color: #131313; padding: 10rem 0; } .main__container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: center; margin: 0 auto; height: 90%; z-index: 1; width: 100%; max-width: 1300px; padding: 0 50px; } .main__content { color: #fff; width: 100%; padding: 2rem; } .main__content h1 { font-size: 4rem; background-color: #fe3b6f; background-image: linear-gradient(to top, #ff087b 0%, #ed1a52 100%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; text-transform: uppercase; margin-bottom: 32px; text-align: left; } .main__content h2 { font-size: 1.4rem; color: white; text-align: left; font-weight: 400; } .main__btn { font-size: 2.5rem; font-weight: 550; background: #833ab4; background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); padding: 20px 60px; border: none; border-radius: 4px; margin-top: 2rem; cursor: pointer; transition: all 0.35s; position: absolute; outline: none; text-decoration: none; } .main__btn a { position: absolute; z-index: 2; color: #fff; text-decoration: none; } .main__btn:hover { color: #fff; } .main__img--container { text-align: center; } .main__img--card { margin: 10px; height: 600px; width: 600px; border-radius: 7px; flex-direction: column; justify-content: center; background-image: url(../images/menu.jpg); background-repeat: no-repeat; background-size: cover; } .main__img--map { width: 600px; height: 450px; border: 0; border-radius: 5px; } /* Mobile Responsive */ @media screen and (max-width: 1100px) { .main__container { display: grid; grid-template-columns: 1fr; align-items: center; justify-content: center; width: 100%; margin: 0 auto; height: 90%; } .main__img--map { height: 425px; width: 425px; } .main__img--container { display: flex; justify-content: center; } .main__img--card { height: 425px; width: 425px; } .main__content { text-align: center; margin-bottom: 1rem; } .main__content h1 { font-size: 2.5rem; margin-top: 1rem; text-align: left; } .main__content h2 { font-size: 3rem; text-align: left; } } @media screen and (max-width: 480px) { .main__img--card { width: 250px; height: 250px; } .main__img--map { width: 250px; height: 250px; } .fa-users, .fa-layer-group { font-size: 4rem; } .main__content h1 { font-size: 2rem; margin-top: 3rem; } .main__content h2 { font-size: 2rem; } .main__btn { padding: 12px 36px; margin: 2.5rem 0; } } /* Services Section */ .services { background: #131313; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 10rem 0; } .services h1 { background-color: #ff8177; background-image: linear-gradient(to right, #ff0844 0%, #f7673c 100%); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; margin-bottom: 5rem; font-size: 2.5rem; } .services__content h2 { text-align: center; margin-bottom: 5rem; font-size: 2rem; } .services__content p { text-align: center; font-size: 1.3rem; } .services__wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; } .services__card { margin: 10px; height: 425px; width: 300px; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; color: #fff; background: rgb(26, 42, 108); background: linear-gradient(-35deg, rgba(26, 42, 108, 0.7133228291316527) 0%, rgba(178, 31, 31, 1) 22%, rgba(253, 187, 45, 1) 100%); transition: 0.3s ease-in; } .services__card:nth-child(2) { background: rgb(26, 42, 108); background: linear-gradient(0deg, rgba(26, 42, 108, 0.7133228291316527) 0%, rgba(178, 31, 31, 1) 50%, rgba(253, 187, 45, 1) 100%); } .services__card:nth-child(3) { background: rgb(26, 42, 108); background: linear-gradient(0deg, rgba(26, 42, 108, 0.7133228291316527) 0%, rgba(178, 31, 31, 1) 50%, rgba(253, 187, 45, 1) 100%); } .services__card:nth-child(4) { background: rgb(26, 42, 108); background: linear-gradient(35deg, rgba(26, 42, 108, 0.7133228291316527) 0%, rgba(178, 31, 31, 1) 22%, rgba(253, 187, 45, 1) 100%); } .services__card h2 { text-align: center; } .services__card p { text-align: center; margin-top: 24px; font-size: 20px; } .services__btn { display: flex; justify-content: center; margin-top: 16px; } .services__card button { color: #fff; padding: 14px 24px; border: none; outline: none; border-radius: 4px; background: #131313; font-size: 1rem; } .services__card button:hover { cursor: pointer; } .services__card:hover { transform: scale(1.075); transition: 0.3s ease-in; cursor: pointer; } @media screen and (max-width: 1300px) { .services__wrapper { grid-template-columns: 1fr 1fr; } } @media screen and (max-width: 768px) { .services__wrapper { grid-template-columns: 1fr; } } /*SERVICE SECTION*/ .service { background: #131313; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 10rem 0; } /* location CSS */ .location { background-color: #131313; padding: 10rem 0; } .location__container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: center; margin: 0 auto; height: 90%; z-index: 1; width: 100%; max-width: 1300px; padding: 0 50px; } /* Footer CSS */ .footer__container { background-color: #131313; padding: 5rem 0; display: flex; flex-direction: column; justify-content: center; align-items: center; } .social__icon--link { color: #ec7b1e; font-size: 50px; } .social__media { max-width: 1000px; width: 100%; } .social__media--wrap { display: flex; justify-content: space-evenly; align-items: center; width: 90%; max-width: 1000px; margin: 40px auto 0 auto; } .social__icons { display: flex; justify-content: space-between; align-items: center; width: 240px; } .website__rights { color: #fff; } @media screen and (max-width: 820px) { .footer__links { padding-top: 2rem; } #footer__logo { margin-bottom: 2rem; } .website__rights { margin-bottom: 2rem; } .footer__link--wrapper { flex-direction: column; } .social__media--wrap { flex-direction: column; } } @media screen and (max-width: 480px) { .footer__link--items { margin: 0; padding: 10px; width: 100%; } } .banner { min-height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/reserve.jpg") center/cover no-repeat; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; padding-bottom: 20px; } .banner h2 { padding-bottom: 50px; font-size: 3rem; margin-bottom: 50px; background: #ee0979; background: -webkit-linear-gradient(to right, #ff6a00, #ee0979); background: linear-gradient(to right, #ff6a00, #ee0979); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -mo-text-fill-color: transparent; } .banner__success h2 { padding-bottom: 50px; text-align: center; display: flex; justify-content: center; font-size: 5rem; margin-bottom: 50px; background: #ee0979; background: -webkit-linear-gradient(to right, #ff6a00, #ee0979); background: linear-gradient(to right, #ff6a00, #ee0979); background-size: 100%; -webkit-background-clip: text; -moz-background-clip: text; -webkit-text-fill-color: transparent; -mo-text-fill-color: transparent; } .banner a { padding-top: 20px; align-items: center; justify-content: center; display: flex; } .card-content { height: 900px; border-radius: 5px; width: 35%; } .card-content h3 { text-align: center; color: #000; padding: 25px 0 10px 0; font-size: 26px; font-weight: 500; } .form-row { display: flex; width: 90%; margin: 0 auto; } form select, form input { display: block; width: 100%; margin: 15px 12px; padding: 5px; font-size: 15px; font-family: 'Poppins', sans-serif; outline: none; border: none; border-bottom: 1px solid #eee; font-weight: 300; } form input[type=text], form input[type=number], form input[type=date], form input[type=email], form input::placeholder, select { color: #9a9a9a; } form input[type=submit] { color: #fff; background: #f2745f; padding: 12px 0; border-radius: 4px; cursor: pointer; } form input[type=submit]:hover { opacity: 0.9; } @media(max-width: 992px) { .card-container { grid-template-columns: 100%; width: 100vw; } .card-img { height: 330px; } } .input-group { margin: 0px 0; position: relative; } .input-group label { display: inline-block; margin-bottom: 3px; font-size: 1.5rem; } .input-group input { display: block; padding: 10px; border-radius: 5px; border-width: 1px; } .input-group select { display: block; padding: 10px; border-radius: 5px; border-width: 1px; } .error input { border: 3px red solid; } .success input { border: 3px green solid; } .input-group i { position: absolute; right: 10px; top: 35px; visibility: hidden; } .success i.fa-check-circle { visibility: visible; color: green; } .error i.fa-exclamation-circle { visibility: visible; color: red; } .input-group p { font-size: 15px; color: red; visibility: hidden; } .error p { visibility: visible; } .wrapper button { background-color: #ff8177; background-image: linear-gradient(to right, #ff0844 0%, #f7673c 100%); padding: 12px 0; border-radius: 4px; cursor: pointer; } /*---------------------------------------- MENU PAGE-----------------------------*/ .img--alacarte { padding: 200px 0; background-image: linear-gradient(to top, rgba(0, 1, 3, 0.899) 5%, rgba(7, 15, 30, 0.614) 80%), url("../images/alacarte.jpg"); background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; height: 400px; object-fit: contain; } .img--lounge { padding: 200px 0; background-image: linear-gradient(to top, rgba(0, 1, 3, 0.899) 5%, rgba(7, 15, 30, 0.614) 80%), url("../images/lounge.jpg"); background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; height: 400px; object-fit: contain; } .img--drinks { padding: 200px 0; background-image: linear-gradient(to top, rgba(0, 1, 3, 0.899) 5%, rgba(7, 15, 30, 0.614) 80%), url("../images/Drinks\ banner.jpg"); background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; height: 400px; object-fit: contain; } .restaurant_menu__meal span , .restaurant_menu__price { background-color: #131313; } .menu, .main__content { text-align: left; margin-bottom: 1rem; } .menu__wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; } .restaurant_menu__list { list-style: none; padding: 0; font-size: 14px; color: white; min-width: 320px; max-width: 500px; } .restaurant_menu__row { padding-bottom: 1em; border-bottom: 2.5px dotted #ffffff; position: relative; float: left; width: 100%; margin-bottom: 1.5em; } .restaurant_menu__meal { padding-right: 3em; font-size: 1.1rem; padding-top: 0.2em; height: fit-content !important; float: left; } .restaurant_menu__meal span { margin: 0; position: absolute; top: 2em; padding-right: 7px; padding-top: 10px; } .restaurant_menu__price { padding: 26px 1px 5px; position: relative; top: 1.2em; left: 1px; float: right; font-size: 1rem; } .itemDescription { font-size: 0.9rem; font-style: italic; width: 100%; clear: both; height: fit-content; padding-bottom: 10px; padding-top: 10px; } .main__container--menu { display: grid; grid-template-columns: 1fr 1fr; margin: 0 auto; height: 90%; z-index: 1; width: 100%; max-width: 1300px; padding: 0 50px; } @media screen and (max-width: 1100px) { .main__container--menu { display: grid; grid-template-columns: 1fr; text-align: left; width: 100%; margin: 0 auto; height: 90%; } } .br { padding-top: 40px; } .gallery_category { color: #ffffff; background-color: #131313; padding-top: 30px; padding-bottom: 10px; height: 80px; } .gallery_category a{ color: white; text-decoration: none; text-transform: uppercase; font-size: 2rem; } .gallery_category li{ text-align: center; display: inline; padding: 0 25px 0 100px; } .gallery_category .current a{ color: #ee3c05; font-weight: bold; } .gallery_category a:hover{ color:#ee3c05; font-weight: bold; transition: all 0.3s ease; } /* Image Grid*/ .row { display: flex; background-color: #131313; flex-wrap: wrap; padding: 10px 10px; } /* Create four equal columns that sits next to each other */ .column { flex: 25%; max-width: 25%; padding: 0 4px; } .column img { margin-top: 8px; margin-bottom: 8px; width: 100%; vertical-align: middle; } /* Image zoom in animation on mouse hover */ .zoom { transition: transform .3s ease-in; margin: 0 auto; } .zoom:hover { transform: scale(1.05); } .ImgThumbnail { border-radius: 5px; cursor: pointer; transition: 0.3s; height: 300px; width: 300px; } .ImgThumbnail:nth-of-type(1) { margin-left: 0%; } .modal { display: none; position: fixed; z-index: 1; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); } .modalImage { margin: auto; margin-top: 90px; display: block; width: 70%; height: 80%; max-width: 700px; } .close { position: absolute; top: 130px; right: 480px; color: #ffffff; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: rgb(255, 0, 0); cursor: pointer; } /** Reviews **/ #reviews{ padding: 15px; color: #ffffff; background: #35424a; margin-bottom: 0px; } #reviews h4{ margin-top: 0px; font-size: 20px; margin-bottom: 0px; padding-bottom: 0px; text-align: center; } #reviews li{ color: #E7B707; font-weight: bold; font-size: 15px; text-align: center; } #reviews p{ margin-top: 0px; font-size: 12px; font-style: italic; color: #000000; margin-bottom: 0px; padding-bottom: 0px; text-align: center; } /** Reviews Content **/ ul#customer_reviews li{ list-style:none; padding: 5px; margin-bottom: 0px; }