├── .gitignore ├── .DS_Store ├── src ├── .DS_Store ├── main_big.png ├── past-slams.png ├── speaker-1.jpeg ├── speaker-2.jpeg ├── speaker_01.png ├── speaker_02.png ├── speaker_03.png ├── speaker_04.png ├── speaker_05.png ├── speaker_06.png ├── london-slam.jpeg ├── newyork-slam.jpeg ├── mobile_intro_bg.png ├── partner-img-wp.png ├── poetry-title-img.png ├── partner-img-apple.png ├── partner-img-google.png ├── partner-img-lenovo.png ├── partner-img-pepsi.png ├── program-intro-icon.png ├── partner-icon-mozzila.png ├── partner-img-cocacola.png ├── partner-img-instagram.png ├── partner-img-macdonald.png ├── partner-img-penguin.png ├── partner-img-twitter.png ├── program-poetry-icon.png ├── program-workshop-icon.png ├── program-exibition-icon.png ├── program-background-pattern_bg.png └── program-pannel-discussion-icon.png ├── package.json ├── .hintrc ├── .stylelintrc.json ├── .eslintrc.json ├── README.md ├── .github └── workflows │ └── linters.yml ├── script.js ├── index.html ├── about.html ├── about.css └── index.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/.DS_Store -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/.DS_Store -------------------------------------------------------------------------------- /src/main_big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/main_big.png -------------------------------------------------------------------------------- /src/past-slams.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/past-slams.png -------------------------------------------------------------------------------- /src/speaker-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/speaker-1.jpeg -------------------------------------------------------------------------------- /src/speaker-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/speaker-2.jpeg -------------------------------------------------------------------------------- /src/speaker_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/speaker_01.png -------------------------------------------------------------------------------- /src/speaker_02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/speaker_02.png -------------------------------------------------------------------------------- /src/speaker_03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/speaker_03.png -------------------------------------------------------------------------------- /src/speaker_04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/speaker_04.png -------------------------------------------------------------------------------- /src/speaker_05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/speaker_05.png -------------------------------------------------------------------------------- /src/speaker_06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/speaker_06.png -------------------------------------------------------------------------------- /src/london-slam.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/london-slam.jpeg -------------------------------------------------------------------------------- /src/newyork-slam.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/newyork-slam.jpeg -------------------------------------------------------------------------------- /src/mobile_intro_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/mobile_intro_bg.png -------------------------------------------------------------------------------- /src/partner-img-wp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-wp.png -------------------------------------------------------------------------------- /src/poetry-title-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/poetry-title-img.png -------------------------------------------------------------------------------- /src/partner-img-apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-apple.png -------------------------------------------------------------------------------- /src/partner-img-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-google.png -------------------------------------------------------------------------------- /src/partner-img-lenovo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-lenovo.png -------------------------------------------------------------------------------- /src/partner-img-pepsi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-pepsi.png -------------------------------------------------------------------------------- /src/program-intro-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/program-intro-icon.png -------------------------------------------------------------------------------- /src/partner-icon-mozzila.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-icon-mozzila.png -------------------------------------------------------------------------------- /src/partner-img-cocacola.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-cocacola.png -------------------------------------------------------------------------------- /src/partner-img-instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-instagram.png -------------------------------------------------------------------------------- /src/partner-img-macdonald.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-macdonald.png -------------------------------------------------------------------------------- /src/partner-img-penguin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-penguin.png -------------------------------------------------------------------------------- /src/partner-img-twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/partner-img-twitter.png -------------------------------------------------------------------------------- /src/program-poetry-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/program-poetry-icon.png -------------------------------------------------------------------------------- /src/program-workshop-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/program-workshop-icon.png -------------------------------------------------------------------------------- /src/program-exibition-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/program-exibition-icon.png -------------------------------------------------------------------------------- /src/program-background-pattern_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/program-background-pattern_bg.png -------------------------------------------------------------------------------- /src/program-pannel-discussion-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Krishnabot/Capstone-Project-Poetry-Page/HEAD/src/program-pannel-discussion-icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "devDependencies": { 3 | "babel-eslint": "^10.1.0", 4 | "eslint": "^7.32.0", 5 | "eslint-config-airbnb-base": "^14.2.1", 6 | "eslint-plugin-import": "^2.26.0", 7 | "hint": "^6.2.0", 8 | "stylelint": "^13.13.1", 9 | "stylelint-config-standard": "^21.0.0", 10 | "stylelint-csstree-validator": "^1.9.0", 11 | "stylelint-scss": "^3.21.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.hintrc: -------------------------------------------------------------------------------- 1 | { 2 | "connector": { 3 | "name": "local", 4 | "options": { 5 | "pattern": [ 6 | "**", 7 | "!.git/**", 8 | "!node_modules/**" 9 | ] 10 | } 11 | }, 12 | "extends": [ 13 | "development" 14 | ], 15 | "formatters": [ 16 | "stylish" 17 | ], 18 | "hints": [ 19 | "button-type", 20 | "disown-opener", 21 | "html-checker", 22 | "meta-charset-utf-8", 23 | "meta-viewport", 24 | "no-inline-styles:error" 25 | ] 26 | } -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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": [ 13 | "airbnb-base" 14 | ], 15 | "rules": { 16 | "no-shadow": "off", 17 | "no-param-reassign": "off", 18 | "eol-last": "off", 19 | "import/extensions": [ 20 | 1, 21 | { 22 | "js": "always", 23 | "json": "always" 24 | } 25 | ] 26 | }, 27 | "ignorePatterns": [ 28 | "dist/", 29 | "build/" 30 | ] 31 | } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/Microverse-blueviolet) 2 | 3 | # SLAM POETRY JAM 2022 4 | 5 | - A responsive Website containing about and home page of POETRY SLAM 2020 6 | - Built for Microverse Module one Capstone Project. 7 | - It has home and about page. 8 | - Flex box grid and fload is used to align Items. 9 | - backgroung image and color used to custumise. 10 | - When the user clicks the hamburger button, the mobile menu appears. 11 | - When the user clicks the close (X) button, the mobile menu disappears. 12 | - When the user clicks any of the mobile menu options, the mobile menu disappears. 13 | - When the user clicks home or about of the mobile menu options, a correct part of the page is displayed. 14 | - speaker list and program info is created dynamically using the information stored in that JavaScript object. 15 | 16 | 17 | ## Built With 18 | 19 | - HTML 20 | - CSS 21 | - JavaScript 22 | 23 | ## Live Demo 24 | 25 | [Live Demo Link](https://krishnabot.github.io/Capstone-Project-Poetry-Page/) 26 | 27 | ## Visulal Explaination Of the project 28 | - Video presentation about the project [Video](https://www.loom.com/share/f9d227398f3445c4937a816072314de1) 29 | ## Getting Started 30 | 31 | - To run this project a local machine follw the example steps. 32 | 33 | ### Prerequisites 34 | - git 35 | - Code Editor 36 | 37 | ### Install 38 | - clone repo 39 | ### Usage 40 | - Free to use and modify 41 | 42 | ### Deployment 43 | - Diployed in git hub pages. 44 | 45 | ## Author 46 | 47 | 👤 **Krishna** 48 | 49 | - GitHub: [@githubhandle](https://github.com/Krishnabot) 50 | - Twitter: [@last_matrix](https://twitter.com/last_matrix) 51 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/krishna-prasad-acharya-3596bb130/) 52 | 53 | 54 | ## 🤝 Contributing 55 | 56 | 57 | ## Show your support 58 | 59 | Give a ⭐️ if you like this project! 60 | 61 | ## Acknowledgments 62 | - design : [Cindy Shin](https://www.behance.net/gallery/29845175/CC-Global-Summit-2015) 63 | - imagess: [ShutterStock](https://www.shutterstock.com/) 64 | - Title Logo [LogoLynx](https://www.logolynx.com/) 65 | - stackoverflow 66 | - Video Tool [Loom](https://www.loom.com) 67 | 68 | ## 📝 License 69 | 70 | This project is [MIT](./MIT.md) licensed. 71 | -------------------------------------------------------------------------------- /.github/workflows/linters.yml: -------------------------------------------------------------------------------- 1 | name: Linters 2 | 3 | on: pull_request 4 | 5 | env: 6 | FORCE_COLOR: 1 7 | 8 | jobs: 9 | lighthouse: 10 | name: Lighthouse 11 | runs-on: ubuntu-18.04 12 | steps: 13 | - uses: actions/checkout@v2 14 | - uses: actions/setup-node@v1 15 | with: 16 | node-version: "12.x" 17 | - name: Setup Lighthouse 18 | run: npm install -g @lhci/cli@0.7.x 19 | - name: Lighthouse Report 20 | run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=. 21 | webhint: 22 | name: Webhint 23 | runs-on: ubuntu-18.04 24 | steps: 25 | - uses: actions/checkout@v2 26 | - uses: actions/setup-node@v1 27 | with: 28 | node-version: "12.x" 29 | - name: Setup Webhint 30 | run: | 31 | npm install --save-dev hint@6.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc 33 | - name: Webhint Report 34 | run: npx hint . 35 | stylelint: 36 | name: Stylelint 37 | runs-on: ubuntu-18.04 38 | steps: 39 | - uses: actions/checkout@v2 40 | - uses: actions/setup-node@v1 41 | with: 42 | node-version: "12.x" 43 | - name: Setup Stylelint 44 | run: | 45 | npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | eslint: 50 | name: ESLint 51 | runs-on: ubuntu-18.04 52 | steps: 53 | - uses: actions/checkout@v2 54 | - uses: actions/setup-node@v1 55 | with: 56 | node-version: "12.x" 57 | - name: Setup ESLint 58 | run: | 59 | npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x 60 | [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json 61 | - name: ESLint Report 62 | run: npx eslint . 63 | nodechecker: 64 | name: node_modules checker 65 | runs-on: ubuntu-18.04 66 | steps: 67 | - uses: actions/checkout@v2 68 | - name: Check node_modules existence 69 | run: | 70 | if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi 71 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | /* -------For mobile menu --------*/ 2 | const hamburger = document.querySelector('.hamburger'); 3 | const navMenu = document.querySelector('.nav-menu'); 4 | const navBar = document.querySelector('.nav-bar'); 5 | const navLink = document.querySelector('.nav-link'); 6 | hamburger.addEventListener('click', () => { 7 | hamburger.classList.toggle('active'); 8 | navMenu.classList.toggle('active'); 9 | navBar.classList.toggle('active'); 10 | }); 11 | document.querySelectorAll('.nav-link').forEach((n) => n.addEventListener('click', () => { 12 | hamburger.classList.remove('active'); 13 | navMenu.classList.remove('active'); 14 | navBar.classList.remove('active'); 15 | navLink.classList.remove('active'); 16 | })); 17 | 18 | /* ---------Dynamic Html for home page ----------*/ 19 | const speakerData = [ 20 | { 21 | speaker_img: './src/speaker_01.png', 22 | speaker_name: 'Walt Whitmaßn', 23 | speaker_info: 'an American poet, essayist and journalist. A humanist', 24 | speaker_detail: 25 | 'he was a part of the transition between transcendentalism and realism. Whitman is among the most influential poets in the American canon', 26 | }, 27 | { 28 | speaker_img: './src/speaker_02.png', 29 | speaker_name: 'Allen Ginsberg', 30 | speaker_info: 'an American poet, essayist and writer. A Rebel', 31 | speaker_detail: 32 | 'Ginsberg is best known for his poem "Howl", in which he denounced what he saw as the destructive forces of capitalism and conformity', 33 | }, 34 | { 35 | speaker_img: './src/speaker_03.png', 36 | speaker_name: 'Walt Whitman', 37 | speaker_info: 'an American poet, essayist and journalist. A humanist', 38 | speaker_detail: 39 | 'he was a part of the transition between transcendentalism and realism. Whitman is among the most influential poets in the American canon', 40 | }, 41 | { 42 | speaker_img: './src/speaker_04.png', 43 | speaker_name: 'Allen Ginsberg', 44 | speaker_info: 'an American poet, essayist and writer. A Rebel', 45 | speaker_detail: 46 | 'Ginsberg is best known for his poem "Howl", in which he denounced what he saw as the destructive forces of capitalism and conformity', 47 | }, 48 | { 49 | speaker_img: './src/speaker_05.png', 50 | speaker_name: 'Walt Whitman', 51 | speaker_info: 'an American poet, essayist and journalist. A humanist', 52 | speaker_detail: 53 | 'he was a part of the transition between transcendentalism and realism. Whitman is among the most influential poets in the American canon', 54 | }, 55 | { 56 | speaker_img: './src/speaker_06.png', 57 | speaker_name: 'Allen Ginsberg', 58 | speaker_info: 'an American poet, essayist and writer. A Rebel', 59 | speaker_detail: 60 | 'Ginsberg is best known for his poem "Howl", in which he denounced what he saw as the destructive forces of capitalism and conformity', 61 | }, 62 | ]; 63 | 64 | let dynamicSpeakerContent = ''; 65 | for (let i = 0; i < speakerData.length; i += 1) { 66 | dynamicSpeakerContent = ` 67 |
68 | Whalt Whitman 69 |
70 |

${speakerData[i].speaker_name}

71 |

${speakerData[i].speaker_info}

72 |
73 |
74 |

${speakerData[i].speaker_detail}

75 |
76 |
77 | `; 78 | document.getElementsByClassName('speaker-list-wrap')[0].innerHTML 79 | += dynamicSpeakerContent; 80 | } 81 | 82 | const programData = [ 83 | { 84 | program_icon: './src/program-intro-icon.png', 85 | program_event: 'Introduction', 86 | event_detail: 'Introduction about the event and the poets', 87 | }, 88 | { 89 | program_icon: './src/program-exibition-icon.png', 90 | program_event: 'Exibition', 91 | event_detail: 92 | 'Informative session about invited poets works and publication', 93 | }, 94 | { 95 | program_icon: './src/program-workshop-icon.png', 96 | program_event: 'Workshop', 97 | event_detail: 'Try express your ideas.', 98 | }, 99 | { 100 | program_icon: './src/program-pannel-discussion-icon.png', 101 | program_event: 'Pannel discussion', 102 | event_detail: 'Discussion about contemporary poetry and its influence', 103 | }, 104 | ]; 105 | let dynamicProgramContent = ''; 106 | for (let i = 0; i < programData.length; i += 1) { 107 | dynamicProgramContent = ` 108 |
109 | Introduction 110 |

${programData[i].program_event}

111 |

${programData[i].event_detail}

112 |
113 | `; 114 | document.getElementsByClassName('program-info-wrap')[0].innerHTML 115 | += dynamicProgramContent; 116 | } 117 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Poem catcher - A soulful Journey of a Lost Poet 13 | 14 | 15 | 16 |
17 | 47 |
48 |
49 |
50 |

"Hello! Poetic Souls"

51 |

52 | Slam Poetry Jam 53 | 2022 54 |

55 | 56 |
57 |
58 |

A joyful celebration of Poetry and Story.Join us and Listen to celebreted poets read their work and discuss what they do !

59 |
60 |
61 |

62 | 2022.08.01(FRI) ~ 02(sat) 63 |

64 |

65 | @ Times Square 7 pm UTC+5, 66 |

67 | 68 |
69 |
70 |
71 |
72 |
73 |
74 |

Main Program

75 |
76 |
77 |
78 |
79 |
80 | 81 | See The Whole Program 82 | 83 |
84 |
85 | 86 |
87 | 88 |
89 |
90 |
91 |

Featured Speakers

92 |
93 |
94 |
95 |
96 |
97 |
98 |

MORE

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

Partner

109 |
110 |
111 |
112 |
113 | Apple Logo 114 | Pepsi Logo 115 | twitter Logo 116 | CocaCola Logo 117 | MAcdonal Logo 118 |
119 | 120 |
121 |
122 | 133 | 134 | 135 | 136 | 137 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Poem catcher - A soulful Journey of a Lost Poet 13 | 14 | 15 | 16 | 46 |
47 |
48 |
49 |
50 |
51 |

"Hello! Poetic Souls"

52 |

53 | Slam Poetry Jam 54 | 2022 55 |

56 | 57 |
58 |
59 |

A poetry slam sounds like a mysteriousthing. Will poetry books fly through the air and slam into your face? Not at all! Our first poetry slam happened in 2019. Since then, we celebrete the poerty every year.

60 |
61 |
62 |

63 | Please contact us per email for any further enquiry and registration about Poetry slam jam 2022. 64 |

65 | example@example.com 66 | 67 |
68 |
69 |
70 |
71 |
72 |
73 |

POETRY SLAM 2022 Speaker and panelist

74 |
75 |
76 |
77 |
78 |
The Speakers and panelist were decided through readers suggestions andvoting
79 |
80 |
81 |
82 |
83 |
84 |
85 |

See the past Poetry Slams

86 |
87 |
88 |

Take a look at the last two Poetry Slams whick took place in NewYork and London

89 |
90 |
91 |

2020

92 |

Poetry Slam in NewYork

93 |
94 |
95 |

2020

96 |

Poetry Slam in London

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