├── .eslintrc.json
├── .github
    └── workflows
    │   └── linters.yml
├── .gitignore
├── .hintrc
├── .stylelintrc.json
├── JS
    ├── about.js
    └── featured.js
├── MIT.md
├── README.md
├── aboutlux.html
├── app.css
├── cap.code-workspace
├── images
    ├── Antigua-lux.jpg
    ├── Barbados-lux.png
    ├── Georgia-Tawley.jpg
    ├── Graclyn-Meadows.jpg
    ├── Grisella-Weich.jpg
    ├── James-Thompson.jpg
    ├── Jars-Landoh.jpg
    ├── Jessica-Darsey.jpg
    ├── Josh-Burke.jpg
    ├── Kevin-Pyke.JPG
    ├── LUX-DROP-MENU-MOBILE.png
    ├── LUX-REALTY-MOBILE.png
    ├── LUX-REALTY.png
    ├── Melony-Atkison.JPG
    ├── Menson-King.jpg
    ├── Mickia-Crowley.JPG
    ├── Ricka-Stevens.jpg
    ├── Stephanie-Phillips.jpeg
    ├── cap-background.jpg
    ├── checkered.png
    ├── checkered2.png
    ├── diamond.jpg
    ├── logo.jpg
    └── orange-globe.png
└── index.html


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es6": true,
 5 |     "jest": true
 6 |   },
 7 |   "parser": "babel-eslint",
 8 |   "parserOptions": {
 9 |     "ecmaVersion": 2018,
10 |     "sourceType": "module"
11 |   },
12 |   "extends": ["airbnb-base"],
13 |   "rules": {
14 |     "no-shadow": "off",
15 |     "no-param-reassign": "off",
16 |     "eol-last": "off",
17 |     "import/extensions": [ 1, {
18 |       "js": "always", "json": "always"
19 |     }]
20 |   },
21 |   "ignorePatterns": [
22 |     "dist/",
23 |     "build/"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/.github/workflows/linters.yml:
--------------------------------------------------------------------------------
 1 | name: Linters
 2 | 
 3 | on: pull_request
 4 | 
 5 | env:
 6 |   FORCE_COLOR: 1
 7 | 
 8 | jobs:
 9 |   lighthouse:
10 |     name: Lighthouse
11 |     runs-on: ubuntu-18.04
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - uses: actions/setup-node@v1
15 |         with:
16 |           node-version: "12.x"
17 |       - name: Setup Lighthouse
18 |         run: npm install -g @lhci/cli@0.7.x
19 |       - name: Lighthouse Report
20 |         run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
21 |   webhint:
22 |     name: Webhint
23 |     runs-on: ubuntu-18.04
24 |     steps:
25 |       - uses: actions/checkout@v2
26 |       - uses: actions/setup-node@v1
27 |         with:
28 |           node-version: "12.x"
29 |       - name: Setup Webhint
30 |         run: |
31 |           npm install --save-dev hint@6.x
32 |           [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
33 |       - name: Webhint Report
34 |         run: npx hint .
35 |   stylelint:
36 |     name: Stylelint
37 |     runs-on: ubuntu-18.04
38 |     steps:
39 |       - uses: actions/checkout@v2
40 |       - uses: actions/setup-node@v1
41 |         with:
42 |           node-version: "12.x"
43 |       - name: Setup Stylelint
44 |         run: |
45 |           npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
46 |           [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
47 |       - name: Stylelint Report
48 |         run: npx stylelint "**/*.{css,scss}"
49 |   eslint:
50 |     name: ESLint
51 |     runs-on: ubuntu-18.04
52 |     steps:
53 |       - uses: actions/checkout@v2
54 |       - uses: actions/setup-node@v1
55 |         with:
56 |           node-version: "12.x"
57 |       - name: Setup ESLint
58 |         run: |
59 |           npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
60 |           [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
61 |       - name: ESLint Report
62 |         run: npx eslint .
63 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | package.json
4 | .vscode
5 | cap.code-workspace


--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "connector": {
 3 |     "name": "local",
 4 |     "options": {
 5 |       "pattern": ["**", "!.git/**", "!node_modules/**"]
 6 |     }
 7 |   },
 8 |   "extends": ["development"],
 9 |   "formatters": ["stylish"],
10 |   "hints": [
11 |     "button-type",
12 |     "disown-opener",
13 |     "html-checker",
14 |     "meta-charset-utf-8",
15 |     "meta-viewport",
16 |     "no-inline-styles:error"
17 |   ]
18 | }


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["stylelint-config-standard"],
 3 |   "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
 4 |   "rules": {
 5 |     "at-rule-no-unknown": null,
 6 |     "scss/at-rule-no-unknown": true,
 7 |     "csstree/validator": true
 8 |   },
 9 |   "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
10 | }
11 | 


--------------------------------------------------------------------------------
/JS/about.js:
--------------------------------------------------------------------------------
 1 | const navToggle = document.getElementById('nav-toggle');
 2 | const navLinks = document.querySelector('.nav-menu');
 3 | const scrollLinks = document.querySelectorAll('.nav-item');
 4 | const closeBtn = document.getElementById('close-btn');
 5 | 
 6 | navToggle.addEventListener('click', () => {
 7 |   navLinks.classList.add('show-links');
 8 |   closeBtn.classList.remove('hidden');
 9 | });
10 | 
11 | function removeActive() {
12 |   scrollLinks.forEach((link) => {
13 |     link.classList.remove('active');
14 |   });
15 | }
16 | 
17 | scrollLinks.forEach((link) => {
18 |   link.addEventListener('click', (e) => {
19 |     navLinks.classList.remove('show-links');
20 |     removeActive();
21 |     e.target.classList.add('active');
22 |   });
23 | });
24 | 
25 | closeBtn.addEventListener('click', () => {
26 |   navLinks.classList.remove('show-links');
27 |   closeBtn.classList.add('hidden');
28 | });
29 | 


--------------------------------------------------------------------------------
/JS/featured.js:
--------------------------------------------------------------------------------
  1 | const navToggle = document.getElementById('nav-toggle');
  2 | const navLinks = document.querySelector('.nav-menu');
  3 | const scrollLinks = document.querySelectorAll('.nav-item');
  4 | const closeBtn = document.getElementById('close-btn');
  5 | 
  6 | navToggle.addEventListener('click', () => {
  7 |   navLinks.classList.add('show-links');
  8 |   closeBtn.classList.remove('hidden');
  9 | });
 10 | 
 11 | function removeActive() {
 12 |   scrollLinks.forEach((link) => {
 13 |     link.classList.remove('active');
 14 |   });
 15 | }
 16 | 
 17 | scrollLinks.forEach((link) => {
 18 |   link.addEventListener('click', (e) => {
 19 |     navLinks.classList.remove('show-links');
 20 |     removeActive();
 21 |     e.target.classList.add('active');
 22 |   });
 23 | });
 24 | 
 25 | closeBtn.addEventListener('click', () => {
 26 |   navLinks.classList.remove('show-links');
 27 |   closeBtn.classList.add('hidden');
 28 | });
 29 | 
 30 | const data = [{
 31 |   img: './images/Graclyn-Meadows.jpg',
 32 |   name: 'Graclyn-Meadows',
 33 |   known: 'Realtor and Junior Partner.',
 34 |   info: 'Graclyn is a passionate and insightful leader with a proven track record of enabling clients to buy their dream homes.',
 35 | },
 36 | {
 37 |   img: './images/Grisella-Weich.jpg',
 38 |   name: 'Grisella-Weich',
 39 |   known: 'Realtor',
 40 |   info: 'Grisella grew up helping with her family\'s real estate business. Over the years, she got to learn the details of buying, selling, investing, and property management.',
 41 | },
 42 | {
 43 |   img: './images/James-Thompson.jpg',
 44 |   name: 'James Thompson',
 45 |   known: 'Chief Realtor and Partner',
 46 |   info: 'James earned his real estate license as a sophomore in college and joined Keller Williams Realty with Team Rich Richardson as a summer intern while pursuing a degree in Management.  ',
 47 | },
 48 | {
 49 |   img: './images/Jars-Landoh.jpg',
 50 |   name: 'Jars-Landoh',
 51 |   known: 'President',
 52 |   info: 'Jars attended Georgia Tech where he was a President\'s Scholar and graduated Highest Honors with a degree in Chemical Engineering. He joined the KW Peachtree Road office in Brookhaven in May of 2008 after five years in the real estate industry. Thanks to his sales growth, he started The Jars-Landoh Group at the beginning of 2013.',
 53 | },
 54 | {
 55 |   img: './images/Jessica-Darsey.jpg',
 56 |   name: 'Jessica Darsey',
 57 |   known: 'Realtor',
 58 |   info: 'Jessica is an Atlanta native and Edgewood resident. Her local knowledge and love for this city drives her passion for connecting people with homes and properties all throughout the Atlanta area. She joined The Jars-Landoh Group after working with the team on her own home buying and selling journey.',
 59 | },
 60 | {
 61 |   img: './images/Josh-Burke.jpg',
 62 |   name: 'Josh-Burke',
 63 |   known: 'Realtor',
 64 |   info: 'Born and raised in Georgia, Josh is a true southerner at heart. When it comes to a city with both southern charm and adventure, Atlanta is on the mind! He calls Atlanta home because there is never a dull moment.',
 65 | },
 66 | {
 67 |   img: './images/Kevin-Pyke.JPG',
 68 |   name: 'Kevin Pyke',
 69 |   known: 'Realtor',
 70 |   info: 'Kevin comes to Atlanta from the Mountains of Northeast Georgia. Throughout his early life, Kevin worked in the country club service industry. What he loved most about that work was building and sustaining firm client relationships.',
 71 | },
 72 | {
 73 |   img: './images/Melony-Atkison.JPG',
 74 |   name: 'Melony Atkison',
 75 |   known: 'Listing Specialist and Partner',
 76 |   info: 'As the Lead Listing Specialist and Partner of The Jars-Landoh Group, Melony dedicates herself to providing an unmatched client experience. Named one of REALTOR Magazine’s “30 Under 30” and a “Top Luxury Listing Agent” by The Atlantan, Melony has garnered a reputation for being the best in the business.',
 77 | },
 78 | {
 79 |   img: './images/Menson-King.jpg',
 80 |   name: 'Menson-King',
 81 |   known: 'Realtor',
 82 |   info: 'As a lifetime resident of metro Atlanta, Menson King has grown just as dynamically as our beloved city. The son of a developer and a real estate agent, Menson learned about real estate at a young age, and he largely credits that background to becoming one of Atlanta’s up-and-coming agents today.',
 83 | },
 84 | {
 85 |   img: './images/Ricka-Stevens.jpg',
 86 |   name: 'Ricka Stevens',
 87 |   known: 'Realtor',
 88 |   info: 'Ricka grew up with a dad in the Air Force and lived in Arizona, Texas, and Japan before her family settled in the Atlanta area in 2000. She graduated from Georgia Southern University with a bachelor’s degree in Business Administration.',
 89 | },
 90 | {
 91 |   img: './images/Stephanie-Phillips.jpeg',
 92 |   name: 'Stephanie Phillips',
 93 |   known: 'Realtor',
 94 |   info: 'Stephanie is an Atlanta Realtor with an unmatched passion for helping her clients. After earning her major in English and minor in Spanish, Courtney worked on the administrative side of real estate before becoming licensed herself.',
 95 | },
 96 | {
 97 |   img: './images/Mickia-Crowley.JPG',
 98 |   name: 'Mickia Crowley',
 99 |   known: 'Realtor',
100 |   info: 'Mickia fell in love with Atlanta, it\'s vibrant multicultural communities, beautiful green spaces, and entrepreneurial spirit. She knew this would be her forever home.',
101 | },
102 | {
103 |   img: './images/Georgia-Tawley.jpg',
104 |   name: 'Georgia-Tawley',
105 |   known: 'Realtor',
106 |   info: 'A born and raised Atlanta native, Georgia got her start in real estate in 2016. Having worked as an assistant, a listing coordinator, and a buyer\'s agent, she knows all the ins and outs of the real estate world.',
107 | },
108 | ];
109 | 
110 | const featuredSpeaker = document.querySelector('.featured-speakers');
111 | const loadMore = document.querySelector('.load-more');
112 | const loadMoreBtn = document.querySelector('.load-more-btn');
113 | let initialLoad = 0;
114 | 
115 | function printCards() {
116 |   for (let i = initialLoad; i < initialLoad + 4; i += 1) {
117 |     const markup = `<div class="each-speaker">
118 |           <div class='speaker-img'>
119 |           <img src='${data[i].img}' class='speaker-photo' alt="Featured Speaker">
120 |           </div>
121 |           <div class="speaker-text">
122 |             <h3>${data[i].name}</h3>
123 |             <span class="italic">${data[i].known}</span>
124 |             <div class="underline-small"></div>
125 |             <p class="speaker-text-p">${data[i].info}</p>
126 | 
127 |           </div>
128 |         </div>`;
129 |     featuredSpeaker.innerHTML += markup;
130 |     if (initialLoad === data.length - 4) {
131 |       loadMoreBtn.classList.add('hidden');
132 |     }
133 |   }
134 |   initialLoad += 4;
135 | }
136 | printCards();
137 | 
138 | loadMore.addEventListener('click', printCards);
139 | 
140 | function countDown() {
141 |   const now = new Date();
142 |   const eventDate = new Date(2022, 4, 30, 4);
143 |   const currentTime = now.getTime();
144 |   const eventTime = eventDate.getTime();
145 | 
146 |   const remTime = eventTime - currentTime;
147 |   let s = Math.floor(remTime / 1000);
148 |   let m = Math.floor(s / 60);
149 |   let h = Math.floor(m / 60);
150 |   const d = Math.floor(h / 24);
151 | 
152 |   h %= 24;
153 |   m %= 60;
154 |   s %= 60;
155 | 
156 |   h = h < 10 ? `0${h}` : h;
157 |   m = m < 10 ? `0${m}` : m;
158 |   s = s < 10 ? `0${s}` : s;
159 |   document.getElementById('days').textContent = d;
160 |   document.getElementById('hours').textContent = h;
161 |   document.getElementById('minutes').textContent = m;
162 |   document.getElementById('seconds').textContent = s;
163 | 
164 |   setTimeout(countDown, 1000);
165 | }
166 | countDown();


--------------------------------------------------------------------------------
/MIT.md:
--------------------------------------------------------------------------------
1 | ## Copyright 2021, [STEVE W DAMES JR]
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this [LUX REALTY] and associated documentation files, to deal in the [LUX REALTY] without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the [LUX REALTY], and to permit persons to whom the [LUX REALTY] is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the [LUX REALTY].
6 | 
7 | THE [LUX REALTY] IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE [LUX REALTY] OR THE USE OR OTHER DEALINGS IN THE [LUX REALTY].
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![](https://img.shields.io/badge/Microverse-blueviolet)
 2 | 
 3 | # LUX REALTY
 4 | 
 5 | > Luxury property is only a call and a consultation away.
 6 | 
 7 | 
 8 | Additional description about the project and its features.
 9 | 
10 | # Screenshots
11 | ![DESKTOP VIEW](./images/LUX-REALTY.png)
12 | ![MOBILE VIEW](./images/LUX-REALTY-MOBILE.png)
13 | ![DROP DOWN MENU MOBILE VIEW](./images/LUX-DROP-MENU-MOBILE.png)
14 | 
15 | 
16 | ## Built With
17 | 
18 | - HTML | CSS | JavaScript
19 | 
20 | ## Video Explanation
21 | 
22 | [Watch Now](https://www.loom.com/share/12f50a8ab8774f1ab369794c0e02ee95)
23 | 
24 | ## Live Demo
25 | 
26 | [Live Demo Link](https://stevewdamesjr.github.io/html-css-js-capstone/)
27 | 
28 | 
29 | ## Getting Started
30 | 
31 | 
32 | To get a local copy up and running follow these simple example steps.
33 | 
34 | ### Prerequisites
35 | - Text Editor | Git and Github set up
36 | 
37 | ### Setup
38 | - Clone repository and open with text editor
39 | 
40 | ### Usage
41 | - View Portfolio 
42 | 
43 | 
44 | ## Author
45 | 
46 | 👤 **STEVE W DAMES JR**
47 | 
48 | - GitHub: [@githubhandle](https://github.com/steveWDamesJr)
49 | - Twitter: [@twitterhandle](https://twitter.com/Steve88312331)
50 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/steve-w-dames-jr/)
51 | 
52 | 
53 | ## 🤝 Contributing
54 | 
55 | Contributions, issues, and feature requests are welcome!
56 | 
57 | Feel free to check the [issues page](../../issues/).
58 | 
59 | ## Show your support
60 | 
61 | Give a ⭐️ if you like this project!
62 | 
63 | ## Acknowledgments
64 | 
65 | - Inspiration: 
66 |   Cindy Shin
67 |   GUI & Graphic Designer
68 |   Seoul, Korea, Republic of
69 | - Logo Design attribution:
70 |   <a href="https://www.vecteezy.com/free-vector/house">House Vectors by Vecteezy</a>
71 | - Photos:
72 |   - Photo by <a href="https://unsplash.com/@steve4c?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Stephan Bechert</a> on <a href="https://unsplash.com/s/photos/luxury-real-estate?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
73 |   - Photo by <a href="https://unsplash.com/@pho_2_graph?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Avi Werde</a> on <a href="https://unsplash.com/s/photos/luxury-real-estate?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
74 |   - Photo by <a href="https://unsplash.com/@webaliser?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ярослав Алексеенко</a> on <a href="https://unsplash.com/s/photos/luxury-real-estate?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
75 | - Hat tip to anyone whose code was used
76 | - etc
77 | 
78 | ## 📝 License
79 | 
80 | This project is [MIT](./MIT.md) licensed.
81 | 


--------------------------------------------------------------------------------
/aboutlux.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |   <link
 11 |     href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
 12 |     rel="stylesheet">
 13 |   <link rel="stylesheet" href="app.css">
 14 |   <title>ABOUT LUX REALTY</title>
 15 | </head>
 16 | 
 17 | <body>
 18 |   <header class="header" id="header">
 19 |     <nav class="navbar">
 20 |       <div class="nav1">
 21 |         <ul class="nav1-items">
 22 |           <li><span class="nav1-icons"><i class="fab fa-facebook"></i></span></li>
 23 |           <li><span class="nav1-icons"><i class="fab fa-twitter"></i></span></li>
 24 |           <li><span class="nav1-icons">English</span></li>
 25 |           <li><span class="nav1-icons">My Page</span></li>
 26 |           <li><span class="nav1-icons">Logout</span></li>
 27 |         </ul>
 28 |       </div>
 29 |       <div class="nav2">
 30 |         <div class="nav-head-sec">
 31 |           <button type="button" aria-label="Hamburger" class="nav-toggle" id="nav-toggle">
 32 |             <i class="fas fa-bars"></i>
 33 |           </button>
 34 |           <div class="logo" onclick="window.location='index.html';">
 35 |             <img class="logo-img" src="./images/logo.jpg" alt="Logo">
 36 |             <div class="logo-text">
 37 |               <span>LUX REALTY</span>
 38 |             </div>
 39 |           </div>
 40 | 
 41 |         </div>
 42 |         <ul class="nav-menu" id="nav-menu">
 43 |           <li>
 44 |             <button type="button" id="close-btn" aria-label="Close" class="hidden">
 45 |               <i class="fas fa-times"></i>
 46 |             </button>
 47 |           </li>
 48 |           <li class="nav-lis">
 49 |             <a href="aboutlux.html" class="nav-item active">About</a>
 50 |           </li>
 51 |           <li class="nav-lis">
 52 |             <a href="index.html" class="nav-item">Program</a>
 53 |           </li>
 54 |           <li class="nav-lis">
 55 |             <a href="index.html" class="nav-item">Join</a>
 56 |           </li>
 57 |           <li class="nav-lis">
 58 |             <a href="index.html" class="nav-item">Sponsor</a>
 59 |           </li>
 60 |           <li class="nav-lis">
 61 |             <a href="index.html" class="nav-item">News</a>
 62 |           </li>
 63 |           <li class="nav-lis">
 64 |             <a href="index.html" class="nav-item" id="last-nav-item">CC-Campaign</a>
 65 |           </li>
 66 |         </ul>
 67 |       </div>
 68 |     </nav>
 69 |   </header>
 70 | 
 71 |   <main>
 72 | 
 73 |     <div class="hero">
 74 |       <div class="hero-text">
 75 |         <h2>"Hello! Luxury Property seekers"</h2>
 76 |         <h1>Annual Open House Event 2022</h1>
 77 |         <p class="hero-text-par">
 78 |           Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa nemo consequuntur sapiente nam, sint asperiores
 79 |           vitae, ad adipisci doloremque voluptas sit exercitationem voluptates odio voluptatibus incidunt? Suscipit ex
 80 |           pariatur cum.
 81 |           Vitae recusandae, esse quaerat, molestias omnis distinctio cum unde tenetur nulla pariatur quibusdam vero aut.
 82 |           Obcaecati dignissimos, quidem tenetur rerum cum doloribus. Voluptas labore, obcaecati tempora earum aperiam
 83 |           provident sed.
 84 | 
 85 |         </p>
 86 |         <div class="event-info">
 87 |           <div class="schedule-text">
 88 |             <p>Please contact us per Email for any further questions about LUX REALTY Open House 2022!</p>
 89 |             <br>
 90 |             <div class="sch-txt-eml">
 91 |               <p><strong>luxrealty@live.bs</strong></p>
 92 |               <span class="iconify right-arrow" data-icon="mdi-light:chevron-right"></span>
 93 |             </div>
 94 |           </div>
 95 |         </div>
 96 | 
 97 |       </div>
 98 |     </div>
 99 |     <span class="page-up"><a href="#header" aria-label="page-up"><span class="iconify page-up-icon"
100 |           data-icon="flat-color-icons:upload"></span></a></span>
101 | 
102 |   <section class="logo-information">
103 |     <h3>Lux Realty</h3> <br>
104 |     <h3>Open House Logo</h3>
105 |     <div class="underline"></div>
106 |     <p class="logo-information-p">The logo of Lux Realty Open House 2022 was decided through the logo competition from 10. August to 11. September.</p>
107 |     <div class="about-logo-big">
108 |       <img src="./images/logo.jpg" alt="Logo" class="logo Abt-logo">
109 |       <div class="logo-date-info">
110 |       <hr>
111 |       <span class="small">30-31st April 2022 | Nassau, Bahamas</span>
112 |       <hr>
113 |     </div>
114 |     </div>
115 |   </section>
116 |   </main>
117 | 
118 |   <section class="past-events">
119 |     <h3>See the past Annual Open House Events</h3>
120 |     <div class="underline"></div>
121 |     <p>Take a look at the last two Lux Realty events which took place in Barbados and Antigua.</p>
122 | 
123 |     <div class="past-events-con">
124 |       <div class="event e1">
125 |         <img src="./images/Barbados-lux.png" alt="Barbodos Open House" class="e1img">
126 |         <div class="pastECon">
127 |           <p class="year">2021</p>
128 |           <p class="event-par">Annual Open House 2021 in Barbados</p>
129 |         </div>
130 |       </div>
131 |       <div class="event e2">
132 |         <img src="./images/Antigua-lux.jpg" alt="Antigua Open House" class="e1img">
133 |         <div class="pastECon">
134 |           <p class="year">2020</p>
135 |           <p class="event-par">Annual Open House 2020 in Antigua</p>
136 |         </div>
137 |       </div>
138 |     </div>
139 | 
140 |   </section>
141 | 
142 |   <section class="partners">
143 |     <div class="program-title">
144 |       <h2>Partners</h2>
145 |       <div class="underline"></div>
146 |     </div>
147 |     <div class="all-partners">
148 |       <div class="each-partner c21">
149 |         <h3>Century</h3>
150 |         <h3>21</h3>
151 |       </div>
152 |       <div class="each-partner google">
153 |         <h3>Google</h3>
154 |       </div>
155 |       <div class="each-partner fg">
156 |         <h3>Family Guardian</h3>
157 |       </div>
158 |       <div class="each-partner bhhs">
159 |         <h3>Berkshire Hathaway</h3>
160 |         <h3>HomeServices</h3>
161 |       </div>
162 |       <div class="each-partner airbnb">
163 |         <span class="airbnb-i"><i class="fab fa-airbnb"></i></span>
164 |         <h3>airbnb</h3>
165 |       </div>
166 |     </div>
167 |   </section>
168 | 
169 |   <footer class="footer about-foot">
170 |     <div class="footer-logo">
171 |       <div class="logo">
172 |         <img class="logo-img" src="./images/logo.jpg" alt="Logo">
173 |         <div class="logo-text footer-logo-text">
174 |           <span class="about-foot1">LUX REALTY</span>
175 |         </div>
176 |       </div>
177 |     </div>
178 |     <div class="footer-text">
179 |       <p class="home-foot about-foot1">2022 Lux Realty Open House. All Rights Reserved</p>
180 |       <p class="home-foot about-foot1">For any copyright violation, please contact on the following email address: stevewdamesjr@gmail.com.
181 |       </p>
182 |     </div>
183 |   </footer>
184 |   <script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
185 |   <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-a11y="true"></script>
186 |   <script src="./JS/about.js" async></script>
187 | </body>
188 | 
189 | </html>


--------------------------------------------------------------------------------
/app.css:
--------------------------------------------------------------------------------
   1 | :root {
   2 |   --font-family: lato, 'sans-serif';
   3 |   --transition: all 0.3s linear;
   4 |   --spacing: 0.25rem;
   5 |   --radius: 0.5rem;
   6 |   --black-gray: #272a31;
   7 |   --carmine-pink: rgb(236, 82, 66);
   8 |   --grey: #d3d3d3;
   9 |   --black: #272a31;
  10 |   --white: #fff;
  11 |   --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  12 |   --yellowgreen: #6db943;
  13 |   --brilgreen: rgb(216, 255, 192);
  14 |   --lighter-grey: #102a42;
  15 |   --darker-grey: #617d98;
  16 |   --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  17 | }
  18 | 
  19 | * {
  20 |   margin: 0;
  21 |   padding: 0;
  22 |   box-sizing: border-box;
  23 |   scroll-behavior: smooth;
  24 | }
  25 | 
  26 | body {
  27 |   font-family: var(--font-family);
  28 |   background: var(--white);
  29 |   color: var(--lighter-grey);
  30 |   line-height: 1.5;
  31 |   font-size: 0.875rem;
  32 | }
  33 | 
  34 | ul {
  35 |   list-style-type: none;
  36 | }
  37 | 
  38 | a {
  39 |   text-decoration: none;
  40 |   color: inherit;
  41 | }
  42 | 
  43 | h4,
  44 | h3,
  45 | h2,
  46 | h1 {
  47 |   margin-bottom: 0.75rem;
  48 |   line-height: 1.25;
  49 |   letter-spacing: var(--spacing);
  50 | }
  51 | 
  52 | h1 {
  53 |   font-size: 3rem;
  54 | }
  55 | 
  56 | h2 {
  57 |   font-size: 2rem;
  58 | }
  59 | 
  60 | h3 {
  61 |   font-size: 1.25rem;
  62 | }
  63 | 
  64 | h4 {
  65 |   font-size: 0.875rem;
  66 | }
  67 | 
  68 | p {
  69 |   margin-bottom: 1.25rem;
  70 |   color: var(--black);
  71 | }
  72 | 
  73 | .hidden {
  74 |   display: none;
  75 | }
  76 | 
  77 | .btn {
  78 |   width: fit-content;
  79 |   width: -moz-fit-content;
  80 |   padding: 1.5rem;
  81 |   border: 3px solid var(--carmine-pink);
  82 |   font-size: 1.2rem;
  83 |   color: var(--white);
  84 |   display: block;
  85 |   background-color: var(--carmine-pink);
  86 |   margin-left: auto;
  87 |   margin-right: auto;
  88 |   margin-top: 2rem;
  89 |   margin-bottom: 1rem;
  90 | }
  91 | 
  92 | .svg-inline--fa.fa-w-14 {
  93 |   width: 1.875em;
  94 | }
  95 | 
  96 | .header {
  97 |   padding-top: 1.5rem;
  98 | }
  99 | 
 100 | .logo {
 101 |   display: flex;
 102 |   justify-content: center;
 103 |   align-items: center;
 104 |   gap: 0.5rem;
 105 |   color: var(--lighter-grey);
 106 |   padding: 0;
 107 |   background: transparent;
 108 |   cursor: pointer;
 109 | }
 110 | 
 111 | .logo-img {
 112 |   height: 4rem;
 113 |   width: 4rem;
 114 |   padding-left: 0.5rem;
 115 | }
 116 | 
 117 | .logo span {
 118 |   font-size: 1.2rem;
 119 |   font-weight: 600;
 120 | }
 121 | 
 122 | .navbar {
 123 |   position: fixed;
 124 |   top: 0;
 125 |   left: 0;
 126 |   width: 100%;
 127 |   z-index: 15;
 128 | }
 129 | 
 130 | .nav1 {
 131 |   display: none;
 132 |   padding: 5px 5rem;
 133 |   background-color: var(--black);
 134 |   color: var(--white);
 135 | }
 136 | 
 137 | .nav1-items {
 138 |   width: 90%;
 139 |   display: flex;
 140 |   justify-content: flex-end;
 141 | }
 142 | 
 143 | .nav1-icons {
 144 |   display: inline-block;
 145 |   padding: 0 1rem;
 146 |   cursor: pointer;
 147 | }
 148 | 
 149 | .nav2 {
 150 |   padding: 0.5rem;
 151 |   width: 100%;
 152 |   margin: 0 auto;
 153 |   background: var(--white);
 154 | }
 155 | 
 156 | .nav-head-sec {
 157 |   display: flex;
 158 |   justify-content: space-between;
 159 |   align-items: center;
 160 |   background: var(--white);
 161 | }
 162 | 
 163 | .nav-toggle {
 164 |   background-color: transparent;
 165 |   border: transparent;
 166 |   font-size: 1.5rem;
 167 |   cursor: pointer;
 168 |   transition: var(--transition);
 169 | }
 170 | 
 171 | .nav-toggle:hover {
 172 |   transform: rotate(180deg);
 173 | }
 174 | 
 175 | .nav-menu {
 176 |   height: 0;
 177 |   overflow: hidden;
 178 |   text-align: center;
 179 |   align-items: center;
 180 |   background-color: transparent;
 181 |   gap: 3rem;
 182 | }
 183 | 
 184 | .show-links {
 185 |   position: absolute;
 186 |   top: 0;
 187 |   left: 0;
 188 |   bottom: 0;
 189 |   right: 0;
 190 |   height: 100vh;
 191 |   backdrop-filter: blur(6px);
 192 |   -webkit-backdrop-filter: blur(6px);
 193 |   padding-top: 1.5rem;
 194 |   background-color: rgb(236, 82, 66, 0.2);
 195 |   transition: 0.3s;
 196 | }
 197 | 
 198 | .nav-link {
 199 |   font-family: sans-serif;
 200 |   display: block;
 201 |   padding: 1rem 1.5rem;
 202 |   text-transform: capitalize;
 203 |   font-size: 1.5rem;
 204 |   letter-spacing: var(--spacing);
 205 |   transition: var(--transition);
 206 |   cursor: pointer;
 207 |   font-weight: 1000;
 208 |   color: var(--black);
 209 | }
 210 | 
 211 | .nav-link-btn {
 212 |   display: none;
 213 | }
 214 | 
 215 | #last-nav-item {
 216 |   border: 2px solid var(--carmine-pink);
 217 |   padding: 0.5rem;
 218 | }
 219 | 
 220 | .active {
 221 |   color: var(--carmine-pink);
 222 | }
 223 | 
 224 | #close-btn {
 225 |   background: transparent;
 226 |   border: none;
 227 |   font-size: 3rem;
 228 |   position: absolute;
 229 |   top: 0;
 230 |   left: 90%;
 231 |   cursor: pointer;
 232 | }
 233 | 
 234 | .hero {
 235 |   margin-top: 0;
 236 |   display: flex;
 237 |   padding: 0 1rem;
 238 |   margin-bottom: 0;
 239 |   background:
 240 |     linear-gradient(
 241 |       rgba(249, 249, 249, 0.8),
 242 |       rgba(255, 255, 255, 0.9)
 243 |     ),
 244 |     url(./images/cap-background.jpg) center/cover no-repeat;
 245 |   padding-top: 2rem;
 246 | }
 247 | 
 248 | .hero-text {
 249 |   margin-top: 20%;
 250 | }
 251 | 
 252 | .hero-text h2 {
 253 |   font-family: sans-serif;
 254 |   color: var(--carmine-pink);
 255 | }
 256 | 
 257 | /* stylelint-disable */
 258 | .hero-text h1 {
 259 |   background-image: url(./images/orange-globe.png);
 260 |   background-size: cover;
 261 |   background-position: center;
 262 |   -webkit-background-clip: text;
 263 |   background-clip: text;
 264 |   color: rgb(236, 82, 66, 0.6);
 265 |   margin-top: 1rem;
 266 | }
 267 | 
 268 | /* stylelint-enable */
 269 | 
 270 | .hero-text-par {
 271 |   color: var(--black);
 272 |   border: 3px solid rgb(216, 255, 192);
 273 |   padding: 1rem;
 274 |   background: var(--white);
 275 | }
 276 | 
 277 | #start-date {
 278 |   color: var(--black);
 279 |   font-weight: 600;
 280 |   font-size: 1.75rem;
 281 |   margin: 1rem 0;
 282 | }
 283 | 
 284 | .hero-text h3 {
 285 |   font-size: 1rem;
 286 |   margin: 1rem 0;
 287 |   color: var(--black);
 288 |   font-weight: normal;
 289 | }
 290 | 
 291 | .schedule-text {
 292 |   color: var(--black);
 293 |   text-align: center;
 294 | }
 295 | 
 296 | .date-con {
 297 |   margin: auto;
 298 |   margin-top: 1rem;
 299 |   margin-bottom: 3rem;
 300 | }
 301 | 
 302 | .date-con td {
 303 |   color: var(--black);
 304 |   font-family: sans-serif;
 305 |   padding: 0.5rem;
 306 |   text-align: center;
 307 |   font-weight: 600;
 308 | }
 309 | 
 310 | #date-con-title {
 311 |   color: var(--carmine-pink);
 312 | }
 313 | 
 314 | .page-up {
 315 |   font-size: 1.2rem;
 316 |   padding: 0.5rem 1rem;
 317 |   border: 1px solid #6db943;
 318 |   border-radius: 44%;
 319 |   background: url(./images/logo.jpg) center/cover no-repeat;
 320 |   position: fixed;
 321 |   left: 75%;
 322 |   bottom: 10%;
 323 |   color: var(--white);
 324 |   z-index: 5;
 325 | }
 326 | 
 327 | .page-up-icon {
 328 |   padding-bottom: 57%;
 329 | }
 330 | 
 331 | .fa-long-arrow-alt-up {
 332 |   margin: 0.75rem;
 333 |   cursor: pointer;
 334 | }
 335 | 
 336 | .programs {
 337 |   background-image: url(./images/diamond.jpg);
 338 |   background-repeat: no-repeat;
 339 |   background-position: center;
 340 |   background-size: cover;
 341 |   padding: 3rem 1rem;
 342 |   opacity: 0.9;
 343 | }
 344 | 
 345 | .program-title {
 346 |   padding-top: 2rem;
 347 |   text-align: center;
 348 |   color: var(--black);
 349 |   margin-bottom: 2rem;
 350 | }
 351 | 
 352 | .Feat-Spkrs {
 353 |   color: var(--black);
 354 | }
 355 | 
 356 | .Main-Pro {
 357 |   color: var(--white);
 358 | }
 359 | 
 360 | .underline {
 361 |   width: 10rem;
 362 |   height: 3px;
 363 |   background-color: var(--carmine-pink);
 364 |   margin: 1rem auto;
 365 | }
 366 | 
 367 | .icon-img {
 368 |   width: 2rem;
 369 |   height: 2rem;
 370 |   margin-right: 1rem;
 371 |   display: block;
 372 | }
 373 | 
 374 | .one-program {
 375 |   text-align: center;
 376 |   display: flex;
 377 |   justify-content: space-around;
 378 |   align-items: center;
 379 |   background: rgb(0, 0, 0, 0.6);
 380 |   margin-bottom: 1rem;
 381 |   padding: 1rem 0.5rem;
 382 | }
 383 | 
 384 | .one-program p {
 385 |   color: var(--white);
 386 |   margin: 0;
 387 | }
 388 | 
 389 | .one-program h4 {
 390 |   font-size: 0.75rem;
 391 |   margin: 0;
 392 |   margin-right: 1rem;
 393 |   color: var(--carmine-pink);
 394 | }
 395 | 
 396 | .more-info {
 397 |   display: none;
 398 | }
 399 | 
 400 | .join-btn {
 401 |   padding: 1rem;
 402 |   background-color: var(--carmine-pink);
 403 |   margin: 0 auto;
 404 |   margin-top: 1rem;
 405 |   color: var(--white);
 406 |   -webkit-transition: var(--transition);
 407 |   -moz-transition: var(--transition);
 408 |   -ms-transition: var(--transition);
 409 |   -o-transition: var(--transition);
 410 |   transition: var(--transition);
 411 | }
 412 | 
 413 | .join-btn:hover {
 414 |   background: transparent;
 415 | }
 416 | 
 417 | .speakers {
 418 |   padding: 5rem 0.5rem;
 419 |   padding-left: 1.7rem;
 420 | }
 421 | 
 422 | .each-speaker {
 423 |   display: flex;
 424 |   gap: 1rem;
 425 |   align-items: center;
 426 |   margin: 2rem auto;
 427 | }
 428 | 
 429 | .speaker-img {
 430 |   display: block;
 431 |   position: relative;
 432 |   width: 8rem;
 433 |   height: 7rem;
 434 | }
 435 | 
 436 | .speaker-img::before {
 437 |   position: absolute;
 438 |   width: 65%;
 439 |   height: 60%;
 440 |   border: 0.25rem solid var(--carmine-pink);
 441 |   top: -1.4rem;
 442 |   right: 3.4rem;
 443 |   background: url(./images/checkered.png);
 444 |   background-color: rgb(0, 0, 0, 0.1);
 445 |   -webkit-border-radius: 8px;
 446 |   -moz-border-radius: 8px;
 447 |   -ms-border-radius: 8px;
 448 |   -o-border-radius: 8px;
 449 |   border-radius: 8px;
 450 |   content: '';
 451 | }
 452 | 
 453 | .speaker-photo {
 454 |   width: 8rem;
 455 |   height: 7rem;
 456 |   position: relative;
 457 |   /* stylelint-disable-next-line csstree/validator */
 458 |   object-fit: center;
 459 |   -webkit-border-radius: 8px;
 460 |   -moz-border-radius: 8px;
 461 |   -ms-border-radius: 8px;
 462 |   -o-border-radius: 8px;
 463 |   border-radius: 8px;
 464 | }
 465 | 
 466 | .speaker-text h3 {
 467 |   color: var(--lighter-grey);
 468 | }
 469 | 
 470 | .italic {
 471 |   display: block;
 472 |   color: var(--carmine-pink);
 473 |   margin-bottom: 1rem;
 474 |   font-style: italic;
 475 | }
 476 | 
 477 | .underline-small {
 478 |   width: 4rem;
 479 |   height: 4px;
 480 |   background-color: grey;
 481 |   margin-bottom: 0.5rem;
 482 | }
 483 | 
 484 | .load-more {
 485 |   background: var(--white);
 486 |   color: var(--lighter-grey);
 487 |   margin: 0 auto;
 488 |   cursor: pointer;
 489 |   transition: var(--transition);
 490 |   width: 85%;
 491 |   padding: 1rem 3rem;
 492 |   border: 2px solid var(--grey);
 493 |   -webkit-transition: var(--transition);
 494 |   -moz-transition: var(--transition);
 495 |   -ms-transition: var(--transition);
 496 |   -o-transition: var(--transition);
 497 | }
 498 | 
 499 | .load-more:hover {
 500 |   background: rgb(236, 82, 66, 0.9);
 501 |   color: var(--white);
 502 |   transform: translateY(-3px);
 503 |   -webkit-transform: translateY(-3px);
 504 |   -moz-transform: translateY(-3px);
 505 |   -ms-transform: translateY(-3px);
 506 |   -o-transform: translateY(-3px);
 507 | }
 508 | 
 509 | .load-more span {
 510 |   margin-left: 1rem;
 511 | }
 512 | 
 513 | .fa-angle-down {
 514 |   color: var(--carmine-pink);
 515 | }
 516 | 
 517 | .fa-angle-down:hover {
 518 |   color: var(--white);
 519 | }
 520 | 
 521 | .partners {
 522 |   width: 100%;
 523 |   background: rgba(0, 0, 0, 0.7);
 524 |   position: relative;
 525 |   padding: 3rem 1rem;
 526 |   color: grey;
 527 | }
 528 | 
 529 | .partners .program-title h2 {
 530 |   color: grey;
 531 | }
 532 | 
 533 | .all-partners {
 534 |   display: flex;
 535 |   gap: 1rem;
 536 |   justify-content: center;
 537 |   flex-wrap: wrap;
 538 | }
 539 | 
 540 | .c21 {
 541 |   display: flex;
 542 |   flex-direction: column;
 543 |   justify-content: center;
 544 |   align-items: center;
 545 | }
 546 | 
 547 | .c21 h3 {
 548 |   font-family: Playfair, serif;
 549 |   letter-spacing: 5px;
 550 |   margin-bottom: 0;
 551 |   padding-top: 0;
 552 | }
 553 | 
 554 | .google {
 555 |   display: flex;
 556 |   align-items: center;
 557 | }
 558 | 
 559 | .google h3 {
 560 |   font-family: Helvetica, sans-serif;
 561 |   letter-spacing: 5px;
 562 |   text-transform: capitalize;
 563 | }
 564 | 
 565 | .fg {
 566 |   display: flex;
 567 |   align-items: center;
 568 |   position: relative;
 569 |   margin-right: 1rem;
 570 | }
 571 | 
 572 | .fg h3 {
 573 |   font-family: Helvetica Rounded, sans-serif;
 574 | }
 575 | 
 576 | .bhhs {
 577 |   display: flex;
 578 |   align-items: center;
 579 |   flex-direction: column;
 580 | }
 581 | 
 582 | .bhhs h3 {
 583 |   font-style: italic;
 584 |   margin-bottom: 0;
 585 | }
 586 | 
 587 | .airbnb {
 588 |   display: flex;
 589 |   justify-content: center;
 590 |   align-items: center;
 591 | }
 592 | 
 593 | .airbnb-i {
 594 |   display: inline-block;
 595 |   font-size: 3rem;
 596 |   padding: 0;
 597 |   margin: 0;
 598 | }
 599 | 
 600 | .airbnb h3 {
 601 |   margin-left: 0.5rem;
 602 |   align-self: center;
 603 | }
 604 | 
 605 | .partners::after {
 606 |   position: absolute;
 607 |   content: '';
 608 |   top: 0;
 609 |   left: 0;
 610 |   right: 0;
 611 |   bottom: 0;
 612 |   background: rgb(0, 0, 0, 0.3);
 613 | }
 614 | 
 615 | .footer {
 616 |   display: flex;
 617 |   justify-content: center;
 618 |   align-items: center;
 619 |   gap: 1rem;
 620 |   padding-top: 1rem;
 621 | }
 622 | 
 623 | .about-hero-text h1 {
 624 |   color: var(--carmine-pink);
 625 |   text-align: center;
 626 | }
 627 | 
 628 | #hero-text-par {
 629 |   margin: 2rem auto;
 630 |   padding: 2rem;
 631 |   border: 2px solid white;
 632 |   color: var(--black);
 633 |   background: var(--white);
 634 | }
 635 | 
 636 | .about-information {
 637 |   margin-top: 2rem;
 638 |   margin-bottom: 5rem;
 639 | }
 640 | 
 641 | .about-info-text {
 642 |   padding: 1rem;
 643 | }
 644 | 
 645 | .about-info-text p {
 646 |   text-align: center;
 647 |   margin: auto;
 648 |   color: var(--black);
 649 |   font-size: 1rem;
 650 | }
 651 | 
 652 | .about-info-text .underline {
 653 |   height: 1px;
 654 |   margin-top: 1px;
 655 |   width: 12rem;
 656 | }
 657 | 
 658 | .logo-information {
 659 |   color: var(--black);
 660 |   padding: 1rem;
 661 |   text-align: center;
 662 |   border-bottom: 1px solid var(--darker-grey);
 663 | }
 664 | 
 665 | .logo-information h3 {
 666 |   padding: 1.5rem;
 667 |   padding-bottom: 0;
 668 | }
 669 | 
 670 | .small-underline {
 671 |   width: 4rem;
 672 |   height: 2px;
 673 |   background-color: var(--carmine-pink);
 674 |   margin: auto;
 675 |   margin-bottom: 1.5rem;
 676 | }
 677 | 
 678 | .logo-information-p {
 679 |   margin-bottom: 2rem;
 680 |   font-weight: 600;
 681 | }
 682 | 
 683 | .hide-later {
 684 |   display: none;
 685 | }
 686 | 
 687 | .logo-information .logo {
 688 |   cursor: default;
 689 | }
 690 | 
 691 | .about-logo-big img {
 692 |   width: 50%;
 693 |   margin-right: auto;
 694 |   margin-left: auto;
 695 | }
 696 | 
 697 | .logo-information .logo img {
 698 |   width: 8rem;
 699 |   height: 8rem;
 700 | }
 701 | 
 702 | .logo-information .logo .logo-text span {
 703 |   font-size: 2.5rem;
 704 | }
 705 | 
 706 | .small {
 707 |   display: block;
 708 |   font-size: 10px;
 709 | }
 710 | 
 711 | .logo-information hr {
 712 |   margin: auto;
 713 |   height: 2px;
 714 |   width: 11rem;
 715 | }
 716 | 
 717 | .about-logo-big {
 718 |   width: fit-content;
 719 |   padding: 1rem 5rem;
 720 |   border: 1px solid var(--darker-grey);
 721 |   margin: 4rem auto;
 722 | }
 723 | 
 724 | .past-events {
 725 |   padding: 3rem 1rem;
 726 |   text-align: center;
 727 | }
 728 | 
 729 | .past-events p {
 730 |   color: var(--white);
 731 | }
 732 | 
 733 | .about-cards {
 734 |   display: flex;
 735 |   flex-direction: column;
 736 |   justify-content: center;
 737 |   align-items: center;
 738 |   gap: 3rem;
 739 |   margin-top: 3rem;
 740 | }
 741 | 
 742 | .about-footer {
 743 |   padding: 3rem;
 744 |   background-color: var(--white);
 745 |   display: flex;
 746 |   justify-content: center;
 747 |   align-items: center;
 748 |   gap: 1rem;
 749 | }
 750 | 
 751 | .about-footer .logo {
 752 |   cursor: default;
 753 | }
 754 | 
 755 | .about-footer .logo-img {
 756 |   width: 3rem;
 757 |   height: 3rem;
 758 | }
 759 | 
 760 | /* stylelint-disable */
 761 | .about-footer .logo-text-about span {
 762 |   font-size: 1rem;
 763 |   color: var(--lighter-grey);
 764 | }
 765 | 
 766 | /* stylelint-enable */
 767 | 
 768 | .sch-txt-eml {
 769 |   display: flex;
 770 |   justify-content: center;
 771 |   gap: 0.5rem;
 772 |   cursor: pointer;
 773 | }
 774 | 
 775 | .sch-txt-eml p {
 776 |   font-size: 1rem;
 777 |   text-decoration: underline;
 778 | }
 779 | 
 780 | .right-arrow {
 781 |   display: none;
 782 | }
 783 | 
 784 | .past-events-con {
 785 |   display: flex;
 786 |   flex-direction: column;
 787 |   gap: 2.1rem;
 788 | }
 789 | 
 790 | .event {
 791 |   width: 100%;
 792 |   height: 33vh;
 793 |   border: 1px solid var(--darker-grey);
 794 |   background: var(--carmine-pink);
 795 |   cursor: pointer;
 796 | }
 797 | 
 798 | .event:hover {
 799 |   transition: var(--transition);
 800 |   border: 2px solid var(--dark-shadow);
 801 | }
 802 | 
 803 | .e1img {
 804 |   width: 100%;
 805 |   height: 100%;
 806 |   opacity: 0.5;
 807 | }
 808 | 
 809 | .year {
 810 |   margin-top: -161px;
 811 |   font-size: 2.5em;
 812 |   margin-bottom: 0;
 813 | }
 814 | 
 815 | .event-par {
 816 |   font-size: 1.2em;
 817 | }
 818 | 
 819 | .about-foot {
 820 |   background: var(--black);
 821 | }
 822 | 
 823 | .home-foot {
 824 |   color: black;
 825 | }
 826 | 
 827 | .about-foot1 {
 828 |   color: white;
 829 | }
 830 | 
 831 | .about-footer-text p {
 832 |   color: var(--lighter-grey);
 833 |   margin-bottom: 0;
 834 | }
 835 | 
 836 | @media screen and (min-width: 768px) {
 837 |   h2 {
 838 |     font-size: 2.5rem;
 839 |   }
 840 | 
 841 |   h3 {
 842 |     font-size: 1.75rem;
 843 |   }
 844 | 
 845 |   h4 {
 846 |     font-size: 1.5rem;
 847 |   }
 848 | 
 849 |   body {
 850 |     font-size: 1.2rem;
 851 |   }
 852 | 
 853 |   h4,
 854 |   h3,
 855 |   h2,
 856 |   h1 {
 857 |     line-height: 1;
 858 |   }
 859 | }
 860 | 
 861 | @media screen and (min-width: 768px) {
 862 |   .navbar {
 863 |     background-color: var(--white);
 864 |   }
 865 | 
 866 |   .nav1 {
 867 |     display: block;
 868 |   }
 869 | 
 870 |   .nav2 {
 871 |     width: 90%;
 872 |     display: flex;
 873 |     justify-content: space-between;
 874 |     padding: 0.5rem 5rem;
 875 |     flex-wrap: wrap;
 876 |   }
 877 | 
 878 |   .nav-toggle {
 879 |     display: none;
 880 |   }
 881 | 
 882 |   .nav-link {
 883 |     font-family: var(--font-family);
 884 |     font-size: 1rem;
 885 |     display: inline-block;
 886 |     margin-right: 0.7rem;
 887 |     padding: 1rem;
 888 |   }
 889 | 
 890 |   .nav-menu {
 891 |     padding-top: 0;
 892 |     height: auto;
 893 |     display: flex;
 894 |   }
 895 | 
 896 |   /* stylelint-disable */
 897 |   .nav-link:hover {
 898 |     padding: inherit 0;
 899 |   }
 900 | 
 901 |   /* stylelint-enable */
 902 |   #close-btn {
 903 |     display: none;
 904 |   }
 905 | }
 906 | 
 907 | @media screen and (min-width: 768px) {
 908 |   .hero-text {
 909 |     width: 70%;
 910 |     margin: 0 auto;
 911 |     margin-top: 10%;
 912 |   }
 913 | 
 914 |   .hero-text h1 {
 915 |     font-family: sans-serif;
 916 |     font-size: 4rem;
 917 |     font-weight: 1000;
 918 |   }
 919 | 
 920 |   .hero-text p {
 921 |     max-width: 50%;
 922 |   }
 923 | 
 924 |   .start-date {
 925 |     margin-top: 3rem;
 926 |     font-weight: 400;
 927 |     font-size: 1.8rem;
 928 |   }
 929 | 
 930 |   .hero-text h3 {
 931 |     font-size: 1.8rem;
 932 |   }
 933 | 
 934 |   .event-info {
 935 |     display: flex;
 936 |     gap: 4rem;
 937 |     align-items: center;
 938 |   }
 939 | 
 940 |   .date-con {
 941 |     margin-top: 0;
 942 |     margin-bottom: 0;
 943 |   }
 944 | 
 945 |   .date-con td {
 946 |     padding: 1rem;
 947 |     text-align: center;
 948 |   }
 949 | 
 950 |   .page-up {
 951 |     padding: 1rem 1.5rem;
 952 |     left: 12%;
 953 |   }
 954 | 
 955 |   .fa-long-arrow-alt-up {
 956 |     margin: 1rem;
 957 |   }
 958 | }
 959 | 
 960 | @media screen and (min-width: 768px) {
 961 |   .all-programs {
 962 |     display: flex;
 963 |     justify-content: center;
 964 |     gap: 0.2rem;
 965 |     flex-wrap: wrap;
 966 |   }
 967 | 
 968 |   .one-program {
 969 |     display: flex;
 970 |     flex-direction: column;
 971 |     justify-content: center;
 972 |     align-items: center;
 973 |     padding: 1rem 0.5rem;
 974 |     width: 16rem;
 975 |     height: 20rem;
 976 |     -o-transition: var(--transition);
 977 |     -webkit-transition: var(--transition);
 978 |     -moz-transition: var(--transition);
 979 |     -ms-transition: var(--transition);
 980 |     transition: var(--transition);
 981 |   }
 982 | 
 983 |   .one-program:hover {
 984 |     -webkit-transform: translateY(-5px);
 985 |     -moz-transform: translateY(-5px);
 986 |     -ms-transform: translateY(-5px);
 987 |     -o-transform: translateY(-5px);
 988 |     transform: translateY(-5px);
 989 |     border: 2px solid white;
 990 |     box-shadow: var(--dark-shadow);
 991 |   }
 992 | 
 993 |   .icon-img {
 994 |     width: 4.5rem;
 995 |     height: 4.5rem;
 996 |     margin: 0 auto;
 997 |   }
 998 | 
 999 |   .one-program h4 {
1000 |     font-size: 1.5rem;
1001 |     color: var(--carmine-pink);
1002 |     margin: 1rem auto;
1003 |   }
1004 | 
1005 |   .one-program p {
1006 |     color: var(--white);
1007 |     margin: 1rem auto;
1008 |   }
1009 | 
1010 |   .more-info {
1011 |     display: block;
1012 |     text-align: center;
1013 |     padding: 2rem;
1014 |   }
1015 | 
1016 |   .more-info h3 a {
1017 |     color: var(--white);
1018 |   }
1019 | 
1020 |   .more-info hr {
1021 |     max-width: 28rem;
1022 |     margin: 0 auto;
1023 |   }
1024 | 
1025 |   .join-div {
1026 |     display: none;
1027 |   }
1028 | }
1029 | 
1030 | @media screen and (min-width: 768px) {
1031 |   .speakers {
1032 |     padding: 5rem 2rem;
1033 |   }
1034 | 
1035 |   .featured-speakers {
1036 |     display: grid;
1037 |     grid-template-columns: repeat(2, 1fr);
1038 |     gap: 4rem;
1039 |     margin-top: 3rem;
1040 |   }
1041 | 
1042 |   .each-speaker {
1043 |     max-width: 100%;
1044 |     gap: 2rem;
1045 |   }
1046 | 
1047 |   .speaker-photo {
1048 |     width: 10rem;
1049 |     height: 10rem;
1050 |     -webkit-border-radius: 8px;
1051 |     -moz-border-radius: 8px;
1052 |     -ms-border-radius: 8px;
1053 |     -o-border-radius: 8px;
1054 |     border-radius: 8px;
1055 |   }
1056 | 
1057 |   .speaker-img {
1058 |     display: block;
1059 |     position: relative;
1060 |     width: 10rem;
1061 |     height: 10rem;
1062 |   }
1063 | 
1064 |   .speaker-img::before {
1065 |     content: '';
1066 |     position: absolute;
1067 |     width: 65%;
1068 |     height: 60%;
1069 |     border: 0.25rem solid var(--carmine-pink);
1070 |     top: -1.5rem;
1071 |     right: 5rem;
1072 |     background-color: rgb(0, 0, 0, 0.1);
1073 |     -webkit-border-radius: 8px;
1074 |     -moz-border-radius: 8px;
1075 |     -ms-border-radius: 8px;
1076 |     -o-border-radius: 8px;
1077 |     border-radius: 8px;
1078 |   }
1079 | 
1080 |   .load-more {
1081 |     max-width: 40%;
1082 |   }
1083 | }
1084 | 
1085 | @media (min-width: 768px) {
1086 |   .partners {
1087 |     padding: 5rem;
1088 |   }
1089 | 
1090 |   .all-partners {
1091 |     display: flex;
1092 |     gap: 3rem;
1093 |     justify-content: center;
1094 |     flex-wrap: nowrap;
1095 |   }
1096 | 
1097 |   .fg-i {
1098 |     font-size: 3rem;
1099 |     position: absolute;
1100 |     left: 4.5rem;
1101 |     top: -1rem;
1102 |   }
1103 | 
1104 |   .partners .program-title {
1105 |     margin-bottom: 4rem;
1106 |   }
1107 | }
1108 | 
1109 | @media (min-width: 768px) {
1110 |   .footer {
1111 |     padding: 3rem;
1112 |     background-color: var(--white);
1113 |     color: var(--black);
1114 |     display: flex;
1115 |     justify-content: center;
1116 |     align-items: center;
1117 |     gap: 3rem;
1118 |   }
1119 | 
1120 |   .footer .logo-img {
1121 |     width: 8rem;
1122 |     height: 8rem;
1123 |   }
1124 | 
1125 |   .footer .logo-text span {
1126 |     font-size: 2rem;
1127 |   }
1128 | }
1129 | 
1130 | @media (min-width: 768px) {
1131 |   .logo-information {
1132 |     padding: 8rem;
1133 |   }
1134 | 
1135 |   #hero-text-par {
1136 |     max-width: 85%;
1137 |   }
1138 | 
1139 |   .about-hero-text h1 {
1140 |     margin: auto;
1141 |     max-width: 70%;
1142 |   }
1143 | 
1144 |   .logo-information h3 {
1145 |     font-size: 2rem;
1146 |   }
1147 | 
1148 |   .logo-information-p {
1149 |     font-weight: normal;
1150 |     max-width: 70%;
1151 |     margin: auto;
1152 |     margin-bottom: 3.5rem;
1153 |   }
1154 | 
1155 |   .hide-later {
1156 |     display: inline;
1157 |   }
1158 | 
1159 |   .about-logo-big {
1160 |     padding: 2rem 10rem;
1161 |     border: 1px solid var(--darker-grey);
1162 |     margin: 4rem auto;
1163 |   }
1164 | 
1165 |   .about-info-text p {
1166 |     font-size: 1.2rem;
1167 |     min-width: 70%;
1168 |   }
1169 | 
1170 |   .about-info-text .underline {
1171 |     width: 14rem;
1172 |   }
1173 | }
1174 | 
1175 | @media (min-width: 768px) {
1176 |   .past-events {
1177 |     padding: 5rem 10rem;
1178 |   }
1179 | 
1180 |   .about-cards {
1181 |     flex-direction: row;
1182 |   }
1183 | 
1184 |   .about-partners {
1185 |     display: none;
1186 |   }
1187 | }
1188 | 
1189 | @media (min-width: 768px) {
1190 |   .about-footer {
1191 |     background: var(--black);
1192 |     gap: 3rem;
1193 |   }
1194 | 
1195 |   .about-footer .logo-img {
1196 |     width: 8rem;
1197 |     height: 8rem;
1198 |   }
1199 | 
1200 |   .about-footer .logo-text span {
1201 |     color: var(--brilgreen);
1202 |     font-size: 2rem;
1203 |   }
1204 | 
1205 |   .about-footer-text p {
1206 |     color: var(--brilgreen);
1207 |   }
1208 | }
1209 | 
1210 | @media (min-width: 768px) {
1211 |   .right-arrow {
1212 |     font-size: 1.5rem;
1213 |     display: inherit;
1214 |   }
1215 | 
1216 |   .hero {
1217 |     margin-top: 0;
1218 |   }
1219 | 
1220 |   .hero-text-par {
1221 |     background: var(--white);
1222 |   }
1223 | 
1224 |   .hero-text p {
1225 |     max-width: 100%;
1226 |     margin-bottom: 0;
1227 |   }
1228 | 
1229 |   .schedule-text {
1230 |     margin-right: auto;
1231 |     margin-left: auto;
1232 |     margin-top: 1rem;
1233 |     margin-bottom: 1rem;
1234 |   }
1235 | 
1236 |   .footer {
1237 |     height: 18rem;
1238 |     background-color: var(--white);
1239 |   }
1240 | 
1241 |   .about-foot {
1242 |     background: var(--black);
1243 |   }
1244 | 
1245 |   .home-foot {
1246 |     color: black;
1247 |   }
1248 | 
1249 |   .footer-logo-text {
1250 |     color: var(--black);
1251 |   }
1252 | 
1253 |   .past-events-con {
1254 |     display: flex;
1255 |     flex-direction: row;
1256 |     gap: 2rem;
1257 |   }
1258 | 
1259 |   .about-foot1 {
1260 |     color: white;
1261 |   }
1262 | }
1263 | 
1264 | @media (min-width: 982px) {
1265 |   .speakers {
1266 |     padding: 5rem;
1267 |   }
1268 | }
1269 | 


