├── .gitignore ├── images ├── bg.jpg ├── ireli.png ├── logo.png ├── box-bg.png ├── carmeet1.png ├── carmeet2.png ├── speaker1.png ├── speaker2.png ├── speaker3.png ├── speaker4.png ├── speaker5.png ├── speaker6.png ├── speech.png ├── workshop.png ├── exhibition.png ├── forum-icon.png ├── header_bg.jpg ├── network-icon.png ├── newheader75.jpg ├── hyundai.svg ├── toyota.svg └── ford.svg ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── package.json ├── LICENSE ├── .github └── workflows │ └── linters.yml ├── README.md ├── main.js ├── about.html ├── index.html └── style.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /images/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/bg.jpg -------------------------------------------------------------------------------- /images/ireli.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/ireli.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/box-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/box-bg.png -------------------------------------------------------------------------------- /images/carmeet1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/carmeet1.png -------------------------------------------------------------------------------- /images/carmeet2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/carmeet2.png -------------------------------------------------------------------------------- /images/speaker1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/speaker1.png -------------------------------------------------------------------------------- /images/speaker2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/speaker2.png -------------------------------------------------------------------------------- /images/speaker3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/speaker3.png -------------------------------------------------------------------------------- /images/speaker4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/speaker4.png -------------------------------------------------------------------------------- /images/speaker5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/speaker5.png -------------------------------------------------------------------------------- /images/speaker6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/speaker6.png -------------------------------------------------------------------------------- /images/speech.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/speech.png -------------------------------------------------------------------------------- /images/workshop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/workshop.png -------------------------------------------------------------------------------- /images/exhibition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/exhibition.png -------------------------------------------------------------------------------- /images/forum-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/forum-icon.png -------------------------------------------------------------------------------- /images/header_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/header_bg.jpg -------------------------------------------------------------------------------- /images/network-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/network-icon.png -------------------------------------------------------------------------------- /images/newheader75.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/0sugo/cars-capstone/HEAD/images/newheader75.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 | } -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cars-capstone", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/0sugo/cars-capstone.git" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "bugs": { 17 | "url": "https://github.com/0sugo/cars-capstone/issues" 18 | }, 19 | "homepage": "https://github.com/0sugo/cars-capstone#readme", 20 | "devDependencies": { 21 | "babel-eslint": "^10.1.0", 22 | "eslint": "^7.32.0", 23 | "eslint-config-airbnb-base": "^14.2.1", 24 | "eslint-plugin-import": "^2.27.5", 25 | "hint": "^7.1.4", 26 | "stylelint": "^13.13.1", 27 | "stylelint-config-standard": "^21.0.0", 28 | "stylelint-csstree-validator": "^1.9.0", 29 | "stylelint-scss": "^3.21.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 osugo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.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: "16.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: "18.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: "18.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: "18.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 -------------------------------------------------------------------------------- /images/hyundai.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 12 | 14 | 16 | 18 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /images/toyota.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 9 | 10 | 11 | 12 | 13 | 22 | 23 | 24 | 25 | 26 | 27 | 31 | 32 | 33 | 34 | 38 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cars-capstone 2 | 3 | 4 | # 📗 Table of Contents 5 | 6 | - [📖 About the Project](#about-project) 7 | - [🛠 Built With](#built-with) 8 | - [Key Features](#key-features) 9 | - [🚀 Live Demo](#live-demo) 10 | - [💻 Getting Started](#getting-started) 11 | - [Setup](#setup) 12 | - [Prerequisites](#prerequisites) 13 | - [Install](#install) 14 | - [Usage](#usage) 15 | - [Run tests](#run-tests) 16 | - [👥 Authors](#authors) 17 | - [🔭 Future Features](#future-features) 18 | - [🤝 Contributing](#contributing) 19 | - [⭐️ Show your support](#support) 20 | - [🙏 Acknowledgements](#acknowledgements) 21 | - [📝 License](#license) 22 | 23 | 24 | 25 | # 📖 [cars-capstone] 26 | 27 | **[cars-capstone]** Is a simple project that compounds of a webpage (home and about page) for a fictional car conference set to take place in Kenya and basically it contains information about the conference ie speakers,program and about the organisation behind the whole meeting.Here is a brief video of how it looks on both the desktop and mobile. https://www.loom.com/share/a4210767b4c74d04b70b3ab6b7d0030c 28 | 29 | ## 🛠 Built With 30 | - HTML. 31 | - CSS. 32 | ### Key Features 33 | 34 | - **[mobile version]** 35 | - **[Desktop version]** 36 | 37 | 38 | 39 | ## 🚀 Live Demo 40 | 41 | - [Live Demo Link](https://0sugo.github.io/cars-capstone/) 42 | 43 | 44 | 45 | ## 💻 Getting Started 46 | 47 | 48 | To get a local copy up and running, follow these steps. 49 | 50 | ### Prerequisites 51 | In order to run this project you need: 52 | - vscode. 53 | - git. 54 | - Knowledge on HTML and CSS. 55 | 56 | ### Setup 57 | Clone this repository to your desired folder: 58 | 59 | Navigate to the directory where you want to clone this project with your terminal. 60 | Clone this repository using the following commands: 61 | `git clone https://github.com/0sugo/cars-capstone.git` 62 | 63 | 64 | ### Install 65 | Install this project with this command in your terminal: 66 | `cd cars-capstone` 67 | 68 | 69 | ### Usage 70 | 71 | To run the project, execute the following command in your terminal: 72 | `code .` 73 | 74 | ### Run tests 75 | 76 | To run tests, 77 | 78 | Run it in your local server. 79 | 80 | 81 | 82 | ## 👥 Authors 83 | 84 | 85 | 👤 **JOSECK OSUGO** 86 | 87 | - GitHub: [0sugo](https://github.com/0sugo) 88 | - Twitter: [@0sugo5](https://twitter.com/osugo5) 89 | - LinkedIn: [Joseck Osugo](https://www.linkedin.com/in/joseck-osugo-873b0618a/) 90 | 91 | 92 | 93 | ## 🔭 Future Features 94 | 95 | - Creating and linking consequent pages namely: 96 | - Sponser 97 | - Join 98 | - News 99 | - campaign 100 | - Adding animations to the site so that the site is more engaging. 101 | 102 | 103 | 104 | ## 🤝 Contributing 105 | 106 | - Contributions, issues, and feature requests are welcome! 107 | 108 | - Feel free to check send me a message using the social media accounts stated above . 109 | 110 | 111 | 112 | ## ⭐️ Show your support 113 | 114 | - If you like this project, give it a star . 115 | 116 | 117 | 118 | ## 🙏 Acknowledgments 119 | 120 | - I would like appreciate Cindy Shin in Behance for the brilliant design that maps the base of this project. 121 | - would also like to thank microverse for issuing this project to the students. 122 | 123 | 124 | 125 | ## 📝 License 126 | 127 | - This project is [MIT](./LICENSE) licensed. 128 | 129 | 130 |

(back to top)

131 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const speakers = [ 2 | { 3 | name: 'James Oletik', 4 | aboutem: 'Co-founder and CEO Club TT motorsport', 5 | bio: 'A kenyan WRC racer and founder of clubTT motorsport with several won titles in WRC Championship', 6 | id: 'first', 7 | image: '/images/speaker1.png', 8 | }, 9 | { 10 | name: 'Mercy Kaptum', 11 | aboutem: 'WRC racer', 12 | bio: 'A Female kenyan WRC racer,that has put ladies on the rally map in her outstanding perfomance last year', 13 | id: 'second', 14 | image: '/images/speaker2.png', 15 | }, 16 | { 17 | name: 'Parsali Olerek', 18 | aboutem: 'Retired WRC racer', 19 | bio: 'A former WRC racer and 2021,WRC winner,Currently lead coach in Kenya Airways rally team', 20 | id: 'third', 21 | image: '/images/speaker3.png', 22 | }, 23 | { 24 | name: 'Peter Opondo', 25 | aboutem: 'Mechanic and race car-tuner', 26 | bio: 'A kenyan Mechanic that has specialised in tuning cars to peek performance for rally-purposes', 27 | id: 'fourth', 28 | image: '/images/speaker4.png', 29 | }, 30 | { 31 | name: 'Sam Hamilton', 32 | aboutem: 'Co-founder and CEO Sunset GT ', 33 | bio: 'A kenyan enthusiast that has specialised in tuning cars to peek performance for rally-purposes', 34 | id: 'fifth', 35 | image: '/images/speaker5.png', 36 | }, 37 | { 38 | name: 'Jeff Onsense', 39 | aboutem: 'Co-founder and CEO Sport Nation_254', 40 | bio: 'A kenyan WRC racer and founder of Sport Nation_254,Famous for his many won titles in drag races in Kenya', 41 | id: 'sixth', 42 | image: '/images/speaker6.png', 43 | }, 44 | ]; 45 | const featuredSpeakers = document.querySelector('.featured-speakers'); 46 | 47 | const speakersTop = document.createElement('div'); 48 | speakersTop.classList.add('speakers_top'); 49 | featuredSpeakers.appendChild(speakersTop); 50 | 51 | const header = document.createElement('h3'); 52 | header.innerHTML = 'Featured Speakers'; 53 | speakersTop.append(header); 54 | 55 | const indicator = document.createElement('div'); 56 | indicator.classList.add('indicator'); 57 | featuredSpeakers.append(indicator); 58 | 59 | const speakerList = document.createElement('div'); 60 | speakerList.classList.add('speaker-list'); 61 | featuredSpeakers.append(speakerList); 62 | 63 | let temporary = ''; 64 | 65 | function loadSpeakers() { 66 | temporary = ''; 67 | if (window.screen.width < 768) { 68 | for (let i = 0; i < 2; i += 1) { 69 | temporary += `
70 |
Image of the speaker
71 |
72 |
${speakers[i].name}
73 |

${speakers[i].aboutem}

74 |

${speakers[i].bio}

75 |
76 |
`; 77 | } 78 | 79 | speakerList.innerHTML = temporary; 80 | 81 | const showMore = document.createElement('div'); 82 | showMore.classList.add('show-container'); 83 | speakerList.appendChild(showMore); 84 | 85 | const btnShow = document.createElement('button'); 86 | btnShow.setAttribute('id', 'showMore'); 87 | btnShow.innerHTML = 'More'; 88 | showMore.append(btnShow); 89 | 90 | const span = document.createElement('span'); 91 | span.innerHTML = '▼'; 92 | btnShow.appendChild(span); 93 | 94 | btnShow.addEventListener('click', () => { 95 | temporary = ''; 96 | speakers.forEach((speaker) => { 97 | temporary += `
98 |
Image of the speaker
99 |
100 |
${speaker.name}
101 |

${speaker.aboutem}

102 |

${speaker.bio}

103 |
104 |
`; 105 | }); 106 | speakerList.innerHTML = temporary; 107 | }); 108 | } else { 109 | speakers.forEach((speaker) => { 110 | temporary += `
111 |
Image of the speaker
112 |
113 |
${speaker.name}
114 |

${speaker.aboutem}

115 |

${speaker.bio}

116 |
117 |
`; 118 | }); 119 | speakerList.innerHTML = temporary; 120 | } 121 | } 122 | 123 | // button show more 124 | 125 | // onloads 126 | 127 | window.onload = function () { 128 | temporary = ''; 129 | loadSpeakers(); 130 | }; 131 | 132 | window.onresize = function () { 133 | temporary = ''; 134 | loadSpeakers(); 135 | }; -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | About 10 | 11 | 12 |
13 | 22 |
48 | 49 | 50 |
51 |
52 |
53 |
54 |

"Life is better at full throttle!"
WRC CAR-NNECT SUMMIT 2023

55 |

The Global Summit brings together the community of experts,rally racers and common affiliate 56 | networks from all over the world every two years.This year we hope to expand our invitation list including organisations 57 | and individuals.

58 |
59 |

Please contact us per Email for further questions about WRC Car-nnect 2023! carnnect2023@gmail.org

60 |
61 |
62 |
63 |
64 | 65 | 76 | 77 |
78 |

See the past WRC Car-nnect Summits

79 |
80 |

Take a look at the past two WRC Car-nnect Summit which took place in Nairobi and in Mombasa

81 |
82 |
83 |

2019

84 |

Masinga TT National Summit,Mombasa

85 |
86 |
87 |

2021

88 |

Carchella National Summit,Machakos

89 |
90 | 91 |
92 | 93 |
94 | 95 | 96 | 97 | 98 |
99 |
100 |

Partners

101 |
102 |
103 | 108 | 109 | 110 |
111 |
112 | 117 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cars-connect-254 conference website 9 | 10 | 11 |
12 | 21 |
48 | 49 | 50 | 51 | 52 |
53 |
54 |
55 |

"Life is better at full throttle!"
WRC CAR-NNECT SUMMIT 2023

56 |

The joyful event that addresses the impact of WRC cars, 57 | with guests from all over the world,istake place in April, in Kenya.

58 |
59 |

2023.04.15(THU) ~ 16(FRI)
@Uhuru Gardens,Langata road.Nairobi

60 |

61 |
62 | 63 |
64 | 65 | 66 |
67 | 68 |
69 |
70 |

Main Program

71 |
72 |
73 | 74 |
75 |
76 | speech logo 77 |

Speech

78 |

Get a chance to talk to designers and tech founders, ask questions about their journey and inspirations

79 |
80 |
81 | speech logo 82 |

Exhibition

83 |

Get a chance to talk to designers and tech founders, ask questions about their journey and inspirations

84 |
85 |
86 | speech logo 87 |

Forum

88 |

Get a chance to talk to designers and tech founders, ask questions about their journey and inspirations

89 |
90 |
91 | speech logo 92 |

Workshop

93 |

Get a chance to talk to designers and tech founders, ask questions about their journey and inspirations

94 |
95 |
96 | speech logo 97 |

CC Network

98 |

Get a chance to talk to designers and tech founders, ask questions about their journey and inspirations

99 |
100 | 101 |
102 | 103 | 104 |
105 | 106 |
107 | 108 | 109 |
110 |
111 |
112 |

Partners

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