├── .gitignore ├── img ├── perso3.jpg ├── person2.jpg ├── person5.jpg ├── person6.jpg ├── about-pic1.jpg ├── about-pic2.jpg ├── html5-logo.png ├── index-1200.png ├── index-360.png ├── index-768.png ├── person1-2.jpg ├── person4-2.jpg ├── react-logo.png ├── airbnb-logo-white.png ├── project-logo-black.png ├── project-logo-white.png ├── 1024px-Ruby_logo.svg.png ├── css3-removebg-preview2.png ├── project-logo-black-big.png ├── google-logo-white-png-8-2.png └── 1200px-Unofficial_JavaScript_logo_2.svg.png ├── fonts ├── Cocogoose-Pro-Regular-Trial.ttf └── Cocogoose-Pro-SemiLight-Trial.ttf ├── .stickler.yml ├── README.md ├── stylelint.config.js ├── tickets.html ├── about.html ├── style.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | package-lock.json 3 | -------------------------------------------------------------------------------- /img/perso3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/perso3.jpg -------------------------------------------------------------------------------- /img/person2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/person2.jpg -------------------------------------------------------------------------------- /img/person5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/person5.jpg -------------------------------------------------------------------------------- /img/person6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/person6.jpg -------------------------------------------------------------------------------- /img/about-pic1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/about-pic1.jpg -------------------------------------------------------------------------------- /img/about-pic2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/about-pic2.jpg -------------------------------------------------------------------------------- /img/html5-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/html5-logo.png -------------------------------------------------------------------------------- /img/index-1200.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/index-1200.png -------------------------------------------------------------------------------- /img/index-360.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/index-360.png -------------------------------------------------------------------------------- /img/index-768.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/index-768.png -------------------------------------------------------------------------------- /img/person1-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/person1-2.jpg -------------------------------------------------------------------------------- /img/person4-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/person4-2.jpg -------------------------------------------------------------------------------- /img/react-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/react-logo.png -------------------------------------------------------------------------------- /img/airbnb-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/airbnb-logo-white.png -------------------------------------------------------------------------------- /img/project-logo-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/project-logo-black.png -------------------------------------------------------------------------------- /img/project-logo-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/project-logo-white.png -------------------------------------------------------------------------------- /img/1024px-Ruby_logo.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/1024px-Ruby_logo.svg.png -------------------------------------------------------------------------------- /img/css3-removebg-preview2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/css3-removebg-preview2.png -------------------------------------------------------------------------------- /img/project-logo-black-big.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/project-logo-black-big.png -------------------------------------------------------------------------------- /img/google-logo-white-png-8-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/google-logo-white-png-8-2.png -------------------------------------------------------------------------------- /fonts/Cocogoose-Pro-Regular-Trial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/fonts/Cocogoose-Pro-Regular-Trial.ttf -------------------------------------------------------------------------------- /fonts/Cocogoose-Pro-SemiLight-Trial.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/fonts/Cocogoose-Pro-SemiLight-Trial.ttf -------------------------------------------------------------------------------- /img/1200px-Unofficial_JavaScript_logo_2.svg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alvp01/webinar-page/HEAD/img/1200px-Unofficial_JavaScript_logo_2.svg.png -------------------------------------------------------------------------------- /.stickler.yml: -------------------------------------------------------------------------------- 1 | # add the linters you want stickler to use for this project 2 | linters: 3 | stylelint: 4 | # indicate where is the config file for stylelint 5 | config: 'stylelint.config.js' 6 | 7 | # PLEASE DO NOT enable auto fixing options 8 | # if you need extra support from you linter - do it in your local env as described in README for this config 9 | 10 | # find full documentation here: https://stickler-ci.com/docs 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Microverse Capstone project - Global Summit 2 | ## Webinar page 3 | 4 | This is the capstone project of HTML and CSS module from the Microverse project. The idea behind the project is to test our knowledge, polish and hone our technical skills to be the best developers we could possibly be. 5 | 6 | This version of the capstone is about building a web page that looks as close as possible as the [Global Summit](https://www.behance.net/gallery/29845175/CC-Global-Summit-2015) conference page 7 | 8 | ### Project requirements 9 | 10 | The project requires to use design elements from the [Global Summit](https://www.behance.net/gallery/29845175/CC-Global-Summit-2015) page, which uses a Creative Common license which allows me to use most of the elements of the design. 11 | 12 | The project also requires me to to customize the content, in this case I choosed a webinar promotion website. 13 | 14 | The other requirements are: 15 | - Three pages minimum (Home page, About page and Tickets page). 16 | - Two layouts, one for desktops (above 768px wide) and one for mobile devices (below 768px wide). 17 | - The use of the colors, and fonts form the original website. 18 | 19 | ### Technologies used 20 | 21 | To create this website I used the following technologies: 22 | - [Bootstrap](https://getbootstrap.com/) framework to layout most of the project pages and to style some of the project's elements. 23 | - [Fontawesome](https://fontawesome.com/) to simplify the process of styling the icons used in the project. 24 | - [GIMP](https://www.gimp.org/) to crop and edit the images used in this project. 25 | - [Background removal](https://www.remove.bg/) to fasten the process of background removal from certain images and icons. 26 | 27 | ### Pictures of the layouts 28 | 29 | #### Mobile 30 | 31 | ![Index mobile](./img/index-360.png) 32 | 33 | #### Desktop (768px) 34 | 35 | ![Index desktop](./img/index-768.png) 36 | 37 | #### Destop (1200px) 38 | 39 | ![Index desktop](./img/index-1200.png) 40 | 41 | ### Credits 42 | 43 | The credits for the design goes to [Cindy Shin](https://www.behance.net/adagio07) and [Creative Commons](https://creativecommons.org/). She had all the credit for the original design, the colors and typography, I just made use of some of its elements. 44 | 45 | ### Live previews 46 | 47 | - [Production](https://rawcdn.githack.com/alvp01/webinar-page/fdfe32e8f1f931a5095b7b3c14ace7a62c5bff48/index.html) 48 | - [Development](https://raw.githack.com/alvp01/webinar-page/pages-queries-content/index.html) 49 | 50 | ### Developer 51 | [Abel](https://github.com/alvp01) 52 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | module.exports = { 4 | "extends": "stylelint-config-recommended", 5 | "rules": { 6 | "at-rule-empty-line-before": [ "always", { 7 | except: [ 8 | "blockless-after-same-name-blockless", 9 | "first-nested", 10 | ], 11 | ignore: ["after-comment"], 12 | } ], 13 | "at-rule-name-case": "lower", 14 | "at-rule-name-space-after": "always-single-line", 15 | "at-rule-semicolon-newline-after": "always", 16 | "block-closing-brace-empty-line-before": "never", 17 | "block-closing-brace-newline-after": "always", 18 | "block-closing-brace-newline-before": "always-multi-line", 19 | "block-closing-brace-space-before": "always-single-line", 20 | "block-opening-brace-newline-after": "always-multi-line", 21 | "block-opening-brace-space-after": "always-single-line", 22 | "block-opening-brace-space-before": "always", 23 | "color-hex-case": "lower", 24 | "color-hex-length": "short", 25 | "comment-empty-line-before": [ "always", { 26 | except: ["first-nested"], 27 | ignore: ["stylelint-commands"], 28 | } ], 29 | "comment-whitespace-inside": "always", 30 | "custom-property-empty-line-before": [ "always", { 31 | except: [ 32 | "after-custom-property", 33 | "first-nested", 34 | ], 35 | ignore: [ 36 | "after-comment", 37 | "inside-single-line-block", 38 | ], 39 | } ], 40 | "declaration-bang-space-after": "never", 41 | "declaration-bang-space-before": "always", 42 | "declaration-block-semicolon-newline-after": "always-multi-line", 43 | "declaration-block-semicolon-space-after": "always-single-line", 44 | "declaration-block-semicolon-space-before": "never", 45 | "declaration-block-single-line-max-declarations": 1, 46 | "declaration-block-trailing-semicolon": "always", 47 | "declaration-colon-newline-after": "always-multi-line", 48 | "declaration-colon-space-after": "always-single-line", 49 | "declaration-colon-space-before": "never", 50 | "declaration-empty-line-before": [ "always", { 51 | except: [ 52 | "after-declaration", 53 | "first-nested", 54 | ], 55 | ignore: [ 56 | "after-comment", 57 | "inside-single-line-block", 58 | ], 59 | } ], 60 | "function-comma-newline-after": "always-multi-line", 61 | "function-comma-space-after": "always-single-line", 62 | "function-comma-space-before": "never", 63 | "function-max-empty-lines": 0, 64 | "function-name-case": "lower", 65 | "function-parentheses-newline-inside": "always-multi-line", 66 | "function-parentheses-space-inside": "never-single-line", 67 | "function-whitespace-after": "always", 68 | "indentation": 2, 69 | "length-zero-no-unit": true, 70 | "max-empty-lines": 1, 71 | "media-feature-colon-space-after": "always", 72 | "media-feature-colon-space-before": "never", 73 | "media-feature-name-case": "lower", 74 | "media-feature-parentheses-space-inside": "never", 75 | "media-feature-range-operator-space-after": "always", 76 | "media-feature-range-operator-space-before": "always", 77 | "media-query-list-comma-newline-after": "always-multi-line", 78 | "media-query-list-comma-space-after": "always-single-line", 79 | "media-query-list-comma-space-before": "never", 80 | "no-eol-whitespace": true, 81 | "no-missing-end-of-source-newline": true, 82 | "number-leading-zero": "always", 83 | "number-no-trailing-zeros": true, 84 | "property-case": "lower", 85 | "rule-empty-line-before": [ "always-multi-line", { 86 | except: ["first-nested"], 87 | ignore: ["after-comment"], 88 | } ], 89 | "selector-attribute-brackets-space-inside": "never", 90 | "selector-attribute-operator-space-after": "never", 91 | "selector-attribute-operator-space-before": "never", 92 | "selector-combinator-space-after": "always", 93 | "selector-combinator-space-before": "always", 94 | "selector-descendant-combinator-no-non-space": true, 95 | "selector-list-comma-newline-after": "always", 96 | "selector-list-comma-space-before": "never", 97 | "selector-max-empty-lines": 0, 98 | "selector-pseudo-class-case": "lower", 99 | "selector-pseudo-class-parentheses-space-inside": "never", 100 | "selector-pseudo-element-case": "lower", 101 | "selector-pseudo-element-colon-notation": "double", 102 | "selector-type-case": "lower", 103 | "unit-case": "lower", 104 | "value-list-comma-newline-after": "always-multi-line", 105 | "value-list-comma-space-after": "always-single-line", 106 | "value-list-comma-space-before": "never", 107 | "value-list-max-empty-lines": 0, 108 | }, 109 | } 110 | -------------------------------------------------------------------------------- /tickets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Tickets 14 | 15 | 16 |
17 | 25 | 42 |
43 |
44 |
45 |
46 |
47 |

