├── .gitignore ├── assets ├── coffee.gif ├── bg-gradient.png ├── deathwish-logo.jpg ├── full-screenshot.png ├── starbucks-logo.png ├── COCOGOOSE_Regular.otf ├── dragonfly-coffee-logo.jpg ├── kicking-horse-coffee-logo.png ├── world-coffee-events-logo.png ├── cocogoose_regular-webfont.woff ├── cocogoose_regular-webfont.woff2 ├── WBC-2019-Boston-Winners-Annnouncements-Credit-Lanny-Huang-08491-copy.jpg ├── generator_config.txt └── lavazza-logo.svg ├── scss ├── components │ ├── _nav.scss │ ├── _showcase.scss │ └── _main.scss ├── _typography 2.scss ├── _typography.scss ├── style.scss ├── _icons.scss ├── _config.scss ├── _reset.scss ├── _mobile.scss └── _about.scss ├── .stylelintrc.json ├── .hintrc ├── package.json ├── LICENSE ├── .github └── workflows │ └── linters.yml ├── README.md ├── css ├── style.css.map └── style.css ├── tickets.html ├── about.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /assets/coffee.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/coffee.gif -------------------------------------------------------------------------------- /assets/bg-gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/bg-gradient.png -------------------------------------------------------------------------------- /assets/deathwish-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/deathwish-logo.jpg -------------------------------------------------------------------------------- /assets/full-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/full-screenshot.png -------------------------------------------------------------------------------- /assets/starbucks-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/starbucks-logo.png -------------------------------------------------------------------------------- /assets/COCOGOOSE_Regular.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/COCOGOOSE_Regular.otf -------------------------------------------------------------------------------- /assets/dragonfly-coffee-logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/dragonfly-coffee-logo.jpg -------------------------------------------------------------------------------- /assets/kicking-horse-coffee-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/kicking-horse-coffee-logo.png -------------------------------------------------------------------------------- /assets/world-coffee-events-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/world-coffee-events-logo.png -------------------------------------------------------------------------------- /assets/cocogoose_regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/cocogoose_regular-webfont.woff -------------------------------------------------------------------------------- /assets/cocogoose_regular-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/cocogoose_regular-webfont.woff2 -------------------------------------------------------------------------------- /scss/components/_nav.scss: -------------------------------------------------------------------------------- 1 | .top-nav { 2 | height: 30px; 3 | } 4 | 5 | h1 { 6 | color: $orange; 7 | font-family: $font-stack-1; 8 | font-size: 45px; 9 | font-weight: 700; 10 | } 11 | -------------------------------------------------------------------------------- /scss/_typography 2.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Cocogoose"; 3 | src: url("../assets/cocogoose_regular-webfont.woff") format("woff"); 4 | font-weight: normal; 5 | font-style: normal; 6 | } 7 | -------------------------------------------------------------------------------- /scss/_typography.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Cocogoose"; 3 | src: url("../assets/cocogoose_regular-webfont.woff") format("woff"); 4 | font-weight: normal; 5 | font-style: normal; 6 | } 7 | -------------------------------------------------------------------------------- /assets/WBC-2019-Boston-Winners-Annnouncements-Credit-Lanny-Huang-08491-copy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikoescobal/COFFEECON2020/HEAD/assets/WBC-2019-Boston-Winners-Annnouncements-Credit-Lanny-Huang-08491-copy.jpg -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "./config"; 2 | @import "./icons"; 3 | @import "./reset"; 4 | @import "./components/showcase"; 5 | @import "./components/nav"; 6 | @import "./mobile"; 7 | @import "./components/main"; 8 | @import "./about"; 9 | @import "./typography"; 10 | -------------------------------------------------------------------------------- /.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": true, 7 | "csstree/validator": true 8 | }, 9 | "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"] 10 | } 11 | -------------------------------------------------------------------------------- /.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 | ] 17 | } 18 | -------------------------------------------------------------------------------- /scss/_icons.scss: -------------------------------------------------------------------------------- 1 | i.fa-bars::before { 2 | font-size: 28px; 3 | color: lighten($black, 5); 4 | padding: 15px 25px; 5 | display: flex; 6 | align-items: center; 7 | } 8 | 9 | i.fa-facebook-f::before { 10 | font-size: 18px; 11 | color: $gray; 12 | display: flex; 13 | align-items: center; 14 | } 15 | 16 | i.fa-twitter::before { 17 | font-size: 18px; 18 | color: $gray; 19 | display: flex; 20 | align-items: center; 21 | } 22 | -------------------------------------------------------------------------------- /scss/_config.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ============================================== 3 | ****** GLOBAL ****** 4 | ============================================== 5 | */ 6 | 7 | // Colors 8 | 9 | $gray: #d3d3d3; 10 | $orange: #ec5242; 11 | $black: #272a31; 12 | $white: #fff; 13 | $dark-gray: #3d3f46; 14 | 15 | // Fonts 16 | 17 | $font-stack-1: 'Cocogoose',sans-serif; 18 | $font-stack-2: 'Lato',sans-serif; 19 | $font-stack-3: 'Work Sans',sans-serif; 20 | -------------------------------------------------------------------------------- /assets/generator_config.txt: -------------------------------------------------------------------------------- 1 | # Font Squirrel Font-face Generator Configuration File 2 | # Upload this file to the generator to recreate the settings 3 | # you used to create these fonts. 4 | 5 | {"mode":"optimal","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"} -------------------------------------------------------------------------------- /scss/components/_showcase.scss: -------------------------------------------------------------------------------- 1 | .showcase { 2 | background-image: url(../assets/coffee.gif), linear-gradient(to top left, darken($black, 75%), $gray); 3 | background-color: transparent; 4 | background-blend-mode: overlay; 5 | background-position: 57% 43%; 6 | background-repeat: no-repeat; 7 | background-attachment: fixed; 8 | background-size: cover; 9 | width: 100%; 10 | position: relative; 11 | cursor: pointer; 12 | height: 500px; 13 | 14 | &-bottom { 15 | color: lighten($gray, 1%); 16 | font-family: $font-stack-1; 17 | 18 | &-caption:first-child { 19 | border-radius: 5px; 20 | background: transparentize($orange, 0.3); 21 | font-family: $font-stack-2; 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /assets/lavazza-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "linters-config", 3 | "version": "1.0.0", 4 | "description": "default linter set-up configuration", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "npm run webhint && npm run stylelint && echo \"✅✅✅ All tests passed ✅✅✅\"", 8 | "webhint": "hint .", 9 | "stylelint": "npx stylelint **/*.scss", 10 | "sass": "node-sass scss/style.scss css/style.css -w" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/nikoescobal/linters-config.git" 15 | }, 16 | "author": "", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/nikoescobal/linters-config/issues" 20 | }, 21 | "homepage": "https://github.com/nikoescobal/linters-config#readme", 22 | "devDependencies": { 23 | "hint": "^6.0.7", 24 | "stylelint": "^13.3.3", 25 | "stylelint-config-standard": "^20.0.0", 26 | "stylelint-csstree-validator": "^1.8.0", 27 | "stylelint-scss": "^3.17.2" 28 | }, 29 | "dependencies": { 30 | "node-sass": "^4.14.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /scss/_reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | ============================================== 3 | ****** RESET ****** 4 | ============================================== 5 | */ 6 | 7 | *::before, 8 | *::after { 9 | margin: 0; 10 | padding: 0; 11 | -webkit-box-sizing: border-box; 12 | -moz-box-sizing: border-box; 13 | box-sizing: border-box; 14 | } 15 | 16 | body { 17 | font-family: $font-stack-2; 18 | width: 100%; 19 | color: $black; 20 | 21 | ul { 22 | list-style: none; 23 | } 24 | } 25 | 26 | a { 27 | color: inherit; 28 | text-decoration: none; 29 | 30 | &:hover { 31 | color: lighten($orange, 10%); 32 | text-decoration: none; 33 | } 34 | } 35 | 36 | .orange-text { 37 | color: $orange; 38 | } 39 | 40 | .gray-text { 41 | color: $gray; 42 | } 43 | 44 | .black-text { 45 | color: $black; 46 | } 47 | 48 | .bg-black { 49 | background-color: $black; 50 | } 51 | 52 | .bg-gray { 53 | background-color: $gray; 54 | } 55 | 56 | .bg-dark-gray { 57 | background-color: $dark-gray; 58 | } 59 | 60 | .bg-orange { 61 | background-color: $orange; 62 | } 63 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Nikolas Escobal 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /scss/_mobile.scss: -------------------------------------------------------------------------------- 1 | @media (max-width: 992px) { 2 | h1 { 3 | font-size: 40px; 4 | } 5 | } 6 | 7 | @media (max-width: 767px) { 8 | .header-logo { 9 | background: linear-gradient(to right, darken($gray, 15%), $orange); 10 | } 11 | 12 | h1 { 13 | font-size: 38px; 14 | } 15 | } 16 | 17 | @media (max-width: 576px) { 18 | h1 { 19 | font-size: 30px; 20 | } 21 | 22 | footer { 23 | font-size: 14px; 24 | } 25 | 26 | .past-coffeecon h2 { 27 | font-size: 24px; 28 | } 29 | 30 | .tickets h1 { 31 | font-size: 28px; 32 | } 33 | 34 | .ticket-button { 35 | font-size: 11px; 36 | } 37 | 38 | .tables { 39 | font-size: 11.5px; 40 | } 41 | 42 | .best-coffee h2 { 43 | font-size: 28px; 44 | } 45 | 46 | .best-coffee h4 { 47 | font-size: 20px; 48 | } 49 | 50 | .best-coffee h6 { 51 | font-size: 10.5px; 52 | } 53 | } 54 | 55 | @media (max-width: 321px) { 56 | h1 { 57 | font-size: 28.5px; 58 | } 59 | 60 | .coffee-connoiseurs h2 { 61 | font-size: 26px; 62 | } 63 | } 64 | 65 | @media (min-width: 768px) { 66 | .showcase-bottom-caption { 67 | margin-top: -10px; 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /.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.4.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.0.x 32 | [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.hintrc 33 | - name: Webhint Report 34 | run: npx hint --telemetry=off . 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.3.x stylelint-scss@3.17.x stylelint-config-standard@20.0.x stylelint-csstree-validator 46 | [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css/.stylelintrc.json 47 | - name: Stylelint Report 48 | run: npx stylelint "**/*.{css,scss}" 49 | -------------------------------------------------------------------------------- /scss/components/_main.scss: -------------------------------------------------------------------------------- 1 | @mixin flex-center { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | 6 | h2, 7 | h3 { 8 | font-family: $font-stack-1; 9 | } 10 | 11 | .main-program { 12 | background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://i.pinimg.com/originals/87/c1/d2/87c1d2e0bd88142fd47549b2e86f247b.jpg); 13 | background-color: transparent; 14 | background-position: center center; 15 | background-repeat: no-repeat; 16 | background-attachment: fixed; 17 | background-size: cover; 18 | width: 100%; 19 | position: relative; 20 | cursor: pointer; 21 | height: auto; 22 | 23 | .content { 24 | background: transparentize($black, 0.5); 25 | backdrop-filter: blur(4px); 26 | border-radius: 15px; 27 | } 28 | 29 | .main-button { 30 | width: 18em; 31 | color: lighten($gray, 85%); 32 | border: transparent; 33 | background-color: darken($orange, 3%); 34 | border-radius: 50px; 35 | } 36 | 37 | .coffee-caption { 38 | width: 100%; 39 | } 40 | } 41 | 42 | .coffee-connoiseurs figure { 43 | width: 100%; 44 | } 45 | 46 | .avatar { 47 | object-fit: cover; 48 | width: 10rem; 49 | max-width: 100%; 50 | height: 10rem; 51 | opacity: 1; 52 | -webkit-transition: 0.3s ease-in-out; 53 | transition: 0.3s ease-in-out; 54 | } 55 | 56 | .avatar:hover { 57 | opacity: 0.5; 58 | } 59 | 60 | .avatar-2 { 61 | object-fit: cover; 62 | opacity: 1; 63 | -webkit-transition: 0.3s ease-in-out; 64 | transition: 0.3s ease-in-out; 65 | } 66 | 67 | .avatar-2:hover { 68 | opacity: 0.5; 69 | } 70 | 71 | .partners { 72 | background-color: darken($dark-gray, 3%); 73 | } 74 | 75 | .fancy-border { 76 | border: 10px solid $black; 77 | border-image: url("/assets/bg-gradient.png"); 78 | border-image-slice: 230 100 110; 79 | } 80 | 81 | .table-border { 82 | border: 3px solid $black; 83 | } 84 | -------------------------------------------------------------------------------- /scss/_about.scss: -------------------------------------------------------------------------------- 1 | @mixin flex-center { 2 | display: flex; 3 | justify-content: center; 4 | } 5 | 6 | .about { 7 | background-image: url(https://nationalcoffeeblog.files.wordpress.com/2018/11/limitless-coffee.gif), linear-gradient(to top left, darken($black, 75%), $gray); 8 | background-color: transparent; 9 | background-blend-mode: overlay; 10 | background-position: 42% 58%; 11 | background-repeat: no-repeat; 12 | background-attachment: fixed; 13 | background-size: cover; 14 | width: 100%; 15 | position: relative; 16 | cursor: pointer; 17 | height: 500px; 18 | 19 | &-bottom { 20 | color: darken($gray, 54%); 21 | 22 | &-caption { 23 | border-radius: 5px; 24 | background-color: white; 25 | opacity: 0.7; 26 | } 27 | } 28 | } 29 | 30 | .best-coffee figcaption p { 31 | @include flex-center; 32 | 33 | align-items: center; 34 | } 35 | 36 | .coffeecon-2019 { 37 | background-image: linear-gradient(to top left, transparentize($orange, 0.3), transparentize($orange, 0.3)), url(https://www.finedininglovers.com/sites/g/files/xknfdk626/files/styles/open_graph_image/public/Original_555_FDL-226-TP.jpg?itok=Sf-xMd1p); 38 | backdrop-filter: blur(4px); 39 | background-position: center center; 40 | background-attachment: scroll; 41 | background-size: cover; 42 | width: 100%; 43 | position: relative; 44 | font: $font-stack-1; 45 | cursor: pointer; 46 | height: auto; 47 | } 48 | 49 | .coffeecon-2018 { 50 | background-image: linear-gradient(to top left, transparentize($orange, 0.3), transparentize($orange, 0.3)), url(https://sprudge.com/wp-content/uploads/2018/09/Hugh-Kelly-ONA-Australia-03-1024x683.jpg); 51 | backdrop-filter: blur(4px); 52 | background-position: 42% 58%; 53 | background-attachment: scroll; 54 | background-size: cover; 55 | width: 100%; 56 | position: relative; 57 | font: $font-stack-1; 58 | cursor: pointer; 59 | height: auto; 60 | } 61 | 62 | .main-button { 63 | width: 18em; 64 | color: lighten($gray, 85%); 65 | border: transparent; 66 | background-color: darken($orange, 3%); 67 | border-radius: 50px; 68 | } 69 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [COFFEECON2020](https://coffeecon2020.netlify.app/) (HTML-CSS Microverse Capstone Project) 2 | 3 | The purpose of this project was to demonstrate mastery of HTML and CSS fundamentals, by conceptualizing and building an original website given specific [design](https://www.behance.net/gallery/29845175/CC-Global-Summit-2015) guidelines. The concept of the project is COFFEECON2020 - the ultimate global coffee conference. 4 | 5 | I built this website with a mobile-first approach, applying fluid design principles -- It is fully-responsive across all breakpoints, from 320px up in all screens. 6 | 7 | ![full-screenshot](https://user-images.githubusercontent.com/62937819/94750101-ec1aa600-03b7-11eb-9c81-5b34798e1338.png) 8 | 9 | ## Live Demo 10 | 11 | [Live Demo Link](https://coffeecon2020.netlify.app/) 12 | 13 | Check out my video presentation [here](https://www.loom.com/share/279cc63ac57f439d891ee50b18b8f8b8). 14 | 15 | ## Built with 16 | 17 | - HTML 18 | - CSS/SCSS 19 | - Sass 20 | - BootStrap 21 | - Lots of :heart: 22 | 23 | ## Getting Started 24 | 25 | To get a local copy of the repository please run the following commands on your terminal: 26 | 27 | ``` 28 | git clone git@github.com:nikoescobal/COFFEECON2020.git 29 | ``` 30 | 31 | ## Linters 32 | 33 | 34 | ``` 35 | run npm install. 36 | run npm run test to check and validate the HTML and CSS files. 37 | ``` 38 | 39 | ## Author 40 | 41 | Feel free to reach out. I'm always happy to connect :slightly_smiling_face: 42 | 43 | 👤 **Nikolas Escobal** 44 | 45 | 46 | [](https://github.com/nikoescobal) 47 | [](https://twitter.com/nikoescobal) 48 | [](https://www.linkedin.com/in/nikolas-escobal/) 49 | 50 | ## 🤝 Contributing 51 | 52 | Contributions, issues and feature requests are welcome! 53 | 54 | Feel free to check the [issues page](issues/). 55 | 56 | ## Show your support 57 | 58 | Give a ⭐️ if you dig this project! 59 | 60 | ## Acknowledgments 61 | 62 | - Microverse 63 | - The Odin Project 64 | - [Cindy Shin for the design inspiration](https://www.behance.net/adagio07) 65 | - My awesome friends [Mkrtich](https://github.com/MkrtichSargsyan/), [Somoye](https://github.com/somoye123/), [Mohap](https://github.com/mohapakram), and [Raza](https://github.com/rahalrazika) for the support. Love you, guys :heart: 66 | 67 | 68 | ## 📝 MIT License 69 | 70 | This project makes use of the MIT license. 71 | -------------------------------------------------------------------------------- /css/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "../scss/style.scss", 6 | "../scss/_config.scss", 7 | "../scss/_icons.scss", 8 | "../scss/_reset.scss", 9 | "../scss/components/_showcase.scss", 10 | "../scss/components/_nav.scss", 11 | "../scss/_mobile.scss", 12 | "../scss/components/_main.scss", 13 | "../scss/_about.scss", 14 | "../scss/_typography.scss" 15 | ], 16 | "names": [], 17 | "file": "style.css" 18 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | ============================================== 3 | ****** GLOBAL ****** 4 | ============================================== 5 | */ 6 | i.fa-bars::before { 7 | font-size: 28px; 8 | color: #32363f; 9 | padding: 15px 25px; 10 | display: flex; 11 | align-items: center; 12 | } 13 | 14 | i.fa-facebook-f::before { 15 | font-size: 18px; 16 | color: #d3d3d3; 17 | display: flex; 18 | align-items: center; 19 | } 20 | 21 | i.fa-twitter::before { 22 | font-size: 18px; 23 | color: #d3d3d3; 24 | display: flex; 25 | align-items: center; 26 | } 27 | 28 | /* 29 | ============================================== 30 | ****** RESET ****** 31 | ============================================== 32 | */ 33 | *::before, 34 | *::after { 35 | margin: 0; 36 | padding: 0; 37 | -webkit-box-sizing: border-box; 38 | -moz-box-sizing: border-box; 39 | box-sizing: border-box; 40 | } 41 | 42 | body { 43 | font-family: "Lato", sans-serif; 44 | width: 100%; 45 | color: #272a31; 46 | } 47 | 48 | body ul { 49 | list-style: none; 50 | } 51 | 52 | a { 53 | color: inherit; 54 | text-decoration: none; 55 | } 56 | 57 | a:hover { 58 | color: #f17c70; 59 | text-decoration: none; 60 | } 61 | 62 | .orange-text { 63 | color: #ec5242; 64 | } 65 | 66 | .gray-text { 67 | color: #d3d3d3; 68 | } 69 | 70 | .black-text { 71 | color: #272a31; 72 | } 73 | 74 | .bg-black { 75 | background-color: #272a31; 76 | } 77 | 78 | .bg-gray { 79 | background-color: #d3d3d3; 80 | } 81 | 82 | .bg-dark-gray { 83 | background-color: #3d3f46; 84 | } 85 | 86 | .bg-orange { 87 | background-color: #ec5242; 88 | } 89 | 90 | .showcase { 91 | background-image: url(../assets/coffee.gif), linear-gradient(to top left, black, #d3d3d3); 92 | background-color: transparent; 93 | background-blend-mode: overlay; 94 | background-position: 57% 43%; 95 | background-repeat: no-repeat; 96 | background-attachment: fixed; 97 | background-size: cover; 98 | width: 100%; 99 | position: relative; 100 | cursor: pointer; 101 | height: 500px; 102 | } 103 | 104 | .showcase-bottom { 105 | color: #d6d6d6; 106 | font-family: "Cocogoose", sans-serif; 107 | } 108 | 109 | .showcase-bottom-caption:first-child { 110 | border-radius: 5px; 111 | background: rgba(236, 82, 66, 0.7); 112 | font-family: "Lato", sans-serif; 113 | } 114 | 115 | .top-nav { 116 | height: 30px; 117 | } 118 | 119 | h1 { 120 | color: #ec5242; 121 | font-family: "Cocogoose", sans-serif; 122 | font-size: 45px; 123 | font-weight: 700; 124 | } 125 | 126 | @media (max-width: 992px) { 127 | h1 { 128 | font-size: 40px; 129 | } 130 | } 131 | 132 | @media (max-width: 767px) { 133 | .header-logo { 134 | background: linear-gradient(to right, #adadad, #ec5242); 135 | } 136 | 137 | h1 { 138 | font-size: 38px; 139 | } 140 | } 141 | 142 | @media (max-width: 576px) { 143 | h1 { 144 | font-size: 30px; 145 | } 146 | 147 | footer { 148 | font-size: 14px; 149 | } 150 | 151 | .past-coffeecon h2 { 152 | font-size: 24px; 153 | } 154 | 155 | .tickets h1 { 156 | font-size: 28px; 157 | } 158 | 159 | .ticket-button { 160 | font-size: 11px; 161 | } 162 | 163 | .tables { 164 | font-size: 11.5px; 165 | } 166 | 167 | .best-coffee h2 { 168 | font-size: 28px; 169 | } 170 | 171 | .best-coffee h4 { 172 | font-size: 20px; 173 | } 174 | 175 | .best-coffee h6 { 176 | font-size: 10.5px; 177 | } 178 | } 179 | 180 | @media (max-width: 321px) { 181 | h1 { 182 | font-size: 28.5px; 183 | } 184 | 185 | .coffee-connoiseurs h2 { 186 | font-size: 26px; 187 | } 188 | } 189 | 190 | @media (min-width: 768px) { 191 | .showcase-bottom-caption { 192 | margin-top: -10px; 193 | } 194 | } 195 | 196 | h2, 197 | h3 { 198 | font-family: "Cocogoose", sans-serif; 199 | } 200 | 201 | .main-button { 202 | width: 18em; 203 | color: white; 204 | border: transparent; 205 | background-color: #eb4534; 206 | border-radius: 50px; 207 | } 208 | 209 | .main-program { 210 | background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://i.pinimg.com/originals/87/c1/d2/87c1d2e0bd88142fd47549b2e86f247b.jpg); 211 | background-color: transparent; 212 | background-position: center center; 213 | background-repeat: no-repeat; 214 | background-attachment: fixed; 215 | background-size: cover; 216 | width: 100%; 217 | position: relative; 218 | cursor: pointer; 219 | height: auto; 220 | } 221 | 222 | .main-program .content { 223 | background: rgba(39, 42, 49, 0.5); 224 | backdrop-filter: blur(4px); 225 | border-radius: 15px; 226 | } 227 | 228 | .main-program .main-button { 229 | width: 18em; 230 | color: white; 231 | border: transparent; 232 | background-color: #eb4534; 233 | border-radius: 50px; 234 | } 235 | 236 | .main-program .coffee-caption { 237 | width: 100%; 238 | } 239 | 240 | .coffee-connoiseurs figure { 241 | width: 100%; 242 | } 243 | 244 | .avatar { 245 | object-fit: cover; 246 | width: 10rem; 247 | max-width: 100%; 248 | height: 10rem; 249 | opacity: 1; 250 | -webkit-transition: 0.3s ease-in-out; 251 | transition: 0.3s ease-in-out; 252 | } 253 | 254 | .avatar:hover { 255 | opacity: 0.5; 256 | } 257 | 258 | .avatar-2 { 259 | object-fit: cover; 260 | opacity: 1; 261 | -webkit-transition: 0.3s ease-in-out; 262 | transition: 0.3s ease-in-out; 263 | } 264 | 265 | .avatar-2:hover { 266 | opacity: 0.5; 267 | } 268 | 269 | .partners { 270 | background-color: #36383e; 271 | } 272 | 273 | .fancy-border { 274 | border: 10px solid #272a31; 275 | border-image: url("/assets/bg-gradient.png"); 276 | border-image-slice: 230 100 110; 277 | } 278 | 279 | .table-border { 280 | border: 3px solid #272a31; 281 | } 282 | 283 | .about { 284 | background-image: url(https://nationalcoffeeblog.files.wordpress.com/2018/11/limitless-coffee.gif), linear-gradient(to top left, black, #d3d3d3); 285 | background-color: transparent; 286 | background-blend-mode: overlay; 287 | background-position: 42% 58%; 288 | background-repeat: no-repeat; 289 | background-attachment: fixed; 290 | background-size: cover; 291 | width: 100%; 292 | position: relative; 293 | cursor: pointer; 294 | height: 500px; 295 | } 296 | 297 | .about-bottom { 298 | color: #494949; 299 | } 300 | 301 | .about-bottom-caption { 302 | border-radius: 5px; 303 | background-color: white; 304 | opacity: 0.7; 305 | } 306 | 307 | .best-coffee figcaption p { 308 | display: flex; 309 | justify-content: center; 310 | align-items: center; 311 | } 312 | 313 | .coffeecon-2019 { 314 | background-image: linear-gradient(to top left, rgba(236, 82, 66, 0.7), rgba(236, 82, 66, 0.7)), url(https://www.finedininglovers.com/sites/g/files/xknfdk626/files/styles/open_graph_image/public/Original_555_FDL-226-TP.jpg?itok=Sf-xMd1p); 315 | backdrop-filter: blur(4px); 316 | background-position: center center; 317 | background-attachment: scroll; 318 | background-size: cover; 319 | width: 100%; 320 | position: relative; 321 | font-family: "Cocogoose", sans-serif; 322 | cursor: pointer; 323 | height: auto; 324 | } 325 | 326 | .coffeecon-2018 { 327 | background-image: linear-gradient(to top left, rgba(236, 82, 66, 0.7), rgba(236, 82, 66, 0.7)), url(https://sprudge.com/wp-content/uploads/2018/09/Hugh-Kelly-ONA-Australia-03-1024x683.jpg); 328 | backdrop-filter: blur(4px); 329 | background-position: 42% 58%; 330 | background-attachment: scroll; 331 | background-size: cover; 332 | width: 100%; 333 | position: relative; 334 | font-family: "Cocogoose", sans-serif; 335 | cursor: pointer; 336 | height: auto; 337 | } 338 | 339 | @font-face { 340 | font-family: "Cocogoose"; 341 | src: url("../assets/cocogoose_regular-webfont.woff") format("woff"); 342 | font-weight: normal; 343 | font-style: normal; 344 | } 345 | -------------------------------------------------------------------------------- /tickets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 12 | 13 | 14 | HTML/CSS Capstone Project 15 | 16 | 17 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | 71 |
72 |
73 |
74 |
75 | 76 |
77 |

78 | select your ticket 79 |

80 | 81 |
82 |
83 | 84 | 89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 106 | 109 | 112 | 113 | 114 | 115 | 118 | 121 | 124 | 125 | 126 | 127 | 130 | 133 | 136 | 137 | 138 |
TicketDay Pass2-Day Pass3-Day Pass
Silver 104 | 105 | 107 | 108 | 110 | 111 |
Gold 116 | 117 | 119 | 120 | 122 | 123 |
Platinum 128 | 129 | 131 | 132 | 134 | 135 |
139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 155 | 158 | 161 | 162 | 163 | 164 | 167 | 170 | 173 | 174 | 175 | 176 | 180 | 183 | 186 | 187 | 188 |
DateEntrée Selection
Oct. 10 (Wed) 153 | 154 | 156 | 157 | 159 | 160 |
Oct. 11 (Thurs) 165 | 166 | 168 | 169 | 171 | 172 |
Oct. 12 (Fri) 177 | 179 | 181 | 182 | 184 | 185 |
189 | 190 |
191 | 192 | 193 | 194 | 195 | 196 |
197 |
198 |
199 |
200 |
201 |
202 | 203 | 237 | 238 |
239 | 240 | 241 | 242 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 12 | 13 | 14 | HTML/CSS Capstone Project 15 | 16 | 17 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | 71 |
72 |
73 |
74 |
75 | 76 | 77 |

79 | coffeecon 2020 80 |

81 | 82 | 83 |
84 |
85 | 86 |
87 |

A new city each year -- join us as we celebrate the world's best coffees of 2020, in 88 | Tokyo, Japan! COFFEECON 2020 is the ultimate event for all 89 | coffee-lovers and connoiseurs.

90 | 91 |

This year’s event features exhibitor halls, exclusive tasting sessions, demos from 92 | coffee masters, and 93 | so much more!

94 |
95 |

Got a 96 | question? Drop us a line - we're always happy to help!  97 | info@coffeecon2020.com

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

Best Coffee of 2020

108 | 109 |
110 |

Dragonfly Coffee Roasters: 111 |

112 |
Panama Geisha -- Elida Estate Geisha Green-Tip 113 | Natural
114 |

Blind Assessment: Vast yet intimate in its layered intricacy: 115 | complete and perfectly 116 | balanced. Complex flowers (citrus blossom, ginger blossom, aromatic orchid), bright, fresh 117 | fruit (pear, peach, tangerine), sweet cocoa, sandalwood, a hint of candycap mushroom in 118 | aroma and cup. In structure, juicy and lyrically bright with a subtly pungent umami base; 119 | light-footed, satiny mouthfeel. Pear leads into long, vibrantly flavor-saturated finish.

120 |
121 |
123 | best coffee of 2019
126 |
127 |
128 |
129 | 130 |
131 | 132 | 133 | 134 |
135 | 136 |

137 | view 138 | past coffeecons 139 |

140 | 141 |
142 |
143 | 144 |
145 |
146 |
147 |
148 |
150 | coffeecon 2019
151 |
Torino, Italy
152 |       153 |   154 |
155 |
156 |
157 |
158 | 159 |
160 |
161 |
162 | 163 |
164 |
165 |
166 |
167 |
169 | coffeecon 2018
170 |
Seoul, Korea
171 |       172 |   173 |
174 |
175 |
176 |
177 |
178 | 179 | 182 | 183 | 186 |
187 |
188 | 189 | 190 |
191 |
192 |

Partners 193 |

194 | 195 |
196 |
197 | 198 | 199 |
200 | Kicking horse logo 202 |
203 | 204 |
    205 |
  • Starbucks logo
    • 207 |
  • Lavazza logo
    • 209 | 210 |
211 | 212 |
    213 |
  • Dragonfly logo 215 |
    • 216 |
  • Death wish logo
    • 218 |
219 | 220 |
    222 |
  • kicking horse coffee logo
    • 224 |
  • Starbucks logo
    • 226 |
  • Lavazza logo
    • 229 |
  • Dragonfly logo 231 |
    • 232 |
  • Death wish logo
    • 235 | 236 |
237 | 238 |
239 |
240 |
241 | 242 |
243 | 244 | 278 | 279 |
280 | 281 | 282 | 283 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 12 | 13 | 14 | HTML/CSS Capstone Project 15 | 16 | 17 | 20 | 21 | 22 | 23 |
24 | 25 | 70 |
71 |
72 | 73 |
74 |
75 |
76 |

coffeecon 77 | 2020 78 |

79 |
80 |

81 | Embark on a coffee journey 'round the 82 | world.

83 |
85 |

Nov. 10-12, 2020

86 |

Tokyo, Japan

87 |
88 |
89 |
90 | 91 |
92 |
93 | 94 | 95 | 96 |
97 | 98 |

99 | Program 101 | Flow 102 |

103 | 104 |
105 |
106 |
107 | 108 | 109 | country flag icon 111 | 112 |
113 |
114 |

116 | Coffee

117 |

Experience coffee from Japan.

118 |         119 |
120 |
121 |
122 |
123 | 124 |
125 |
126 | 127 | 128 | country flag icon 130 | 131 |
132 |
133 |

135 | Coffee

136 |

Experience coffee from Austria.

    137 |
138 |
139 |
140 |
141 |
142 |
143 | 144 | 145 | country flag icon 146 |
147 |
148 |

150 | Coffee

151 |

Experience coffee from Vietnam.

  152 |
153 |
154 |
155 |
156 |
157 |
158 | 159 | country flag icon 161 |
162 |
163 |

165 | Coffee

166 |

Experience coffee from Brazil.

      167 |   168 |
169 |
170 |
171 |
172 |
173 |
174 | 175 | country flag icon 177 | 178 |
179 |
180 |

182 | Coffee

183 |

Experience coffee from Ethiopia.

  184 |
185 |
186 |
187 |
188 | 189 | 192 | 193 | 196 |
197 |
198 | 199 | 200 |
201 |

202 | Coffee Connoiseurs 203 |

204 |
205 |
206 |
207 |
208 | Howard Schultz 211 | 212 |
213 |
Howard Schultz
214 |

The Coffee King

215 |

Chairman and CEO Emeritus of Starbucks

216 |
217 |
218 |
219 |
220 |
221 | Jooyeon Jeon 223 |
224 |
Jooyeon Jeon
225 |

2019 World Barista Champion

226 |

Barista Training Director at Momos Coffee

227 |
228 |
229 |
230 |
231 |
232 | 233 |
234 |
235 |
236 |
237 | Howard Schultz 240 |
241 |
Howard Schultz
242 |

The Coffee King

243 |

Chairman and CEO Emeritus of Starbucks

244 |
245 |
246 |
247 |
248 |
249 | Jooyeon Jeon 251 |
252 |
Jooyeon Jeon
253 |

2019 World Barista Champion

254 |

Barista Training Director at Momos Coffee

255 |
256 |
257 |
258 |
259 | 260 |
261 |
262 |
263 |
264 |
265 | Erika Vonie 268 |
269 |
Erika Vonie
270 |

2017 NYC Coffee Masters Champion

271 |

Certified Specialty Coffee Sommelier and Barista

272 |
273 |
274 |
275 |
276 |
277 | Al Amoudi 280 |
281 |
Al Amoudi
282 |

Ethiopia's Coffee Magnate

283 |

Serial Coffee Enthusiast and Billionaire

284 |
285 |
286 |
287 |
288 | 289 |
290 |
291 |
292 |
293 |
294 | Berg Wu 297 |
298 |
Berg Wu
299 |

2016 World Barista Champion

300 |

Founder of Simple Kaffa

301 |
302 |
303 |
304 |
305 |
306 | Kim Westerman 309 |
310 |
Kim Westerman 311 |
312 |

The Coffee Snob

313 |

Managing Editor at Coffee Review

314 |
315 |
316 |
317 |
318 |
319 | 323 |
324 | 325 |
326 |
327 |

partners

328 | 329 |
330 |
331 | 332 | 333 |
334 | Kicking horse logo 336 |
337 | 338 |
    339 |
  • Starbucks logo
    • 341 |
  • Lavazza logo
    • 343 | 344 |
345 | 346 |
    347 |
  • Dragonfly logo
    • 349 |
  • Death wish logo
    • 351 |
352 | 353 |
    355 |
  • kicking horse coffee logo
    • 357 |
  • Starbucks logo
    • 359 |
  • Lavazza logo
    • 362 |
  • Dragonfly logo
    • 364 |
  • Death wish logo
    • 367 | 368 |
369 | 370 |
371 |
372 |
373 | 374 |
375 |
376 | 377 | 410 | 411 | 412 | 413 | 414 | --------------------------------------------------------------------------------