├── .gitignore ├── murple_logo.png ├── style ├── images │ ├── Icon.png │ ├── pic1.jpg │ ├── pic2.jpg │ ├── arrow-down.png │ ├── bg-title.jpg │ ├── headline.png │ ├── speaker1.jpeg │ ├── speaker2.jpeg │ ├── speaker3.jpeg │ ├── speaker4.jpeg │ ├── speaker5.jpeg │ ├── speaker6.jpeg │ ├── speaker_bg.jpg │ ├── summer-bootcamp.png │ ├── hamburger-vactors.png │ └── background-capstone.jpg ├── style1.css └── style.css ├── package.json ├── .eslintrc.json ├── .hintrc ├── .stylelintrc.json ├── .github └── workflows │ └── linters.yml ├── script.js ├── README.md ├── about.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | # .gitignore 2 | node_modules/ -------------------------------------------------------------------------------- /murple_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/murple_logo.png -------------------------------------------------------------------------------- /style/images/Icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/Icon.png -------------------------------------------------------------------------------- /style/images/pic1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/pic1.jpg -------------------------------------------------------------------------------- /style/images/pic2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/pic2.jpg -------------------------------------------------------------------------------- /style/images/arrow-down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/arrow-down.png -------------------------------------------------------------------------------- /style/images/bg-title.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/bg-title.jpg -------------------------------------------------------------------------------- /style/images/headline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/headline.png -------------------------------------------------------------------------------- /style/images/speaker1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/speaker1.jpeg -------------------------------------------------------------------------------- /style/images/speaker2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/speaker2.jpeg -------------------------------------------------------------------------------- /style/images/speaker3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/speaker3.jpeg -------------------------------------------------------------------------------- /style/images/speaker4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/speaker4.jpeg -------------------------------------------------------------------------------- /style/images/speaker5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/speaker5.jpeg -------------------------------------------------------------------------------- /style/images/speaker6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/speaker6.jpeg -------------------------------------------------------------------------------- /style/images/speaker_bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/speaker_bg.jpg -------------------------------------------------------------------------------- /style/images/summer-bootcamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/summer-bootcamp.png -------------------------------------------------------------------------------- /style/images/hamburger-vactors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/hamburger-vactors.png -------------------------------------------------------------------------------- /style/images/background-capstone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Salwa99/Summer-BootCamp/HEAD/style/images/background-capstone.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "stylelint": "^13.13.1", 4 | "stylelint-config-standard": "^21.0.0", 5 | "stylelint-csstree-validator": "^1.9.0", 6 | "stylelint-scss": "^3.21.0" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "parserOptions": { 8 | "ecmaVersion": 12, 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.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 | } 19 | -------------------------------------------------------------------------------- /.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": [ 7 | true, 8 | { 9 | "ignoreAtRules": [ 10 | "tailwind", 11 | "apply", 12 | "variants", 13 | "responsive", 14 | "screen" 15 | ] 16 | } 17 | ] 18 | }, 19 | "csstree/validator": true, 20 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 21 | } 22 | 23 | -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-unused-vars */ 2 | const homeLink = document.querySelector('#homeLink'); 3 | const aboutLink = document.querySelector('#aboutLink'); 4 | const speakersCards = document.querySelector('.speakers-elt') 5 | 6 | function OpenMenu() { 7 | document.querySelector('.menuformobile').style.display = 'flex'; 8 | document.querySelector('.closeicon').style.display = 'block'; 9 | document.querySelector('main').style.filter = ' blur(6px)'; 10 | 11 | 12 | } 13 | 14 | function CloseMenu() { 15 | document.querySelector('.menuformobile').style.display = 'none'; 16 | document.querySelector('header').style.filter = ' blur(0)'; 17 | document.querySelector('main').style.filter = ' blur(0)'; 18 | document.querySelector('headeline').style.filter = ' blur(0)'; 19 | document.querySelector('footer').style.filter = ' blur(0)'; 20 | } 21 | 22 | aboutLink.addEventListener('click', () => { 23 | document.querySelector('.menuformobile').style.display = 'none'; 24 | document.querySelector('header').style.filter = ' blur(0)'; 25 | document.querySelector('.headeline').style.filter = ' blur(0)'; 26 | document.querySelector('main').style.filter = ' blur(0)'; 27 | document.querySelector('footer').style.filter = ' blur(0)'; 28 | }); 29 | 30 | homeLink.addEventListener('click', () => { 31 | document.querySelector('.menuformobile').style.display = 'none'; 32 | document.querySelector('header').style.filter = ' blur(0)'; 33 | document.querySelector('.headeline').style.filter = ' blur(0)'; 34 | document.querySelector('main').style.filter = ' blur(0)'; 35 | document.querySelector('footer').style.filter = ' blur(0)'; 36 | }); 37 | 38 | /* eslint-disable no-unused-vars */ 39 | const SpeakersList = [ 40 | { 41 | speakername: 'Satya Nadella', 42 | imagelink: 'style/images/speaker1.jpeg', 43 | desc1: 'Microsoft CEO ', 44 | desc2: 'Satya Nadella knows a thing or two about success in business. The technology executive reportedly earned over $16 million in pay last year' 45 | }, 46 | { 47 | speakername: 'Bill Gates', 48 | imagelink: 'style/images/speaker2.jpeg', 49 | desc1: 'Co-founder of Microsoft', 50 | desc2: 'William Henry Gates III is an American business magnate, software developer, investor, author, and philanthropist. He is a co-founder of Microsoft' 51 | }, 52 | { 53 | speakername: 'Linus Torvalds', 54 | imagelink: 'style/images/speaker3.jpeg', 55 | desc1: 'Founder of Linux', 56 | desc2: 'Linus Benedict Torvalds is a Finnish-American software engineer who is the creator and the lead developer of the Linux kernel. He also created the distributed version control system Git. ' 57 | }, 58 | { 59 | speakername: 'Mark Zuckerberg', 60 | imagelink: 'style/images/speaker4.jpeg', 61 | desc1: 'CEO of FaceBook', 62 | desc2: 'Mark Elliot Zuckerberg is an American business magnate, internet entrepreneur, and philanthropist. He is known for co-founding the social media website Facebook ' 63 | }, 64 | { 65 | speakername: 'Brian Chesky', 66 | imagelink: 'style/images/speaker5.jpeg', 67 | desc1: 'CEO of airbnb', 68 | desc2: 'Brian Joseph Chesky is an American businessman and industrial designer. He is the co-founder and CEO of the peer-to-peer lodging service Airbnb.' 69 | }, 70 | { 71 | speakername: 'Sundar Pichai', 72 | imagelink: 'style/images/speaker6.jpeg', 73 | desc1: 'CEO of Google', 74 | desc2: 'Pichai Sundararajan, better known as Sundar Pichai, is an Indian-American business executive..' 75 | }, 76 | ] 77 | 78 | 79 | for(let i=0;i 82 | 83 |
84 |