Pick your place

48 |
49 |
50 |

♦ Step 1   Select your webinar schedule before we run out of places.

51 |
52 |
53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
TicketDay 1Day 2Special AI speech
Date15.May (Fri)16.May (Sat)16.May (Sat)
Front end

$5

$5

$10

Back end

$5

$5

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

Proceed to payout

84 |
85 | PAYOUT 86 |
87 |
88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | About 13 | 14 | 15 |
16 | 24 | 41 |
42 |
43 |
44 |
45 |
46 |

WebInc Tech first
webinar series 2020

47 |
48 |
49 |

The WebInc Tech webinar series bring to you the best web developers around the world to share their expertise in their field with you.
50 | You will also have the opportunity to make some high quality networking with workers on the IT industry.
51 | There also will be some special guests that will talk about AI and data science and their uses in the web field.
52 | It is a great opportunity to enhance your web design and web development knowledge listening directly from the best professionals
53 | sharing their experiences and tricks.
54 | The 15 most upvoted questions will be answered each session, giving you the opportunity to increase even more
55 | your knowledge and clarify your doubts and the other's.
56 | Every webinar has a limited places, make sure you reserve you place early!

57 |
58 |
59 | Reserve your place now! 60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |

About WebInc Tech

69 |
70 |
71 |

WebInc Tech is a company with a relatively short time in the market. Its purpose is to develop web app solutions to satisfy its client's needs and requirements.
72 | The company also has several courses and certifications in the area of web design and web development in association with other big firms in the industry. 73 |

