web_design/bakery_website/public/gallery.html
2024-07-12 22:02:32 -05:00

123 lines
No EOL
6.1 KiB
HTML
Executable file

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home | Sweet Bake - European style Bakery</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="images/home-logo.png" type="image/x-icon">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
<header>
<a href="index.html" class="brand" id="brand-1">Sweet Bake</a>
<div class="menu-btn"></div>
<div class="nav">
<div class="nav-items" id="nav-items-1">
<a href="menu.html">Order online</a>
<a href="gallery.html">Gallery</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>
</div>
</header>
<!------------ landing page ------------>
<div class="bakery">
<div class="wrapper">
<i id="left" class="fa-solid fa-angle-left"></i>
<div class="carousel">
<img src="images/gallery-1.jpg" alt="img" draggable="false">
<img src="images/gallery-2.jpg" alt="img" draggable="false">
<img src="images/gallery-3.jpg" alt="img" draggable="false">
<img src="images/gallery-4.jpg" alt="img" draggable="false">
<img src="images/gallery-5.jpg" alt="img" draggable="false">
</div>
<i id="right" class="fa-solid fa-angle-right"></i>
</div>
</div>
<div class="hour-bakery">
<div class="hour-baker-detail">
<h2>Business hours</h2>
<p>Mon - Sat 10:00am - 4:00pm</p>
<p>Sun 11:00am - 4:00pm</p>
</div>
</div>
<div class="line"></div>
<div class="wrapper-gallery">
<div class="our-gal">
<h2>Gallery</h2>
</div>
<nav>
<div class="gallery-items">
<span class="item-gallery active" data-name="all">All</span>
<span class="item-gallery" data-name="shop">Shop</span>
<span class="item-gallery" data-name="cake">Cake</span>
<span class="item-gallery" data-name="pastry">Pastry</span>
<span class="item-gallery" data-name="coffee">Coffee</span>
</div>
</nav>
<div class="gallery">
<div class="image-gal" data-name="shop"><span><img src="images/gal-1.jpg" alt=""></span></div>
<div class="image-gal" data-name="shop"><span><img src="images/gal-6.jpg" alt=""></span></div>
<div class="image-gal" data-name="shop"><span><img src="images/gal-7.jpg" alt=""></span></div>
<div class="image-gal" data-name="shop"><span><img src="images/gal-2.jpg" alt=""></span></div>
<div class="image-gal" data-name="shop"><span><img src="images/gal-3.jpg" alt=""></span></div>
<div class="image-gal" data-name="shop"><span><img src="images/gal-4.jpg" alt=""></span></div>
<div class="image-gal" data-name="coffee"><span><img src="images/gal-5.jpg" alt=""></span></div>
<div class="image-gal" data-name="coffee"><span><img src="images/gal-11.jpg" alt=""></span></div>
<div class="image-gal" data-name="coffee"><span><img src="images/gal-12.jpg" alt=""></span></div>
<div class="image-gal" data-name="coffee"><span><img src="images/gal-13.jpg" alt=""></span></div>
<div class="image-gal" data-name="coffee"><span><img src="images/gal-8.jpg" alt=""></span></div>
<div class="image-gal" data-name="coffee"><span><img src="images/gal-9.jpg" alt=""></span></div>
<div class="image-gal" data-name="coffee"><span><img src="images/gal-10.jpg" alt=""></span></div>
<div class="image-gal" data-name="coffee"><span><img src="images/gal-14.jpg" alt=""></span></div>
<div class="image-gal" data-name="pastry"><span><img src="images/gal-15.jpg" alt=""></span></div>
<div class="image-gal" data-name="pastry"><span><img src="images/gal-16.jpg" alt=""></span></div>
<div class="image-gal" data-name="pastry"><span><img src="images/gal-17.jpg" alt=""></span></div>
<div class="image-gal" data-name="pastry"><span><img src="images/gal-18.jpg" alt=""></span></div>
<div class="image-gal" data-name="pastry"><span><img src="images/gal-19.jpg" alt=""></span></div>
<div class="image-gal" data-name="pastry"><span><img src="images/gal-20.jpg" alt=""></span></div>
<div class="image-gal" data-name="cake"><span><img src="images/gal-21.jpg" alt=""></span></div>
<div class="image-gal" data-name="cake"><span><img src="images/gal-22.jpg" alt=""></span></div>
<div class="image-gal" data-name="cake"><span><img src="images/gal-23.jpg" alt=""></span></div>
<div class="image-gal" data-name="cake"><span><img src="images/gal-24.jpg" alt=""></span></div>
</div>
</div>
<div class="preview-box">
<div class="details-gal">
<span class="title-gal">Image Category: <p></p></span>
<span class="icon-gal fas fa-times"></span>
</div>
<div class="image-box-gal"><img src="" alt=""></div>
</div>
<div class="shadow"></div>
</div>
<div class="content-4">
<h3>Sweet Bake</h3>
<div class="con-4-social">
<a href="#"><i class='bx bxl-facebook'></i></a>
<a href="#"><i class='bx bxl-instagram' ></i></a>
<a href="#"><i class='bx bx-mail-send'></i></a>
<a href="#"><i class='bx bx-phone' ></i></a>
</div>
<div class="con-text-4">
<a href="#">Policy</a>
<a href="#">FAQ</a>
</div>
</div>
<!------------ footer ------------>
<footer>
<p>&copy; 2023 All Right Reserved</p>
</footer>
<script src="main.js"></script>
</body>
</html>