${SpeakersList[i].speakername}

85 |

${SpeakersList[i].desc1}

86 |
87 |

${SpeakersList[i].desc2}

88 |
89 | 90 | ` 91 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # First-Capstone 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | logo 11 |
12 | 13 |

Microverse README Template

14 | 15 |
16 | 17 | 18 | 19 | # 📗 Table of Contents 20 | 21 | - [📗 Table of Contents](#-table-of-contents) 22 | - [📖 Capstone-Project: Summer BootCamp 2023 ](#-capstone-project-summer-bootcamp-2023-) 23 | - [🛠 Built With ](#-built-with-) 24 | - [🚀 Live Demo ](#-live-demo-) 25 | - [💻 Getting Started ](#-getting-started-) 26 | - [Prerequisites](#prerequisites) 27 | - [Setup](#setup) 28 | - [🔭 Future Features ](#-future-features-) 29 | - [🤝 Contributing ](#-contributing-) 30 | - [⭐️ Show your support ](#️-show-your-support-) 31 | - [🙏 Acknowledgments ](#-acknowledgments-) 32 | 33 | 34 | 35 | # 📖 Capstone-Project: Summer BootCamp 2023 36 | 37 | **Capstone-Project: Summer BootCamp 2023** is about crash courses in Computer Science during Summer. People can visit the website to see the details of the program. 38 | 39 | [Loom Video Presentation](https://www.loom.com/share/8265989651e04953b74b70498aef592e) 40 | 41 | ## 🛠 Built With 42 | HTML 43 | CSS 44 | Javascript 45 | 46 |

(back to top)

47 | 48 | 49 | ## 🚀 Live Demo 50 | 51 | [Summer BootCamp 2023]( https://salwa99.github.io/Summer-BootCamp/) 52 | 53 |

(back to top)

54 | 55 | 56 | ## 💻 Getting Started 57 | 58 | - Create a local directory that you want to clone the repository. 59 | 60 | - Open the command prompt in the created directory. 61 | 62 | - On the terminal run this command git clone https://github.com/Salwa99/First-Capstone.git 63 | 64 | - Install the dev dependencies for linters run npm install. 65 | 66 |

(back to top)

67 | 68 | ### Prerequisites 69 | 70 | In order to run this project you need: 71 | 72 | -Any broswer 73 | 74 | 75 |

(back to top)

76 | 77 | ### Setup 78 | 79 | Clone this repository to your desired folder: 80 | 81 | - Open the command prompt in the created directory. 82 | 83 | - On the terminal run this command git clone https://github.com/Salwa99/First-Capstone.git 84 | 85 | - Install the dev dependencies for linters run npm install. 86 | ---> 87 | 88 | 89 |

(back to top)

90 | 91 | 92 | 93 | 👤 **Author** 94 | 95 | - GitHub: [@Salwa99](https://github.com/Salwa99) 96 | - Twitter: [@Salwa Ballouti](https://twitter.com/salwa_ballouti) 97 | - LinkedIn: [Salwa Ballouti](https://www.linkedin.com/in/salwa-ballouti-096358251/) 98 | 99 | 100 |

(back to top)

101 | 102 | 103 | ## 🔭 Future Features 104 | 105 | - Implement some UX improvements: add the "More" button on the home page, includeing transitions and/or animation. 106 | 107 | - Implement additional pages. 108 | 109 |

(back to top)

110 | 111 | 112 | ## 🤝 Contributing 113 | 114 | Contributions, issues, and feature requests are welcome! 115 | 116 | Feel free to check the [issues page](https://github.com/Salwa99/First-Capstone.git/issues). 117 | 118 |

(back to top)

119 | 120 | 121 | ## ⭐️ Show your support 122 | 123 | Give a ⭐️ if you like this project! 124 | 125 |

(back to top)

126 | 127 | 128 | ## 🙏 Acknowledgments 129 | 130 | [Cindy Shin](https://www.behance.net/gallery/29845175/CC-Global-Summit-2015) for the Amazing Design Template. 131 | 132 | [fontawesome](https://fontawesome.com/) Special thanks to fontawesome for the icons assets. 133 | 134 | 135 |

(back to top)

136 | 137 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | About 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | Logout 21 | Contact 22 | Morocco 23 |
24 | 42 | 43 |
44 | 45 | 46 |
47 | close_icon 48 |
49 | 56 |
57 | 64 |
65 | 66 | 67 |
68 | 69 |
70 |
71 |

"Hello! Coding Amateur"

72 |

SUMMER CRASH BOOTCAMP

73 |
74 | 75 |
76 |

Our summer Bootcamp comes with new features, it brings together a community of experts, academics, and activists who comprise great tech corporations. This year, we hope to expand our student list from all over the world.

77 |

Please contact us per Email for any further questions about summer Bootcamp!

78 |

summer.bootcamp2023@morocco.org

79 |
80 | 81 |
82 |

Summer BootCamp
Crash Courses 2023

83 |
84 |

The course kicks off on June 20 and ends on August 15, 2023.

85 | 86 |
87 |
88 |

See the past summer BootCamp

89 |
90 |

Take a look at the last two Summer BootCamp whic took place in Geneva and in Cape Town

91 |
92 |
93 |

2022

94 |

Our Bootcamp in Geneva

95 |
96 |
97 |

2021

98 |

Our Bootcamp in Cape Town

99 |
100 |
101 |
102 |
103 | 104 | 105 |
106 |
107 |

Partner

108 |
109 | 110 |
111 |

Microsoft

112 |

Google

113 |

FaceBook

114 |

Apple

115 |

airbnb

116 |
117 |
118 | 119 |
120 | creative-common 121 |

@2023 summer BootCamp Some rights reserved

122 |
123 |
124 | 125 | 126 |
127 | 128 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | First Capstone 13 | 14 | 15 | 16 | 17 |
18 | close_icon 19 |
20 | 27 |
28 | 35 |
36 | 37 | 38 |
39 |
40 | 41 | 42 | Logout 43 | Contact 44 | Morocco 45 |
46 | 64 | 65 | 66 |
67 |
68 |
69 |
70 |

"Hello! Coding Amateur"

71 |

SUMMER CRASH BOOTCAMP 2023

72 |

Our summer Bootcamp is coming up with new wonderful features, data science, and a full-stack program. Join over 1000 coders from several countries is taking place in June, in Canada

73 |
74 | 75 |
76 |

2023.06.05(MON) ~ 9(FRI)

77 |

@ Novotel Melbourne on Collins and more

78 |
79 |
80 | 81 | 82 |
83 |

84 | Main Program 85 |

86 |
87 |
88 | 89 |
90 | 91 |

Cloud

92 | 93 |

The cloud" refers to servers that are accessed over the Internet, and the software and databases that run on those servers

94 |
95 | 96 | 97 | 98 |
99 | 100 |

Node JS

101 | 102 |

The cloud" refers to servers that are accessed over the Internet, and the software and databases that run on those servers

103 |
104 | 105 | 106 | 107 |
108 | 109 |

Docker

110 |

The cloud" refers to servers that are accessed over the Internet, and the software and databases that run on those servers

111 |
112 | 113 | 114 | 115 | 116 |
117 | 118 |

DataBase

119 |

The cloud" refers to servers that are accessed over the Internet, and the software and databases that run on those servers

120 |
121 | 122 | 123 | 124 |
125 | 126 |

Grapghs

127 |

The cloud" refers to servers that are accessed over the Internet, and the software and databases that run on those servers

128 |
129 | 130 |
131 | SEE THE WHOLE PROGRAM 132 | 133 |
134 | 135 | 136 |
137 |

Featured Speakers

138 |
139 | 140 |
141 | 142 |
143 | 144 |
145 | 146 | 147 | 148 |
149 |
150 |

Partner

151 |
152 | 153 |
154 |

Google

155 | 156 |

Linux

157 |

airbnb

158 |

Microsoft

159 |

FaceBook

160 |
161 |
162 | 163 |
164 | creative-common 165 |

@2023 summer BootCamp Some rights reserved

166 |
167 |
168 | 169 |
170 | 171 | -------------------------------------------------------------------------------- /style/style1.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: 'Lato', sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | button { 8 | cursor: pointer; 9 | } 10 | 11 | .newtopbar { 12 | display: none; 13 | } 14 | 15 | .navmenu-desktop { 16 | display: none; 17 | } 18 | 19 | #menu-icon { 20 | padding: 5%; 21 | } 22 | 23 | /* mobile menu */ 24 | #logoimage { 25 | filter: invert(190%) sepia(23%) saturate(7495%) hue-rotate(346deg) brightness(100%) contrast(102%); 26 | } 27 | 28 | .menuformobile { 29 | display: none; 30 | z-index: 2; 31 | position: fixed; 32 | top: 0; 33 | height: 100vh; 34 | flex-direction: column; 35 | color: white; 36 | width: 100vw; 37 | background-color: rgba(238, 63, 63, 0.735); 38 | } 39 | 40 | .closeicon { 41 | width: 1.5rem; 42 | position: absolute; 43 | top: 3%; 44 | right: 8%; 45 | } 46 | 47 | .mobile-menu { 48 | margin: 0 25%; 49 | } 50 | 51 | .mobile-menu li { 52 | font-weight: 600; 53 | color: white; 54 | list-style: none; 55 | font-size: 2.3rem; 56 | width: 50%; 57 | padding: 0; 58 | margin-bottom: 20%; 59 | cursor: pointer; 60 | } 61 | 62 | .mobile-menu a { 63 | text-decoration: none; 64 | color: white; 65 | } 66 | 67 | .top-menu a { 68 | text-decoration: none; 69 | font-size: 1.2rem; 70 | font-weight: 800; 71 | cursor: pointer; 72 | color: white; 73 | } 74 | 75 | .mobile-menu li:last-child { 76 | border-bottom: none; 77 | } 78 | 79 | .top-menu ul { 80 | display: flex; 81 | flex-direction: row; 82 | align-items: center; 83 | gap: 5%; 84 | list-style: none; 85 | margin: 20% 7%; 86 | } 87 | 88 | /* end */ 89 | 90 | .desktop-menu, 91 | .top { 92 | display: none; 93 | } 94 | 95 | .headline { 96 | background-image: url("./images/headline.png"); 97 | background-repeat: no-repeat; 98 | background-size: cover; 99 | background-position: 3% right; 100 | padding: 5%; 101 | } 102 | 103 | .headline i { 104 | color: rgb(68, 68, 90); 105 | margin-bottom: 6%; 106 | font-size: 2rem; 107 | } 108 | 109 | .tittle { 110 | display: flex; 111 | align-items: center; 112 | flex-direction: column; 113 | } 114 | 115 | .tittle h3 { 116 | color: rgb(255, 73, 37); 117 | text-align: center; 118 | margin: 10px; 119 | } 120 | 121 | .tittle h1 { 122 | -webkit-background-clip: text; 123 | background-clip: text; 124 | background-image: url(https://w0.peakpx.com/wallpaper/194/474/HD-wallpaper-red-and-orange-texture-red-aesthetic.jpg); 125 | color: transparent; 126 | background-position: center left; 127 | text-align: center; 128 | font-weight: 900; 129 | } 130 | 131 | .headline img { 132 | width: 100%; 133 | } 134 | 135 | .headline2 { 136 | padding: 5%; 137 | color: rgb(77, 74, 70); 138 | text-align: center; 139 | display: flex; 140 | flex-direction: column; 141 | align-items: center; 142 | } 143 | 144 | .headline-desc2 { 145 | color: rgb(56, 54, 54); 146 | padding: 5%; 147 | border: 3px solid rgb(238, 231, 231); 148 | margin: 4% 0; 149 | display: flex; 150 | flex-direction: column; 151 | align-items: center; 152 | } 153 | 154 | .address { 155 | color: rgb(31, 30, 30); 156 | font-weight: bolder; 157 | text-decoration: underline; 158 | margin: 20px; 159 | } 160 | 161 | .headline-desc21 h2 { 162 | color: rgb(22, 21, 21); 163 | margin: 30px; 164 | } 165 | 166 | hr { 167 | width: 9%; 168 | border: 1px solid rgb(255, 73, 37); 169 | margin: 2% auto; 170 | } 171 | 172 | .boot-image { 173 | width: 75%; 174 | } 175 | 176 | .headline2 p { 177 | margin: 5%; 178 | } 179 | 180 | .past_bootcamps { 181 | display: flex; 182 | flex-direction: column; 183 | align-items: center; 184 | padding: 0 7%; 185 | text-align: center; 186 | } 187 | 188 | .past_bootcamps p { 189 | margin: 5% 3%; 190 | color: rgb(100, 100, 100); 191 | font-size: 13px; 192 | } 193 | 194 | .bootcampphotos { 195 | display: flex; 196 | flex-direction: column; 197 | align-items: center; 198 | } 199 | 200 | .firstphoto { 201 | width: 80vw; 202 | height: 23vh; 203 | background: url('/style/images/pic1.jpg'); 204 | box-shadow: inset -100vw -100vh rgba(252, 3, 3, 0.594); 205 | background-size: cover; 206 | margin: 3%; 207 | transition: all 0.5s; 208 | } 209 | 210 | .secondphoto { 211 | width: 80vw; 212 | height: 23vh; 213 | background: url('/style/images/pic2.jpg'); 214 | background-size: cover; 215 | box-shadow: inset -100vw -100vh rgba(252, 3, 3, 0.594); 216 | margin: 3% 0 6% 0; 217 | transition: all 0.5s; 218 | } 219 | 220 | .past { 221 | display: flex; 222 | flex-direction: column; 223 | justify-content: center; 224 | cursor: pointer; 225 | } 226 | 227 | .past h2 { 228 | font-weight: 800; 229 | color: white; 230 | } 231 | 232 | .past p { 233 | color: white; 234 | } 235 | 236 | .past:hover { 237 | box-shadow: none; 238 | } 239 | 240 | .partner { 241 | display: flex; 242 | flex-direction: column; 243 | align-items: center; 244 | background-color: #434344; 245 | margin-top: 5%; 246 | } 247 | 248 | .partner h2 { 249 | text-align: center; 250 | color: white; 251 | margin: 3%; 252 | font-weight: bolder; 253 | } 254 | 255 | .partner-corporation { 256 | display: flex; 257 | flex-wrap: wrap; 258 | justify-content: center; 259 | gap: 20px; 260 | margin: 2% 0; 261 | padding: 3%; 262 | } 263 | 264 | .partner-corporation h3 { 265 | color: #979494; 266 | font-size: 1.6rem; 267 | text-align: center; 268 | } 269 | 270 | .partner-corporation h3 i { 271 | margin-right: 5px; 272 | gap: 20px; 273 | align-items: center; 274 | } 275 | 276 | .logo-rights { 277 | display: flex; 278 | flex-direction: row; 279 | align-items: center; 280 | justify-content: space-between; 281 | margin: 2%; 282 | } 283 | 284 | .logo-rights img { 285 | width: 40%; 286 | } 287 | 288 | .logo-rights p { 289 | color: #434344; 290 | width: 60%; 291 | height: 50px; 292 | font-size: 0.85rem; 293 | } 294 | 295 | /* media query */ 296 | 297 | @media all and (min-width: 768px) { 298 | .top { 299 | display: flex; 300 | } 301 | 302 | .newtopbar { 303 | background: black; 304 | height: 4vh; 305 | color: white; 306 | display: flex; 307 | align-items: center; 308 | justify-content: flex-end; 309 | padding-right: 4%; 310 | } 311 | 312 | .newtopbar a { 313 | text-decoration: none; 314 | color: white; 315 | font-size: 0.8rem; 316 | margin: auto 1%; 317 | } 318 | 319 | .newtopbar i { 320 | font-size: 1.2rem; 321 | margin-left: 1%; 322 | } 323 | 324 | .navmenu-desktop { 325 | display: flex; 326 | justify-content: center; 327 | border-bottom: 0.5px solid rgb(230, 230, 230); 328 | padding: 0 5%; 329 | } 330 | 331 | .desktopnav { 332 | display: flex; 333 | align-items: center; 334 | margin-left: auto; 335 | } 336 | 337 | #sitelogo { 338 | width: 20%; 339 | } 340 | 341 | .navmenu-desktop img { 342 | width: 55%; 343 | } 344 | 345 | .desktopnav a { 346 | text-decoration: none; 347 | color: black; 348 | font-weight: 400; 349 | } 350 | 351 | #activelink { 352 | color: rgb(255, 73, 37); 353 | } 354 | 355 | .desktopnav a:hover { 356 | color: rgb(255, 73, 37); 357 | } 358 | 359 | .desktopnav li { 360 | margin-right: 2rem; 361 | list-style: none; 362 | } 363 | 364 | .desktopnav button { 365 | background: transparent; 366 | border: 4px solid rgb(255, 73, 37); 367 | padding: 7% 10%; 368 | width: 10vw; 369 | color: rgb(255, 73, 37); 370 | } 371 | 372 | .desktopnav button:hover { 373 | background: rgb(255, 73, 37); 374 | color: white; 375 | } 376 | 377 | .compaign { 378 | padding: 10px; 379 | border: 2px solid rgb(35, 59, 122); 380 | } 381 | 382 | .compaign:hover { 383 | border: 2px solid rgb(18, 208, 233); 384 | } 385 | 386 | #menu-icon { 387 | display: none; 388 | } 389 | 390 | .tittle h1 { 391 | font-size: 2.7rem; 392 | } 393 | 394 | .headline2 { 395 | display: flex; 396 | flex-direction: column; 397 | align-items: center; 398 | } 399 | 400 | .headline21 { 401 | background-image: url("./images/headline.png"); 402 | background-repeat: no-repeat; 403 | background-size: cover; 404 | background-position: 0 right; 405 | } 406 | 407 | .headline-desc2 { 408 | margin: 0 10%; 409 | font-size: 1rem; 410 | color: #57585a; 411 | padding: 4% 10%; 412 | } 413 | 414 | .headline2 .p { 415 | margin: 0; 416 | padding: 0; 417 | } 418 | 419 | .headline2 .address { 420 | margin: 0; 421 | padding: 0; 422 | cursor: pointer; 423 | } 424 | 425 | .headline-desc21 { 426 | width: 89vw; 427 | color: rgb(102, 99, 99); 428 | padding: 5%; 429 | border: 3px solid rgb(238, 231, 231); 430 | margin: 4% 0; 431 | display: flex; 432 | flex-direction: column; 433 | align-items: center; 434 | } 435 | 436 | .null { 437 | display: none; 438 | } 439 | 440 | .headline-desc21 h2 { 441 | font-size: 2rem; 442 | margin: 0; 443 | } 444 | 445 | .headline-desc21 hr { 446 | width: 2%; 447 | margin: 1%; 448 | } 449 | 450 | .headline-desc21 p { 451 | margin: 0; 452 | } 453 | 454 | .headline-desc21 .boot-image { 455 | width: 17%; 456 | margin: 2%; 457 | padding: 2% 15%; 458 | border: 1px solid rgb(224, 221, 221); 459 | } 460 | 461 | .past_bootcamps p { 462 | margin: 3%; 463 | font-size: 1rem; 464 | } 465 | 466 | .bootcampphotos { 467 | flex-direction: row; 468 | align-items: baseline; 469 | } 470 | 471 | .past { 472 | width: 40vw; 473 | height: 35vh; 474 | } 475 | 476 | .miage-container1, 477 | .image-container2 { 478 | width: 40vw; 479 | } 480 | 481 | .partner { 482 | display: none; 483 | } 484 | 485 | footer { 486 | display: flex; 487 | flex-direction: row; 488 | align-items: center; 489 | background: rgb(44, 42, 42); 490 | width: 100%; 491 | height: 25vh; 492 | } 493 | 494 | .logo-rights { 495 | display: flex; 496 | flex-direction: row; 497 | align-items: center; 498 | justify-content: space-around; 499 | margin: 30%; 500 | } 501 | 502 | .logo-rights img { 503 | width: 22%; 504 | } 505 | 506 | .logo-rights p { 507 | color: white; 508 | margin: 0; 509 | padding: 0; 510 | } 511 | 512 | main { 513 | filter: blur(0) !important; 514 | } 515 | 516 | .menuformobile { 517 | display: none !important; 518 | } 519 | } 520 | -------------------------------------------------------------------------------- /style/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: 'Lato', sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .newtopbar { 8 | display: none; 9 | } 10 | 11 | .navmenu-desktop { 12 | display: none; 13 | } 14 | 15 | button { 16 | cursor: pointer; 17 | } 18 | 19 | #menu-icon { 20 | padding: 5%; 21 | } 22 | 23 | /* mobile menu */ 24 | #logoimage { 25 | filter: invert(190%) sepia(23%) saturate(7495%) hue-rotate(346deg) brightness(100%) contrast(102%); 26 | } 27 | 28 | .menuformobile { 29 | display: none; 30 | z-index: 2; 31 | position: fixed; 32 | height: 100vh; 33 | flex-direction: column; 34 | color: white; 35 | width: 100vw; 36 | background-color: rgba(238, 63, 63, 0.735); 37 | } 38 | 39 | .closeicon { 40 | width: 1.5rem; 41 | position: absolute; 42 | top: 3%; 43 | right: 8%; 44 | } 45 | 46 | .mobile-menu { 47 | margin: 0 25%; 48 | } 49 | 50 | .mobile-menu li { 51 | font-weight: 600; 52 | color: white; 53 | list-style: none; 54 | font-size: 2.3rem; 55 | width: 50%; 56 | padding: 0; 57 | margin-bottom: 20%; 58 | cursor: pointer; 59 | } 60 | 61 | .top-menu a { 62 | text-decoration: none; 63 | font-size: 1.2rem; 64 | font-weight: 800; 65 | cursor: pointer; 66 | color: white; 67 | } 68 | 69 | .mobile-menu a { 70 | text-decoration: none; 71 | color: white; 72 | } 73 | 74 | .top-menu ul { 75 | display: flex; 76 | flex-direction: row; 77 | align-items: center; 78 | gap: 5%; 79 | list-style: none; 80 | margin: 20% 7%; 81 | } 82 | 83 | /* end */ 84 | 85 | .headline { 86 | background-image: url("./images/headline.png"); 87 | background-repeat: no-repeat; 88 | background-size: cover; 89 | background-position: right; 90 | padding: 5%; 91 | color: rgb(77, 74, 70); 92 | } 93 | 94 | .desktop-menu, 95 | .top { 96 | display: none; 97 | } 98 | 99 | .headline i { 100 | color: rgb(33, 33, 44); 101 | margin-bottom: 5%; 102 | font-size: 2rem; 103 | } 104 | 105 | .tittle h3 { 106 | color: rgb(255, 73, 37); 107 | } 108 | 109 | .tittle h1 { 110 | -webkit-background-clip: text; 111 | background-clip: text; 112 | background-image: url(https://w0.peakpx.com/wallpaper/194/474/HD-wallpaper-red-and-orange-texture-red-aesthetic.jpg); 113 | color: transparent; 114 | background-position: center left; 115 | font-size: 2.5rem; 116 | font-weight: 950; 117 | } 118 | 119 | .headline-desc { 120 | color: rgb(97, 97, 97); 121 | padding: 5%; 122 | border: 3px solid rgb(152, 152, 152); 123 | margin: 2% 0; 124 | } 125 | 126 | .venue { 127 | color: rgb(94, 89, 89); 128 | } 129 | 130 | .date h3 { 131 | font-size: 1.7rem; 132 | font-weight: 800; 133 | color: rgb(80, 79, 75); 134 | } 135 | 136 | hr { 137 | width: 15%; 138 | border: 1px solid rgb(255, 73, 37); 139 | margin: 3% 0; 140 | } 141 | 142 | .container { 143 | display: flex; 144 | flex-direction: column; 145 | align-items: center; 146 | background-image: url('https://w0.peakpx.com/wallpaper/790/822/HD-wallpaper-black-mesh-texture-creative-black-background-hexagons-texture-black-texture-mesh-black-background-thumbnail.jpg'); 147 | padding: 3%; 148 | border-radius: 3px; 149 | } 150 | 151 | .wrap { 152 | display: flex; 153 | align-items: center; 154 | justify-content: space-between; 155 | background-color: rgba(82, 81, 81, 0.6); 156 | padding: 5%; 157 | margin: 2%; 158 | } 159 | 160 | .container h3, 161 | p { 162 | color: white; 163 | } 164 | 165 | .partner-corporation h3 { 166 | color: #979494; 167 | font-size: 1.4rem; 168 | text-align: center; 169 | } 170 | 171 | .container .wrap h3 { 172 | color: rgb(255, 73, 37); 173 | font-size: 0.9rem; 174 | } 175 | 176 | .wrap i { 177 | color: white; 178 | font-size: 1.3rem; 179 | } 180 | 181 | .wrap p { 182 | width: 60%; 183 | font-size: 0.85rem; 184 | } 185 | 186 | .button { 187 | background-color: rgb(255, 73, 37); 188 | border: none; 189 | color: #fff; 190 | width: 80vw; 191 | font-size: 1rem; 192 | padding: 4% 5%; 193 | margin: 3%; 194 | } 195 | 196 | .link-program { 197 | display: none; 198 | } 199 | 200 | .speakers { 201 | display: flex; 202 | flex-direction: column; 203 | align-items: center; 204 | justify-content: space-between; 205 | margin: 5% 0; 206 | } 207 | 208 | .speaker-wrap { 209 | display: flex; 210 | flex-direction: row; 211 | align-items: center; 212 | gap: 20px; 213 | padding: 20px; 214 | } 215 | 216 | .speakers .desc { 217 | font-style: italic; 218 | color: rgb(255, 73, 37); 219 | } 220 | 221 | .speaker-wrap img { 222 | width: 100px; 223 | height: 100px; 224 | background-image: url('./images/speaker_bg.jpg'); 225 | background-repeat: no-repeat; 226 | background-size: 85px; 227 | padding: 15px; 228 | object-fit: cover; 229 | } 230 | 231 | .presentation { 232 | display: flex; 233 | flex-direction: column; 234 | } 235 | 236 | .speakers hr { 237 | width: 9%; 238 | border: 1px solid rgb(255, 73, 37); 239 | } 240 | 241 | .speaker-wrap p { 242 | color: black; 243 | font-size: 0.85rem; 244 | } 245 | 246 | .speaker-wrap hr { 247 | border: 1px solid rgb(179, 175, 175); 248 | } 249 | 250 | .partner { 251 | display: flex; 252 | flex-direction: column; 253 | flex-wrap: wrap; 254 | background-color: #434344; 255 | margin-top: 5%; 256 | align-items: center; 257 | justify-content: center; 258 | } 259 | 260 | .partner h2 { 261 | text-align: center; 262 | color: white; 263 | margin-top: 3%; 264 | font-weight: bolder; 265 | } 266 | 267 | .partner hr { 268 | margin-bottom: 5%; 269 | font-weight: bolder; 270 | } 271 | 272 | .partner-corporation { 273 | display: flex; 274 | flex-wrap: wrap; 275 | justify-content: center; 276 | gap: 20px; 277 | margin: 2% 0; 278 | padding: 3%; 279 | } 280 | 281 | .logo-rights { 282 | display: flex; 283 | flex-direction: row; 284 | align-items: center; 285 | justify-content: space-between; 286 | margin: 2%; 287 | } 288 | 289 | .logo-rights img { 290 | width: 40%; 291 | } 292 | 293 | .logo-rights p { 294 | color: #434344; 295 | width: 60%; 296 | height: 50px; 297 | font-size: 0.85rem; 298 | } 299 | 300 | /* media query */ 301 | 302 | @media all and (min-width: 768px) { 303 | .newtopbar { 304 | background: black; 305 | height: 4vh; 306 | color: white; 307 | display: flex; 308 | align-items: center; 309 | justify-content: flex-end; 310 | padding-right: 4%; 311 | } 312 | 313 | .newtopbar a { 314 | text-decoration: none; 315 | color: white; 316 | font-size: 0.8rem; 317 | margin: auto 1%; 318 | } 319 | 320 | .newtopbar i { 321 | font-size: 1.2rem; 322 | margin-left: 1%; 323 | } 324 | 325 | .navmenu-desktop { 326 | display: flex; 327 | justify-content: center; 328 | border-bottom: 0.5px solid rgb(230, 230, 230); 329 | padding: 0 5%; 330 | } 331 | 332 | .desktopnav { 333 | display: flex; 334 | align-items: center; 335 | margin-left: auto; 336 | } 337 | 338 | #sitelogo { 339 | width: 20%; 340 | } 341 | 342 | .navmenu-desktop img { 343 | width: 55%; 344 | } 345 | 346 | .desktopnav a { 347 | text-decoration: none; 348 | color: black; 349 | font-weight: 400; 350 | } 351 | 352 | #activelink { 353 | color: rgb(255, 73, 37); 354 | } 355 | 356 | .desktopnav a:hover { 357 | color: rgb(255, 73, 37); 358 | } 359 | 360 | .desktopnav li { 361 | margin-right: 2rem; 362 | list-style: none; 363 | } 364 | 365 | .desktopnav button { 366 | background: transparent; 367 | border: 4px solid rgb(255, 73, 37); 368 | padding: 7% 10%; 369 | width: 10vw; 370 | color: rgb(255, 73, 37); 371 | } 372 | 373 | .desktopnav button:hover { 374 | background: rgb(255, 73, 37); 375 | color: white; 376 | } 377 | 378 | .compaign { 379 | padding: 10px; 380 | border: 2px solid rgb(35, 59, 122); 381 | } 382 | 383 | .compaign:hover { 384 | border: 2px solid rgb(18, 208, 233); 385 | } 386 | 387 | .tittle { 388 | margin: 7%; 389 | } 390 | 391 | .tittle h3 { 392 | font-size: 2rem; 393 | } 394 | 395 | .tittle h1 { 396 | font-size: 3.5rem; 397 | width: 48%; 398 | } 399 | 400 | .headline-desc { 401 | width: 50vw; 402 | } 403 | 404 | .date { 405 | margin: 7%; 406 | } 407 | 408 | .date h3 { 409 | font-size: 2.5rem; 410 | } 411 | 412 | .venue { 413 | font-size: 1.2rem; 414 | } 415 | 416 | .container { 417 | margin-top: 4%; 418 | display: flex; 419 | flex-direction: column; 420 | 421 | /* align-items: center; */ 422 | 423 | /* height: 60vh; */ 424 | } 425 | 426 | .container2 { 427 | display: flex; 428 | flex-direction: row; 429 | align-items: center; 430 | gap: 2%; 431 | } 432 | 433 | .wrap { 434 | display: flex; 435 | padding: 2%; 436 | border-radius: 2px; 437 | margin: 1%; 438 | flex-direction: column; 439 | cursor: pointer; 440 | transition: all 0.4s ease-in-out; 441 | justify-content: space-around; 442 | } 443 | 444 | .wrap:hover { 445 | transform: scale(1.1); 446 | border: 2px solid rgba(154, 154, 154, 0.466); 447 | } 448 | 449 | .wrap p { 450 | width: auto; 451 | } 452 | 453 | .container h3 { 454 | font-size: 1.7rem; 455 | } 456 | 457 | hr { 458 | width: 4%; 459 | margin-top: 2%; 460 | } 461 | 462 | .button { 463 | display: none; 464 | } 465 | 466 | #menu-icon { 467 | display: none; 468 | } 469 | 470 | .link-program { 471 | display: block; 472 | color: #fff; 473 | width: 80%; 474 | font-size: 0.9rem; 475 | text-decoration: underline; 476 | padding: 20px; 477 | margin-top: 3%; 478 | text-align: center; 479 | cursor: pointer; 480 | transition: all 0.4s ease-in-out; 481 | } 482 | 483 | .speakers hr { 484 | width: 3%; 485 | margin-top: 1%; 486 | } 487 | 488 | .speakers-elt { 489 | width: 65%; 490 | display: grid; 491 | grid-template-columns: 50% 50%; 492 | align-items: center; 493 | justify-content: space-between; 494 | } 495 | 496 | .speaker-wrap { 497 | display: flex; 498 | } 499 | 500 | .more { 501 | display: none; 502 | } 503 | 504 | .partner { 505 | display: flex; 506 | flex-direction: column; 507 | } 508 | 509 | .partner h2 { 510 | margin-bottom: 1%; 511 | color: white; 512 | } 513 | 514 | .partner hr { 515 | margin: 0; 516 | } 517 | 518 | .partner-corporation { 519 | margin-bottom: 5%; 520 | display: flex; 521 | gap: 30px; 522 | flex-direction: row; 523 | flex-wrap: wrap; 524 | } 525 | 526 | .partner-corporation h3 { 527 | font-size: 2.5rem; 528 | display: flex; 529 | gap: 12px; 530 | } 531 | 532 | .logo-rights { 533 | justify-content: center; 534 | display: flex; 535 | padding: 2%; 536 | align-items: center; 537 | } 538 | 539 | .logo-rights img { 540 | width: 15%; 541 | margin-left: 25%; 542 | } 543 | 544 | .logo-rights p { 545 | margin-left: 5%; 546 | font-size: 0.9rem; 547 | } 548 | 549 | main { 550 | filter: blur(0) !important; 551 | } 552 | 553 | .menuformobile { 554 | display: none !important; 555 | } 556 | } 557 | --------------------------------------------------------------------------------