--------------------------------------------------------------------------------
/cap.code-workspace:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"folders": [
 3 |     {
 4 |       "name": "html-css-js-capstone",
 5 |       "path": "."
 6 |     }
 7 |   ],
 8 |   "settings": {
 9 |     "liveServer.settings.multiRootWorkspaceName": "html-css-js-capstone"
10 |   }
11 | }


--------------------------------------------------------------------------------
/images/Antigua-lux.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Antigua-lux.jpg


--------------------------------------------------------------------------------
/images/Barbados-lux.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Barbados-lux.png


--------------------------------------------------------------------------------
/images/Georgia-Tawley.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Georgia-Tawley.jpg


--------------------------------------------------------------------------------
/images/Graclyn-Meadows.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Graclyn-Meadows.jpg


--------------------------------------------------------------------------------
/images/Grisella-Weich.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Grisella-Weich.jpg


--------------------------------------------------------------------------------
/images/James-Thompson.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/James-Thompson.jpg


--------------------------------------------------------------------------------
/images/Jars-Landoh.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Jars-Landoh.jpg


--------------------------------------------------------------------------------
/images/Jessica-Darsey.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Jessica-Darsey.jpg


--------------------------------------------------------------------------------
/images/Josh-Burke.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Josh-Burke.jpg


--------------------------------------------------------------------------------
/images/Kevin-Pyke.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Kevin-Pyke.JPG


