├── .gitignore ├── img ├── capDoc.png ├── dummy.png ├── logo.png ├── ST_nubes.png ├── arrow_up.png ├── bg-dark.png ├── chess-bg.png ├── discover.png ├── explore.png ├── facebook.png ├── familias.jpg ├── favicon.ico ├── favicon.png ├── main_big.png ├── profes1.jpg ├── project.png ├── rocket5.png ├── speaker7.png ├── totopbtn.png ├── twitter.png ├── arrow_down.png ├── challenge.png ├── designathon.png ├── fotoPrueba.png ├── logo-light.png ├── ninosninas.jpg ├── sparkmaker.png ├── speaker1.jpeg ├── speaker2.jpeg ├── speaker3.jpeg ├── speaker4.jpeg ├── speaker5.jpeg ├── speaker6.jpeg ├── ST_estrellas.png ├── 1598572662985.jpeg ├── background-stars.png ├── program_icon_01.png ├── program_icon_02.png ├── program_icon_03.png ├── program_icon_04.png ├── program_icon_05.png ├── inspiration-geometry.png ├── program_icon_01 (1).png ├── program_icon_02 (1).png ├── program_icon_03 (1).png └── program_icon_04 (1).png ├── .hintrc ├── .eslintrc.json ├── .stylelintrc.json ├── .vscode └── settings.json ├── MIT.md ├── JS ├── data.js └── index.js ├── .github └── workflows │ └── linters.yml ├── README.md ├── about-me.html ├── index.html └── CSS ├── styles.css └── about-me.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | dist/*.html 4 | dist/*.css 5 | 6 | test.md 7 | 8 | .DS_Store -------------------------------------------------------------------------------- /img/capDoc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/capDoc.png -------------------------------------------------------------------------------- /img/dummy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/dummy.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/ST_nubes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/ST_nubes.png -------------------------------------------------------------------------------- /img/arrow_up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/arrow_up.png -------------------------------------------------------------------------------- /img/bg-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/bg-dark.png -------------------------------------------------------------------------------- /img/chess-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/chess-bg.png -------------------------------------------------------------------------------- /img/discover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/discover.png -------------------------------------------------------------------------------- /img/explore.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/explore.png -------------------------------------------------------------------------------- /img/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/facebook.png -------------------------------------------------------------------------------- /img/familias.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/familias.jpg -------------------------------------------------------------------------------- /img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/favicon.ico -------------------------------------------------------------------------------- /img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/favicon.png -------------------------------------------------------------------------------- /img/main_big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/main_big.png -------------------------------------------------------------------------------- /img/profes1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/profes1.jpg -------------------------------------------------------------------------------- /img/project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/project.png -------------------------------------------------------------------------------- /img/rocket5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/rocket5.png -------------------------------------------------------------------------------- /img/speaker7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/speaker7.png -------------------------------------------------------------------------------- /img/totopbtn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/totopbtn.png -------------------------------------------------------------------------------- /img/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/twitter.png -------------------------------------------------------------------------------- /img/arrow_down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/arrow_down.png -------------------------------------------------------------------------------- /img/challenge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/challenge.png -------------------------------------------------------------------------------- /img/designathon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/designathon.png -------------------------------------------------------------------------------- /img/fotoPrueba.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/fotoPrueba.png -------------------------------------------------------------------------------- /img/logo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/logo-light.png -------------------------------------------------------------------------------- /img/ninosninas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/ninosninas.jpg -------------------------------------------------------------------------------- /img/sparkmaker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/sparkmaker.png -------------------------------------------------------------------------------- /img/speaker1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/speaker1.jpeg -------------------------------------------------------------------------------- /img/speaker2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/speaker2.jpeg -------------------------------------------------------------------------------- /img/speaker3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/speaker3.jpeg -------------------------------------------------------------------------------- /img/speaker4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/speaker4.jpeg -------------------------------------------------------------------------------- /img/speaker5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/speaker5.jpeg -------------------------------------------------------------------------------- /img/speaker6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/speaker6.jpeg -------------------------------------------------------------------------------- /img/ST_estrellas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/ST_estrellas.png -------------------------------------------------------------------------------- /img/1598572662985.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/1598572662985.jpeg -------------------------------------------------------------------------------- /img/background-stars.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/background-stars.png -------------------------------------------------------------------------------- /img/program_icon_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/program_icon_01.png -------------------------------------------------------------------------------- /img/program_icon_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/program_icon_02.png -------------------------------------------------------------------------------- /img/program_icon_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/program_icon_03.png -------------------------------------------------------------------------------- /img/program_icon_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/program_icon_04.png -------------------------------------------------------------------------------- /img/program_icon_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/program_icon_05.png -------------------------------------------------------------------------------- /img/inspiration-geometry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/inspiration-geometry.png -------------------------------------------------------------------------------- /img/program_icon_01 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/program_icon_01 (1).png -------------------------------------------------------------------------------- /img/program_icon_02 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/program_icon_02 (1).png -------------------------------------------------------------------------------- /img/program_icon_03 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/program_icon_03 (1).png -------------------------------------------------------------------------------- /img/program_icon_04 (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ClaudiaRojasSoto/Capstone_Project1/HEAD/img/program_icon_04 (1).png -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5502, 3 | "workbench.colorCustomizations": { 4 | "activityBar.activeBackground": "#ff3333", 5 | "activityBar.background": "#ff3333", 6 | "activityBar.foreground": "#e7e7e7", 7 | "activityBar.inactiveForeground": "#e7e7e799", 8 | "activityBarBadge.background": "#00df00", 9 | "activityBarBadge.foreground": "#15202b", 10 | "commandCenter.border": "#e7e7e799", 11 | "sash.hoverBorder": "#ff3333", 12 | "statusBar.background": "#ff0000", 13 | "statusBar.foreground": "#e7e7e7", 14 | "statusBarItem.hoverBackground": "#ff3333", 15 | "statusBarItem.remoteBackground": "#ff0000", 16 | "statusBarItem.remoteForeground": "#e7e7e7", 17 | "titleBar.activeBackground": "#ff0000", 18 | "titleBar.activeForeground": "#e7e7e7", 19 | "titleBar.inactiveBackground": "#ff000099", 20 | "titleBar.inactiveForeground": "#e7e7e799" 21 | }, 22 | "peacock.color": "red" 23 | } -------------------------------------------------------------------------------- /MIT.md: -------------------------------------------------------------------------------- 1 | ## Copyright 2021, [YOUR NAME] 2 | 3 | ###### Please delete this line and the next one 4 | ###### APP TYPE can be a webpage/website, a web app, a software and so on 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy of this [APP TYPE] and associated documentation files, to deal in the [APP TYPE] without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the [APP TYPE], and to permit persons to whom the [APP TYPE] is furnished to do so, subject to the following conditions: 7 | 8 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the [APP TYPE]. 9 | 10 | THE [APP TYPE] IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE [APP TYPE] OR THE USE OR OTHER DEALINGS IN THE [APP TYPE]. 11 | -------------------------------------------------------------------------------- /JS/data.js: -------------------------------------------------------------------------------- 1 | const speakersData = [ 2 | { 3 | name: 'Kirsten Egerman', 4 | profession: 'journalist, founder and Director of SparkTalent NGO', 5 | image: './img/speaker1.jpeg', 6 | background: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisicing elit', 7 | }, 8 | { 9 | name: 'Pablo Torres', 10 | profession: 'physics teacher. Master in Education from PUC. Lego Ed Representative', 11 | image: './img/speaker6.jpeg', 12 | background: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisicing elit', 13 | }, 14 | { 15 | name: 'Camila Urrejola', 16 | profession: 'journalist, media and internal relations manager of SparkTalent NGO', 17 | image: './img/speaker2.jpeg', 18 | background: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisicing elit', 19 | }, 20 | { 21 | name: 'Benjamín Hidalgo', 22 | profession: 'Language teacher. Doctor of education from PUC. Lego Ed Representative', 23 | image: './img/speaker3.jpeg', 24 | background: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisicing elit', 25 | }, 26 | { 27 | name: 'Orlando Rojas', 28 | profession: 'Computer engineer, international representative of SparkTalent NGO', 29 | image: './img/speaker4.jpeg', 30 | background: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisicing elit', 31 | }, 32 | { 33 | name: 'Gaspar González', 34 | profession: 'Magician. Doctor of education and specialist in happiness in the classroom', 35 | image: './img/speaker7.png', 36 | background: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur adipisicing elit', 37 | }, 38 | ]; 39 | 40 | export default speakersData; -------------------------------------------------------------------------------- /.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@v3 14 | - uses: actions/setup-node@v3 15 | with: 16 | node-version: "18.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.11.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@v3 26 | - uses: actions/setup-node@v3 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@v3 40 | - uses: actions/setup-node@v3 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@v3 54 | - uses: actions/setup-node@v3 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@v3 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 -------------------------------------------------------------------------------- /JS/index.js: -------------------------------------------------------------------------------- 1 | import speakersData from './data.js'; 2 | 3 | const nav = document.querySelector('.my-nav'); 4 | 5 | const menuToggle = document.createElement('div'); 6 | menuToggle.classList.add('menu-toggle'); 7 | menuToggle.innerHTML = '☰'; 8 | menuToggle.style.cursor = 'pointer'; 9 | 10 | nav.appendChild(menuToggle); 11 | 12 | const mobileMenu = document.createElement('div'); 13 | mobileMenu.classList.add('nav-mobile'); 14 | 15 | const closeIcon = document.createElement('div'); 16 | closeIcon.classList.add('close-icon'); 17 | closeIcon.innerHTML = '✕'; 18 | closeIcon.style.cursor = 'pointer'; 19 | 20 | const menuItems = document.createElement('ul'); 21 | menuItems.classList.add('menu-list'); 22 | 23 | const menuOptions = [ 24 | { label: 'Home', href: 'index.html' }, 25 | { label: 'About', href: 'about-me.html' }, 26 | { label: 'Program', href: 'index.html#program' }, 27 | { label: 'Join', href: '#join' }, 28 | { label: 'News', href: '#news' }, 29 | { label: 'Contact', href: '#contact' }, 30 | ]; 31 | 32 | menuOptions.forEach((option) => { 33 | const menuItem = document.createElement('li'); 34 | const menuLink = document.createElement('a'); 35 | menuLink.href = option.href; 36 | menuLink.textContent = option.label; 37 | 38 | menuItem.appendChild(menuLink); 39 | menuItems.appendChild(menuItem); 40 | }); 41 | 42 | nav.appendChild(menuToggle); 43 | 44 | mobileMenu.appendChild(closeIcon); 45 | mobileMenu.appendChild(menuItems); 46 | 47 | function openMenu() { 48 | document.body.classList.add('menu-open'); 49 | nav.appendChild(mobileMenu); 50 | } 51 | 52 | function closeMenu() { 53 | document.body.classList.remove('menu-open'); 54 | nav.removeChild(mobileMenu); 55 | } 56 | 57 | menuToggle.addEventListener('click', openMenu); 58 | 59 | closeIcon.addEventListener('click', closeMenu); 60 | 61 | // Build Featured Speakers section 62 | function updateCardLayout() { 63 | const featuredSpeakersSection = document.createElement('section'); 64 | featuredSpeakersSection.classList.add('featured-speakers'); 65 | 66 | const programTitle = document.createElement('div'); 67 | programTitle.classList.add('program-title'); 68 | const programTitleHeading = document.createElement('h4'); 69 | programTitleHeading.textContent = 'Featured Speakers'; 70 | const programTitleLine = document.createElement('div'); 71 | programTitleLine.classList.add('line'); 72 | 73 | programTitle.appendChild(programTitleHeading); 74 | programTitle.appendChild(programTitleLine); 75 | 76 | featuredSpeakersSection.appendChild(programTitle); 77 | 78 | const cardContainer = document.createElement('div'); 79 | cardContainer.classList.add('featured-speakers-cards'); 80 | cardContainer.style.display = 'flex'; 81 | cardContainer.style.flexWrap = 'wrap'; 82 | 83 | speakersData.forEach((speaker, index) => { 84 | const card = document.createElement('div'); 85 | card.classList.add('card'); 86 | 87 | if (window.innerWidth >= 769 || index < 2) { 88 | if (window.innerWidth >= 769) { 89 | card.style.width = '50%'; 90 | card.style.paddingLeft = '0'; 91 | card.style.marginBottom = '40px'; 92 | card.style.order = index % 2 === 0 ? '0' : '1'; 93 | } else { 94 | card.style.width = '100%'; 95 | card.style.paddingLeft = '0'; 96 | card.style.marginBottom = '40px'; 97 | } 98 | 99 | const speakerImage = document.createElement('div'); 100 | speakerImage.classList.add('speaker-image'); 101 | const image = document.createElement('img'); 102 | image.src = speaker.image; 103 | image.alt = `picture of ${speaker.name}`; 104 | speakerImage.appendChild(image); 105 | 106 | const speakerInfo = document.createElement('div'); 107 | speakerInfo.classList.add('speaker-info'); 108 | 109 | const speakerList = document.createElement('ul'); 110 | speakerList.classList.add('speaker'); 111 | 112 | const speakerName = document.createElement('li'); 113 | speakerName.classList.add('speaker-name'); 114 | speakerName.textContent = speaker.name; 115 | 116 | const speakerProfession = document.createElement('li'); 117 | speakerProfession.classList.add('speaker-profession'); 118 | speakerProfession.textContent = speaker.profession; 119 | 120 | const speakerLine = document.createElement('li'); 121 | const speakerLineDiv = document.createElement('div'); 122 | speakerLineDiv.classList.add('line2'); 123 | speakerLine.appendChild(speakerLineDiv); 124 | 125 | const speakerBackground = document.createElement('li'); 126 | speakerBackground.classList.add('speaker-background'); 127 | speakerBackground.textContent = speaker.background; 128 | 129 | speakerList.appendChild(speakerName); 130 | speakerList.appendChild(speakerProfession); 131 | speakerList.appendChild(speakerLine); 132 | speakerList.appendChild(speakerBackground); 133 | 134 | speakerInfo.appendChild(speakerList); 135 | 136 | card.appendChild(speakerImage); 137 | card.appendChild(speakerInfo); 138 | 139 | cardContainer.appendChild(card); 140 | } 141 | }); 142 | 143 | featuredSpeakersSection.appendChild(cardContainer); 144 | 145 | const existingSection = document.querySelector('.featured-speakers'); 146 | existingSection.parentNode.replaceChild(featuredSpeakersSection, existingSection); 147 | } 148 | 149 | window.addEventListener('resize', updateCardLayout); 150 | updateCardLayout(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 23 | 24 | 25 | 26 | 27 | 28 | # 📗 Table of Contents 29 | 30 | - [📖 About the Project](#about-project) 31 | - [🛠 Built With](#built-with) 32 | - [Tech Stack](#tech-stack) 33 | - [Key Features](#key-features) 34 | - [🚀 Live Demo](#live-demo) 35 | - [💻 Getting Started](#getting-started) 36 | - [Setup](#setup) 37 | - [Prerequisites](#prerequisites) 38 | - [Install](#install) 39 | - [Usage](#usage) 40 | - [Run tests](#run-tests) 41 | - [Deployment](#deployment) 42 | - [👥 Authors](#authors) 43 | - [🔭 Future Features](#future-features) 44 | - [🤝 Contributing](#contributing) 45 | - [⭐️ Show your support](#support) 46 | - [🙏 Acknowledgements](#acknowledgements) 47 | - [❓ FAQ (OPTIONAL)](#faq) 48 | - [📝 License](#license) 49 | 50 | 51 | 52 | # 📖 [Capstone_Project1] 53 | 54 | **[Capstone_Project1]** 55 | This repository showcases a customized website based on an online conference platform demonstrating my skills in mobile design using Flexbox, Linters, and best practices in HTML and CSS, in addition to highlights my proficiency in creating responsive designs for desktop viewing. By employing media queries and adhering to industry standards, I have ensured that the project adapts seamlessly to different screen sizes and devices. Moreover, my meticulous approach to version control and adherence to best practices make the project highly maintainable, enabling future developers to easily understand and build upon it. In addition, it introduces the use of JavaScript for the dynamic creation of web and popup windows, together with the use of data objects in the display. 56 | 57 | ## 🛠 Built With 58 | 59 | ### Tech Stack 60 | 61 | 62 |
63 | HTML 64 |
65 | 66 |
67 | CSS 68 |
69 | 70 |
71 | JavaScript 72 |
73 | 74 | 75 | ### Key Features 76 | 77 | - **[Branch creation]** 78 | - **[Version control]** 79 | - **[GitHub flow]** 80 | - **[Pull request]** 81 | - **[Descriptive commits]** 82 | - **[Flexbox use]** 83 | - **[Responsive Design]** 84 | - **[JavaScript Functionality]** 85 | 86 |

(back to top)

87 | 88 | 89 | 90 | 91 | 92 | 93 | ## 💻 Getting Started 94 | 95 | ### Setup 96 | Clone this repository to your local machine: 97 | 98 | git clone git@github.com:ClaudiaRojasSoto/Capstone_Project1.git 99 | 100 | 101 | ### Prerequisites 102 | 103 | In order to use this project, you need to have Node.js and npm installed on your local machine. 104 | 105 | ### Install 106 | 107 | Install the necessary dependencies by running: 108 | 109 | npm install 110 | 111 | 118 | 119 | ### Usage 120 | 121 | To start the project, run the following command: 122 | 123 | npm start 124 | 125 | 131 | 132 | ### Run tests 133 | 134 | To run tests, run the following command: 135 | 136 | npm test 137 | 138 | 144 | 145 | ### Deployment 146 | 147 | You can deploy this project using: https://claudiarojassoto.github.io/Capstone_Project1/ 148 | 149 | 150 | 151 | 156 | 157 |

(back to top)

158 | 159 | 160 | 161 | ## 👥 Authors 162 | 163 | 164 | 👤 **Claudia Rojas** 165 | 166 | - GitHub: [@ClaudiaRojasSoto](https://github.com/ClaudiaRojasSoto) 167 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/claudia-soto-260504208/) 168 | 169 | 170 |

(back to top)

171 | 172 | 173 | 174 | ## 🔭 Future Features 175 | 176 | 177 | -**[Integrate Backend Functionality]** 178 | 179 |

(back to top)

180 | 181 | 182 | 183 | ## 🤝 Contributing 184 | 185 | Feel free to check the [issues page](https://github.com/ClaudiaRojasSoto/Capstone_Project1). 186 | 187 |

(back to top)

188 | 189 | 190 | 191 | ## ⭐️ Show your support 192 | 193 | 194 | If you like this project, please give it a ⭐️! 195 | 196 |

(back to top)

197 | 198 | 199 | 200 | ## 🙏 Acknowledgments 201 | 202 | 203 | I would like to thank... 204 |

* Microverse for providing the opportunity to learn Git and GitHub in a collaborative environment.

205 |

* GitHub Docs for providing a wealth of information on Git and GitHub.

206 |

* Creative Commons for providing the design of this work.

207 |

* You can click on the link to see the original design

208 | 209 | [original design on Behance](https://www.behance.net/gallery/29845175CC-Global-Summit-2015). 210 | 211 |

* Cindy Shin in Behance, for her original design idea

212 |

* You can click on the link to see the Cindy Shin profile on Behance

213 | 214 | [Cindy Shin profile on Behance](https://www.behance.net/adagio07) 215 | 216 |

(back to top)

217 | 218 | 219 | 220 | 221 |

(back to top)

222 | 223 | 224 | 225 | ## 📝 License 226 | 227 | This project is [MIT](https://spdx.org/licenses/MIT.html) licensed. 228 | 229 | 230 |

(back to top)

231 | Footer 232 | © 2023 GitHub, Inc. 233 | Footer navigation 234 | Terms 235 | Privacy 236 | Security 237 | Status 238 | Docs 239 | Contact GitHub 240 | Pricing 241 | API 242 | Training 243 | Blog 244 | About 245 | -------------------------------------------------------------------------------- /about-me.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SparkTalents 8 | 9 | 10 | 11 | 15 | 16 | 17 |
18 | 74 |
75 |
76 |
77 |
78 |

STEM Education

79 |
80 |
81 |

BECAUSE LEARNING CAN BE FUN

82 |
83 |
84 |
85 |

86 | SparkTalents offers children and young people in Chile the 87 | possibility of accessing new technologies and applying them in the 88 | teaching and learning process of STEM. 89 |

90 |

91 | We want all children and youth in our country to have access to 92 | the tools and professionals prepared to learn about science, 93 | technology, engineering, and mathematics. So that, on the one 94 | hand, discrimination in any of its forms ends. We are a group of 95 | professionals who dream of a better world for our children and 96 | young people. If you like the idea, join the SPARK family. 97 |

98 |
99 |

100 | Please contact us per Email for any futher questions 101 | aboutSparkTalents conference in Atacama 102 |

103 |

sparkinformations@sparktalents.cl

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

110 | Because Learning 111 |
112 | Can Be Fun Logo 113 |

114 |
115 |

116 | The SparkTalents Foundation logo was designed 117 |
118 | by Ximena Rojas in 2012 119 |

120 |

121 | The SparkTalents Foundation logo was designed by Ximena Rojas in 122 | 2012. After that, the design became a registered trademark of our 123 | foundation, and has been recognized since then as an identifying 124 | seal of our work and our vision of the future. 125 |

126 |
127 |
128 | 129 | 130 | 131 |
132 |
133 |
134 |
135 |
136 |

Take a look at our work across the country

137 |
138 |

139 | We continue to work with parents and teachers 140 |
141 | throughout the country to teach them to teach with STEM. 142 |

143 |
144 |
145 |
146 |
147 |
148 | 149 |
150 |

151 | 2018 152 | Meeting with parents and guardians 153 |

154 |
155 |
156 |
157 |
158 |
159 | 160 |
161 |

162 | 2019 163 | Meeting in Antofagasta 164 |

165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |

Partners

175 |
176 |
177 |
178 |
    179 |
  • 180 | 181 |
    • 182 |
  • 183 | 184 |
    • 185 |
  • 186 | 187 |
    • 188 |
  • 189 | 190 |
    • 191 |
  • 192 | 193 |
    • 194 |
195 |
196 |
197 | 198 | 210 |
211 | 212 | 213 | 214 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | SparkTalents 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 |
19 | 79 |
80 |
81 |
82 |
83 |

STEM Education

84 |
85 |
86 |

BECAUSE LEARNING CAN BE FUN

87 |
88 |
89 |
90 |

91 | We work so that the education of girls and boys is meaningful for 92 | their lives. We will be talking about education and other topics 93 | of interest in the Atacama. 94 |

95 |
96 |

2023.09.15(FRI) - 16(SAT)

97 |

@ Atacama University - Italian Scuola

98 |
99 |
100 | 101 |
102 |
103 |
104 |

Main Program

105 |
106 |
107 |
    108 |
  • 109 |
      110 |
    • 111 | icon for speaker 112 |
      • 113 |
    • 114 |

      Lecture

      115 |
      • 116 |
    • 117 |

      118 | Hear from highly experienced teachers about STEM education 119 |

      120 |
      • 121 |
    122 |
    • 123 |
  • 124 |
      125 |
    • 126 | icon for classes 127 |
      • 128 |
    • 129 |

      Classes

      130 |
      • 131 |
    • 132 |

      Learn in our programming and robotics master classes

      133 |
      • 134 |
    135 |
    • 136 |
  • 137 |
      138 |
    • 139 | icon for forum 140 |
      • 141 |
    • 142 |

      Forum

      143 |
      • 144 |
    • 145 |

      146 | Our teachers and guests will answer each and every one of 147 | your questions live 148 |

      149 |
      • 150 |
    151 |
    • 152 |
  • 153 |
      154 |
    • 155 | icon for coding 156 |
      • 157 |
    • 158 |

      coding

      159 |
      • 160 |
    • 161 |

      162 | Participate in one of our programming workshops and use our 163 | Mindstorm set 164 |

      165 |
      • 166 |
    167 |
    • 168 |
  • 169 |
      170 |
    • 171 | icon for lecture 172 |
      • 173 |
    • 174 |

      Lecture

      175 |
      • 176 |
    • 177 |

      178 | Form a work group, participate in the FLl 2023 Chile and get 179 | a robotics set for your school 180 |

      181 |
      • 182 |
    183 |
    • 184 |
185 |
186 | 187 |
188 |
189 |

190 | SEE THE WHOLE PROGRAM 191 |

192 |
193 |
194 |
195 | 196 |
197 | 198 |
199 |
200 | 208 |
209 |
210 | 211 |
212 |
213 |

Partners

214 |
215 |
216 |
217 |
    218 |
  • 219 | logo lego challenge 220 |
    • 221 |
  • 222 | logo lego discover 223 |
    • 224 |
  • 225 | logo lego explore 226 |
    • 227 |
  • 228 | logo sparkmaker 229 |
    • 230 |
  • 231 | logo designathon 232 |
    • 233 |
234 |
235 |
236 | 237 | 248 |
249 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /CSS/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | outline: 0; 6 | box-sizing: border-box; 7 | list-style: none; 8 | text-decoration: none; 9 | } 10 | 11 | :root { 12 | --color-bg: #272431; 13 | --color-white: #fff; 14 | --color-primary: #ec5242; 15 | --color-primary-variant: #3c3f46; 16 | --color-light: #f5f5f5; 17 | --color-box: #f7f7f7; 18 | --transition: all 400ms ease; 19 | --container-width-lg: 75%; 20 | --container-width-md: 86%; 21 | --container-width-sm: 90%; 22 | } 23 | 24 | body { 25 | font-family: "Lato", sans-serif; 26 | background-color: var(--color-box); 27 | } 28 | 29 | .background { 30 | background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../img/ninosninas.jpg"); 31 | background-position: center center; 32 | background-size: cover; 33 | background-repeat: no-repeat; 34 | width: 100%; 35 | height: auto; 36 | } 37 | 38 | .menu-toggle { 39 | font-size: 40px; 40 | font-weight: 900; 41 | margin-left: 6%; 42 | margin-bottom: 3%; 43 | } 44 | 45 | .nav-mobile { 46 | position: fixed; 47 | top: 0; 48 | left: 0; 49 | width: 100%; 50 | height: 100%; 51 | background-color: var(--color-primary); 52 | border: 5px solid var(--color-primary-variant); 53 | border-width: 10px 5px; 54 | z-index: 10; 55 | padding: 20px; 56 | display: flex; 57 | flex-direction: column; 58 | align-items: center; 59 | justify-content: flex-start; 60 | } 61 | 62 | .close-icon { 63 | align-self: flex-end; 64 | font-weight: bold; 65 | font-size: 24px; 66 | color: var(--color-primary-variant); 67 | cursor: pointer; 68 | } 69 | 70 | .menu-list { 71 | list-style-type: none; 72 | margin-top: 30px; 73 | padding: 0; 74 | } 75 | 76 | .menu-list li { 77 | margin-bottom: 15px; 78 | } 79 | 80 | .menu-list a { 81 | color: var(--color-primary-variant); 82 | font-weight: bold; 83 | font-size: 22px; 84 | text-decoration: none; 85 | } 86 | 87 | .nav-desktop { 88 | display: none; 89 | } 90 | 91 | .main-section { 92 | padding: 5%; 93 | background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../img/ninosninas.jpg"); 94 | background-position: center center; 95 | background-size: cover; 96 | background-repeat: no-repeat; 97 | width: 100%; 98 | height: auto; 99 | } 100 | 101 | .main-subtitle { 102 | color: var(--color-primary); 103 | font-size: 20px; 104 | padding: 0 2%; 105 | } 106 | 107 | .main-section h1 { 108 | font-size: 40px; 109 | color: var(--color-primary); 110 | font-weight: 900; 111 | padding: 0 2%; 112 | } 113 | 114 | .main-content { 115 | padding: 5% 3%; 116 | border: 3px solid var(--color-white); 117 | font-size: 12px; 118 | background-color: rgb(247, 247, 247); 119 | margin: 7% 0; 120 | } 121 | 122 | .main-date { 123 | color: var(--color-bg); 124 | font-weight: 900; 125 | font-size: 25px; 126 | padding: 0 2%; 127 | } 128 | 129 | .main-direction { 130 | font-size: 15px; 131 | margin: 2% 0 13% 0; 132 | padding: 0 2%; 133 | } 134 | 135 | .program { 136 | background-color: var(--color-bg); 137 | background-image: url("../img/bg-dark.png"); 138 | color: var(--color-white); 139 | } 140 | 141 | .program-title { 142 | padding-top: 20px; 143 | text-align: center; 144 | } 145 | 146 | .line { 147 | margin: 7px 45% 25px 45%; 148 | border: 0.5px solid var(--color-primary); 149 | } 150 | 151 | .program-box { 152 | display: flex; 153 | flex-direction: row; 154 | padding: 2%; 155 | align-items: center; 156 | background-color: var(--color-primary-variant); 157 | background-image: url("../img/bg-dark.png"); 158 | margin: 3%; 159 | } 160 | 161 | .program-image img { 162 | width: 50px; 163 | height: 50px; 164 | } 165 | 166 | .program-box h4 { 167 | font-size: 13px; 168 | color: var(--color-primary); 169 | padding: 0 15px; 170 | } 171 | 172 | .program-box p { 173 | font-size: 10px; 174 | } 175 | 176 | .container-program-button { 177 | text-align: center; 178 | } 179 | 180 | .program-button { 181 | padding: 6% 12%; 182 | background-color: var(--color-primary); 183 | color: var(--color-white); 184 | margin: 5% 0 10% 0; 185 | } 186 | 187 | .more-button { 188 | display: flex; 189 | align-items: center; 190 | } 191 | 192 | .more-button button { 193 | background-color: var(--color-box); 194 | color: var(--color-primary-variant); 195 | border: 0.1px solid var(--color-primary-variant); 196 | margin: 3% 3% 7% 3%; 197 | padding: 2% 39%; 198 | font-size: 11px; 199 | display: flex; 200 | align-items: center; 201 | } 202 | 203 | .more-button ul { 204 | display: flex; 205 | align-items: center; 206 | list-style: none; 207 | margin: 0; 208 | padding: 0; 209 | } 210 | 211 | .more-button img { 212 | width: 11px; 213 | height: 7px; 214 | margin-left: 15px; 215 | } 216 | 217 | .featured-speakers { 218 | margin: 3% 4%; 219 | } 220 | 221 | .featured-speakers-cards { 222 | display: flex; 223 | flex-direction: column; 224 | justify-content: center; 225 | } 226 | 227 | .card { 228 | display: flex; 229 | align-items: flex-start; 230 | padding-left: 10px; 231 | position: relative; 232 | margin-bottom: 30px; 233 | } 234 | 235 | .card .speaker-image { 236 | position: relative; 237 | z-index: 1; 238 | width: 30%; 239 | } 240 | 241 | .card .speaker-image::before { 242 | content: ""; 243 | position: absolute; 244 | top: 0; 245 | left: 0; 246 | width: 100%; 247 | height: 100%; 248 | background-image: url("../img/chess-bg.png"); 249 | background-size: cover; 250 | background-repeat: no-repeat; 251 | opacity: 0.3; 252 | z-index: -1; 253 | } 254 | 255 | .card .speaker-image img { 256 | width: 85%; 257 | height: auto; 258 | } 259 | 260 | .speaker-info { 261 | margin-left: 10px; 262 | } 263 | 264 | .speaker { 265 | list-style: none; 266 | margin: 0; 267 | padding: 0; 268 | } 269 | 270 | .speaker-name { 271 | font-size: 14px; 272 | font-weight: bold; 273 | } 274 | 275 | .speaker-profession { 276 | font-size: 11px; 277 | color: var(--color-primary); 278 | font-style: italic; 279 | } 280 | 281 | @media (max-width: 767px) { 282 | .featured-speakers-cards:nth-child(n+3) { 283 | display: none; 284 | } 285 | } 286 | 287 | .line2 { 288 | margin: 3% 90% 3% 0; 289 | border: 0.5px solid var(--color-primary-variant); 290 | } 291 | 292 | .speaker-background { 293 | font-size: 9px; 294 | } 295 | 296 | .featured-speakers-cards-desktop { 297 | display: none; 298 | } 299 | 300 | .program-link-desktop { 301 | display: none; 302 | } 303 | 304 | .partner { 305 | display: none; 306 | } 307 | 308 | .footer { 309 | display: none; 310 | } 311 | 312 | @media (min-width: 769px) { 313 | .menu-toggle { 314 | display: none; 315 | } 316 | 317 | .nav-desktop { 318 | display: block; 319 | } 320 | 321 | .nav-social-desktop { 322 | background-color: var(--color-bg); 323 | display: flex; 324 | justify-content: flex-end; 325 | align-items: center; 326 | height: 20px; 327 | padding: 0 10% 0 10%; 328 | } 329 | 330 | .nav-social-desktop ul { 331 | display: flex; 332 | flex-direction: row; 333 | list-style-type: none; 334 | } 335 | 336 | .nav-social-desktop li { 337 | margin: 2px; 338 | color: var(--color-white); 339 | padding-bottom: 6px; 340 | margin-right: 10px; 341 | } 342 | 343 | .nav-content-desktop li { 344 | margin: 2px; 345 | color: var(--color-white); 346 | padding-bottom: 6px; 347 | margin-right: 40px; 348 | } 349 | 350 | .logos-partners li { 351 | flex-basis: calc(20% - 20px); 352 | margin: 10px; 353 | } 354 | 355 | .nav-social-desktop li:last-child { 356 | margin-right: 80px; 357 | } 358 | 359 | .program-link-desktop a { 360 | text-decoration: underline; 361 | color: inherit; 362 | } 363 | 364 | .nav-social-desktop li a { 365 | color: var(--color-white); 366 | font-size: 8px; 367 | } 368 | 369 | .program-image img { 370 | width: 50px; 371 | height: 50px; 372 | } 373 | 374 | .logo-footer img { 375 | width: 130%; 376 | height: auto; 377 | } 378 | 379 | .nav-social-desktop li img { 380 | width: 8px; 381 | height: 8px; 382 | } 383 | 384 | .nav-content-desktop { 385 | background-color: var(--color-white); 386 | display: flex; 387 | justify-content: space-between; 388 | align-items: center; 389 | height: 45px; 390 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 391 | padding: 0 10%; 392 | margin-bottom: 3px; 393 | } 394 | 395 | .logo-link { 396 | display: flex; 397 | } 398 | 399 | .logo-img { 400 | width: 50px; 401 | height: auto; 402 | margin-right: 20px; 403 | } 404 | 405 | .nav-content-desktop ul { 406 | display: flex; 407 | flex-direction: row; 408 | list-style-type: none; 409 | } 410 | 411 | .nav-content-desktop li:last-child { 412 | margin-right: 80px; 413 | } 414 | 415 | .nav-content-desktop li a { 416 | color: var(--color-bg); 417 | font-size: 9px; 418 | } 419 | 420 | .nav-content-desktop li button { 421 | border: 2px solid var(--color-primary); 422 | color: var(--color-bg); 423 | font-size: 9px; 424 | padding: 5px 10px; 425 | } 426 | 427 | .nav-content-desktop ul li:hover a { 428 | color: var(--color-primary); 429 | } 430 | 431 | .main-section { 432 | padding-left: 10%; 433 | padding-right: 40%; 434 | } 435 | 436 | .program { 437 | background-color: var(--color-bg); 438 | background-image: url("../img/bg-dark.png"); 439 | color: var(--color-white); 440 | padding: 1% 10% 0 10%; 441 | } 442 | 443 | .program-title { 444 | padding-top: 20px; 445 | text-align: center; 446 | } 447 | 448 | .line { 449 | margin: 10px 47% 25px 47%; 450 | border: 0.5px solid var(--color-primary); 451 | } 452 | 453 | .program-boxes-desktop { 454 | display: flex; 455 | justify-content: center; 456 | gap: 4px; 457 | padding-top: 1%; 458 | } 459 | 460 | .program-box { 461 | flex: 1 0 0; 462 | display: flex; 463 | flex-direction: column; 464 | padding: 8px; 465 | align-items: center; 466 | background-color: var(--color-primary-variant); 467 | background-image: url("../img/bg-dark.png"); 468 | margin: 2px; 469 | width: 100%; 470 | max-width: 250px; 471 | height: 150px; 472 | text-align: center; 473 | } 474 | 475 | .program-box h4 { 476 | font-size: 13px; 477 | color: var(--color-primary); 478 | } 479 | 480 | .program-box p { 481 | font-size: 10px; 482 | text-align: center; 483 | padding: 5% 5%; 484 | } 485 | 486 | .container-program-button { 487 | display: none; 488 | } 489 | 490 | .program-link-desktop { 491 | display: block; 492 | text-align: center; 493 | margin: 5% 0 5% 0; 494 | } 495 | 496 | .program-link-container { 497 | padding: 3% 12%; 498 | } 499 | 500 | .more-button { 501 | display: none; 502 | } 503 | 504 | .partner { 505 | display: block; 506 | background-color: var(--color-primary-variant); 507 | padding: 0 10% 2% 10%; 508 | } 509 | 510 | .title-partners { 511 | text-align: center; 512 | } 513 | 514 | .title-partners h4 { 515 | color: var(--color-white); 516 | padding-top: 3%; 517 | } 518 | 519 | .logos-partners-container { 520 | margin-top: 2%; 521 | } 522 | 523 | .logos-partners { 524 | display: flex; 525 | align-items: center; 526 | } 527 | 528 | .logos-partners li img { 529 | width: 100%; 530 | height: auto; 531 | filter: grayscale(100%); 532 | } 533 | 534 | .footer { 535 | display: flex; 536 | align-items: center; 537 | justify-content: center; 538 | padding: 2% 10% 2% 10%; 539 | } 540 | 541 | .logo-footer { 542 | padding: 0 15%; 543 | } 544 | 545 | .text-footer { 546 | font-size: 15px; 547 | } 548 | 549 | .featured-speakers-cards { 550 | flex-direction: row; 551 | flex-wrap: wrap; 552 | padding: 0 10% 0 10%; 553 | } 554 | 555 | .card { 556 | width: 50%; 557 | padding-left: 0; 558 | margin-bottom: 40px; 559 | } 560 | 561 | .card:nth-child(2n) .speaker-info { 562 | order: 2; 563 | margin-left: 0; 564 | } 565 | 566 | .card:nth-child(2n) .speaker-image { 567 | order: 1; 568 | } 569 | 570 | .card:nth-child(2n+1) .speaker-info { 571 | order: 2; 572 | margin-left: 0; 573 | } 574 | 575 | .card:nth-child(2n+1) .speaker-image { 576 | order: 1; 577 | } 578 | } 579 | -------------------------------------------------------------------------------- /CSS/about-me.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | border: 0; 5 | outline: 0; 6 | box-sizing: border-box; 7 | list-style: none; 8 | text-decoration: none; 9 | } 10 | 11 | :root { 12 | --color-bg: #272431; 13 | --color-white: #fff; 14 | --color-primary: #ec5242; 15 | --color-primary-variant: #3c3f46; 16 | --color-light: #f5f5f5; 17 | --color-box: #f7f7f7; 18 | --color-border: #ededed; 19 | --transition: all 400ms ease; 20 | --container-width-lg: 75%; 21 | --container-width-md: 86%; 22 | --container-width-sm: 90%; 23 | } 24 | 25 | body { 26 | font-family: "Lato", sans-serif; 27 | background-color: var(--color-box); 28 | } 29 | 30 | .background { 31 | background-image: linear-gradient(rgba(255, 255, 255, 0.758), rgba(255, 255, 255, 0.917)), url("../img/ST_estrellas.png"); 32 | background-position: center center; 33 | background-size: cover; 34 | background-repeat: no-repeat; 35 | width: 100%; 36 | height: auto; 37 | background-color: var(--color-box); 38 | } 39 | 40 | .menu-toggle { 41 | font-size: 40px; 42 | font-weight: 900; 43 | margin-left: 6%; 44 | margin-bottom: 3%; 45 | } 46 | 47 | .nav-mobile { 48 | position: fixed; 49 | top: 0; 50 | left: 0; 51 | width: 100%; 52 | height: 100%; 53 | background-color: var(--color-primary); 54 | border: 5px solid var(--color-primary-variant); 55 | border-width: 10px 5px; 56 | z-index: 10; 57 | padding: 20px; 58 | display: flex; 59 | flex-direction: column; 60 | align-items: center; 61 | justify-content: flex-start; 62 | } 63 | 64 | .close-icon { 65 | align-self: flex-end; 66 | font-weight: bold; 67 | font-size: 24px; 68 | color: var(--color-primary-variant); 69 | cursor: pointer; 70 | } 71 | 72 | .menu-list { 73 | list-style-type: none; 74 | margin-top: 30px; 75 | padding: 0; 76 | } 77 | 78 | .menu-list li { 79 | margin-bottom: 15px; 80 | } 81 | 82 | .menu-list a { 83 | color: var(--color-primary-variant); 84 | font-weight: bold; 85 | font-size: 22px; 86 | text-decoration: none; 87 | } 88 | 89 | .nav-desktop { 90 | display: none; 91 | } 92 | 93 | .main-section { 94 | padding: 5%; 95 | background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("../img/ST_estrellas.png"); 96 | background-position: center center; 97 | background-size: cover; 98 | background-repeat: no-repeat; 99 | width: 100%; 100 | height: auto; 101 | } 102 | 103 | .main-subtitle { 104 | color: var(--color-primary); 105 | font-size: 20px; 106 | padding: 0 2%; 107 | text-align: center; 108 | margin-bottom: 9px; 109 | } 110 | 111 | .main-section h1 { 112 | font-size: 35px; 113 | color: var(--color-primary); 114 | font-weight: 800; 115 | padding: 0 1%; 116 | text-align: center; 117 | } 118 | 119 | .main-content { 120 | padding: 6% 3%; 121 | border: 3px solid var(--color-border); 122 | font-size: 12px; 123 | background-color: var(--color-white); 124 | margin: 5% 0; 125 | height: 122px; 126 | line-height: 1.9; 127 | text-align: center; 128 | } 129 | 130 | .about-me-title p { 131 | text-align: center; 132 | font-weight: 400; 133 | font-size: 10px; 134 | } 135 | 136 | .about-past-content p { 137 | text-align: center; 138 | font-weight: 400; 139 | font-size: 10px; 140 | margin-bottom: 20px; 141 | color: var(--color-primary-variant); 142 | } 143 | 144 | .main-content p:first-child { 145 | display: block; 146 | } 147 | 148 | .main-content p:last-child { 149 | display: none; 150 | } 151 | 152 | .main-date { 153 | color: var(--color-bg); 154 | font-weight: 400; 155 | font-size: 10px; 156 | padding: 0 2%; 157 | text-align: center; 158 | line-height: 15px; 159 | margin-bottom: 3px; 160 | } 161 | 162 | .main-direction { 163 | color: var(--color-bg); 164 | font-weight: 700; 165 | font-size: 10px; 166 | padding: 0 2%; 167 | text-align: center; 168 | position: relative; 169 | text-decoration: underline; 170 | } 171 | 172 | .about-me-title h4 { 173 | padding-top: 5%; 174 | text-align: center; 175 | letter-spacing: 0.1px; 176 | } 177 | 178 | .line { 179 | margin: 2% 45%; 180 | border: 0.5px solid var(--color-primary); 181 | } 182 | 183 | .logo-container-about-me { 184 | border: 3px solid var(--color-border); 185 | background-color: var(--color-white); 186 | margin: 7% 5%; 187 | height: 122px; 188 | display: flex; 189 | align-items: center; 190 | justify-content: center; 191 | } 192 | 193 | .logo-container-about-me a { 194 | display: flex; 195 | align-items: center; 196 | justify-content: center; 197 | height: 100%; 198 | } 199 | 200 | .nav-content-desktop li button { 201 | border: 2px solid var(--color-primary); 202 | color: var(--color-bg); 203 | font-size: 9px; 204 | padding: 5px 10px; 205 | } 206 | 207 | .nav-content-desktop ul li:hover a { 208 | color: var(--color-primary); 209 | } 210 | 211 | .logo-container-about-me img { 212 | max-width: 100%; 213 | max-height: 100%; 214 | width: auto; 215 | height: auto; 216 | margin: 4%; 217 | } 218 | 219 | .about-me-title p:first-child { 220 | display: block; 221 | } 222 | 223 | .about-me-title p:last-child { 224 | display: none; 225 | } 226 | 227 | .about-past { 228 | background-color: var(--color-border); 229 | margin-top: 20px; 230 | } 231 | 232 | .about-past-content h4 { 233 | padding-top: 5%; 234 | text-align: center; 235 | letter-spacing: 0.1px; 236 | color: var(--color-primary-variant); 237 | } 238 | 239 | .about-past-content-class { 240 | margin: 0; 241 | padding: 0 20% 0 20%; 242 | } 243 | 244 | .about-past-section-image { 245 | display: flex; 246 | flex-wrap: wrap; 247 | justify-content: center; 248 | align-items: center; 249 | } 250 | 251 | .about-past-images-box-container { 252 | position: relative; 253 | margin-bottom: 2rem; 254 | width: 100%; 255 | max-width: 600px; 256 | height: auto; 257 | } 258 | 259 | .target-img { 260 | width: 100%; 261 | height: auto; 262 | display: block; 263 | object-fit: cover; 264 | } 265 | 266 | .target-text { 267 | position: absolute; 268 | color: white; 269 | width: 100%; 270 | height: 100%; 271 | top: 0; 272 | left: 0; 273 | display: grid; 274 | place-items: center; 275 | text-align: center; 276 | background-color: rgba(248, 0, 0, 0.4); 277 | font-size: 20px; 278 | } 279 | 280 | .target-text span { 281 | display: block; 282 | font-size: 40px; 283 | } 284 | 285 | .partner { 286 | background-color: var(--color-primary-variant); 287 | padding: 0 10%; 288 | display: block; 289 | } 290 | 291 | .title-partners { 292 | text-align: center; 293 | } 294 | 295 | .title-partners h4 { 296 | color: var(--color-white); 297 | padding-top: 7%; 298 | } 299 | 300 | .logos-partners-container { 301 | margin-top: 7%; 302 | } 303 | 304 | .logos-partners { 305 | display: flex; 306 | flex-wrap: wrap; 307 | justify-content: center; 308 | align-items: center; 309 | } 310 | 311 | .logos-partners li { 312 | flex-basis: calc(33.33% - 20px); 313 | margin: 10px; 314 | } 315 | 316 | .logo-footer img { 317 | width: 80%; 318 | } 319 | 320 | .logos-partners li img { 321 | width: 100%; 322 | height: auto; 323 | filter: grayscale(100%); 324 | } 325 | 326 | footer { 327 | display: flex; 328 | align-items: center; 329 | } 330 | 331 | .logo-footer { 332 | padding: 0 10%; 333 | } 334 | 335 | .text-footer { 336 | font-size: 10px; 337 | } 338 | 339 | @media (min-width: 769px) { 340 | .menu-toggle { 341 | display: none; 342 | } 343 | 344 | .nav-desktop { 345 | display: block; 346 | } 347 | 348 | .nav-social-desktop { 349 | background-color: var(--color-bg); 350 | display: flex; 351 | justify-content: flex-end; 352 | align-items: center; 353 | height: 20px; 354 | padding: 0 10% 0 10%; 355 | } 356 | 357 | .nav-social-desktop ul { 358 | display: flex; 359 | flex-direction: row; 360 | list-style-type: none; 361 | } 362 | 363 | .nav-social-desktop li { 364 | margin: 2px; 365 | color: var(--color-white); 366 | padding-bottom: 6px; 367 | margin-right: 10px; 368 | } 369 | 370 | .nav-content-desktop li { 371 | margin: 2px; 372 | color: var(--color-white); 373 | padding-bottom: 6px; 374 | margin-right: 40px; 375 | } 376 | 377 | .logos-partners li { 378 | flex-basis: calc(20% - 20px); 379 | margin: 10px; 380 | } 381 | 382 | .about-past-mages-box-container li { 383 | width: 100%; 384 | } 385 | 386 | .nav-social-desktop li:last-child { 387 | margin-right: 80px; 388 | } 389 | 390 | .program-link-desktop a { 391 | text-decoration: underline; 392 | color: inherit; 393 | } 394 | 395 | .nav-social-desktop li a { 396 | color: var(--color-white); 397 | font-size: 8px; 398 | } 399 | 400 | .program-image img { 401 | width: 50px; 402 | height: 50px; 403 | } 404 | 405 | .logo-footer img { 406 | width: 130%; 407 | height: auto; 408 | } 409 | 410 | .logo-container-about-me img { 411 | max-width: 100%; 412 | max-height: 100%; 413 | width: auto; 414 | height: auto; 415 | margin: 4%; 416 | } 417 | 418 | .nav-social-desktop li img { 419 | width: 8px; 420 | height: 8px; 421 | } 422 | 423 | .nav-content-desktop { 424 | background-color: var(--color-white); 425 | display: flex; 426 | justify-content: space-between; 427 | align-items: center; 428 | height: 45px; 429 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 430 | padding: 0 10%; 431 | margin-bottom: 3px; 432 | } 433 | 434 | .logo-link { 435 | display: flex; 436 | } 437 | 438 | .logo-img { 439 | width: 50px; 440 | height: auto; 441 | margin-right: 20px; 442 | } 443 | 444 | .nav-content-desktop ul { 445 | display: flex; 446 | flex-direction: row; 447 | list-style-type: none; 448 | } 449 | 450 | .nav-content-desktop li:last-child { 451 | margin-right: 80px; 452 | } 453 | 454 | .nav-content-desktop li a { 455 | color: var(--color-bg); 456 | font-size: 9px; 457 | } 458 | 459 | .main-section { 460 | padding: 5% 10%; 461 | } 462 | 463 | .main-section h1 { 464 | font-size: 40px; 465 | color: var(--color-primary); 466 | font-weight: 800; 467 | text-align: center; 468 | padding: 0 18%; 469 | } 470 | 471 | .main-content { 472 | display: flex; 473 | flex-direction: column; 474 | justify-content: center; 475 | align-items: center; 476 | padding: 6% 3%; 477 | border: 3px solid var(--color-border); 478 | font-size: 12px; 479 | background-color: var(--color-white); 480 | margin: 5% 0; 481 | height: 122px; 482 | line-height: 1.9; 483 | text-align: center; 484 | } 485 | 486 | .main-content p:first-child { 487 | display: none; 488 | } 489 | 490 | .main-content p:last-child { 491 | display: block; 492 | } 493 | 494 | .main-date { 495 | color: var(--color-bg); 496 | font-weight: 400; 497 | font-size: 10px; 498 | padding: 0 2%; 499 | text-align: center; 500 | line-height: 15px; 501 | margin-bottom: 3px; 502 | } 503 | 504 | .about-me-title h4 { 505 | padding-top: 3%; 506 | text-align: center; 507 | letter-spacing: 0.1px; 508 | } 509 | 510 | .line { 511 | margin: 1% 45%; 512 | border: 0.5px solid var(--color-primary); 513 | } 514 | 515 | .logo-container-about-me { 516 | margin: 3% 25%; 517 | } 518 | 519 | .about-me-title p:first-child { 520 | display: none; 521 | } 522 | 523 | .about-me-title p:last-child { 524 | display: block; 525 | padding: 0 30%; 526 | } 527 | 528 | .about-past-content-class { 529 | margin: 0; 530 | padding: 0 20%; 531 | } 532 | 533 | .about-past-section-image { 534 | display: flex; 535 | flex-direction: row-reverse; 536 | flex-wrap: wrap; 537 | justify-content: space-between; 538 | } 539 | 540 | .about-past-images-box-container { 541 | position: relative; 542 | width: 48%; 543 | margin-bottom: 2rem; 544 | } 545 | 546 | .image-wrapper { 547 | position: relative; 548 | width: 100%; 549 | padding-bottom: 75%; 550 | overflow: hidden; 551 | } 552 | 553 | .target-img { 554 | position: absolute; 555 | top: 0; 556 | left: 0; 557 | width: 100%; 558 | height: 100%; 559 | object-fit: cover; 560 | } 561 | 562 | .target-text { 563 | position: absolute; 564 | color: white; 565 | width: 100%; 566 | height: 100%; 567 | top: 0; 568 | left: 0; 569 | display: flex; 570 | align-items: center; 571 | justify-content: center; 572 | text-align: center; 573 | background-color: rgba(248, 0, 0, 0.4); 574 | font-size: 20px; 575 | } 576 | 577 | .target-text span { 578 | display: block; 579 | font-size: 40px; 580 | } 581 | 582 | .partner { 583 | display: none; 584 | } 585 | 586 | footer { 587 | background-color: var(--color-primary-variant); 588 | color: var(--color-white); 589 | } 590 | 591 | .footer { 592 | display: flex; 593 | align-items: center; 594 | justify-content: center; 595 | padding: 2% 10% 2% 10%; 596 | } 597 | 598 | .logo-footer { 599 | padding: 0 15%; 600 | } 601 | 602 | .text-footer { 603 | font-size: 15px; 604 | } 605 | } 606 | --------------------------------------------------------------------------------