├── .gitignore
├── images
    ├── past2.jpg
    ├── partner1.png
    ├── partner2.png
    ├── partner3.png
    ├── partner4.png
    ├── partner5.png
    ├── speaker1.jpg
    ├── speaker2.jpg
    ├── speaker3.jpg
    ├── speaker4.jpg
    ├── speaker6.jpg
    ├── black_bk6.jpg
    ├── pastwrok1.jpg
    ├── speaker 6.jpg
    ├── Fashion Phest.png
    └── background top.jpg
├── .hintrc
├── .eslintrc.json
├── .stylelintrc.json
├── package.json
├── script.js
├── .github
    └── workflows
    │   └── linters.yml
├── README.md
├── about.html
├── index.html
└── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/images/past2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/past2.jpg


--------------------------------------------------------------------------------
/images/partner1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/partner1.png


--------------------------------------------------------------------------------
/images/partner2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/partner2.png


--------------------------------------------------------------------------------
/images/partner3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/partner3.png


--------------------------------------------------------------------------------
/images/partner4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/partner4.png


--------------------------------------------------------------------------------
/images/partner5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/partner5.png


--------------------------------------------------------------------------------
/images/speaker1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/speaker1.jpg


--------------------------------------------------------------------------------
/images/speaker2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/speaker2.jpg


--------------------------------------------------------------------------------
/images/speaker3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/speaker3.jpg


--------------------------------------------------------------------------------
/images/speaker4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/speaker4.jpg


--------------------------------------------------------------------------------
/images/speaker6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/speaker6.jpg


--------------------------------------------------------------------------------
/images/black_bk6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/black_bk6.jpg


--------------------------------------------------------------------------------
/images/pastwrok1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/pastwrok1.jpg


--------------------------------------------------------------------------------
/images/speaker 6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/speaker 6.jpg


--------------------------------------------------------------------------------
/images/Fashion Phest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/Fashion Phest.png


--------------------------------------------------------------------------------
/images/background top.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lornakaboro/Fashion-week/HEAD/images/background top.jpg


--------------------------------------------------------------------------------
/.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 | }


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["stylelint-config-standard"],
 3 |   "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
 4 |   "rules": {
 5 |     "at-rule-no-unknown": [
 6 |       true,
 7 |       {
 8 |         "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
 9 |       }
10 |     ],
11 |     "scss/at-rule-no-unknown":  [
12 |       true,
13 |       {
14 |         "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
15 |       }
16 |     ],
17 |     "csstree/validator": true
18 |   },
19 |   "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "fashion-week",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "script.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/shegy28/Fashion-week.git"
12 |   },
13 |   "author": "",
14 |   "license": "ISC",
15 |   "bugs": {
16 |     "url": "https://github.com/shegy28/Fashion-week/issues"
17 |   },
18 |   "homepage": "https://github.com/shegy28/Fashion-week#readme",
19 |   "devDependencies": {
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^7.32.0",
22 |     "eslint-config-airbnb-base": "^14.2.1",
23 |     "eslint-plugin-import": "^2.26.0",
24 |     "stylelint": "^13.13.1",
25 |     "stylelint-config-standard": "^21.0.0",
26 |     "stylelint-csstree-validator": "^1.9.0",
27 |     "stylelint-scss": "^3.21.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | function openNav() {
 2 |   document.getElementById('drop-down').style.display = 'block';
 3 |   document.getElementById('container').style.filter = 'blur(7px)';
 4 | }
 5 | openNav();
 6 | 
 7 | function closeNav() {
 8 |   document.getElementById('drop-down').style.display = 'none';
 9 |   document.getElementById('container').style.filter = 'blur(0px)';
10 | }
11 | closeNav();
12 | 
13 | const speakers = [
14 |   {
15 |     name: 'Mary Jane',
16 |     image: './images/speaker1.jpg',
17 |     details1: 'Known as "MJ", is an American fashion designer and the creator of DKNY clothing labels.',
18 |     details2: 'Education: Parsons School of Design | The New School.',
19 |   },
20 | 
21 |   {
22 |     name: 'Marc Jacobs',
23 |     image: './images/speaker2.jpg',
24 |     details1: 'Marc Jacobs is an American fashion designer.',
25 |     details2: 'He is the head designer for his own fashion label, Marc Jacobs.',
26 |   },
27 | 
28 |   {
29 |     name: 'Stella McCartney',
30 |     image: './images/speaker3.jpg',
31 |     details1: 'Stella Nina McCartney CBE is an English fashion designer.',
32 |     details2: 'She is a daughter of British singer-songwriter Paul McCartney.',
33 |   },
34 | 
35 |   {
36 |     name: 'Giorgio Armani',
37 |     image: './images/speaker4.jpg',
38 |     details1: 'He formed his company, Armani, in 1975, which expanded into, sport and luxury hotels.',
39 |     details2: 'Education: Parsons School of Design | The New School.',
40 |   },
41 | 
42 |   {
43 |     name: 'Rihanna',
44 |     image: './images/speaker6.jpg',
45 |     details1: 'Robyn Rihanna Fenty NH is a Barbadian singer, and businesswoman.',
46 |     details2: 'Organizations: Fenty Beauty, Clara Lionel Foundation, Fenty.',
47 |   },
48 | 
49 |   {
50 |     name: 'Wizkid',
51 |     image: './images/speaker 6.jpg',
52 |     details1: 'Ayodeji Ibrahim Balogun, known professionally as Wizkid, is a Nigerian singer and songwriter.',
53 |     details2: 'Awards: MTV Europe Music Award for Best African Act.',
54 |   },
55 | ];
56 | 
57 | for (let i = 0; i < speakers.length; i += 1) {
58 |   document.querySelector('.speakers-holder').innerHTML += ` 
59 |     <div class="speaker">
60 |         <div class="speaker-image"><img src="${speakers[i].image}" alt="${speakers[i].name}">
61 |         </div>
62 |         <div class="speaker-text">
63 |             <div>
64 |                 <h4 class="speaker-name">${speakers[i].name}</h4>
65 |                 <p class="speaker-title">${speakers[i].details1}</p>
66 |             </div>
67 |             <hr class="hr2">
68 |             <div>
69 |                 <p class="speaker-title2">${speakers[i].details2}</p>
70 |             </div>
71 |         </div>
72 |     </div>
73 |     `;
74 | }