74 |
75 |
76 | 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |

WebInc Tech webinar features

85 |
86 |
87 |
88 | 89 |
90 |

Connect with professionals

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

Learn from home

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

Technologies

108 |
109 |
110 | 111 |
112 |
113 | 114 |
115 |
116 | 117 |
118 |
119 | 120 |
121 |
122 | 123 |
124 |
125 |
126 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* General purpose classes */ 2 | @font-face { 3 | font-family: "cocogoose"; 4 | src: url(("./fonts/Cocogoose-Pro-SemiLight-Trial.ttf")); 5 | } 6 | 7 | .overflow-hidden { overflow: hidden; } 8 | 9 | .font-cocogoose { font-family: "cocogoose", sans-serif; } 10 | 11 | .font-lato { font-family: 'Lato', sans-serif; } 12 | 13 | .box-size { box-sizing: border-box; } 14 | 15 | .color-orange { color: #ec5242; } 16 | 17 | .color-black { color: #272a31; } 18 | 19 | .color-gray { color: #d3d3d3; } 20 | 21 | .h-overflow { overflow: hidden; } 22 | 23 | .navi-link { color: #272a31; } 24 | 25 | .color-white { color: white; } 26 | 27 | .bg-black { background-color: #272a31; } 28 | 29 | .social-link { color: white; } 30 | 31 | .social-link:hover { 32 | color: white; 33 | text-decoration: none; 34 | } 35 | 36 | .navi-link:hover { 37 | color: #ec5242; 38 | text-decoration: none; 39 | } 40 | 41 | .navi-btn { 42 | color: #ec5242; 43 | text-decoration: none; 44 | background-color: white; 45 | border: 5px solid #ec5242; 46 | padding: 10px 15px; 47 | } 48 | 49 | .navi-btn:hover { 50 | color: #ec5242; 51 | text-decoration: none; 52 | } 53 | 54 | .navi-responsive-menu { font-size: 30px; } 55 | 56 | .navi-shadow { box-shadow: none; } 57 | 58 | .w-500 { width: 399px !important; } 59 | 60 | .title-border-orange { position: relative; } 61 | 62 | .title-border-orange::after { 63 | background-color: #ec5242; 64 | bottom: 0; 65 | content: ''; 66 | display: block; 67 | height: 2px; 68 | left: 50%; 69 | position: absolute; 70 | transform: translate(-50%, 0); 71 | width: 50px; 72 | } 73 | 74 | .title-border-gray { position: relative; } 75 | 76 | .title-border-gray::after { 77 | content: ""; 78 | display: block; 79 | margin: 0 0; 80 | width: 25px; 81 | border-bottom: 2px solid #d3d3d3; 82 | } 83 | 84 | .display-flex { display: flex; } 85 | 86 | .d-flex-column { flex-direction: column; } 87 | 88 | .d-flex-row { flex-direction: row; } 89 | 90 | .align-i-center { align-items: center; } 91 | 92 | .d-md-flex { display: none !important; } 93 | 94 | .justify-c-between { justify-content: space-between; } 95 | 96 | .justify-c-center { justify-content: center; } 97 | 98 | .justify-c-end { justify-content: flex-end; } 99 | 100 | .paddin-y-5 { 101 | padding-top: 48px; 102 | padding-bottom: 48px; 103 | } 104 | 105 | .margin-b-5 { margin-bottom: 48px; } 106 | 107 | @media (min-width: 768px) { 108 | .navi-shadow { box-shadow: 10px 5px 15px gray; } 109 | 110 | .d-md-flex { display: flex !important; } 111 | } 112 | 113 | @media (min-width: 1024px) { 114 | .w-500 { width: 500px !important; } 115 | } 116 | 117 | /* Index general classes */ 118 | .section-padding-x { 119 | padding-left: 15px; 120 | padding-right: 15px; 121 | } 122 | 123 | .section-padding-y { 124 | padding-top: 20px; 125 | padding-bottom: 20px; 126 | } 127 | 128 | /* Index main section classes */ 129 | .main-hading-size { font-size: auto; } 130 | 131 | .secondary-heading-size { font-size: auto; } 132 | 133 | .main-paragraph { padding: 0; } 134 | 135 | .event-time { 136 | font-size: 20px; 137 | color: gray; 138 | } 139 | 140 | @media (min-width: 768px) { 141 | .section-padding-x { 142 | padding-left: 10%; 143 | padding-right: 10%; 144 | } 145 | 146 | .section-padding-y { 147 | padding-top: 10%; 148 | padding-bottom: 10%; 149 | } 150 | 151 | .main-hading-size { font-size: 70px; } 152 | 153 | .secondary-heading-size { font-size: 45px; } 154 | 155 | .main-paragraph { 156 | padding: 10px 15px; 157 | width: 75ch; 158 | } 159 | 160 | .event-time { font-size: 35px; } 161 | } 162 | 163 | @media (min-width: 1200px) { 164 | .section-padding-x { 165 | padding-right: 12.5%; 166 | padding-left: 12.5%; 167 | } 168 | 169 | .main-hading-size { font-size: 90px; } 170 | 171 | .secondary-heading-size { font-size: 60px; } 172 | } 173 | 174 | /* Info boxes classes */ 175 | .main-program-container { 176 | --info-box-width: 100%; 177 | --direction: column; 178 | --content-justify: space-between; 179 | --content-align: center; 180 | --text-alignment: center; 181 | --inner-box-padding: 20px 20px; 182 | } 183 | 184 | .info-paragraph { width: auto; } 185 | 186 | .info-title { font-size: 25px; } 187 | 188 | .info-icon { font-size: 35px; } 189 | 190 | .info-link { 191 | color: white; 192 | background-color: #ec5242; 193 | padding: 20px 30px; 194 | text-decoration: none; 195 | font-size: 25px; 196 | } 197 | 198 | .info-link:hover { 199 | color: white; 200 | text-decoration: none; 201 | } 202 | 203 | @media (min-width: 768px) { 204 | .info-link { 205 | text-decoration: underline; 206 | padding: 0; 207 | background-color: rgba(211, 211, 211, 0); 208 | } 209 | 210 | .info-link:hover { text-decoration: underline; } 211 | } 212 | 213 | @media (min-width: 1024px) { 214 | .main-program-container { 215 | --info-box-width: 20%; 216 | --direction: column; 217 | --content-justify: start; 218 | --content-align: center; 219 | --text-alignment: center; 220 | --inner-box-padding: 30px 30px; 221 | } 222 | 223 | .info-paragraph { width: auto; } 224 | 225 | .info-icon { font-size: 45px; } 226 | } 227 | 228 | .info-box { width: var(--info-box-width); } 229 | 230 | .inner-info-box { 231 | display: flex; 232 | flex-grow: 1; 233 | flex-shrink: 1; 234 | flex-direction: var(--direction); 235 | justify-content: var(--content-justify); 236 | align-items: var(--content-align); 237 | text-align: var(--text-alignment); 238 | padding: var(--inner-box-padding); 239 | } 240 | .gray-bg-trns { background-color: rgba(211, 211, 211, 0.2); } 241 | 242 | /* Speakers classes */ 243 | .featured-speakers { font-size: 25px; } 244 | 245 | .person-img { 246 | width: 100px; 247 | height: 100px; 248 | margin-right: 15px; 249 | object-fit: cover; 250 | } 251 | 252 | .speaker-name { margin-bottom: 5px; } 253 | 254 | .speaker-info { 255 | font-size: 14px; 256 | line-height: 20px; 257 | margin-bottom: 5px; 258 | } 259 | 260 | .speaker-paragraph { font-size: 12px; } 261 | 262 | @media (min-width: 768px) { 263 | .person-img { 264 | width: 150px !important; 265 | height: 150px !important; 266 | } 267 | 268 | .col-md-6 { width: 50% !important; } 269 | } 270 | 271 | /* Partner classes */ 272 | .partner-img-container { width: 33%; } 273 | 274 | .partner-img { width: 100%; } 275 | 276 | @media (min-width: 1200px) { 277 | .partner-img-container { width: 20%; } 278 | 279 | .speaker-paragraph { font-size: 15px; } 280 | } 281 | 282 | /* Footer clases */ 283 | .footer-img { 284 | width: 120px; 285 | height: 40px; 286 | } 287 | 288 | .footer-paragraph { font-size: 13px; } 289 | 290 | @media (min-width: 768px) { 291 | .footer-img { 292 | width: 150px; 293 | height: 50px; 294 | } 295 | 296 | .footer-paragraph { font-size: 15px; } 297 | } 298 | 299 | @media (min-width: 1200px) { 300 | .footer-img { 301 | width: 200px; 302 | height: 66px; 303 | } 304 | } 305 | 306 | /* Classes for the about page */ 307 | .about-padding-x { 308 | padding-left: 15px; 309 | padding-right: 15px; 310 | } 311 | 312 | .about-heading { font-size: auto; } 313 | 314 | .heading-break { display: none; } 315 | 316 | .about-paragraph-container { width: auto; } 317 | 318 | .border-secondary { border-color: #d3d3d3 !important; } 319 | 320 | .about-logo { width: 210px; } 321 | 322 | .webinc-paragraph { width: auto; } 323 | 324 | .about-link { 325 | color: #272a31; 326 | text-decoration: underline; 327 | } 328 | 329 | .about-link:hover { color: #272a31; } 330 | 331 | .about-webinc-padding { padding: 20px 20px; } 332 | 333 | .img-overlay { 334 | top: 0; 335 | right: 0; 336 | left: 0; 337 | bottom: 0; 338 | background-color: rgba(236, 82, 66, 0.8); 339 | overflow: hidden; 340 | width: 100%; 341 | height: 100%; 342 | } 343 | 344 | .img-text { font-size: 25px; } 345 | 346 | .about-technology { display: flex; } 347 | 348 | .about-footer-bg { background-color: white; } 349 | 350 | .about-footer-text { color: #272a31; } 351 | 352 | @media (min-width: 768px) { 353 | .about-padding-x { 354 | padding-left: 10%; 355 | padding-right: 5%; 356 | } 357 | 358 | .about-heading { font-size: 50px; } 359 | 360 | .about-technology { display: none; } 361 | 362 | .about-footer-bg { background-color: #272a31; } 363 | 364 | .about-footer-text { color: white; } 365 | 366 | .about-logo { width: 320px; } 367 | } 368 | 369 | @media (min-width: 1200px) { 370 | .about-padding-x { 371 | padding-left: 20%; 372 | padding-right: 10%; 373 | } 374 | 375 | .about-paragraph-container { width: 80%; } 376 | 377 | .heading-break { display: inline; } 378 | 379 | .webinc-paragraph { width: 60%; } 380 | 381 | .img-text { font-size: 30px; } 382 | } 383 | 384 | /* Classes for the tickets page */ 385 | .tickets-padding-x { 386 | padding-left: 15px; 387 | padding-right: 15px; 388 | } 389 | 390 | .tickets-table-container { 391 | border-collapse: unset; 392 | border: 5px solid; 393 | border-image: repeating-linear-gradient(145deg, white 0%, white 1%, #ec5242 1%, #ec5242 2%, white 2%, white 3%, #272a31 3%, #272a31 4%) 1%; 394 | } 395 | 396 | .tickets-table { 397 | border-collapse: collapse; 398 | } 399 | 400 | .tickets-table th, 401 | .tickets-table td { 402 | padding: 10px 10px; 403 | text-align: center; 404 | width: 60px; 405 | font-family: 'Lato', sans-serif; 406 | } 407 | 408 | .div-romb { 409 | width: 40px; 410 | height: 40px; 411 | transform: rotate(45deg); 412 | background-color: #ec5242; 413 | } 414 | 415 | .arrow-down { 416 | transform: rotate(-45deg); 417 | top: 40%; 418 | left: 45%; 419 | font-size: 15px; 420 | } 421 | 422 | .pay-btn { 423 | padding: 15px 30px; 424 | background-color: #ec5242; 425 | color: white; 426 | text-decoration: underline; 427 | } 428 | 429 | .pay-btn:hover { color: white; } 430 | 431 | @media (min-width: 768px) { 432 | .tickets-padding-x { 433 | padding-left: 5%; 434 | padding-right: 10%; 435 | } 436 | 437 | .tickets-table th, 438 | .tickets-table td { 439 | padding: 10px 20px; 440 | text-align: center; 441 | width: 140px; 442 | font-family: 'Lato', sans-serif; 443 | } 444 | 445 | .div-romb { 446 | width: 45px; 447 | height: 45px; 448 | } 449 | } 450 | 451 | @media (min-width: 1200px) { 452 | .tickets-padding-x { 453 | padding-left: 10%; 454 | padding-right: 20%; 455 | } 456 | 457 | .tickets-table th, 458 | .tickets-table td { 459 | padding: 10px 20px; 460 | text-align: center; 461 | width: 200px; 462 | } 463 | 464 | .div-romb { 465 | width: 55px; 466 | height: 55px; 467 | } 468 | 469 | .arrow-down { font-size: 20px; } 470 | } 471 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Conference page capstone 13 | 14 | 15 |
16 | 24 | 41 |
42 |
43 |
44 |
45 |

Greetings Earthlings!

46 |

47 | WEBINC TECH
48 | WEBINAR
49 | 2020 50 |

51 |

The Webinc Tech Academy is proudly presenting its first web development webinar series.
During two days there will be several webinars regarding different web development topics.

52 |

2020.04.29(WED) - 30(THR)

53 |
54 |
55 |
56 |
57 |
58 |

Features

59 |
60 |
61 |
62 |
63 | 64 |

Level up

65 |

Improve your knowledge with the series of webinar that are going to be presented.

66 |
67 |
68 |
69 |
70 | 71 |

Coding

72 |

Learn the coding best practices in first hand from the team of true expert senior programmers.

73 |
74 |
75 |
76 |
77 | 78 |

Schedule

79 |

You will be able to attend the webinar you are interested in the most and those fit your schedule the best.

80 |
81 |
82 |
83 |
84 | 85 |

Access

86 |

Due to the nature of the speeches being imparted in the webinars, the access is available for anyone interested.

87 |
88 |
89 |
90 |
91 | 92 |

AI

93 |

Despite the webinars being focused on web development, we've got a spcial guest to talk about artificial intelligence.

94 |
95 |
96 |
97 | Get Access Now 98 |
99 |
100 |
101 |
102 |

Featured Speakers

103 |
104 |
105 |
106 | 107 |
108 |
109 |
Scarlet White
110 |

Founder of the HappyTechInc Company.

111 |
112 |

Awarded as the most innovative company back in 2016.

113 |
114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 |
Daria Kovachenko
122 |

Director of the IT departmen of Zura Company

123 |
124 |

Zura is known as one of the most influential companys in the web development industry.

125 |
126 |
127 |
128 |
129 |
130 | 131 |
132 |
133 |
Chris Rogers
134 |
135 |

Chris Rogers is one of the most important freelance web designers and developers. He has influeced and inspired countless developers with his unique techniques and styles.

136 |
137 |
138 |
139 |
140 |
141 | 142 |
143 |
144 |
Ava Saia
145 |

Senior web developer at WebDev Enterprises

146 |
147 |

WebDev is responsible for the development of the websites and webapps of several big companies like Wekipedia.

148 |
149 |
150 |
151 |
152 |
153 | 154 |
155 |
156 |
Robert Adams
157 |

Founder of DevInc Tech

158 |
159 |

DevInc Tech is responsible for influencing the trending on web development for the past three years.

160 |
161 |
162 |
163 |
164 |
165 | 166 |
167 |
168 |
Jonah Walters
169 |
170 |

Jonah has helped several brands to be noticed through their pages thanks to his unique designs and innovative functionalities development.

171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |

Technologies

180 |
181 |
182 | 183 |
184 |
185 | 186 |
187 |
188 | 189 |
190 |
191 | 192 |
193 |
194 | 195 |
196 |
197 |
198 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | --------------------------------------------------------------------------------