--------------------------------------------------------------------------------
/images/LUX-DROP-MENU-MOBILE.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/LUX-DROP-MENU-MOBILE.png


--------------------------------------------------------------------------------
/images/LUX-REALTY-MOBILE.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/LUX-REALTY-MOBILE.png


--------------------------------------------------------------------------------
/images/LUX-REALTY.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/LUX-REALTY.png


--------------------------------------------------------------------------------
/images/Melony-Atkison.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Melony-Atkison.JPG


--------------------------------------------------------------------------------
/images/Menson-King.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Menson-King.jpg


--------------------------------------------------------------------------------
/images/Mickia-Crowley.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Mickia-Crowley.JPG


--------------------------------------------------------------------------------
/images/Ricka-Stevens.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Ricka-Stevens.jpg


--------------------------------------------------------------------------------
/images/Stephanie-Phillips.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/Stephanie-Phillips.jpeg


--------------------------------------------------------------------------------
/images/cap-background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/cap-background.jpg


--------------------------------------------------------------------------------
/images/checkered.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/checkered.png


--------------------------------------------------------------------------------
/images/checkered2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/checkered2.png


--------------------------------------------------------------------------------
/images/diamond.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/diamond.jpg


--------------------------------------------------------------------------------
/images/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/logo.jpg


