Mariaericka / OMG-philippines

beverage website for omg
2 stars 2 forks source link

Aesthetic - add more content #106

Open Nuwebe opened 8 months ago

Nuwebe commented 8 months ago

/ Font links / @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Licorice&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;900&display=swap'); / Font links /

:root{ --green:#27ae60; --black:#000000; --light-color:#666; --box-shadow:0 .5rem 1.5rem rgba(0,0,0, .1); --red:rgb(155 8 8); --white:#ffff; }

/ HEADER STARTS HERE / .header{ color: white; background: white; position: sticky; top:0; left:0; right:0; z-index: 1000; border-bottom: 3px solid black; padding: 5px 20px; }

.icons { margin-left: 120px; }

.header .flex{ position: relative; width: 100%; }

.navbar { display: grid; grid-template-columns: 300px 700px 300px; column-gap: 30px; align-items: center; justify-content: center; align-items: center; }

.header .flex .navbar a{ font-size: 20px; color: black; margin:0 1rem; }

.header .flex .navbar a:hover{ color:#FFD93D; }

.header .flex .navbar a:focus { color:#FFD93D; }

.header .flex .icons > *{ margin-left: 1.5rem; font-size: 2.5rem; color:black; cursor: pointer;

}

.header .flex .icons > *:hover{ color: #FFD93D; }

.header .flex .icons span{ font-size: 2rem; }

menu-btn{

display: none; }

.btnheader{ background-color: #FF8400; color: white; width: 50px; margin-top: 1rem; display: inline-block; font-size: 1rem; padding:1rem 0rem; cursor: pointer; text-transform: capitalize;

}

.header .flex .profile{ background-color:white; border:var(--border); padding: 12px 16px; text-align: center; position: absolute; top:88%; right:0rem; width: 12rem; display: none; height: 12rem; animation: fadeIn .2s linear; }

.header .flex .profile.active{ margin: 10px; display:grid; align-content: space-evenly; width: 20rem; height: 14rem; border: 3px solid #F6F1E9; }

@keyframes fadeIn { 0%{ transform: translateY(1rem); } }

.header .flex .profile .name{ font-size: 2rem; color:black; margin-bottom: .5rem; }

.header .flex .profile .account{ margin-top: 1.5rem; font-size: 2rem; color:var(--light-color); }

.header .flex .profile .account a{ color:var(--black); }

.header .flex .profile .account a:hover{ color:var(--yellow); text-decoration: underline; }

.logoup{ width: 65px; height: 65px; }

/ HEADER ENDS HERE /

/ HOME STARTS HERE /

.background-image { position: relative; left: 60px; width: 90%; height: 90%; }

.Tagline h3 { text-align: center; color: #FF8400;; font-size: 30px; padding: 20px; border-radius: 10px; font-family: 'Inter', sans-serif; }

.franchise { display: grid ; grid-template-columns: 700px 700px; }

.container{ margin: 50px 30px 30px;

}

@keyframes slideInLeft { from { transform: translate(-200px); }

to { transform: translate(0); } }

.container{ padding-top: 130px; margin-left: 150px; height: 600px; width: 500px; color: #4F200D; text-align: center; }

.container h1 { line-height: 100px; text-align: center; }

.container .Now { font-size: 70px; }

.container .five { font-size: 100px; color: #FF8400; }

.container .branch{ font-size: 70px; margin-bottom: 50px; }

.content1 a{ border-top: 50px; text-align: center; font-style: normal; font-weight: 800; font-size: 30px; background-color: #F6F1E9; border: 2px solid #4F200D; padding: 15px; color: #4F200D; transition: 0.2s; }

.content1 a:hover{ color: #F6F1E9; background-color: #FF8400; border: 2px solid #FF8400; padding: 15px; transition:0.2s; }

.content1 a:active{ background-color: #FF8400;
border: 2px solid #FF8400; opacity: 0.1; transition: 0.2s; }

.laguna-map { display: grid; justify-content: center; align-content: center; padding: 200px 0px; }

.laguna-map iframe { height: 400px; width: 700px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

.flex-box img{ border: 5px solid #FF8400; }

.flex-box { margin: 150px 100px; display: flex; gap: 30px; }

.flex-box a { width: 450px; color: #FF8400; font-size: 20px; font-family: 'Inter', sans-serif; text-align: center; padding: 30px 30px 30px 0px; display: grid; align-content: center; }

buy1-take1 h1{

padding: 0px 30px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }

buy1-take1 h1:hover {

background-color: #FF8400; color: #F6F1E9; }

.hero .slide{ display: flex; align-items: center; flex-wrap: wrap-reverse; gap:2rem; margin-top: 100px; margin-bottom: 4rem; }

.hero .slide .image{ flex:1 1 40rem; }

.hero .slide .image img{ width: 100%; }

.hero .slide .content{ flex:1 1 40rem; text-align: center; }

.hero .slide .content span{ font-size: 2.5rem; color:var(--light-color); }

.hero .slide .content h3{ margin:1rem 0; font-size: 6rem; color: #4F200D; text-transform: capitalize; }

.swiper-pagination-bullet-active{ background-color: #FFD93D; }

.order-now-btn { color: #FF8400; text-align: center; font-size: 20px; padding: 20px; background-color: #F6F1E9; border: 2px solid #FF8400; display: block; margin-left: 300px; width: 200px; }

.order-now-btn:hover { color: #F6F1E9; background-color: #4F200D; border: 2px solid #4F200D; }

.order-now-btn:active { opacity: 1; }

/ Franchise starts here/

.franchise-sticky{ width: 100%; background-color: #F6F1E9; height: 700px; display: grid; grid-template-columns: 600px 900px; gap: 10px; }

.stick { display: grid; grid-template-rows: 200px 200px 200px; margin: 70px 70px; }

.sticky h1 { font-size: 25px; text-align: center; justify-content: center; padding: 50px 10px; }

.sticky-1 { background-color: #4F200D; color: #F6F1E9; }

.sticky-2 { background-color: #FF8400; color: #F6F1E9; }

.sticky-3 { background-color: #FFD93D; color: #4F200D; }

.franchise-form { margin: 50px 0px 0px 100px; }

form h5 { color: #4F200D; font-family: 'Inter', Sans serif; font-size: 30px; text-align: justify; }

.field { display: flex; flex-direction: row; margin: 100px; }

.fill-out { display: flex; flex-direction: column; row-gap: 40px; width: 200px; font-family: 'Inter', Sans serif; font-size: 20px; color: #4F200D;

}

.fill-out-box input { font-size: 15px; font-family: 'Inter', Sans serif; font-weight: 500; color: #4F200D; height: 50px; width: 300px; border: 1.5px solid #4F200D; }

.fill-out-box:focus { box-shadow: 5px solid #4F200D; }

.franchise-form-btn button { font-family: 'Inter', Sans serif; font-size: 20px; border: 3px solid #4F200D; color: #4F200D; width: 150px; height: 50px; position: relative; left: 460px; bottom: 100px; }

.franchise-form-btn button:hover { width: 150px; height: 50px; color: #F6F1E9; background: #4F200D; cursor: pointer; }

.franchise-form-btn button:active{ opacity: 0.1; }

/ Franchise ends here/

.grid { display: grid; grid-template-columns: 25% 25% 25% 25%; grid-gap: 3rem; margin: 5%; padding-right: 10rem; }

.grid > div:nth-child(even){ background:tomato; }

.grid > div:nth-child(odd){ background: gold; }

.grid-2 { display: grid; grid-template-columns: 33% 33% 33%; grid-gap: 3rem; padding: 15rem; }

.grid-2> div { background: #eee; padding: 1em; }

.grid-2> div:nth-child(even){ background:tomato; }

.grid-2> div:nth-child(odd){ background: gold; }

.header-grid-2 { padding-top: 1rem; padding-left: 35%; }

.header-grid-2 h1 { font-size: 5rem; }

/--------- Site-content -------/

section .site-content { display: grid; grid-template-columns: 70% 30%; }

section .post-content { width: 100%; margin-bottom: 5rem; }

section .post-image img{ width: 100%; transition: all 1s ease; }

section .site-content .post-content > .post-image, .post-title { padding: 1rem 2rem; position: relative; }

section .post-info { background: #FFD700; padding: 1rem; position: absolute; bottom: 0%; left: 20vw; border-radius: 3rem; }

section .site-content .post-content > .post-image > div { overflow: hidden; }

section .post-image img:hover { transform: scale(1.3); }

section .site-content .post-content > .post-image .post-info span{ margin: 0 .5rem; }

section .post-content .post-title a { font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 2.5rem; }

.site-content .pagination { justify-content: center; margin: 4rem 0; }

.site-content .pagination a { color: #666; padding: .6rem .9rem; border-radius: 2rem; margin: 0.3rem; font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; }

.post-content .site-content .pagination pages { background: var(--gray); color: var(white); }

section .post-title .post-btn { display: inline-block; font-size: 1.3rem; color: #fff; background: black; border-radius: 0; cursor: pointer; padding: .8rem 3rem; }

.post-btn:hover { background: red; letter-spacing: .1rem; }

/--------- Site-content -------/

/--------- Sidebar -------/

.site-content > .sidebar .category-list { font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; }

.site-content > .sidebar .category-list .list-items { background: linear-gradient(tomato, gold); padding: .4rem 1rem; margin: .8rem 0; border-radius: 3rem; width: 70%; display: flex; justify-content: space-between; }

.site-content > .sidebar .category-list .list-items a { color: black; }

.site-content .sidebar .popular-post .post-content { padding: 1rem 0; }

.site-content .sidebar .popular-post h2 { padding-top: 15rem; }

.site-content .sidebar .popular-post .post-info { padding: .4rem .1rem !important; bottom: 0rem !important; left: 1.5rem !important; border-radius: 0rem !important; background: white !important; }

.site-content .sidebar .popular-post .post-title a { font-size: 1.5rem; }

.site-content .sidebar .newsletter { padding: 10rem; }

.site-content .sidebar .newsletter .form-element { padding: .5rem 2rem; }

.site-content .sidebar .newsletter .input-element { width: 80%; height: 1.9rem; padding: .3rem .5rem; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 1rem; }

.site-content .sidebar .newsletter .form-btn { display: inline-block; font-size: 1.3rem; color: #fff; background: black; border-radius: 0; cursor: pointer; padding: .8rem 32%; margin: 1rem 0; }

.site-content .sidebar .popular-tags { padding: 5rem 0; }

.site-content .sidebar .popular-tags .tags .tag { background: linear-gradient(tomato, gold); padding: .3rem 1rem; border-radius: 3rem; margin: 1rem; }

.form-btn:hover { background: linear-gradient(tomato, gold); letter-spacing: .1rem; }

/--------- Sidebar -------/

main .site-title { display: flex; background: url('../Images/OMG.jpg'); background-size: 60%; background-repeat: no-repeat; background-position: right 80%; height: 110vh; display: flex; justify-content: left; }

main .site-title .site-background { padding-top: 10rem; text-align: center; color: var(white); }

main .site-title h3 h1{ display: flex; margin: 2rem; color: black; font-size: 2rem; text-align: center; }

.text-gray { color: grey; font-size: larger; }

p { font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color: black; }

/ BLOG STARTS HERE/

.brief-history { margin-top: 50px; display: grid; grid-template-columns: 850px 600px; column-gap: 50px; justify-content: center; align-items: center; height: 700px; }

about-OMG {

background-color: #f6f1e9; padding: 50px; font-family: 'Inter', Sans Serif; font-size: 25px; text-align: justify; line-height: 70px; color: #4F200D; }

.blog { height: 700px; padding: 80px 0px 0px 100px; display: grid; grid-template-columns: 400px 930px; column-gap: 50px; }

/ OMG PART / .blog-box-1{ margin-top: 100px; width: 300px; height: 300px; text-align: left; }

.blog-omg { font-size: 150px; color: #4F200D; }

.best { display: grid; grid-template-columns: 110px 270px; }

.is { padding-top: 5px; font-size: 40px; justify-content: baseline; text-align: left; }

.best-choice { width: 300px; font-size: 45px; color: #FF8400; text-decoration: underline; }

/ OMG PART /

/ FACEBOOK LINKS PART /

.blog-box-2 { padding: 20px; display: grid; grid-template-columns: 443px 443px; column-gap: 30px; }

.facebook-box-1 { position: relative; width: 100%; overflow: hidden; padding-top: 75%; }

.facebook-box-2 { position: relative; width: 100%; overflow: hidden; padding-top: 75%; }

.facebook-img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 90%; height: 90%; }

.facebook-img:hover { opacity: 0.7; }

.blog-box-3 { height: 1000px; }

/ FACEBOOK LINKS PART /

.blog-grid { margin: 50px; display: grid; grid-template-columns: 320px 320px 320px 320px; gap: 70px; }

.blog-grid img { margin-left: 100px; }

.blog-grid h4 { font-size: 25px; font-family: 'Inter', Sans serif; color: #FF8400; text-align: center; line-height: 40px; letter-spacing: 2px; }

/ BLOG ENDS HERE/

.OMG p { color: white; font-family: 'Inter', sans serif; text-align: center; letter-spacing: 2px; position: absolute; left: 10px; }

.Price-rollback img { height: 350px; width: 350px; border-radius: 20px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.25); position: absolute; left: 150px; }

.Price-rollback .From { font-size: 23px; font-family: 'Inter', sans serif; font-weight: bold; position: absolute; top: 1200px; left: 245px; }

.Price-rollback .Now { color: red; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000; font-size: 30px; font-weight: bold; position: absolute; top: 1240px; left: 222px; }

.Buy-1-take-1 img{ height: 350px; width: 350px; border-radius: 20px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.25); position: absolute; left: 615px; }

.Buy-1-take-1 .Enjoy { font-size: 23px; font-family: 'Inter', sans serif; font-weight: bold; position: absolute; top: 1200px; left: 695px; }

.Buy-1-take-1 .Only { color: red; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000; font-size: 30px; font-weight: bold; position: absolute; top: 1240px; left: 660px; }

.Fruity-yogurt img{ height: 350px; width: 350px; border-radius: 20px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.25); position: absolute; left: 1080px; }

.Fruity-yogurt .Get { font-size: 23px; font-family: 'Inter', sans serif; font-weight: bold; position: absolute; top: 1200px; left: 1180px; }

.Fruity-yogurt .April { color: red; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #000; font-size: 30px; font-weight: bold; position: absolute; top: 1240px; left: 1190px; }

.background img { height: 100%; width: 100%; position: absolute; top: 800px; }

.Coming-soon img { height: 380px; width: 350px; position: absolute; border: 3px solid black; border-radius: 20px; top: 1750px; left: 60px; }

.Coming-soon .Likes { background-color: red; color: white; font-family: 'Inter', sans serif; font-size: 20px; text-align: left; border-radius: 40px; border: 2px solid black; padding: 15px 70px 15px 95px; position: absolute; top: 2200px; left: 95px; transition: padding; }

Heart-icon {

height: 25px; width: 25px; position: absolute; top: 2200px; left: 150px; cursor: pointer; }

Heart-icon:active {

box-shadow: none; }

.Opening-soon img { height: 380px; width: 350px; position: absolute; border: 3px solid black; border-radius: 20px; top: 1750px; left: 433px; }

.Opening-soon .Likes { background-color: rgb(255, 191, 0); color: white; font-family: 'Inter', sans serif; font-size: 20px; text-align: center; border-radius: 40px; border: 2px solid black; padding: 15px 70px 15px 70px; position: absolute; top: 2200px; left: 480px; }

.Customers img { height: 380px; width: 350px; position: absolute; border: 3px solid black; border-radius: 20px; top: 1750px; left: 807px; }

.Customers .Likes { background-color: red; color: white; font-family: 'Inter', sans serif; font-size: 20px; text-align: center; border-radius: 40px; border: 2px solid black; padding: 15px 70px 15px 70px; position: absolute; top: 2200px; left: 853px; }

.New-branch img { height: 380px; width: 350px; position: absolute; border: 3px solid black; border-radius: 20px; top: 1750px; left: 1180px; }

.New-branch .Likes { background-color: rgb(255, 191, 0); color: white; font-family: 'Inter', sans serif; font-size: 20px; text-align: center; border-radius: 40px; border: 2px solid black; padding: 15px 70px 15px 70px; position: absolute; top: 2200px; left: 1230px; }

/ BLOG END/

.omg-menu-box{ width: 40.5%; margin: 1%; padding-top: 0%; float: left; background-color: rgb(250, 235, 100); border-radius: 15px; }

.omg-menu-box1{ width: 31%; margin: 1%; padding: 0%; float: left;

border-radius: 15px; }

.omg-menu-img{ width: 80%; direction:ltr; }

.omg-menu-desc{

text-align: left; background-color: #FFD93D;

}

.omg-price{ font-size: 1.2rem; margin: 2% 0; } .omg-detail{ font-size: 1rem; color: #747d8c; } .container1 { width: 100%; padding-top: 60px; padding-bottom: 100px; } .img1{ border-radius: 1px; height: 100%;

}

.frame { height: 603px; width: 430px; margin: 100px; box-shadow: 0px 2px 7px rgba(0,0,0,0.2); background-color: #FFD93D; }

.frame-long { height: 615px; }

.frame-short { height: 400px; margin-top: 50px; box-shadow: 0px 2px 7px rgba(0,0,0,0.1); }

.nav1 { width: 100%; height: 100px; padding-top: 40px; opacity: 1; transition: all .5s ease; }

.nav-up { transform: translateY(-100px); opacity: 0; }

li { padding-left: 10px; font-size: 18px; display: inline; text-align: left; text-transform: uppercase; padding-right: 10px; color: #ffffff; }

.signin-active a { padding-bottom: 10px; color: #4F200D; font-size: 25px; text-decoration: none; transition: all .25s ease; cursor: pointer; }

.signin-inactive a { padding-bottom: 0; color: rgba(255,255,255,.3); text-decoration: none; border-bottom: none; cursor: pointer; }

.signup-active a { cursor: pointer; color: #ffffff; text-decoration: none; border-bottom: solid 2px #1059FF; padding-bottom: 10px; }

.signup-inactive a { cursor: pointer; color: rgba(255,255,255,.3); text-decoration: none; transition: all .25s ease; }

.form-signin { width: 430px; height: 375px; font-size: 16px; font-weight: 300; padding-left: 37px; padding-right: 37px; padding-top: 55px; transition: opacity .5s ease, transform .5s ease; }

.form-signin-left { transform: translateX(-400px); opacity: .0; }

.form-signup { width: 430px; height: 375px; font-size: 16px; font-weight: 300; padding-left: 37px; padding-right: 37px; padding-top: 23px; position: relative; top: -375px; left: 400px; opacity: 0; transition: all .5s ease; }

.form-styling { width: 100%; height: 35px; padding-left: 15px; border: none; margin-bottom: 20px; background: #F6F1E9; }

.sign-in-btn { color: #4F200D; font-size: 20px; font-family: 'Inter', sans-serif; background-color: #F6F1E9; border: none; width: 100px; padding: 10px; }

.sign-in-btn:hover { cursor: pointer; color: #F6F1E9; background-color: #4F200D; }

.click-here-btn:hover .sign-up-btn { cursor: pointer; text-decoration: underline; }

label { font-weight: 400; text-transform: uppercase; font-size: 20px; color: #4F200D; display: block; }

.form-signup-left { transform: translateX(-399px); opacity: 1; }

.form-signup-down { top: 0px; opacity: 0; }

/---------------- footer starts here -----------------/

.footer { height: 250px; background-color: #FFD93D; display: grid; grid-template-columns: repeat(4, 370px); grid-gap: 30px; align-items: center; justify-content: center; }

.footer h4, h5, a { color: #4F200D; }

footer {

font-size: 25px; font-family: 'Inter', Sans serif; }

.footer-box1 { padding: 50px 0px 0px 50px; }

.footer-box2 img { margin: 10px; } .footer-box2 img:hover { width: 33px; height: 33px; color: #FF8400; }

.footer-contact-us h4 { font-size: 20px; font-weight:900; font-family: 'Inter', Sans serif; }

.footer-contact-us h5 { font-size: 15px; line-height: 25px; }

.foodpanda { width: 120px; height: 120px; }

.copyright h5{ font-size: 18px; font-family: 'Inter', Sans serif; font-weight: 800; }

.copyright a { font-size: 15px; }

.copyright a:hover { color: #FF8400; text-decoration: underline; font-size: 16px; }

/---------------- footer ends here -----------------/

*{ font-family: 'Inter', sans-serif; font-weight: 700; margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; outline: none; border: none; transition: all .2s linear;

}

*::selection{ background-color: var(--yellow); color:var(--black); }

::-webkit-scrollbar{ height: .5rem; width: 10px; }

::-webkit-scrollbar-track{ background-color: #F6F1E9; }

::-webkit-scrollbar-thumb{ background-color: #4F200D; }

html{ font-size: 70%; overflow-x: hidden; scroll-padding-top: 5.5rem; scroll-behavior: smooth; }

.title{ text-align: center; margin-bottom: 2.5rem; font-size: 4rem; color:var(--black); text-transform: uppercase; text-decoration: underline; text-underline-offset: 1rem; }

.heading{ display: flex; align-items: center; justify-content: center; gap:1rem; flex-flow: column; background-color: #FF8400; min-height: 20rem; }

.heading h3{ font-size: 5rem; color:var(--white); text-transform: capitalize; }

.heading p{ font-size: 2.3rem; color:var(--light-color); }

.heading p a{ color:var(--yellow); }

.heading p a:hover{ text-decoration: underline; color:var(--white); }

.delete-btn{ margin-top: 1rem; display: inline-block; font-size: 1rem; padding:1rem 3rem; cursor: pointer; text-transform: capitalize; }

/ buttons in adding to cart only but it also affect other buttons/ .btn { background: none; border: 2px solid #ff8400; color: #FF8400; width: 185px; margin: 10px 5px; font-size: 15px; padding: 10px; }

.btn:hover { background-color: #FF8400; border: 2px solid #FF8400; color: #F6F1E9; cursor: pointer; }

.btn:active { opacity: 0.1; }

.confirm-btn { background-color: #ff8400e3; color: #f6f1e9e4; }

.confirm-btn:active { opacity: 0.5 3s; } / buttons in adding to cart /

.delete-btn{ background-color: var(--red); color:var(--white); }

.disabled{ opacity: .5; user-select: none; pointer-events: none; }

.message{ position: sticky; top:0; max-width: 1200px; margin:0 auto; padding:2rem; display: flex; align-items: center; gap:1rem; justify-content: space-between; background-color: var(--yellow); }

.message span{ font-size: 2rem; color:var(--black); }

.message i{ font-size: 2.5rem; color:var(--red); cursor: pointer; }

.message i:hover{ color:var(--black); }

.empty{ border:var(--border); text-align: center; width: 100%; font-size: 2rem; color:var(--red); }

.flex-btn{ display: flex; gap:1rem; }

.category .box-container{ padding: 30px 150px; display: grid; grid-template-columns: 400px 400px 400px; grid-auto-rows: minmax(300px, auto);

}

Coffee-Series {

grid-area: sidebar; }

.category .box-container .box{ border:var(--border); text-align: center; }

.category .box-container .box img { width: 350px; height: 250px; object-fit: contain; }

Coffee-Series, #Yogurt-Series {

margin-left: 40px; }

Choco-Series, #Milktea-Series, #Mango-Series {

margin: 10px; }

Choco-Series, #Milktea-Series {

width: 350px; height: 250px; } .category .box-container .box h3{ font-size: 18px; color:black; text-transform: uppercase; text-align: center; }

.category .box-container .box:hover{ background-color: beige;

}

.category .box-container .box:hover img{ filter:none; }

.category .box-container .box:hover h3{ color:black; }

/ Products in category starts here /

.category { height: 700px; }

.second ul { display: flex; flex-direction: column; position: fixed; top: 83px; height: 500px; width: 400px; justify-content: center; line-height: 70px; border-right: 3px solid #4F200D; }

.second li{ font-size: 25px; margin: 50px 10px; }

.second li:hover { background-color: #FFD93D; color: blue; }

.productsbev{ justify-items: center; align-items: center; }

.productsbev .box1-container1 { display: grid; grid-template-columns: 400px 400px; justify-items: center; gap: 50px; margin: 50px 170px; }

.productsbev .box1 { border: var(--border); padding: 1.5rem; background-color: beige; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.112), 0 6px 20px 0 rgba(0, 0, 0, 0.1); width: 350px; }

.productsbev .box1:hover { cursor: pointer; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.31), 0 6px 20px 0 rgba(0, 0, 0, 0.20); }

.productsbev .box1 img { width: 300px; max-height: 300px; align-items: center; justify-content: center; }

.productsbev .name { font-size: 1.2rem; font-weight: bold; }

.productsbev .flex { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }

.center-heading { display: grid; grid-template-rows: 300px 300px; }

.sticky-heading { position: fixed; top: 113px; padding: 20px;

}

.sticky-heading h3{ color: #FF8400; font-size: 70px; font-family: 'Inter', sans serif; }

.sticky-heading p { color: #4F200D; font-size: 30px; font-family: 'Inter', sans serif; }

.products { display: grid; grid-template-columns: 700px 700px; align-items: center; padding: 30px; column-gap: 30px; }

.products .box-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; flex-direction: column; }

.products .box { border: var(--border); background-color: #FFD93D; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.20); width: 600px; height: 90px; padding: 0.5rem; display: grid; grid-template-columns: repeat(3, 170px); justify-content: center; align-items: center; column-gap: 20px; }

.products .box img { max-width: 100%; height: auto; width: 165px; }

.products .name { font-size: 15px; }

.products .flex { display: flex; align-items: center; gap: 15px; flex-direction: row; }

.products .flex .minus { color: #4F200D; font-size: 20px; background-color: #F6F1E9; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }

.products .flex .minus:hover { cursor: pointer; }

.products .flex .plus { color: #4F200D; font-size: 20px; background-color: #F6F1E9; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 10px;

}

.products .flex .plus:hover { cursor: pointer; }

.products .price { font-size: 15px; color: #4F200D; }

.more-btn { display: grid; grid-template-columns: 200px 200px 200px; column-gap: 15px; margin: 10px; width: 200px; height: 50px;

}

.continue-btn, .checkout-btn { background-color: #FF8400; color: #F6F1E9; font-size: 15px; font-family: "Inter", sans serif; display: flex; justify-content: center; align-items: center; }

.delete-btn

.products .disabled { pointer-events: none; opacity: 0.5; }

.about .row{ display: flex; align-items: center; flex-wrap: wrap; gap:1.5rem; }

.about .row .image{ flex:1 1 40rem; }

.about .row .image img{ width: 100%; }

.about .row .content{ flex:1 1 40rem; text-align: center; }

.about .row .content h3{ font-size: 3rem; color:var(--black); text-transform: capitalize; margin-bottom: 1rem; }

.about .row .content p{ padding:1rem 0; line-height: 2; font-size: 1.6rem; color:var(--light-color); }

.steps .box-container{ display: grid; grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); gap:1.5rem; align-items: flex-start; }

.steps .box-container .box{ text-align: center; border:var(--border); padding:2rem; }

.steps .box-container .box img{ height: 15rem; width: 100%; object-fit: contain; margin-bottom: 1rem; }

.steps .box-container .box h3{ font-size: 2.3rem; margin:1rem 0; color:var(--black); text-transform: capitalize; }

.steps .box-container .box p{ line-height: 2; font-size: 1.6rem; color:var(--light-color); }

.reviews .slide{ margin-bottom: 4rem; border:var(--border); padding:2rem; text-align: center; }

.reviews .slide img{ height: 10rem; width: 10rem; border-radius: 50%; }

.reviews .slide p{ padding:1.5rem 0; line-height: 2; font-size: 1.6rem; color:var(--light-color); }

.reviews .slide .stars{ display: inline-block; padding:.5rem 1.5rem; border:var(--border); }

.reviews .slide .stars i{ font-size: 1.8rem; color:var(--yellow); }

.reviews .slide h3{ font-size: 2rem; margin-top: 1.5rem; text-transform: capitalize; color:var(--black); }

.contact .row{ display: flex; align-items: center; flex-wrap: wrap; gap:1.5rem; }

.contact .row .image{ flex:1 1 40rem; }

.contact .row .image img{ width: 100%; }

.contact .row form{ border:var(--border); flex:1 1 40rem; padding:2rem; text-align: center; }

.contact .row form h3{ font-size: 2.5rem; color:var(--black); margin-bottom: 1rem; text-transform: capitalize; }

.contact .row form .box{ margin:.7rem 0; font-size: 1.8rem; color:var(--black); border:var(--border); padding:1.4rem; width: 100%; }

.contact .row form textarea{ height: 15rem; resize: none; }

.search-form form{ display: flex; gap:1.3rem; }

.search-form form .box{ width: 100%; border:var(--border); padding:1.4rem; font-size: 1.8rem; color:var(--black); }

.search-form form .fa-search{ width: 6rem; color:black; cursor: pointer; font-size: 2.5rem; }

.search-form form .fa-search:hover{ background-color: yellow; color:var(--black); }

.checkout form{ max-width: 50rem; margin:0 auto; border:var(--border); padding:2rem; }

.checkout form h3{ font-size: 2.5rem; text-transform: capitalize; padding: 2rem 0; color:var(--black); }

.checkout form .cart-items{ background-color:#FFD93D; padding:2rem; padding-top: 0; }

.checkout form .cart-items h3{ color:var(--white); }

.checkout form .cart-items p{ display: flex; align-items: center; gap:1.5rem; justify-content: space-between; margin:1rem 0; line-height: 1.5; font-size: 2rem; flex-wrap: wrap;

}

.checkout form .cart-items p .name{ color:var(--light-color); }

.checkout form .cart-items p .price{ color:var(--yellow); }

.checkout form .cart-items .grand-total{ background-color: var(--white); padding:.5rem 1.5rem; }

.checkout form .cart-items .grand-total .price{ color:var(--red); }

.checkout form .user-info p{ font-size: 2rem; line-height: 1.5; padding:1rem 0; }

.checkout form .user-info p i{ color:var(--light-color); margin-right: 1rem; }

.checkout form .user-info p span{ color:var(--black); }

.checkout form .user-info .box{ width: 100%; border:var(--border); padding:1.4rem; margin-top: 2rem; margin-bottom: 1rem; font-size: 1.8rem; }

.orders .box-container{ max-width: 50rem; margin:0 auto; border:var(--border); padding:2rem; background-color: beige; }

.orders .box-container .box{ padding:1rem 2rem; border:var(--border); flex:1 1 40rem; }

.orders .box-container .box p{ line-height: 1.5; padding:1rem 0; font-size: 2rem; color:var(--light-color); }

.orders .box-container .box p span{ color:var(--black); }

.form-container form{ border:var(--border); margin:0 auto; max-width: 50rem; padding:2rem; text-align: center; background-color: beige; }

.form-container form h3{ font-size: 2.5rem; color:var(--black); text-transform: uppercase; margin-bottom: 1rem; }

.form-container form .box{ margin:.7rem 0; width: 100%; border:var(--border); padding:0.4rem; font-size: 1.8rem; color:var(--black); }

.form-container form p{ margin-top: 1.5rem; font-size: 2rem; color:var(--light-color); }

.form-container form p a{ color:var(--black); }

.form-container form p a:hover{ text-decoration: underline; }

.user-details .user{ max-width: 50rem; margin:0 auto; border:var(--border); padding:2rem; background-color: beige; }

.user-details .user img{ width: 100%; height: 16rem; object-fit: contain; margin-bottom: 1rem; }

.user-details .user p{ padding:1rem 0; line-height: 1.5; font-size: 2rem; }

.user-details .user p span{ color:var(--black); }

.user-details .user p i{ margin-right: 1rem; color:var(--light-color); }

.user-details .user .address{ margin-top: 1rem; }

.quick-view form{ max-width: 40rem; padding:2rem; border:var(--border); position: relative; margin:0 auto; }

.quick-view form img{ height: 25rem; width: 100%; object-fit: contain; margin-bottom: 1rem; }

.quick-view form .cat{ font-size: 1.8rem; color:var(--light-color); }

.quick-view form .cat:hover{ color:var(--black); text-decoration: underline; }

.quick-view form .name{ font-size: 2rem; margin:.5rem 0; }

.quick-view form .flex{ display: flex; justify-content: space-between; align-items: center; gap:1.5rem; margin:1rem 0; }

.quick-view form .flex .price{ font-size: 2.5rem; color:var(--black); }

.quick-view form .flex .price span{ font-size: 2rem; color:var(--light-color); }

.quick-view form .flex .qty{ border:var(--border); padding:1rem; font-size: 1.8rem; color:var(--black); }

.quick-view form .cart-btn{ width: 100%; padding:1rem 3rem; text-align: center; border:var(--border); font-size: 2rem; color:var(--black); cursor: pointer; text-transform: capitalize; background: none; margin-top: 1rem; }

.quick-view form .cart-btn:hover{ background-color: var(--black); color:var(--white); }

.section .line .video { display: flex; position: absolute; } h3 { text-align: center; font-size: 20px; }

.credit{ padding:3rem 2rem; text-align: center; background-color: var(--black); color:var(--white); font-size: 2rem; text-transform: capitalize; / padding-bottom: 10rem; / }

.credit span{ color:var(--yellow); }

.loader{ position: fixed; top:0; left:0; right:0; bottom: 0; z-index: 10000; display: flex; background-color: white; align-items: center; justify-content: center; }

.loader img{ width: 35rem; }

.button12{
position: relative; background: yellow; border-radius: 25px; font-style: normal; font-weight: 800; font-size: 17px; line-height: 58px; text-align: center; color: black; border: 1px solid #000000; padding: 1rem 3rem; left: 221px; }

.button12:hover{ background-color:#4F200D; color:white; transition:0.2s; }

.button13{ position: relative; background: yellow; border-radius: 25px; font-style: normal; font-weight: 800; font-size: 17px; line-height: 58px; text-align: center; color:black; border: 1px solid #000000; padding: 1rem 3rem; left: 404px; }

.button13:hover{ background-color:#4F200D; color:white; transition:0.2s; }

/location starts here /

.containerloc{ margin: 0 5vw; font-size: 1.5rem; margin-left:25%; }

.containerloc2{ margin: 0 5vw; font-size: 1.5rem; margin-left:25%; padding:1px 16px; } .map{ width:600px; height:200px; border:0; } /reciept/ .receipt { max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; text-align: center; } .receipt h2 { margin-bottom: 10px; } .receipt p { margin: 5px 0; } .receipt .total { font-size: 1.2rem; font-weight: bold; }

.addons{

font-size: small;
color: #000;

}

/ media queries /

@media (max-width:991px) {

html{ font-size: 55%; } .header .flex .profile .account{ display: none; }

}

@media (max-width:850px){ .loader img { width: 20rem; }

.flex{

  justify-content:center;
  align-items:center;
  width: 100%;
  margin-left: 0px!important;
  display: flex!important;
  flex-direction: column!important;

} .babyruth{ margin-left: 50px!important; width: 40vh!important; margin-top: 100px; } .event { width: 45vh; height: 450px; top:20px; left: -2px; } .series{ width: 45vh!important; height: 237px; top:38px; left: 0px; }

.contact-child.child1{ width: 199px; } .child1 p{ padding-left: 19px; } .child1 p span{ font-size: 12px; } .franchise .container .content1 { height: 261px; }

menu-btn{

  display: inline-block;

}

.header .flex .navbar{ position: absolute; top:99%; left: 0; right: 0; border-top: var(--border); border-bottom: var(--border); background-color:var(--white); transition: .2s linear; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }

.header .flex .navbar a{ display: flex; margin:2rem; }

.header .flex .navbar.active{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .container.contact-parent.contact-child.child1{ display: none; }

a.button11{ display:none; } a.button12{ display:none; } a.button13{ display:none; } .event { left:21px; top:20px;} .series{ left: 20px; top:30px; width: 335px; }

.tcpp{ padding:20px;} .video video { height: 300px; width: 400px; padding: 30px 4px 20px; margin: 60px 54px 50px; }

.products .box { width:479px; height:137px; } .fa-solid fa-trash-can fa-xl{ margin-left:20px; } .addons{ font-size:9px;

              }

              .products .flex{
              flex-direction: row-reverse;
              width:26px;
              }

} @media (max-width:450px) { .loader img { width: 20rem; }

html{ font-size: 50%; }

.title{ font-size: 3rem; }

.hero .slide .content h3{ font-size: 5rem; }

.products .box-container{ grid-template-columns: 1fr; }

.heading h3{ font-size: 3.5rem; }

.flex-btn{ flex-flow: column; gap:0; }
.contact-child.child1{ display: none; } .form-signin { width: fit-content; padding-left:31px; } a.button11{ display:none; } a.button12{ display:none; } a.button13{ display:none; } .event { width: 40vh; height: 350px; top:20px; left: 6px;

right: 0px!important;

} .series{ width: 40vh!important; height: 237px; top:48px!important; left:8px; right: 0px;

} .babyruth{ width: 40vh!important; height: 309px; / margin-left:20px ; / left: -10px; right: 0px; / top right bottom left /

}

.second ul h1 { font-size: larger; }

.containerloc2 h3{ font-size: small; } .containerloc h3{ font-size: small; } .map{ width:300px; height:200px;

}

.frame { width: 269px; height: 620px;}

.productsbev .box1-container1{ width: 181px; margin-left: 84px;}

.second ul h1{ font-size: medium; }

.products .box { width:348px; height:127px; }

  .fa-solid fa-trash-can fa-xl{
  margin-left:3px;
  }

  .products .box img {
      height: 50px;
      width: 107px;
      margin-top: 20px;
  }
  .products .flex{
  flex-direction: row-reverse;
  width:20px;
  }

  .addons{
  font-size:8px;

  }

}

Nuwebe commented 8 months ago

HOME HTML

<?php header("Access-Control-Allow-Origin: *"); ?> <?php

include 'components/connect.php'; error_reporting(0); session_start();

if(isset($_SESSION['user_id'])){ $user_id = $_SESSION['user_id']; }else{ $user_id = ''; };

include 'components/add_cart.php'; if(isset($_POST['send'])){

$subject = $_POST['subject']; $subject = filter_var($subject, FILTER_SANITIZE_STRING); $name = $_POST['name']; $name = filter_var($name, FILTER_SANITIZE_STRING); $email = $_POST['email']; $email = filter_var($email, FILTER_SANITIZE_STRING); $number = $_POST['number']; $number = filter_var($number, FILTER_SANITIZE_STRING); $msg = $_POST['msg']; $msg = filter_var($msg, FILTER_SANITIZE_STRING);

$select_message = $conn->prepare("SELECT * FROM messages WHERE subject = ? AND name = ? AND email = ? AND number = ? AND message = ?"); $select_message->execute([$subject, $name, $email, $number, $msg]);

if($select_message->rowCount() > 0){ $message[] = 'already sent message!'; }else{

  $insert_message = $conn->prepare("INSERT INTO `messages`(user_id, subject, name, email, number, message) VALUES(?,?,?,?,?,?)");
  $insert_message->execute([$user_id,$subject, $name, $email, $number, $msg]);

  $message[] = 'sent message successfully!';

}

}
?>

<!DOCTYPE html>

OMG Philippines

Creamy goodness in a cup. Taste that would definitely make you go OMG!

NOW IN

FIVE

BRANCHES!

Yogurt Series

Creamy Fruity Melon

ORDER HERE
Choco Series

Choco Kisses

ORDER HERE
Choco Series

Twix Choco

ORDER HERE
Nuwebe commented 8 months ago

ADD TO CART HTML

<?php include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id'])){ $user_id = $_SESSION['user_id']; }else{ $user_id = ''; header('location:index.php'); };

if(isset($_POST['delete'])){ $cart_id = $_POST['cart_id']; // Delete associated cart add-ons first $delete_cart_addons = $conn->prepare("DELETE FROM cart_addons WHERE cart_id = ?"); $delete_cart_addons->execute([$cart_id]);

// Now delete the cart item $delete_cart_item = $conn->prepare("DELETE FROM cart WHERE id = ?"); $delete_cart_item->execute([$cart_id]);

$message[] = 'Cart item deleted!'; }

if(isset($_POST['delete_all'])){ // Delete cart add-ons first $delete_cart_addons = $conn->prepare("DELETE ca FROM cart_addons ca INNER JOIN cart c ON ca.cart_id = c.id WHERE c.user_id = ?"); $delete_cart_addons->execute([$user_id]);

// Now delete all cart items $delete_cart_items = $conn->prepare("DELETE FROM cart WHERE user_id = ?"); $delete_cart_items->execute([$user_id]); $message[] = 'deleted all from cart!'; }

if(isset($_POST['update_qty'])){ $cart_id = $_POST['cart_id']; $qty = $_POST['qty']; $qty = filter_var($qty, FILTER_SANITIZE_STRING); $update_qty = $conn->prepare("UPDATE cart SET quantity = ? WHERE id = ?"); $update_qty->execute([$qty, $cart_id]); $message[] = 'cart quantity updated'; }

$grand_total = 0; ?>

<!DOCTYPE html>

OMGPH CART

Your Cart

Cart Total:

prepare("SELECT c.*, p.priceR FROM `cart` c INNER JOIN `products` p ON c.pid = p.id WHERE c.user_id = ?"); $select_cart->execute([$user_id]); if ($select_cart->rowCount() > 0) { while ($fetch_cart = $select_cart->fetch(PDO::FETCH_ASSOC)) { $size = $fetch_cart['size']; $select_product_price = $conn->prepare("SELECT price, priceR FROM products WHERE id = ?"); $select_product_price->execute([$fetch_cart['pid']]); $product_price = $select_product_price->fetch(PDO::FETCH_ASSOC); $price = $size === 'large' ? $product_price['priceR'] : $product_price['price']; $sub_total = $price * $fetch_cart['quantity']; ?> prepare("SELECT ca.addon_id, a.name AS addon_name, a.price AS addon_price FROM `cart_addons` ca INNER JOIN `addons` a ON ca.addon_id = a.id WHERE ca.cart_id = ?"); $select_addons->execute([$fetch_cart['id']]); if ($select_addons->rowCount() > 0) { echo '
'; echo '

Selected Add-ons:

'; while ($addon = $select_addons->fetch(PDO::FETCH_ASSOC)) { echo '

' . $addon['addon_name'] . ' (+₱' . $addon['addon_price'] . ')

'; $sub_total += $addon['addon_price']; // Calculate total add-ons price } echo '
'; } ?> Your cart is empty

'; } ?>
prepare("SELECT c.*, p.priceR FROM `cart` c INNER JOIN `products` p ON c.pid = p.id WHERE c.user_id = ?"); $select_cart->execute([$user_id]); if ($select_cart->rowCount() > 0) { while ($fetch_cart = $select_cart->fetch(PDO::FETCH_ASSOC)) { $size = $fetch_cart['size']; $select_product_price = $conn->prepare("SELECT price, priceR FROM products WHERE id = ?"); $select_product_price->execute([$fetch_cart['pid']]); $product_price = $select_product_price->fetch(PDO::FETCH_ASSOC); $price = $size === 'large' ? $product_price['priceR'] : $product_price['price']; $sub_total = $price * $fetch_cart['quantity']; ?>
- 1 +
prepare("SELECT ca.addon_id, a.name AS addon_name, a.price AS addon_price FROM `cart_addons` ca INNER JOIN `addons` a ON ca.addon_id = a.id WHERE ca.cart_id = ?"); $select_addons->execute([$fetch_cart['id']]); if ($select_addons->rowCount() > 0) { echo '
'; echo '

Selected Add-ons:

'; while ($addon = $select_addons->fetch(PDO::FETCH_ASSOC)) { echo '

' . $addon['addon_name'] . ' (+₱' . $addon['addon_price'] . ')

'; $sub_total += $addon['addon_price']; // Calculate total add-ons price } echo '
'; } ?>
Your cart is empty

'; } ?>
Nuwebe commented 8 months ago

BLOG HTML

<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id'])){ $user_id = $_SESSION['user_id']; }else{ $user_id = ''; }; ?>

<!DOCTYPE html>

OMG Philippines | Blog
During the pandemic, as online shopping soared, OMG emerged a year later, transforming quarantine cravings into a nationwide sensation. Starting from Alaminos, Laguna, they've expanded to five branches, captivating a thirst-quenching niche in the tropical Philippines. Their journey, marked by trial and error, now stands as a testament to entrepreneurial resilience and taste bud triumphs.
OMG

is the

best choice!

growing-image

Fastest growing and trending franchise

legit-image

Legit and promoted but the VIPs

motorbike-image

Food panda
integrated

halal-image

Halal
Certified

followers-image

With 1.3 million followers in the food indistry

Award-image

Franchise are multi-awarded in the field of customer service and training

oustanding-image

The Outstanding Filipino 2019 Recognized

thumbs-up-image

Products are very affordable yet the ingredients are of the highest quality

Nuwebe commented 8 months ago

LOCATION HTML

<?php

include 'components/connect.php';

session_start();

if (isset($_SESSION['user_id'])) { $user_id = $_SESSION['user_id']; } else { $user_id = ''; }; ?> <!DOCTYPE html>

OMG Philippines | Location
Address: JP Rizal St. Brgy I- Poblacion, Alaminos, Laguna (Plaza, Near Munisipyo of Alaminos)
Address: Kalye Ekis Batong Malake Los Banos,Laguna
Address: Rizal Avenue Brgy.VII-D San Pablo,Laguna
Address: Purok 6 Bulanao Tabuk City, Kalinga
Address: 8 Governor A. Carpio Ave, Brgy San Pedro. Sto. Tomas City, Batangas
Nuwebe commented 8 months ago

`<?php

include 'components/connect.php';

session_start();

if(isset($_SESSION['user_id'])){ $user_id = $_SESSION['user_id']; }else{ $user_id = ''; }; ?>

<!DOCTYPE html>

OMG Philippines | Blog
During the pandemic, as online shopping soared, OMG emerged a year later, transforming quarantine cravings into a nationwide sensation. Starting from Alaminos, Laguna, they've expanded to five branches, captivating a thirst-quenching niche in the tropical Philippines. Their journey, marked by trial and error, now stands as a testament to entrepreneurial resilience and taste bud triumphs.
OMG

is the

best choice!

growing-image

Fastest growing and trending franchise

legit-image

Legit and promoted but the VIPs

motorbike-image

Food panda
integrated

halal-image

Halal
Certified

followers-image

With 1.3 million followers in the food indistry

Award-image

Franchise are multi-awarded in the field of customer service and training

oustanding-image

The Outstanding Filipino 2019 Recognized

thumbs-up-image

Products are very affordable yet the ingredients are of the highest quality

`