--------------------------------------------------------------------------------
/.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-22.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-22.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@7.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-22.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-22.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 |   nodechecker:
64 |     name: node_modules checker
65 |     runs-on: ubuntu-22.04
66 |     steps:
67 |       - uses: actions/checkout@v2
68 |       - name: Check node_modules existence
69 |         run: |
70 |           if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
71 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <!-- PROJECT DESCRIPTION -->
  3 | 
  4 | # 📖 [Fashion Week 2022] <a name="about-project"></a>
  5 | 
  6 | > A website that tell and shows more information about a fashion event that is held annually.
  7 | 
  8 | **[Fashion Week 2022]** is a Capstone from microverse.
  9 | 
 10 | ## 🛠 Built With <a name="built-with"></a>
 11 | 
 12 | ### Tech Stack <a name="tech-stack"></a>
 13 | 
 14 | <details>
 15 |   <summary>HTML</summary>
 16 |   <ul>
 17 |     <li><a href="https://reactjs.org/">React.js</a></li>
 18 |   </ul>
 19 | </details>
 20 | 
 21 | <details>
 22 |   <summary>CSS</summary>
 23 |   <ul>
 24 |     <li><a href="https://expressjs.com/">Express.js</a></li>
 25 |   </ul>
 26 | </details>
 27 | 
 28 | <details>
 29 | <summary>JAVASCRIPT</summary>
 30 |   <ul>
 31 |     <li><a href="https://www.postgresql.org/">PostgreSQL</a></li>
 32 |   </ul>
 33 | </details>
 34 | 
 35 | <!-- Features -->
 36 | 
 37 | ### Key Features <a name="key-features"></a>
 38 | 
 39 | - **Responsive for both Desktop and Mobile**
 40 | - **Speaker Section created dynamically**
 41 | - **Designed with mobile first concept**
 42 | 
 43 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 44 | 
 45 | <!-- LIVE DEMO -->
 46 | 
 47 | ## 🚀 Live Demo <a name="live-demo"></a>
 48 | 
 49 | > Add a link to your deployed project.
 50 | 
 51 | - [Live Demo Link](https://shegy28.github.io/Fashion-week/)
 52 | 
 53 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 54 | 
 55 | <!-- GETTING STARTED -->
 56 | 
 57 | ## 💻 Getting Started <a name="getting-started"></a>
 58 | 
 59 | To get a local copy up and running, follow these steps.
 60 | 
 61 | ### Prerequisites
 62 | 
 63 | -Code Editor:[visual Studio code](https://code.visualstudio.com/)
 64 | -Web Browser
 65 | <!--
 66 | Example command:
 67 | 
 68 | ```sh
 69 |  gem install rails
 70 | ```
 71 |  -->
 72 | ### Setup
 73 | 
 74 | Clone this repository to your desired folder:
 75 | 
 76 | ```sh
 77 |   cd my-folder
 78 |   git clone https://github.com/shegy28/Fashion-week.git
 79 | ```
 80 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 81 | <!-- AUTHORS -->
 82 | 
 83 | ## 👥 Authors <a name="authors"></a>
 84 | 
 85 | 👤 **Author1**
 86 | 
 87 | - GitHub: [@Shegy28](https://github.com/shegy28)
 88 | - Twitter: [@Shegy28](https://twitter.com/twitterhandle)
 89 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/chimezie-asouzu-67704224a/)
 90 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 91 | 
 92 | <!-- FUTURE FEATURES -->
 93 | 
 94 | ## 🔭 Future Features <a name="future-features"></a>
 95 | 
 96 | - [ ] **A ticket Booking page**
 97 | - [ ] **A gallery page**
 98 | - [ ] **Competition page**
 99 | 
100 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
101 | 
102 | <!-- CONTRIBUTING -->
103 | 
104 | ## 🤝 Contributing <a name="contributing"></a>
105 | 
106 | Contributions, issues, and feature requests are welcome!
107 | 
108 | Feel free to check the [issues page](https://github.com/shegy28/Fashion-week/issues).
109 | 
110 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
111 | 
112 | <!-- SUPPORT -->
113 | 
114 | ## ⭐️ Show your support <a name="support"></a>
115 | 
116 | If you like this project please share and contribute
117 | 
118 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
119 | 
120 | <!-- ACKNOWLEDGEMENTS -->
121 | 
122 | ## 🙏 Acknowledgments <a name="acknowledgements"></a>
123 | 
124 | > Give credit to everyone who inspired your codebase.
125 | 
126 | I would like to thank  [Cindy Shin](https://www.behance.net/adagio07)
127 | 
128 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
129 | 
130 | <!-- FAQ (optional) -->
131 | 
132 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
133 | 
134 | <!-- LICENSE -->
135 | 
136 | ## 📝 License <a name="license"></a>
137 | 
138 | This project is [Creative Commons](https://creativecommons.org/licenses/by-nc/4.0/) licensed.
139 | 
140 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
141 | 


--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Fashion Week</title>
  8 |     <script src="https://kit.fontawesome.com/ca8f84be4d.js" crossorigin="anonymous"></script>
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |     <link 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" rel="stylesheet">
 12 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 13 |     <link rel="stylesheet" href="./style.css">
 14 | </head>
 15 | <body>
 16 |     <!-- mobile drop dowm menu starts-->
 17 |     <div class="mobile-menu" id="drop-down">
 18 |         <div class="x-icon" onclick="closeNav()">
 19 |             <i class="fa-solid fa-xmark" id="menu-btn-2"></i>
 20 |         </div>
 21 |         <nav>
 22 |             <ul class="mobile-nav">
 23 |                 <li class="">
 24 |                     <a href="./index.html" onclick="closeNav()">
 25 |                         <img class="mobile-logo" src="./images/Fashion Phest.png" alt="Logo">
 26 |                     </a>
 27 |                 </li>
 28 |                 <li ><a href="./about.html" onclick="closeNav()">About</a></li>
 29 |                 <li ><a href="#programs" onclick="closeNav()">Program</a></li>
 30 |                 <li ><a href="#join" onclick="closeNav()">Join</a></li>
 31 |                 <li ><a href="#partners" onclick="closeNav()">Sponsor</a></li>
 32 |                 <li ><a href="#" onclick="closeNav()">News</a></li>
 33 |               </ul>
 34 |         </nav>
 35 |     </div>
 36 |     <!-- mobile drop dowm menu ends -->
 37 |     <div class="main-container" id="container" >
 38 |         <section class="top-section about-section">
 39 |             <header>
 40 |                 <div class="hamburger-icon">
 41 |                     <i class="fa-sharp fa-solid fa-bars" onclick="openNav()"></i>
 42 |                 </div>
 43 |                 <!-- for desktop -->
 44 |                 <nav class="navbar-1">
 45 |                     <i class="fa-brands fa-facebook-f"></i>
 46 |                     <i class="fa-brands fa-twitter"></i>
 47 |                     <a class="nav-items" href="#">English</a>
 48 |                     <a class="nav-items" href="#">My Page</a>
 49 |                     <a class="nav-items" href="#">Logout</a>
 50 |                 </nav>
 51 |                 <nav class="menu">
 52 |                     <div class="desktop-logo">
 53 |                         <a href="./index.html"> <img src="./images/Fashion Phest.png" alt="logo"></a>
 54 |                     </div>
 55 |                     <ul class="navbar-2">
 56 |                         <li><a class="nav-items2" href="./about.html">About</a></li>
 57 |                         <li><a class="nav-items2" href="#">Program</a></li>
 58 |                         <li><a class="nav-items2" href="#">Join</a></li>
 59 |                         <li><a class="nav-items2" href="#partners">Sponsor</a></li>
 60 |                         <li><a class="nav-items2" href="#">News</a></li>
 61 |                         <li class="campaign"><a class="nav-items2 campaign-text " href="#">FP Campaign</a></li>
 62 |                     </ul>
 63 |                 </nav>
 64 |             </header>
 65 |             <section class="hero-section">
 66 |                 <div class="hero-header-div about-hero">
 67 |                     <div>
 68 |                         <h3>"Hello! Fashion Lovers"</h3>
 69 |                     </div>
 70 |                     <h1>FASHION PHEST PRESENTS FASHION WEEK 2022</h1>
 71 |                 </div>
 72 |                 <div class="fashion-quote about-quote">
 73 |                     <p>The annual Fashion week brings together the community of designers, artists, and musicians who comprise the Fashion Phest affilaite network in a different countries. This year we hope to expand our invitation list including fashion houses and designers.</p>
 74 |                 </div>
 75 |                 <div class="contact-quote">
 76 |                     <p>Please contact us per email for any further questions about FP Fashion Phest's fashion week 2022!</p>
 77 |                     <p class="about-email">FPfashionweek2022@fplagos.org</p>
 78 |                 </div>
 79 | 
 80 |             </section>
 81 |         </section>
 82 | 
 83 |         <section class="logo-section">
 84 |             <div>
 85 |                 <h3 class="speaker-header">Fashion Phest's <br class="break">Fashion Week 2022 Logo</h3>
 86 |             </div>
 87 |             
 88 |             <hr class="hr logo-hr">
 89 |             <div class="contact-quote logo-quote">
 90 |                 <p>The FP Fashion Week 2022 logo was designed through logo competition from 8. August to 7. September.<span class="span-logo-quote"> After online public voting and Selection Committee's judgment process, the logo from Asouzu Chimezie won the prize. After consultation with Mr. Okolo we optimized the prize-winning logo for this year's fashion week as follows:</span></p>
 91 |             </div>
 92 |             <div class="logo-holder">
 93 |                 <img src="./images/Fashion Phest.png" alt="">
 94 |             </div>
 95 |             <hr class="hr2 line">
 96 |             
 97 |         </section>
 98 | 
 99 |         <section class="speakers-section">
100 |             <div>
101 |                 <h3 class="speaker-header">See Past FP Fashion Weeks</h3>
102 |             </div>
103 |             <hr class="hr logo-hr">
104 |             <div class="contact-quote logo-quote">
105 |                 <p>Take a look at the two last fp Fashion weeks which took place in Abuja and in Accra.</p>
106 |             </div>
107 |             <div class="past-event">
108 |                 <div class="past-event1">
109 |                     <div class="past-year">
110 |                         <h4>2021</h4>
111 |                         <p>FP Fashion Week 2021 in Lagos</p>
112 |                     </div>
113 |                 </div>
114 | 
115 |                 <div class="past-event2">
116 |                     <div class="past-year">
117 |                         <h4>2019</h4>
118 |                         <p>FP Fashion Week 2019 in Accra</p>
119 |                     </div>
120 |                 </div>
121 | 
122 |             </div>
123 |         </section>
124 | 
125 |         
126 |         <footer class="ft">
127 |             <div class="footer-image">
128 |                 <img src="./images/Fashion Phest.png" alt="">
129 |             </div>
130 |             <div class="footer-text">
131 |                 <p>2022 Fashion Fest's Week</p>
132 |                 <p>Some Rights reserved</p>
133 |             </div>
134 |             <!-- for desktop -->
135 |             <div class="footer-text footer-text1 abt-ft">
136 |                 <p>2022 Fashion Fest's Week Some Rights reserve</p>
137 |                 <p>Designed by @shegy28 The milk of the milky way. </p>
138 |             </div>
139 |         </footer>
140 | 
141 |     </div>
142 |     <script src="./script.js"></script>
143 | </body>
144 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Fashion Week</title>
  8 |     <script src="https://kit.fontawesome.com/ca8f84be4d.js" crossorigin="anonymous"></script>
  9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |     <link 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" rel="stylesheet">
 12 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
 13 |     <link rel="stylesheet" href="./style.css">
 14 | </head>
 15 | <body>
 16 |     <!-- mobile drop dowm menu starts-->
 17 |     <div class="mobile-menu" id="drop-down">
 18 |         <div class="x-icon" onclick="closeNav()">
 19 |             <i class="fa-solid fa-xmark" id="menu-btn-2"></i>
 20 |         </div>
 21 |         <nav>
 22 |             <ul class="mobile-nav">
 23 |                 <li class="">
 24 |                     <a href="./index.html" onclick="closeNav()">
 25 |                         <img class="mobile-logo" src="./images/Fashion Phest.png" alt="Logo">
 26 |                     </a>
 27 |                 </li>
 28 |                 <li ><a href="./about.html" onclick="closeNav()">About</a></li>
 29 |                 <li ><a href="#programs" onclick="closeNav()">Program</a></li>
 30 |                 <li ><a href="#join" onclick="closeNav()">Join</a></li>
 31 |                 <li ><a href="#sponsors" onclick="closeNav()">Sponsor</a></li>
 32 |                 <li ><a href="#" onclick="closeNav()">News</a></li>
 33 |               </ul>
 34 |         </nav>
 35 |     </div>
 36 |     <!-- mobile drop dowm menu ends -->
 37 |     <div class="main-container" id="container">
 38 |         <section class="top-section">
 39 |             <header>
 40 |                 <div class="hamburger-icon">
 41 |                     <i class="fa-sharp fa-solid fa-bars" onclick="openNav()"></i>
 42 |                 </div>
 43 |                 <!-- for desktop -->
 44 |                 <nav class="navbar-1">
 45 |                     <i class="fa-brands fa-facebook-f"></i>
 46 |                     <i class="fa-brands fa-twitter"></i>
 47 |                     <a class="nav-items" href="#">English</a>
 48 |                     <a class="nav-items" href="#">My Page</a>
 49 |                     <a class="nav-items" href="#">Logout</a>
 50 |                 </nav>
 51 |                 <nav class="menu">
 52 |                     <div class="desktop-logo">
 53 |                        <a href="./index.html"> <img src="./images/Fashion Phest.png" alt="logo"></a>
 54 |                     </div>
 55 |                     <ul class="navbar-2">
 56 |                         <li><a class="nav-items2" href="./about.html">About</a></li>
 57 |                         <li><a class="nav-items2" href="#programs">Program</a></li>
 58 |                         <li><a class="nav-items2" href="#">Join</a></li>
 59 |                         <li><a class="nav-items2" href="#sponsors">Sponsor</a></li>
 60 |                         <li><a class="nav-items2" href="#">News</a></li>
 61 |                         <li class="campaign"><a class="nav-items2 campaign-text " href="#">FP Campaign</a></li>
 62 |                     </ul>
 63 |                 </nav>
 64 |             </header>
 65 |             <section class="hero-section">
 66 |                 <div class="hero-header-div">
 67 |                     <div>
 68 |                         <h3>"Hello! Fashion Lovers"</h3>
 69 |                     </div>
 70 |                     <h1>FASHION PHEST PRESENTS FASHION WEEK 2022</h1>
 71 |                 </div>
 72 |                 <div class="fashion-quote">
 73 |                     <p>A Fashion celebration believing in the value of openess and sharing, creating a fashion trend with people from over 80 countries, taking place December Lagos, Nigeria.</p>
 74 |                 </div>
 75 |                 <div class="time-location">
 76 |                     <h2>2022.10.12(FRI) ~ 12(SAT)</h2>
 77 |                     <p>@ National Gallery of Modern Art, Iganmu</p>
 78 |                 </div>
 79 | 
 80 |             </section>
 81 |         </section>
 82 | 
 83 |         <section class="program-section" id="programs">
 84 |             <div>
 85 |                 <h3 class="program-header">Main Program</h3>
 86 |             </div>
 87 |             <hr class="hr">
 88 |             <ul class="programs-holder">
 89 |                 <li class="programs">
 90 |                     <div class="program-icon">
 91 |                         <div>
 92 |                             <span class="material-symbols-outlined">
 93 |                                 co_present
 94 |                                 </span>
 95 |                         </div>
 96 |                         <h4>Lecture</h4>
 97 |                     </div>
 98 |                     <div class="program-text">
 99 |                         <p>Listen to the designer from various countries about the fashion latest trends.</p>
100 |                     </div>
101 |                 </li>
102 | 
103 |                 <li class="programs">
104 |                     <div class="program-icon">
105 |                         <div>
106 |                             <span class="material-symbols-outlined">
107 |                                 diversity_1
108 |                                 </span>
109 |                         </div>
110 |                         <h4>Exhition</h4>
111 |                     </div>
112 |                     <div class="program-text">
113 |                         <p>Appreciate various creations applying to fashion license of artist, organized from Lagos art center.</p>
114 |                     </div>
115 |                 </li>
116 | 
117 |                 <li class="programs">
118 |                     <div class="program-icon">
119 |                         <div>
120 |                             <i class="fa-brands fa-rocketchat"></i>
121 |                         </div>
122 |                         <h4>Forum</h4>
123 |                     </div>
124 |                     <div class="program-text">
125 |                         <p>Have time to share your thoughts and opinions with experts for each topic.</p>
126 |                     </div>
127 |                 </li>
128 | 
129 |                 <li class="programs">
130 |                     <div class="program-icon">
131 |                         <div>
132 |                             <i class="fa-solid fa-cubes"></i>
133 |                         </div>
134 |                         <h4>Workshop</h4>
135 |                     </div>
136 |                     <div class="program-text">
137 |                         <p>Try creating your own work using using tools that would be provided instead of just watching.</p>
138 |                     </div>
139 |                 </li>
140 | 
141 |                 <li class="programs">
142 |                     <div class="program-icon">
143 |                         <div>
144 |                             <i class="fa-solid fa-diagram-project"></i>
145 |                         </div>
146 |                         <h4>Network</h4>
147 |                     </div>
148 |                     <div class="program-text">
149 |                         <p>Get opportunities to network with FP affailiates around the world, also after the fashion week.</p>
150 |                     </div>
151 |                 </li>
152 |             </ul>
153 | 
154 |             <div class="button">
155 |                 <button type="button" id="join" name="join" class="red-button">Join FP Fashion Week 2022</button>
156 |             </div>
157 |             <!-- for desktop -->
158 |             <a class="see-more" href="">SEE THE WHOLE PROGRAM</a>
159 |         </section>
160 | 
161 |         <section class="speakers-section">
162 |             <div>
163 |                 <h3 class="speaker-header">Featured Speakers</h3>
164 |             </div>
165 |             <hr class="hr">
166 |             <div class="speakers-holder">
167 |                
168 |             </div>
169 |         </section>
170 | 
171 |         <section class="partners-section" id="sponsors">
172 |             <div class="partner-header">
173 |                 <h3 class="program-header">Partners</h3>
174 |             </div>
175 |             <hr class="hr">
176 |             <div class="partners">
177 |                 <div class="partner-img">
178 |                     <img src="./images/partner1.png" alt="partner-image">
179 |                 </div>
180 |                 <div class="partner-img">
181 |                     <img src="./images/partner2.png" alt="partner-image">
182 |                 </div>
183 |                 <div class="partner-img">
184 |                     <img src="./images/partner3.png" alt="partner-image">
185 |                 </div>
186 |                 <div class="partner-img">
187 |                     <img src="./images/partner4.png" alt="partner-image">
188 |                 </div>
189 |                 <div class="partner-img">
190 |                     <img src="./images/partner5.png" alt="partner-image">
191 |                 </div>
192 |             </div>
193 |         </section>
194 |         <footer >
195 |             <div class="footer-image">
196 |                 <img src="./images/Fashion Phest.png" alt="">
197 |             </div>
198 |             <div class="footer-text">
199 |                 <p>2022 Fashion Fest's Week </p>
200 |                 <p>Some Rights reserved</p>
201 |             </div>
202 |             <!-- for desktop -->
203 |             <div class="footer-text footer-text1">
204 |                 <p>2022 Fashion Fest's Week Some Rights reserve</p>
205 |                 <p>Designed by @shegy28 The milk of the milky way. </p>
206 |             </div>
207 |         </footer>
208 | 
209 |     </div>
210 |     <script src="./script.js"></script>
211 | </body>
212 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   box-sizing: border-box;
  5 | }
  6 | 
  7 | /* for mobile menu */
  8 | .mobile-menu {
  9 |   background-color: #ec4242de;
 10 |   height: 100vh;
 11 |   width: 100%;
 12 |   position: fixed;
 13 |   z-index: 1;
 14 |   display: none;
 15 |   animation-duration: 0.7s;
 16 |   animation-name: slidein;
 17 | }
 18 | 
 19 | @keyframes slidein {
 20 |   from {
 21 |     margin-right: 100%;
 22 |     width: 300%;
 23 |   }
 24 | 
 25 |   to {
 26 |     margin-right: 0%;
 27 |     width: 100%;
 28 |   }
 29 | }
 30 | 
 31 | .x-icon {
 32 |   text-align: end;
 33 |   font-size: xx-large;
 34 |   padding: 4% 8%;
 35 | }
 36 | 
 37 | .mobile-nav {
 38 |   display: flex;
 39 |   flex-direction: column;
 40 |   list-style: none;
 41 |   gap: 20px;
 42 | }
 43 | 
 44 | .mobile-nav li a {
 45 |   font-family: 'lato', sans-serif;
 46 |   font-style: normal;
 47 |   font-weight: 600;
 48 |   font-size: 32px;
 49 |   line-height: 44px;
 50 |   color: #2b2e35;
 51 |   text-decoration: none;
 52 | }
 53 | 
 54 | .mobile-logo {
 55 |   width: auto;
 56 |   height: 60px;
 57 | }
 58 | 
 59 | /* mobile menu ends */
 60 | 
 61 | .main-container {
 62 |   margin: 0;
 63 |   height: 100vh;
 64 | }
 65 | 
 66 | .top-section {
 67 |   background-image: url("./images/background\ top.jpg");
 68 |   height: auto;
 69 |   background-repeat: no-repeat;
 70 |   background-size: cover;
 71 |   padding-bottom: 10%;
 72 | }
 73 | 
 74 | header {
 75 |   padding: 20px 20px;
 76 | }
 77 | 
 78 | .hamburger-icon {
 79 |   font-size: xx-large;
 80 | }
 81 | 
 82 | .hero-section {
 83 |   margin: 0 5%;
 84 |   padding-top: 30px;
 85 | }
 86 | 
 87 | .hero-header-div div h3 {
 88 |   color: brown;
 89 |   font-family: 'lato', sans-serif;
 90 |   margin: 0 0;
 91 |   font-size: 25px;
 92 | }
 93 | 
 94 | .hero-header-div h1 {
 95 |   margin: 10px 0;
 96 |   font-family: 'lato', sans-serif;
 97 |   font-size: 45px;
 98 |   font-weight: 900;
 99 |   margin-bottom: 30px;
100 |   color: #c21b09;
101 |   line-height: 1em;
102 | }
103 | 
104 | .fashion-quote {
105 |   text-align: left;
106 |   color: #272a31;
107 |   padding: 0 4%;
108 |   background-color: rgb(183, 187, 192, 0.4);
109 |   border: 2px solid #ffff;
110 |   font-family: 'lato', sans-serif;
111 |   font-size: 13px;
112 |   font-weight: 600;
113 | }
114 | 
115 | .time-location h2 {
116 |   margin: 4% 1%;
117 |   font-family: 'lato', sans-serif;
118 |   font-size: 28px;
119 |   font-weight: 900;
120 |   color: #272a31;
121 |   line-height: 1em;
122 | }
123 | 
124 | .time-location p {
125 |   margin: 4% 1%;
126 |   font-family: 'lato', sans-serif;
127 |   font-size: 17px;
128 |   font-weight: 600;
129 |   color: #272a31;
130 |   line-height: 1em;
131 | }
132 | 
133 | .program-section {
134 |   background-image: url("https://removal.ai/wp-content/uploads/2021/09/black-background-09-wallpaperaccess.png");
135 |   background-repeat: no-repeat;
136 |   background-size: cover;
137 |   padding-top: 20px;
138 |   padding-bottom: 20px;
139 | }
140 | 
141 | .program-header {
142 |   margin-top: 0;
143 |   margin-bottom: 0;
144 |   text-align: center;
145 |   font-family: "Lato", sans-serif;
146 |   color: #fff;
147 |   font-size: 24px;
148 | }
149 | 
150 | .hr {
151 |   border: 0.5px solid #ec5242;
152 |   margin: 3% auto;
153 |   width: 8%;
154 | }
155 | 
156 | .programs-holder {
157 |   margin: 10% 3% 0 3%;
158 |   list-style: none;
159 |   padding: 0;
160 | }
161 | 
162 | .programs {
163 |   display: flex;
164 |   align-items: center;
165 |   justify-content: space-between;
166 |   background-color: #272a31;
167 |   list-style: none;
168 |   margin-bottom: 9px;
169 |   padding: 5% 5%;
170 |   opacity: 0.8;
171 | }
172 | 
173 | .program-icon {
174 |   display: flex;
175 |   gap: 13%;
176 |   width: 50%;
177 |   flex-shrink: 0;
178 | }
179 | 
180 | .program-icon div i,
181 | .program-icon div span {
182 |   font-size: xx-large;
183 |   color: #fff;
184 |   margin: 15px 0;
185 | }
186 | 
187 | .program-icon h4 {
188 |   color: #ec5242;
189 |   font-family: "Lato", sans-serif;
190 |   font-size: 18px;
191 |   font-weight: 900;
192 | }
193 | 
194 | .program-text {
195 |   color: #fff;
196 |   font-family: "Lato", sans-serif;
197 |   font-size: 12px;
198 |   letter-spacing: 1px;
199 |   flex-shrink: 1;
200 | }
201 | 
202 | .button {
203 |   display: flex;
204 |   justify-content: center;
205 |   margin: 40px 0 20px 0;
206 | }
207 | 
208 | .red-button {
209 |   padding: 5% 7%;
210 |   font-family: 'lato', sans-serif;
211 |   font-size: 16px;
212 |   font-weight: 600;
213 |   margin: 0 auto;
214 |   background-color: #ec5242;
215 |   color: #f0f2f5;
216 |   border: 0;
217 | }
218 | 
219 | .speakers-section {
220 |   padding-top: 10px;
221 |   padding-bottom: 30px;
222 |   background-image: url("./images/background\ top.jpg");
223 | }
224 | 
225 | .speaker-header {
226 |   margin-top: 10px;
227 |   margin-bottom: 0;
228 |   text-align: center;
229 |   font-family: "Lato", sans-serif;
230 |   color: #272a31;
231 |   font-size: 24px;
232 | }
233 | 
234 | .speakers-holder {
235 |   display: flex;
236 |   flex-direction: column;
237 |   margin: 0 3%;
238 | }
239 | 
240 | .speaker {
241 |   display: flex;
242 |   gap: 5%;
243 |   margin-bottom: 10px;
244 | }
245 | 
246 | .speaker-image img {
247 |   width: 130px;
248 |   height: 130px;
249 |   margin-top: 30px;
250 |   background-size: contain;
251 | }
252 | 
253 | .speaker-name {
254 |   font-size: 20px;
255 |   margin-bottom: 0;
256 |   text-align: left;
257 |   font-family: "Lato", sans-serif;
258 |   color: #272a31;
259 |   font-weight: 900;
260 | }
261 | 
262 | .speaker-title {
263 |   font-size: 13px;
264 |   font-style: italic;
265 |   margin-bottom: 0;
266 |   text-align: left;
267 |   font-family: "Lato", sans-serif;
268 |   color: #ec5242;
269 |   font-weight: 900;
270 | }
271 | 
272 | .speaker-title2 {
273 |   font-size: 13px;
274 |   margin-bottom: 0;
275 |   text-align: left;
276 |   font-family: "Lato", sans-serif;
277 |   color: #272a31;
278 |   font-weight: 700;
279 | }
280 | 
281 | .hr2 {
282 |   border: 0.5px solid #272a31;
283 |   margin: 3% 0;
284 |   width: 8%;
285 | }
286 | 
287 | .partners-section {
288 |   background-color: #272a31;
289 |   padding-top: 50px;
290 |   padding-bottom: 10px;
291 | }
292 | 
293 | .partners {
294 |   display: flex;
295 |   flex-wrap: wrap;
296 |   margin: 40px 20px;
297 |   gap: 10px;
298 |   align-items: center;
299 |   justify-content: center;
300 | }
301 | 
302 | .partner-img {
303 |   width: 30%;
304 | }
305 | 
306 | .partner-img img {
307 |   width: 100%;
308 | }
309 | 
310 | footer {
311 |   display: flex;
312 |   justify-content: space-between;
313 |   padding: 6% 6%;
314 |   gap: 3%;
315 | }
316 | 
317 | .footer-image {
318 |   width: 40%;
319 | }
320 | 
321 | .footer-image img {
322 |   width: 150px;
323 |   height: 50px;
324 | }
325 | 
326 | .footer-text {
327 |   font-size: 11px;
328 |   font-family: "Lato", sans-serif;
329 |   color: #272a31;
330 |   font-weight: 900;
331 |   margin-top: 20px;
332 | }
333 | 
334 | .footer-text p {
335 |   margin: 0;
336 |   letter-spacing: 1px;
337 | }
338 | 
339 | /* About us style below */
340 | 
341 | .about-hero {
342 |   text-align: center;
343 | }
344 | 
345 | .about-quote {
346 |   background-color: #b7bbc0;
347 |   opacity: 0.9;
348 |   text-align: center;
349 | }
350 | 
351 | .contact-quote {
352 |   text-align: center;
353 |   color: #272a31;
354 |   padding: 0 4%;
355 |   font-family: 'lato', sans-serif;
356 |   font-size: 13px;
357 |   font-weight: 600;
358 | }
359 | 
360 | .about-email {
361 |   font-weight: 900;
362 |   text-decoration: underline;
363 |   line-height: 2%;
364 |   letter-spacing: normal;
365 | }
366 | 
367 | .logo-section {
368 |   padding-top: 10%;
369 | }
370 | 
371 | .logo-holder {
372 |   margin: 8% 5% 12% 5%;
373 |   border: solid 1px #272a31;
374 | }
375 | 
376 | .logo-holder img {
377 |   width: 100%;
378 | }
379 | 
380 | .line {
381 |   width: 98%;
382 |   border-color: #b7bbc0;
383 |   margin: 0 auto;
384 | }
385 | 
386 | .logo-hr {
387 |   margin-bottom: 8%;
388 | }
389 | 
390 | .past-event {
391 |   display: flex;
392 |   flex-direction: column;
393 |   margin-top: 10%;
394 |   gap: 20px;
395 | }
396 | 
397 | .past-event1 {
398 |   margin: 0 3%;
399 |   background-image: linear-gradient(rgba(228, 43, 23, 0.5), rgba(221, 43, 23, 0.5)), url(./images/pastwrok1.jpg);
400 |   padding: 10% 20%;
401 |   background-size: cover;
402 |   background-repeat: no-repeat;
403 | }
404 | 
405 | .past-event2 {
406 |   margin: 0 3%;
407 |   background-image: linear-gradient(rgba(228, 43, 23, 0.5), rgba(221, 43, 23, 0.5)), url(./images/past2.jpg);
408 |   padding: 10% 20%;
409 |   background-size: cover;
410 |   background-repeat: no-repeat;
411 | }
412 | 
413 | .past-year {
414 |   font-family: 'lato', sans-serif;
415 |   font-weight: 900;
416 |   color: #f0f2f5;
417 |   text-align: center;
418 | }
419 | 
420 | .past-year h4 {
421 |   font-size: 20px;
422 | }
423 | 
424 | .programs:hover {
425 |   border: #f0f2f5 solid 1px;
426 | }
427 | 
428 | .navbar-1,
429 | .menu,
430 | .see-more,
431 | .footer-text1,
432 | .span-logo-quote {
433 |   display: none;
434 | }
435 | 
436 | @media only screen and (min-width: 768px) {
437 |   .hamburger-icon {
438 |     display: none;
439 |   }
440 | 
441 |   .top-section {
442 |     padding-bottom: 1%;
443 |   }
444 | 
445 |   header {
446 |     padding: 0;
447 |   }
448 | 
449 |   .navbar-1 {
450 |     padding: 0.8% 13%;
451 |     background-color: #2b2e35;
452 |     display: flex;
453 |     align-items: center;
454 |     justify-content: end;
455 |     gap: 3%;
456 |   }
457 | 
458 |   .navbar-1 i {
459 |     color: white;
460 |     font-size: larger;
461 |   }
462 | 
463 |   .nav-items {
464 |     color: #f0f2f5;
465 |     font-size: 16px;
466 |     font-family: "Lato", sans-serif;
467 |     text-decoration: none;
468 |   }
469 | 
470 |   .menu {
471 |     display: flex;
472 |     flex-direction: row;
473 |     justify-content: space-between;
474 |     align-items: center;
475 |     margin: 0;
476 |     padding: 0% 13%;
477 |     background-color: #fff;
478 |   }
479 | 
480 |   .desktop-logo img {
481 |     width: 40%;
482 |   }
483 | 
484 |   .navbar-2 {
485 |     display: flex;
486 |     flex-direction: row;
487 |     justify-content: flex-end;
488 |     align-items: center;
489 |     list-style: none;
490 |     gap: 5%;
491 |     width: 60%;
492 |     margin: 0;
493 |   }
494 | 
495 |   .nav-items2 {
496 |     color: #272a31;
497 |     font-size: 18px;
498 |     font-weight: 900;
499 |     font-family: "Lato", sans-serif;
500 |     text-decoration: none;
501 |   }
502 | 
503 |   .campaign {
504 |     border: #c21b09 solid 4px;
505 |     padding: 3%;
506 |     flex-shrink: 0;
507 |   }
508 | 
509 |   .campaign-text {
510 |     color: #c21b09;
511 |   }
512 | 
513 |   .hero-section {
514 |     margin: 7% 13%;
515 |   }
516 | 
517 |   .hero-header-div {
518 |     width: 70%;
519 |   }
520 | 
521 |   .hero-header-div div h3 {
522 |     font-size: 39px;
523 |   }
524 | 
525 |   .hero-header-div h1 {
526 |     font-size: 80px;
527 |   }
528 | 
529 |   .fashion-quote {
530 |     width: 60%;
531 |     background-color: rgb(183, 187, 192, 0.6);
532 |     padding: 1% 1% 1% 2%;
533 |   }
534 | 
535 |   .fashion-quote p {
536 |     font-size: 18px;
537 |   }
538 | 
539 |   .time-location h2 {
540 |     font-size: 48px;
541 |     margin: 4% 0 0 0;
542 |   }
543 | 
544 |   .time-location p {
545 |     font-size: 40px;
546 |     margin: 1% 0 0 0;
547 |   }
548 | 
549 |   .program-section {
550 |     padding-top: 5%;
551 |   }
552 | 
553 |   .program-header {
554 |     font-size: 40px;
555 |   }
556 | 
557 |   .programs-holder {
558 |     padding: 1% 5%;
559 |     display: flex;
560 |     flex-direction: row;
561 |     gap: 1%;
562 |     margin: 0;
563 |   }
564 | 
565 |   .programs {
566 |     flex-direction: column;
567 |     padding: 2%;
568 |     text-align: center;
569 |   }
570 | 
571 |   .program-icon {
572 |     flex-direction: column;
573 |     text-align: center;
574 |     width: auto;
575 |   }
576 | 
577 |   .program-icon div span,
578 |   .program-icon div i {
579 |     font-size: 60px;
580 |   }
581 | 
582 |   .program-icon h4 {
583 |     color: #ec5242;
584 |     font-family: "Lato", sans-serif;
585 |     font-size: 30px;
586 |     font-weight: 900;
587 |     margin: 0;
588 |   }
589 | 
590 |   .program-text {
591 |     font-size: 16px;
592 |     letter-spacing: normal;
593 |   }
594 | 
595 |   .button {
596 |     display: none;
597 |   }
598 | 
599 |   .see-more {
600 |     display: flex;
601 |     justify-content: center;
602 |     color: #fff;
603 |     font-family: "Lato", sans-serif;
604 |     font-size: 20px;
605 |     text-decoration: underline;
606 |     margin: 5% 0;
607 |   }
608 | 
609 |   .speakers-section {
610 |     padding-top: 50px;
611 |   }
612 | 
613 |   .speakers-holder {
614 |     display: flex;
615 |     flex-direction: row;
616 |     margin: 0 5%;
617 |     flex-wrap: wrap;
618 |     justify-content: space-between;
619 |   }
620 | 
621 |   .speaker-header {
622 |     font-size: 40px;
623 |   }
624 | 
625 |   .speaker {
626 |     display: flex;
627 |     gap: 5%;
628 |     margin-bottom: 10px;
629 |     width: 48%;
630 |   }
631 | 
632 |   .speaker-name {
633 |     font-size: 22px;
634 |   }
635 | 
636 |   .speaker-title,
637 |   .speaker-title2 {
638 |     font-size: 16px;
639 |   }
640 | 
641 |   .partners {
642 |     flex-wrap: nowrap;
643 |     margin: 40px 110px;
644 |   }
645 | 
646 |   footer {
647 |     display: flex;
648 |     justify-content: center;
649 |     padding: 3% 0%;
650 |   }
651 | 
652 |   .footer-image {
653 |     width: auto;
654 |   }
655 | 
656 |   .footer-image img {
657 |     width: auto;
658 |     height: 70px;
659 |     flex-shrink: 0;
660 |   }
661 | 
662 |   .footer-text {
663 |     display: none;
664 |   }
665 | 
666 |   .footer-text1 {
667 |     display: inline;
668 |     font-size: 17px;
669 |     flex-shrink: 1;
670 |     font-family: "Lato", sans-serif;
671 |     color: #272a31;
672 |     font-weight: 400;
673 |     margin-top: 20px;
674 |   }
675 | 
676 |   /* about page */
677 | 
678 |   .about-hero,
679 |   .about-quote {
680 |     margin: 0 auto;
681 |   }
682 | 
683 |   .contact-quote {
684 |     font-size: 18px;
685 |   }
686 | 
687 |   .about-hero div h3 {
688 |     display: none;
689 |   }
690 | 
691 |   .logo-quote {
692 |     width: 50%;
693 |     margin: 0 auto;
694 |   }
695 | 
696 |   .break {
697 |     display: none;
698 |   }
699 | 
700 |   .span-logo-quote {
701 |     display: inline;
702 |   }
703 | 
704 |   .logo-section {
705 |     padding-top: 3%;
706 |   }
707 | 
708 |   .logo-hr {
709 |     margin: 2% auto;
710 |   }
711 | 
712 |   .logo-holder {
713 |     border: solid 1px #272a31;
714 |     width: 35%;
715 |     margin: 3% auto;
716 |   }
717 | 
718 |   .past-event {
719 |     margin-top: 4%;
720 |     flex-direction: row;
721 |     gap: 0;
722 |   }
723 | 
724 |   .past-event1,
725 |   .past-event2 {
726 |     padding: 0;
727 |     width: 45%;
728 |   }
729 | 
730 |   .past-year {
731 |     font-family: 'lato', sans-serif;
732 |     font-weight: 900;
733 |     color: #f0f2f5;
734 |     text-align: center;
735 |     width: 300px;
736 |     margin: 20% auto;
737 |   }
738 | 
739 |   .past-year h4 {
740 |     font-size: 30px;
741 |     margin: 0;
742 |     font-weight: 900;
743 |   }
744 | 
745 |   .navbar-1 :hover,
746 |   .menu :hover {
747 |     color: #ec5242;
748 |     text-decoration: none;
749 |   }
750 | 
751 |   .ft {
752 |     background-color: #272a31;
753 |   }
754 | 
755 |   .abt-ft {
756 |     color: #fff;
757 |     font-weight: 400;
758 |   }
759 | }
760 | 


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