--------------------------------------------------------------------------------
/images/orange-globe.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/f3f25fdb4bba6e226a931a6bb6c52ad124c3816a/images/orange-globe.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <link rel="preconnect" href="https://fonts.googleapis.com">
  9 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 10 |   <link
 11 |     href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
 12 |     rel="stylesheet">
 13 |   <meta property="og:image" content="https://raw.githubusercontent.com/steveWDamesJr/html-css-js-capstone/master/images/LUX-REALTY.png">
 14 |   <link rel="stylesheet" href="app.css">
 15 |   <title>LUX REALTY</title>
 16 | </head>
 17 | 
 18 | <body>
 19 |   <header class="header" id="header"> 
 20 |     <nav class="navbar">
 21 |       <div class="nav1">
 22 |         <ul class="nav1-items">
 23 |           <li><span class="nav1-icons"><i class="fab fa-facebook"></i></span></li>
 24 |           <li><span class="nav1-icons"><i class="fab fa-twitter"></i></span></li>
 25 |           <li><span class="nav1-icons">English</span></li>
 26 |           <li><span class="nav1-icons">My Page</span></li>
 27 |           <li><span class="nav1-icons">Logout</span></li>
 28 |         </ul>
 29 |       </div>
 30 |       <div class="nav2">
 31 |         <div class="nav-head-sec">
 32 |           <button type="button" aria-label="Hamburger" class="nav-toggle" id="nav-toggle">
 33 |             <i class="fas fa-bars"></i>
 34 |           </button>
 35 |           <div class="logo" onclick="window.location='index.html';" id="logo">
 36 |             <img class="logo-img" src="./images/logo.jpg" alt="Logo">
 37 |             <div class="logo-text">
 38 |               <span>LUX REALTY</span>
 39 |             </div>
 40 |           </div>
 41 | 
 42 |         </div>
 43 |         <ul class="nav-menu" id="nav-menu">
 44 |           <li>
 45 |             <button type="button" id="close-btn" aria-label="Close" class="hidden">
 46 |               <i class="fas fa-times"></i>
 47 |             </button>
 48 |           </li>
 49 |           <li class="nav-lis">
 50 |             <a href="aboutlux.html" class="nav-item active">About</a>
 51 |           </li>
 52 |           <li class="nav-lis">
 53 |             <a href="index.html" class="nav-item">Program</a>
 54 |           </li>
 55 |           <li class="nav-lis">
 56 |             <a href="index.html" class="nav-item">Join</a>
 57 |           </li>
 58 |           <li class="nav-lis">
 59 |             <a href="index.html" class="nav-item">Sponsor</a>
 60 |           </li>
 61 |           <li class="nav-lis">
 62 |             <a href="index.html" class="nav-item">News</a>
 63 |           </li>
 64 |           <li class="nav-lis">
 65 |             <a href="index.html" class="nav-item" id="last-nav-item" >CC-Campaign</a>
 66 |           </li>
 67 |         </ul>
 68 |       </div>
 69 |     </nav>
 70 |   </header>
 71 | 
 72 |   <main>
 73 | 
 74 |     <div class="hero">
 75 |       <div class="hero-text">
 76 |         <h2>"Hello! Luxury Property seekers"</h2>
 77 |         <h1>Annual Open House Event 2022</h1>
 78 |         <p class="hero-text-par">
 79 |           Real Estate Dreams become reality this spring with a selection of homes and property to satisfy even the most
 80 |           demanding and exquisite tastes. We don't just sell property, we ensure that every property is specifically
 81 |           tailored to the exacting requirements of our clientele. Whatever your treasure, you are bound to find it with
 82 |           us. See you there; it's bound to be the best decision you've ever made for generations to come!
 83 |         </p>
 84 |         <div class="event-info">
 85 |           <div class="schedule-text">
 86 |             <h2 id="start-date">04.30.2022(SAT) ~ 31(SUN) 8 AM ~ 4 PM</h2>
 87 |             <h3>@Luxhome Cay, Nassau, Bahamas</h3>
 88 |           </div>
 89 | 
 90 |           <table class="date-con">
 91 |             <tr>
 92 |               <td id="date-con-title" colspan="4">Countdown To Your Event:</td>
 93 |             </tr>
 94 |             <tr>
 95 |               <td>Days</td>
 96 |               <td>Hours</td>
 97 |               <td>Minutes</td>
 98 |               <td>Seconds</td>
 99 |             </tr>
