initial commit
This commit is contained in:
parent
de35800228
commit
dd39f6fa38
18 changed files with 2919 additions and 0 deletions
1
wedding_website/.gitignore
vendored
Normal file
1
wedding_website/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
images/*
|
||||||
128
wedding_website/about.html
Executable file
128
wedding_website/about.html
Executable file
|
|
@ -0,0 +1,128 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-title">
|
||||||
|
<h3>About Us</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
|
||||||
|
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
|
||||||
|
culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
<br><p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form
|
||||||
|
of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
|
||||||
|
It is also used to temporarily replace text in a process called greeking, which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design. </p>
|
||||||
|
<br><p>We are so excited to connect with you and hear more about you!</p>
|
||||||
|
</div>
|
||||||
|
<div class="about-us">
|
||||||
|
<div class="about-detail">
|
||||||
|
<img src="images/about-1.jpg" alt="">
|
||||||
|
<h3>Founder & senior consultant</h3>
|
||||||
|
<p>Jane Doe</p>
|
||||||
|
</div>
|
||||||
|
<div class="about-detail">
|
||||||
|
<img src="images/about-2.jpg" alt="">
|
||||||
|
<h3>Event consultant</h3>
|
||||||
|
<p>Jane Doe</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
146
wedding_website/contact.html
Executable file
146
wedding_website/contact.html
Executable file
|
|
@ -0,0 +1,146 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="contact-form">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-title">
|
||||||
|
<h3>We are so excited to meet you!</h3>
|
||||||
|
</div>
|
||||||
|
<div class="contact-main">
|
||||||
|
<div class="contact-box">
|
||||||
|
<div class="left-box"></div>
|
||||||
|
<div class="right-box">
|
||||||
|
<h3>Connect with us</h3>
|
||||||
|
<div class="content-title">
|
||||||
|
<p>Your First Name</p>
|
||||||
|
<input type="text" class="field">
|
||||||
|
</div>
|
||||||
|
<div class="content-title">
|
||||||
|
<p>Your Last Name</p>
|
||||||
|
<input type="text" class="field">
|
||||||
|
</div>
|
||||||
|
<div class="content-title">
|
||||||
|
<p>Your E-Mail Address </p>
|
||||||
|
<input type="text" class="field">
|
||||||
|
</div>
|
||||||
|
<div class="content-title">
|
||||||
|
<p>Your Telephone Number</p>
|
||||||
|
<input type="text" class="field">
|
||||||
|
</div>
|
||||||
|
<div class="content-title">
|
||||||
|
<p>What is your anticipated guest count?</p>
|
||||||
|
<input type="text" class="field">
|
||||||
|
</div>
|
||||||
|
<div class="content-title">
|
||||||
|
<p>Do you have a location, venue, or time of year in mind?</p>
|
||||||
|
<input type="text" class="field">
|
||||||
|
</div>
|
||||||
|
<div class="content-title">
|
||||||
|
<p>We would love to learn more about you and your celebration, please share any details you would like!</p>
|
||||||
|
<textarea name="" id="" cols="30" rows="5" class="field"></textarea>
|
||||||
|
<span>By submitting this form, you agree to be contacted regarding your request, and you are confirming you agree to our Terms of Use and Privacy Policy.</span>
|
||||||
|
</div>
|
||||||
|
<button class="contact-btn">Send</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
178
wedding_website/index.html
Executable file
178
wedding_website/index.html
Executable file
|
|
@ -0,0 +1,178 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="swiper-bundle.min.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="home-slider">
|
||||||
|
<div class="load"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="home-content">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content">
|
||||||
|
<p>We are known for being really good at <span>planning and creating amazing events.</span> We strive to create warm, detail-oriented, and timeless wedding celebrations that reflect the <span>unique desires</span>
|
||||||
|
and preferences of our clients.</p><br>
|
||||||
|
<p>Consider us as <span>passionate supporters</span> of your wedding vision (and coincidentally, the most skilled professionals) who will remain by your side throughout the entire process.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="line">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content-line"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="home-content-2">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content-detail">
|
||||||
|
<p>View Our</p>
|
||||||
|
<a href="portfolio.html"><span>Portfolio</span></a>
|
||||||
|
</div>
|
||||||
|
<div class="content-detail">
|
||||||
|
<p>Visit us on</p>
|
||||||
|
<a href=""><span>Instagram</span></a>
|
||||||
|
</div>
|
||||||
|
<div class="content-detail">
|
||||||
|
<p>Reach out to</p>
|
||||||
|
<a href=""><span>Inquire</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="home-content-3">
|
||||||
|
<div class="container">
|
||||||
|
<div class="content-note-title">
|
||||||
|
<h3>Love notes</h3>
|
||||||
|
<h4>From our lovely clients</h4>
|
||||||
|
<div class="content-3-detail mySwiper">
|
||||||
|
<div class="content-note swiper-wrapper">
|
||||||
|
<div class="slide swiper-slide">
|
||||||
|
<img src="images/note-1.jpg" alt="" class="image">
|
||||||
|
<p>"They were exactly what we were looking for when we started to plan our wedding. They were super patient with all our questions during the planning process
|
||||||
|
and during the days just prior to our wedding. We honestly couldn't have asked for a better team of professionals to make our day the most amazing day ever."</p>
|
||||||
|
<div class="note-name">
|
||||||
|
<span class="name">John & Jane</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slide swiper-slide">
|
||||||
|
<img src="images/note-2.jpg" alt="" class="image">
|
||||||
|
<p>"You guys are all amazing, kind, professional, attentive, on point answering back to emails, calls, changes and concerns."</p>
|
||||||
|
<div class="note-name">
|
||||||
|
<span class="name">John & Jane</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slide swiper-slide">
|
||||||
|
<img src="images/note-3.jpg" alt="" class="image">
|
||||||
|
<p>"If you're looking for a wedding planner, here you have a team of them! We thought that we could take care of everything all by ourselves but we were wrong! Thank god we met the best staff. They found the perfect place for our ceremony and our favorite musical band."</p>
|
||||||
|
<div class="note-name">
|
||||||
|
<span class="name">John & Jane</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-button-next swiper-btn"></div>
|
||||||
|
<div class="swiper-button-prev swiper-btn"></div>
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="swiper-bundle.min.js"></script>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
wedding_website/main.js
Executable file
34
wedding_website/main.js
Executable file
|
|
@ -0,0 +1,34 @@
|
||||||
|
//navbar
|
||||||
|
const openBtn = document.querySelectorAll('[trigger-button]');
|
||||||
|
const closeBtn = document.querySelectorAll('[close-button]');
|
||||||
|
const overlay = document.querySelector('[data-overlay]');
|
||||||
|
|
||||||
|
for (let x = 0; x < openBtn.length; x++){
|
||||||
|
let currentID = openBtn[x].dataset.target,
|
||||||
|
targetEl =document.querySelector(`#${currentID}`)
|
||||||
|
|
||||||
|
const openData =function(){
|
||||||
|
targetEl.classList.remove('active');
|
||||||
|
overlay.classList.remove('active');
|
||||||
|
};
|
||||||
|
openBtn[x].addEventListener('click', function(){
|
||||||
|
targetEl.classList.add('active');
|
||||||
|
overlay.classList.add('active');
|
||||||
|
});
|
||||||
|
targetEl.querySelector('[close-button]').addEventListener('click',openData);
|
||||||
|
overlay.addEventListener('click', openData);
|
||||||
|
}
|
||||||
|
//button
|
||||||
|
var swiper = new Swiper(".mySwiper", {
|
||||||
|
slidesPerView: 1,
|
||||||
|
grabCursor: true,
|
||||||
|
loop: true,
|
||||||
|
pagination: {
|
||||||
|
el: ".swiper-pagination",
|
||||||
|
clickable: true,
|
||||||
|
},
|
||||||
|
navigation: {
|
||||||
|
nextEl: ".swiper-button-next",
|
||||||
|
prevEl: ".swiper-button-prev",
|
||||||
|
},
|
||||||
|
});
|
||||||
164
wedding_website/note.html
Executable file
164
wedding_website/note.html
Executable file
|
|
@ -0,0 +1,164 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="love-note">
|
||||||
|
<div class="notes"></div>
|
||||||
|
</div>
|
||||||
|
<div class="note-title">
|
||||||
|
<div class="container">
|
||||||
|
<div class="note-text">
|
||||||
|
<h2>Love Notes</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="note">
|
||||||
|
<div class="container">
|
||||||
|
<div class="note-detail">
|
||||||
|
<div class="note-img">
|
||||||
|
<img src="images/port-2-3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="note-text">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
<br><p>-John & Jane</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="note-detail-1">
|
||||||
|
<div class="note-text-1">
|
||||||
|
<div class="note-img-2">
|
||||||
|
<img src="images/port-3-5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
<br><p>-John & Jane</p>
|
||||||
|
</div>
|
||||||
|
<div class="note-img-1">
|
||||||
|
<img src="images/port-3-5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="note-detail">
|
||||||
|
<div class="note-img">
|
||||||
|
<img src="images/port-1-2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="note-text">
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||||
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||||
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||||
|
<br><p>-John & Jane</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="line-note"></div>
|
||||||
|
<div class="line-note-2"></div>
|
||||||
|
|
||||||
|
<div class="visit-us">
|
||||||
|
<div class="container">
|
||||||
|
<div class="visit-detail">
|
||||||
|
<p>Visit us on</p>
|
||||||
|
<a href=""><span>Instagram</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
197
wedding_website/portfolio.html
Executable file
197
wedding_website/portfolio.html
Executable file
|
|
@ -0,0 +1,197 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="portfolio">
|
||||||
|
<div class="container">
|
||||||
|
<div class="img-port">
|
||||||
|
<div class="image-item">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/port-1.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="overlay-port">
|
||||||
|
<div class="content">
|
||||||
|
<a href="portfolio_1.html"><p>Summer on <br>sandy coastline</p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-item">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/port-2.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="overlay-port">
|
||||||
|
<div class="content">
|
||||||
|
<a href="portfolio_2.html"><p>Summer on the beach</p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-item">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/port-3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="overlay-port">
|
||||||
|
<div class="content">
|
||||||
|
<a href="portfolio_3.html"><p>Spring in somewhere</p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-item">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/port-4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="overlay-port">
|
||||||
|
<div class="content">
|
||||||
|
<a href="portfolio_4.html"><p>Spring in a garden </p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-item">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/port-5.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="overlay-port">
|
||||||
|
<div class="content">
|
||||||
|
<a href="portfolio_5.html"><p>Winter in the city</p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-item">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/port-6.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="overlay-port">
|
||||||
|
<div class="content">
|
||||||
|
<a href="portfolio_1.html"><p>Winter in somewhere</p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-item">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/port-7.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="overlay-port">
|
||||||
|
<div class="content">
|
||||||
|
<a href="portfolio_2.html"><p>Autumn in a garden </p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-item">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/port-8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="overlay-port">
|
||||||
|
<div class="content">
|
||||||
|
<a href="portfolio_3.html"><p>Summer at AZ hotel</p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="image-item">
|
||||||
|
<div class="image">
|
||||||
|
<img src="images/port-9.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="overlay-port">
|
||||||
|
<div class="content">
|
||||||
|
<a href="portfolio_4.html"><p>Summer at ZA hotel</p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
126
wedding_website/portfolio_1.html
Executable file
126
wedding_website/portfolio_1.html
Executable file
|
|
@ -0,0 +1,126 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="portfolio-1">
|
||||||
|
<div class="container">
|
||||||
|
<div class="img-port-1">
|
||||||
|
<img src="images/port-1-1.jpg" alt="">
|
||||||
|
<img src="images/port-1-2.jpg" alt="">
|
||||||
|
<img src="images/port-1-3.jpg" alt="">
|
||||||
|
<img src="images/port-1-4.jpg" alt="">
|
||||||
|
<img src="images/port-1-5.jpg" alt="">
|
||||||
|
<img src="images/port-1-6.jpg" alt="">
|
||||||
|
<img src="images/port-1-7.jpg" alt="">
|
||||||
|
<img src="images/port-1-8.jpg" alt="">
|
||||||
|
<img src="images/port-1.jpg" alt="">
|
||||||
|
<img src="images/port-1-9.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-1-credit">
|
||||||
|
<div class="container">
|
||||||
|
<div class="credit">
|
||||||
|
<p>credit images •</p>
|
||||||
|
<p>Pexels •</p>
|
||||||
|
<p>Pngwing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
125
wedding_website/portfolio_2.html
Executable file
125
wedding_website/portfolio_2.html
Executable file
|
|
@ -0,0 +1,125 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="portfolio-1">
|
||||||
|
<div class="container">
|
||||||
|
<div class="img-port-1">
|
||||||
|
<img src="images/port-2.jpg" alt="">
|
||||||
|
<img src="images/port-2-1.jpg" alt="">
|
||||||
|
<img src="images/port-2-2.jpg" alt="">
|
||||||
|
<img src="images/port-2-3.jpg" alt="">
|
||||||
|
<img src="images/port-2-4.jpg" alt="">
|
||||||
|
<img src="images/port-2-5.jpg" alt="">
|
||||||
|
<img src="images/port-2-6.jpg" alt="">
|
||||||
|
<img src="images/port-2-7.jpg" alt="">
|
||||||
|
<img src="images/port-2-8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-1-credit">
|
||||||
|
<div class="container">
|
||||||
|
<div class="credit">
|
||||||
|
<p>credit images •</p>
|
||||||
|
<p>Pexels •</p>
|
||||||
|
<p>Pngwing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
128
wedding_website/portfolio_3.html
Executable file
128
wedding_website/portfolio_3.html
Executable file
|
|
@ -0,0 +1,128 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="portfolio-1">
|
||||||
|
<div class="container">
|
||||||
|
<div class="img-port-1">
|
||||||
|
<img src="images/port-3-1.jpg" alt="">
|
||||||
|
<img src="images/port-3-2.jpg" alt="">
|
||||||
|
<img src="images/port-3-3.jpg" alt="">
|
||||||
|
<img src="images/port-3-4.jpg" alt="">
|
||||||
|
<img src="images/port-3-5.jpg" alt="">
|
||||||
|
<img src="images/port-3-6.jpg" alt="">
|
||||||
|
<img src="images/port-3-7.jpg" alt="">
|
||||||
|
<img src="images/port-3-8.jpg" alt="">
|
||||||
|
<img src="images/port-3-9.jpg" alt="">
|
||||||
|
<img src="images/port-3-10.jpg" alt="">
|
||||||
|
<img src="images/port-3-11.jpg" alt="">
|
||||||
|
<img src="images/port-3.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-1-credit">
|
||||||
|
<div class="container">
|
||||||
|
<div class="credit">
|
||||||
|
<p>credit images •</p>
|
||||||
|
<p>Pexels •</p>
|
||||||
|
<p>Pngwing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
126
wedding_website/portfolio_4.html
Executable file
126
wedding_website/portfolio_4.html
Executable file
|
|
@ -0,0 +1,126 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="portfolio-1">
|
||||||
|
<div class="container">
|
||||||
|
<div class="img-port-1">
|
||||||
|
<img src="images/port-4-1.jpg" alt="">
|
||||||
|
<img src="images/port-4-2.jpg" alt="">
|
||||||
|
<img src="images/port-4-3.jpg" alt="">
|
||||||
|
<img src="images/port-4-4.jpg" alt="">
|
||||||
|
<img src="images/port-4-5.jpg" alt="">
|
||||||
|
<img src="images/port-4-6.jpg" alt="">
|
||||||
|
<img src="images/port-4-7.jpg" alt="">
|
||||||
|
<img src="images/port-4-8.jpg" alt="">
|
||||||
|
<img src="images/port-4-9.jpg" alt="">
|
||||||
|
<img src="images/port-4.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-1-credit">
|
||||||
|
<div class="container">
|
||||||
|
<div class="credit">
|
||||||
|
<p>credit images •</p>
|
||||||
|
<p>Pexels •</p>
|
||||||
|
<p>Pngwing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
124
wedding_website/portfolio_5.html
Executable file
124
wedding_website/portfolio_5.html
Executable file
|
|
@ -0,0 +1,124 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="portfolio-1">
|
||||||
|
<div class="container">
|
||||||
|
<div class="img-port-1">
|
||||||
|
<img src="images/port-5-1.jpg" alt="">
|
||||||
|
<img src="images/port-5-2.jpg" alt="">
|
||||||
|
<img src="images/port-5-3.jpg" alt="">
|
||||||
|
<img src="images/port-5-4.jpg" alt="">
|
||||||
|
<img src="images/port-5-5.jpg" alt="">
|
||||||
|
<img src="images/port-5-6.jpg" alt="">
|
||||||
|
<img src="images/port-5-7.jpg" alt="">
|
||||||
|
<img src="images/port-5-8.jpg" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="portfolio-1-credit">
|
||||||
|
<div class="container">
|
||||||
|
<div class="credit">
|
||||||
|
<p>credit images •</p>
|
||||||
|
<p>Pexels •</p>
|
||||||
|
<p>Pngwing</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
133
wedding_website/press.html
Executable file
133
wedding_website/press.html
Executable file
|
|
@ -0,0 +1,133 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="press">
|
||||||
|
<div class="container">
|
||||||
|
<div class="press-title">
|
||||||
|
<div class="press-title-text">
|
||||||
|
<h2>See and Be seen</h2>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||||
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="press-title-1">
|
||||||
|
<div class="press-title-text-1">
|
||||||
|
<h2>Online</h2>
|
||||||
|
</div>
|
||||||
|
<div class="press-img-1">
|
||||||
|
<img src="images/pr-1.png" alt="">
|
||||||
|
<img src="images/pr-2.png" alt="">
|
||||||
|
<img src="images/pr-3.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="press-title-2">
|
||||||
|
<div class="press-title-text-2">
|
||||||
|
<h2>Print</h2>
|
||||||
|
</div>
|
||||||
|
<div class="press-img-2">
|
||||||
|
<img src="images/press-1.png" alt="">
|
||||||
|
<img src="images/press-2.png" alt="">
|
||||||
|
<img src="images/press-3.png" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
147
wedding_website/service.html
Executable file
147
wedding_website/service.html
Executable file
|
|
@ -0,0 +1,147 @@
|
||||||
|
<!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>Best Luxury Wedding Planner</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" href="style_.css">
|
||||||
|
<link rel="shortcut icon" href="images/logo-head.png" type="image/x-icon">
|
||||||
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="page-tops" class="page-category">
|
||||||
|
<header>
|
||||||
|
<div class="inner-header">
|
||||||
|
<div class="container wide">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="header-left">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<a href="#0" class="menu-trigger" trigger-button data-target="mobile-menu"><i class='bx bx-menu'></i></a>
|
||||||
|
</div>
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="header-center">
|
||||||
|
<nav class="menu">
|
||||||
|
<ul>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="branding"><a href="index.html"><img src="images/logo-home.png" alt=""></a></div>
|
||||||
|
</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="list-inline">
|
||||||
|
<ul>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
<li><a href="" ><i class='bx bx-user' ></i></a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="service">
|
||||||
|
<div class="service-img"></div>
|
||||||
|
</div>
|
||||||
|
<div class="service-content">
|
||||||
|
<div class="container">
|
||||||
|
<div class="service-text">
|
||||||
|
<p>Weddings and special events are our <span>passion.</span></p><br>
|
||||||
|
</div>
|
||||||
|
<div class="service-text-more">
|
||||||
|
<p>We offer different services for planning events, like small weddings, helping out on the big day, or taking care of everything from start to finish. Your coordinator will work closely with you <span>to create a memorable event</span> just for you and your fiancé.
|
||||||
|
We will be there for you from picking the right place to your final dance, supporting you at every stage.</p><br>
|
||||||
|
<p>In our first meeting, you can check out our past work, find out about our event planning services, and ask any questions at our office.
|
||||||
|
After figuring out what you need, we will create a <span>special plan</span> just for you.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="service-container">
|
||||||
|
<div class="service-card-container">
|
||||||
|
<div class="card-text">
|
||||||
|
<img src="images/service-card-1.jpg" alt="" class="card-img">
|
||||||
|
<div class="card-description">
|
||||||
|
<span class="card-desc">Day of Coordination</span>
|
||||||
|
<h2 class="service-card-title">Pricing begins at $2,000</h2>
|
||||||
|
<a href="#" class="service-card-button">Read More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-text">
|
||||||
|
<img src="images/service-card-2.jpg" alt="" class="card-img">
|
||||||
|
<div class="card-description">
|
||||||
|
<span class="card-desc">Partial Event Planning</span>
|
||||||
|
<h2 class="service-card-title">Pricing begins at $5,000</h2>
|
||||||
|
<a href="#" class="service-card-button">Read More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-text">
|
||||||
|
<img src="images/service-card-3.jpg" alt="" class="card-img">
|
||||||
|
<div class="card-description">
|
||||||
|
<span class="card-desc">Full Service Planning </span>
|
||||||
|
<h2 class="service-card-title">Please inquire for pricing</h2>
|
||||||
|
<a href="#" class="service-card-button">Read More</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="container">
|
||||||
|
<ul class="social">
|
||||||
|
<li><a href=""><i class='bx bxl-facebook' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxl-instagram' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bxs-envelope' ></i></a></li>
|
||||||
|
<li><a href=""><i class='bx bx-phone' ></i></a></li></ul>
|
||||||
|
<p>We are an exclusive, high-end wedding planning and design boutique located in Chicago, availble worldwide. We believe love is no boundaries and welcome everyone regardless of their race, gender identity, sexual orientation, religion, or ability.</p>
|
||||||
|
<div class="copyright">
|
||||||
|
<p>copyright ©2023 M Events</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="overlay" data-overlay></div>
|
||||||
|
|
||||||
|
<div id="mobile-menu" class="mobile-menu">
|
||||||
|
<div class="wrap">
|
||||||
|
<a href="" class="close-trigger" close-button>
|
||||||
|
<i class='bx bx-x-circle' ></i>
|
||||||
|
</a>
|
||||||
|
<div class="main-menu">
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="index.html"><span>Home</span></a></li>
|
||||||
|
<li><a href="portfolio.html"><span>Portfolio</span></a></li>
|
||||||
|
<li><a href="note.html"><span>Love note</span></a></li>
|
||||||
|
<li><a href="press.html"><span>Press</span></a></li>
|
||||||
|
<li><a href="service.html"><span>Services</span></a></li>
|
||||||
|
<li><a href="about.html"><span>About</span></a></li>
|
||||||
|
<li><a href="contact.html"><span>Contact</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
510
wedding_website/style.css
Executable file
510
wedding_website/style.css
Executable file
|
|
@ -0,0 +1,510 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=WindSong:wght@400;500&display=swap');
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Josefin Sans', sans-serif;
|
||||||
|
}
|
||||||
|
*,::before,::after{
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
:root{
|
||||||
|
--main-color: #8D7B68;
|
||||||
|
--based-color:#c4b7a6;
|
||||||
|
--light-color:#bab7ac;
|
||||||
|
--white-color:white;
|
||||||
|
--dark-color:black;
|
||||||
|
|
||||||
|
--transition-color: color 0.3s;
|
||||||
|
--transition-background: background-color 0.3s;
|
||||||
|
--trabsition-border: border 0.3s;
|
||||||
|
--trabsition-transform: transform 0.3s;
|
||||||
|
|
||||||
|
--shadow: 0px 10px 20px 0px rgb(0 0 0 /20%);
|
||||||
|
--fade: fade-bottom 0.3s cubic-bezier(0.3, 0.5, 0.5, 1) both;
|
||||||
|
}
|
||||||
|
.grey-color{
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
html{
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: var(--main-color);
|
||||||
|
background-color: var(--white-color);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
img{
|
||||||
|
max-width: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
ul{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
margin: 0 0 15px;
|
||||||
|
}
|
||||||
|
input, textarea, select{
|
||||||
|
font: inherit;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
input[type=checkbox], input[type=radio]{
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
input::placeholder, textarea::placeholder{
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
button{
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
strong{
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4{
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size: 2.7rem;
|
||||||
|
}
|
||||||
|
h2{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
h4{
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
max-width: var(--mx-width, 1200px);
|
||||||
|
padding: 0 var(--gutter, 15px);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.header-center .branding{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.list-block a{
|
||||||
|
position: relative;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--dark-color);
|
||||||
|
padding: 5px 0;
|
||||||
|
display: inline-block;
|
||||||
|
transition: var(--transition-color);
|
||||||
|
}
|
||||||
|
.list-block a:hover{
|
||||||
|
color: var(--based-color);
|
||||||
|
}
|
||||||
|
nav.menu{
|
||||||
|
padding: 5px 30px;
|
||||||
|
}
|
||||||
|
.inner-header{
|
||||||
|
line-height: 90px;
|
||||||
|
}
|
||||||
|
.inner-header :where(.wrap, .menu > ul), .list-inline > ul{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.header-left, .header-right{
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
.header-left .menu-bar{
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
.header-left .list-inline .bx-user, .header-right .list-inline .bx-user{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.header-center nav{
|
||||||
|
display: none;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 180px;
|
||||||
|
max-width: 1020px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.header-center .branding{
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.header-center .branding a{
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: inherit;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
.header-center .menu > ul > li > a{
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
.header-right ul{
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.overlay, .mobile-menu, .cart-menu, .sidebar{
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.overlay{
|
||||||
|
background-color: var(--dark-color);
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 999;
|
||||||
|
transition: opacity 0.3s, visibility 0.3s;
|
||||||
|
}
|
||||||
|
.overlay.active{
|
||||||
|
opacity: 0.5;
|
||||||
|
visibility: visible;
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
/*---------- mobile navbar ----------*/
|
||||||
|
.mobile-menu, .cart-menu, .sidebar{
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1001;
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.mobile-menu.active{
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.mobile-menu .wrap{
|
||||||
|
position: relative;
|
||||||
|
max-width: calc(100% - 40px);
|
||||||
|
width: 300px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--white-color);
|
||||||
|
pointer-events: auto;
|
||||||
|
transition: var(--trabsition-transform);
|
||||||
|
transform: translateX(var(--transX, -100%));
|
||||||
|
}
|
||||||
|
.mobile-menu.active .wrap{
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
.mobile-menu .close-trigger{
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -40px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
color: var(--dark-color);
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.mobile-menu .main-menu{
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.mobile-menu nav>ul{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.mobile-menu nav>ul>li>a{
|
||||||
|
position: relative;
|
||||||
|
padding: 12px 0;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 2.5rem;
|
||||||
|
}
|
||||||
|
.mobile-menu nav li :where(li, a){
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.mobile-menu nav>ul>li>a:hover{
|
||||||
|
color: var(--dark-color);
|
||||||
|
}
|
||||||
|
/*---------------------------------- main ----------------------------------*/
|
||||||
|
/*----- home-slide -----*/
|
||||||
|
.load{
|
||||||
|
animation: slide 0.2s;
|
||||||
|
}
|
||||||
|
.home-slider{
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 70vh;
|
||||||
|
animation: slide 15s infinite;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
@keyframes slide{
|
||||||
|
0%{
|
||||||
|
background-image: url(images/home-1.jpg);
|
||||||
|
}
|
||||||
|
20%{
|
||||||
|
background-image: url(images/home-1.jpg);
|
||||||
|
}
|
||||||
|
20.01%{
|
||||||
|
background-image: url(images/home-2.jpg);
|
||||||
|
}
|
||||||
|
40%{
|
||||||
|
background-image: url(images/home-2.jpg);
|
||||||
|
}
|
||||||
|
40.01%{
|
||||||
|
background-image: url(images/home-3.jpg);
|
||||||
|
}
|
||||||
|
60%{
|
||||||
|
background-image: url(images/home-3.jpg);
|
||||||
|
}
|
||||||
|
60.01%{
|
||||||
|
background-image: url(images/home-4.jpg);
|
||||||
|
}
|
||||||
|
80%{
|
||||||
|
background-image: url(images/home-4.jpg);
|
||||||
|
}
|
||||||
|
80.01%{
|
||||||
|
background-image: url(images/home-5.jpg);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
background-image: url(images/home-5.jpg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*----- home-content -----*/
|
||||||
|
.home-content .container{
|
||||||
|
max-width: 60%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.content p {
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #8D7B68;
|
||||||
|
text-align: center;
|
||||||
|
word-spacing: 1px;
|
||||||
|
}
|
||||||
|
.content span{
|
||||||
|
font-family: 'WindSong';
|
||||||
|
font-size: 22px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
/*----- line -----*/
|
||||||
|
.line .container{
|
||||||
|
max-width: 40%;
|
||||||
|
margin-top: -30px;
|
||||||
|
}
|
||||||
|
.line .content-line{
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
border: 1px solid #3F4E4F;
|
||||||
|
opacity: 0.3;
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
/*----- contenr-2 -----*/
|
||||||
|
.home-content-2 .container{
|
||||||
|
display: flex;
|
||||||
|
max-width: 80%;
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.content-detail{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 50px;
|
||||||
|
}
|
||||||
|
.content-detail p{
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #8D7B68;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
.content-detail span{
|
||||||
|
margin-left: 30px;
|
||||||
|
font-family: 'WindSong';
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
/*----- content-3 -----*/
|
||||||
|
.home-content-3 .container{
|
||||||
|
max-width: 100%;
|
||||||
|
height: 85vh;
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #DCD7C9;
|
||||||
|
}
|
||||||
|
.content-3-detail{
|
||||||
|
max-width: 800px;
|
||||||
|
padding: 50px 0;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.content-note-title h3{
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.content-note-title h4{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 20px;
|
||||||
|
font-family: 'WindSong';
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.content-3-detail .image{
|
||||||
|
height: auto;
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
.content-3-detail .slide{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: 30px;
|
||||||
|
}
|
||||||
|
.slide p{
|
||||||
|
padding: 0 160px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.slide .note-name{
|
||||||
|
font-size: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
.swiper-btn{
|
||||||
|
transform: translateY(10px);
|
||||||
|
}
|
||||||
|
.swiper-btn::after, .swiper-btn::before{
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.swiper-pagination{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
/*----- footer -----*/
|
||||||
|
footer .container{
|
||||||
|
padding-top: 100px;
|
||||||
|
width: 100vw;
|
||||||
|
color: #3F4E4F;
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
.footer-content{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.footer-content p{
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.social{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 10px 0 20px 0;
|
||||||
|
}
|
||||||
|
.social li{
|
||||||
|
margin: 0 10px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.footer-content .copyright p{
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width:1200px){
|
||||||
|
.swiper-btn::after, .swiper-btn::before{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (width < 990px) {
|
||||||
|
.home-slider{
|
||||||
|
margin-top: 45px;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
.home-content .container{
|
||||||
|
max-width: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (max-width:695px){
|
||||||
|
.home-content-2 .container{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.line .container{
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
.content-detail{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.content-3-detail .image{
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
.slide p{
|
||||||
|
padding: 0 200px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.home-content-3 .container{
|
||||||
|
height: -60vh;
|
||||||
|
}
|
||||||
|
footer .container{
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (width < 420px){
|
||||||
|
.content-3-detail .image{
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
.slide p{
|
||||||
|
padding: 0 250px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (width < 390px){
|
||||||
|
.home-content-3 .container{
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.footer-content p{
|
||||||
|
font-size: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(min-width: 992px){
|
||||||
|
.menu-trigger{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.header-center nav{
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
625
wedding_website/style_.css
Executable file
625
wedding_website/style_.css
Executable file
|
|
@ -0,0 +1,625 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=WindSong:wght@400;500&display=swap');
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Josefin Sans', sans-serif;
|
||||||
|
}
|
||||||
|
/*----- main -----*/
|
||||||
|
.portfolio .container{
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
.img-port{
|
||||||
|
margin-top: 50px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||||
|
grid-gap: 25px;
|
||||||
|
}
|
||||||
|
.img-port .image-item .image{
|
||||||
|
width: 100%;
|
||||||
|
height: 380px;
|
||||||
|
}
|
||||||
|
.img-port .image-item .image img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
.img-port .image-item{
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.img-port .image-item:before{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: none;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(245, 244, 244, 0.9);
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
.img-port .image-item:hover.image-item:before{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.img-port .image-item .overlay-port{
|
||||||
|
position: absolute;
|
||||||
|
top: 130%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10;
|
||||||
|
transition: 1s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.img-port .image-item .overlay-port p{
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: italic;
|
||||||
|
font-family: 'WindSong';
|
||||||
|
text-align: center;
|
||||||
|
color: #3F4E4F;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
.img-port .image-item:hover .overlay-port{
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
/*---------------------------------------- Portfolio-extension ----------------------------------------*/
|
||||||
|
.portfolio-1 .container{
|
||||||
|
max-width: 60%;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
.img-port-1{
|
||||||
|
columns: 2 300px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.img-port-1 img{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.portfolio-1-credit .container{
|
||||||
|
max-width: 60%;
|
||||||
|
margin: 10px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.credit p{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
/*---------------------------------------- Love notes ----------------------------------------*/
|
||||||
|
.love-note{
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-image: url(images/home-note.jpg);
|
||||||
|
width: 100%;
|
||||||
|
height: 60vh;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.note-text h2{
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
color: #3F4E4F;
|
||||||
|
font-family: 'WindSong';
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.note .container{
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
.note-detail, .note-detail-1{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
.note-img img, .note-img-1 img{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
.note-img-2 img{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.note-text, .note-text-1{
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.note-text p, .note-text-1 p{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.line-note{
|
||||||
|
height: 1px;
|
||||||
|
background: lightgray;
|
||||||
|
}
|
||||||
|
.line-note-2{
|
||||||
|
margin-top: 5px;
|
||||||
|
height: 1px;
|
||||||
|
background: lightgray;
|
||||||
|
}
|
||||||
|
.visit-us{
|
||||||
|
margin-top: 30px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.visit-detail p{
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #8D7B68;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.visit-detail span{
|
||||||
|
margin-left: 50px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: 'WindSong';
|
||||||
|
}
|
||||||
|
/*---------------------------------------- press ----------------------------------------*/
|
||||||
|
.press .container{
|
||||||
|
max-width: 70%;
|
||||||
|
}
|
||||||
|
.press-title{
|
||||||
|
margin-top: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.press-title-text h2, .press-title-text-1 h2, .press-title-text-2 h2{
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
text-align: center;
|
||||||
|
color: #3F4E4F;
|
||||||
|
font-family: 'WindSong';
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.press-title-text p{
|
||||||
|
padding: 0 100px;
|
||||||
|
text-align: center;
|
||||||
|
color: #3F4E4F;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.press-title-1{
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.press-img-1{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
gap: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.press-img-1 img{
|
||||||
|
width: 280px;
|
||||||
|
height: 280px;
|
||||||
|
}
|
||||||
|
.press-title-2{
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.press-img-2{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
/*---------------------------------------- service ----------------------------------------*/
|
||||||
|
.service{
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-image: url(images/service.jpg);
|
||||||
|
width: 100%;
|
||||||
|
height: 70vh;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.service-content .container{
|
||||||
|
max-width: 60%;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 50px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.service-text p {
|
||||||
|
letter-spacing: 4px;
|
||||||
|
color: #8D7B68;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.service-text span{
|
||||||
|
font-family: 'WindSong';
|
||||||
|
font-size: 30px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
text-transform: lowercase;
|
||||||
|
}
|
||||||
|
.service-text-more p{
|
||||||
|
font-weight: 300;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.service-text-more span{
|
||||||
|
font-family: 'WindSong';
|
||||||
|
font-size: 30px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
text-transform: lowercase;
|
||||||
|
}
|
||||||
|
.service-container{
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
margin-inline: 1.5rem;
|
||||||
|
padding-block: 5rem;
|
||||||
|
}
|
||||||
|
.service-card-container{
|
||||||
|
display: grid;
|
||||||
|
row-gap: 3.5rem;
|
||||||
|
}
|
||||||
|
.card-text{
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.card-img{
|
||||||
|
width: 327px;
|
||||||
|
}
|
||||||
|
.card-description{
|
||||||
|
width: 280px;
|
||||||
|
background-color: #F3EEEA;
|
||||||
|
padding: 1.5rem 1.5rem;
|
||||||
|
box-shadow: 0 10px 25px hsla(0, 0%, 0%, 0.15);
|
||||||
|
border-radius: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -9rem;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin-inline: auto;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 1s 1s;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.card-desc{
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.service-card-title{
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.service-card-button{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.service-card-button:hover{
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.card-text:hover .card-description{
|
||||||
|
animation: showdata 1s forwards;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
.card-text:hover{
|
||||||
|
animation: removedata 2s forwards;
|
||||||
|
}
|
||||||
|
.card-text:not(:hover){
|
||||||
|
animation: show-overflow 2s forwards;
|
||||||
|
}
|
||||||
|
.card-text:not(:hover) .card-description{
|
||||||
|
animation: remove-overflow 1s forwards;
|
||||||
|
}
|
||||||
|
@keyframes showdata{
|
||||||
|
50%{
|
||||||
|
transform: translateY(-10rem);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: translateY(-7rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes removedata{
|
||||||
|
to{
|
||||||
|
overflow: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes remove-overflow{
|
||||||
|
0%{
|
||||||
|
transform: translateY(-7rem);
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform: translateY(-10rem);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: translateY(0.5rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes show-overflow{
|
||||||
|
0%{
|
||||||
|
overflow: initial;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*---------------------------------------- about ----------------------------------------*/
|
||||||
|
.about .container{
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
.about-title{
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.about-title h3{
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
font-family: 'WindSong';
|
||||||
|
color: #3F4E4F;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.about-title p{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.about-us{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.about-detail img{
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
}
|
||||||
|
.about-detail h3{
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.about-detail p{
|
||||||
|
text-align: center;
|
||||||
|
color: #3F4E4F;
|
||||||
|
font-size: 22px;
|
||||||
|
font-family: 'WindSong';
|
||||||
|
}
|
||||||
|
/*---------------------------------------- contact-form ----------------------------------------*/
|
||||||
|
.contact-form .container{
|
||||||
|
max-width: 60%;
|
||||||
|
}
|
||||||
|
.contact-title h3{
|
||||||
|
margin-top: 30px;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'WindSong';
|
||||||
|
color: #3F4E4F;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.contact-main{
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 10px;
|
||||||
|
}
|
||||||
|
.contact-box{
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.left-box{
|
||||||
|
height: 100%;
|
||||||
|
background: url(images/contact.jpg) no-repeat center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.right-box{
|
||||||
|
padding: 25px 40px;
|
||||||
|
}
|
||||||
|
.right-box h3{
|
||||||
|
position: relative;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.right-box .content-title p{
|
||||||
|
font-size: 14px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.right-box .content-title span{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #3F4E4F;
|
||||||
|
}
|
||||||
|
.field{
|
||||||
|
width: 100%;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.right-box button{
|
||||||
|
padding: 10px 12px;
|
||||||
|
margin-top: 20px;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background-color: #7E8A97;
|
||||||
|
color: white;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.right-box button:hover{
|
||||||
|
background-color: #3F4E4F;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media(width < 1500px){
|
||||||
|
.contact-form .container{
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(width < 1200px){
|
||||||
|
.portfolio-1 .container{
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
.note .container{
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
.love-note{
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
.press-img-1 img{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
.press .container{
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
.about .container{
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
.contact-form .container{
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
.right-box h3{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
.service{
|
||||||
|
margin-top: 50px;
|
||||||
|
height: 50vh;
|
||||||
|
}
|
||||||
|
.love-note{
|
||||||
|
height: 50vh;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(width < 800px){
|
||||||
|
.portfolio-1 .container{
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
.note .container{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.press .container{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.press-img-2{
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.about .container{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.about-detail img{
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
.contact-form .container{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(width < 700px){
|
||||||
|
.note-detail, .note-detail-1{
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
}
|
||||||
|
.note .container{
|
||||||
|
max-width: 80%;
|
||||||
|
}
|
||||||
|
.note-img-2 img{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.note-img-1 img{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.note-text p, .note-text-1 p{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.press-img-1{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.press-img-1 img{
|
||||||
|
width: 50%;
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.press-img-2{
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
}
|
||||||
|
.contact-box{
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media(width < 550px){
|
||||||
|
.portfolio .container{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.portfolio-1 .container{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.portfolio-1-credit .container{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.note .container{
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
.about .container{
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
.about-us{
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
}
|
||||||
|
.service-container{
|
||||||
|
margin-inline: 1rem;
|
||||||
|
}
|
||||||
|
.card-description{
|
||||||
|
width: 250px;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 768px){
|
||||||
|
.service-card-container{
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
column-gap: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: 1120px){
|
||||||
|
.service-card-container{
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
.card-img{
|
||||||
|
width: 350px;
|
||||||
|
}
|
||||||
|
.card-description{
|
||||||
|
width: 315px;
|
||||||
|
padding-inline: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
wedding_website/swiper-bundle.min.css
vendored
Executable file
13
wedding_website/swiper-bundle.min.css
vendored
Executable file
File diff suppressed because one or more lines are too long
14
wedding_website/swiper-bundle.min.js
vendored
Executable file
14
wedding_website/swiper-bundle.min.js
vendored
Executable file
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue