Open Nuwebe opened 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>
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>
Cart Total: ₱= $grand_total; ?>
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 'BLOG HTML
<?php
include 'components/connect.php';
session_start();
if(isset($_SESSION['user_id'])){ $user_id = $_SESSION['user_id']; }else{ $user_id = ''; }; ?>
<!DOCTYPE html>
LOCATION HTML
<?php
include 'components/connect.php';
session_start();
if (isset($_SESSION['user_id'])) { $user_id = $_SESSION['user_id']; } else { $user_id = ''; }; ?> <!DOCTYPE html>
`<?php
include 'components/connect.php';
session_start();
if(isset($_SESSION['user_id'])){ $user_id = $_SESSION['user_id']; }else{ $user_id = ''; }; ?>
<!DOCTYPE html>
`
/ 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{
}
/ 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{
} .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{
}
.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;
} @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; }
}