100 |             <tr>
101 |               <td id="days">115</td>
102 |               <td id="hours">13</td>
103 |               <td id="minutes">2</td>
104 |               <td id="seconds">42</td>
105 |             </tr>
106 |           </table>
107 |         </div>
108 |       </div>
109 |     </div>
110 |     <span class="page-up"><a href="#header" aria-label="page-up"><span class="iconify page-up-icon" data-icon="flat-color-icons:upload"></span></a></span>
111 |   </main>
112 | 
113 |   <section class="programs">
114 |     <div class="program-title">
115 |       <h2 class="program-title-about Main-Pro">Main Program</h2>
116 |       <div class="underline"></div>
117 |     </div>
118 |     <div class="all-programs">
119 |       <div class="one-program">
120 |         <span class="iconify icon-img" data-icon="flat-color-icons:home"></span>
121 |         <h4>Open House with Lux Realty</h4>
122 |         <p>
123 |           Come and see these waterfront properties in all their Tropical glory!
124 |         </p>
125 |       </div>
126 |       <div class="one-program">
127 |         <span class="iconify icon-img" data-icon="flat-color-icons:edit-image"></span>
128 |         <h4>Art Expose</h4>
129 |         <p>
130 |           Enter the free art Gallery, savour world-class wine and sample decadent hand-picked cheeses.
131 |         </p>
132 |       </div>
133 |       <div class="one-program">
134 |         <span class="iconify icon-img" data-icon="flat-color-icons:businessman"></span>
135 |         <h4>World Class Brokers</h4>
136 |         <p>
137 |           Secure your investment with professional brokers from leading insurance companies.
138 |         </p>
139 |       </div>
140 |       <div class="one-program">
141 |         <span class="iconify icon-img" data-icon="flat-color-icons:filing-cabinet"></span>
142 |         <h4>Furniture and Appliance</h4>
143 |         <p>Find top names in civilian equipment and furnishings ready to accent your new home.</p>
144 |       </div>
145 |       <div class="one-program">
146 |         <span class="iconify icon-img" data-icon="flat-color-icons:dam"></span>
147 |         <h4>Luxury Pools</h4>
148 |         <p>
149 |           Only the most creative pool designs are on the display at this years event.
150 |         </p>
151 |       </div>
152 |       <div class="one-program">
153 |         <span class="iconify icon-img" data-icon="flat-color-icons:vip"></span>
154 |         <h4>Giveaways</h4>
155 |         <p>
156 |           A chance to take home over a $100,000 in cash and prizes.
157 |         </p>
158 |       </div>
159 |     </div>
160 |     <div class="rsvp-div">
161 |       <a href="#" class="btn rsvp-btn">R.S.V.P. Lux Realty Open House 2022</a>
162 |     </div>
163 |     <div class="more-info">
164 |       <h3><a href="#">SEE THE WHOLE PROGRAM</a></h3>
165 |       <hr />
166 |     </div>
167 |   </section>
168 | 
169 |   <section class="speakers">
170 |     <div class="program-title">
171 |       <h2 class="Feat-Spkrs">Featured Speakers</h2>
172 |       <div class="underline"></div>
173 |     </div>
174 |     <div class="featured-speakers"></div>
175 |     <div class="load-more-btn">
176 |       <button type="button" class="btn load-more">
177 |         MORE <span><i class="fas fa-angle-down"></i></span>
178 |       </button>
179 |     </div>
180 |   </section>
181 |   <section class="partners">
182 |     <div class="program-title">
183 |       <h2 class="Feat-Spkrs">Partners</h2>
184 |       <div class="underline"></div>
185 |     </div>
186 |     <div class="all-partners">
187 |       <div class="each-partner c21">
188 |         <h3>Century</h3>
189 |         <h3>21</h3>
190 |       </div>
191 |       <div class="each-partner google">
192 |         <h3>Google</h3>
193 |       </div>
194 |       <div class="each-partner fg">
195 |         <h3>Family Guardian</h3>
196 |       </div>
197 |       <div class="each-partner bhhs">
198 |         <h3>Berkshire Hathaway</h3>
199 |         <h3>HomeServices</h3>
200 |       </div>
201 |       <div class="each-partner airbnb">
202 |         <span class="airbnb-i"><i class="fab fa-airbnb"></i></span>
203 |         <h3>airbnb</h3>
204 |       </div>
205 |     </div>
206 |   </section>
207 |   <footer class="footer">
208 |     <div class="footer-logo">
209 |       <div class="logo">
210 |         <img class="logo-img" src="./images/logo.jpg" alt="Logo">
211 |         <div class="logo-text footer-logo-text">
212 |           <span>LUX REALTY</span>
213 |         </div>
214 |       </div>
215 |     </div>
216 |     <div class="footer-text">
217 |       <p>2022 Lux Realty Open House. All Rights Reserved</p>
218 |       <p>
219 |         For any copyright violation, please contact on the following email
220 |         address: stevewdamesjr@gmail.com.
221 |       </p>
222 |     </div>
223 |   </footer>
224 |   <script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
225 |   <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" data-auto-a11y="true"></script>
226 |   <script src="./JS/featured.js"></script>
227 | </body>
228 | 
229 | </html>
230 | 


--------------------------------------------------------------------------------