├── .DS_Store ├── .github ├── .gitignore └── workflows │ └── linters.yml ├── .hintrc ├── .stylelintrc.json ├── LICENSE ├── README.md ├── about.html ├── assets ├── .DS_Store ├── Stylesheets │ ├── .DS_Store │ ├── about.css │ ├── index.css │ └── tickets.css ├── fonts │ └── Cocogoose_trial.otf └── images │ ├── .DS_Store │ ├── About-page.png │ ├── Home-page.png │ ├── Tickets-page.png │ ├── checkerboard.jpg │ ├── computer.png │ ├── conference1.jpg │ ├── conference2.jpg │ ├── data-management.png │ ├── home.png │ ├── menu.jpg │ ├── netoworking.png │ ├── pattern.jpg │ ├── romboid.png │ ├── speaker1.jpg │ ├── speaker2.jpg │ ├── speaker3.jpg │ ├── speaker4.jpg │ ├── speaker5.jpg │ ├── speaker6.jpg │ ├── technical-support.png │ ├── webtech-logo.png │ └── work.png ├── index.html └── tickets.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/.DS_Store -------------------------------------------------------------------------------- /.github/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 German Renato Cobian 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/Microverse-blueviolet) 2 | 3 | # Web-Development-Course 4 | 5 | A website to promote, inform and sell the tickets for a web development course. It consists of three pages: 6 | 7 | * The home page, which supplies an overview of the course 8 | ![Home page](/assets/images/Home-page.png?raw=true "Home page") 9 | 10 | * A page where info regarding the school that imparts the course is published 11 | ![About page](/assets/images/About-page.png?raw=true "About page") 12 | 13 | * A page to purchase tickets for the event 14 | ![Tickets page](/assets/images/Tickets-page.png?raw=true "Tickets page") 15 | 16 | The website was implemented with HTML tags, CSS and its associated tools (such as flex-box, floats and grid), as well as the Bootstrap framework, to properly position and style the diferent elements and sections of the page. It was implemented to be responsive for mobile, tablet and desktop view. 17 | 18 | 19 | ## Built With 20 | 21 | * HTML 22 | * CSS 23 | * Bootstrap Framework 24 | 25 | 26 | ## Getting Started 27 | 28 | To get a local copy up and running follow these simple example steps: 29 | 30 | * Clone this repo on your local machine by running `git clone git@github.com:German-Cobian/Web-Development-Course.git` 31 | * `cd` into the `Web-Development-Course` folder you just cloned 32 | * Using your web browser's navigation bar, go to the project's directory and then select the file index.html to see the survey form displayed 33 | 34 | 35 | ## Live Demo 36 | 37 | * [Web-Design-Course](https://german-cobian.github.io/Web-Development-Course/) 38 | 39 | 40 | ## Author 41 | 42 | 👤 **German Cobian** 43 | 44 | * GitHub: [@German-Cobian](https://github.com/German-Cobian) 45 | * Twitter: [@GermanCobian1](https://twitter.com/GermanCobian1) 46 | * LinkedIn: [@german-cobian](https://www.linkedin.com/in/german-cobian) 47 | 48 | 49 | ## 🤝 Contributing 50 | 51 | Contributions, issues, and feature requests are welcome! 52 | 53 | 54 | ## Show your support 55 | 56 | Give a ⭐️ if you like this project! 57 | 58 | 59 | ## Acknowledgments 60 | 61 | Guidelines for this project were supplied by [Microverse](https://github.com/microverseinc/curriculum-html-css/blob/main/capstone/html_capstone.md). 62 | 63 | Design idea by [Cindy Shin](https://www.behance.net/gallery/29845175/CC-Global-Summit-2015). All Rights Reserved. 64 | 65 | 66 | ## 📝 License 67 | 68 | This project is [MIT](https://github.com/German-Cobian/Web-Development-Course/blob/main/LICENSE) and [Creative Commons](https://creativecommons.org/licenses/by-nc/4.0/legalcode) licensed. 69 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | DesignWebtech Web Development Course 11 | 12 | 13 | 14 | 15 | 29 | 30 | 40 | 41 | 57 | 58 | 64 | 65 |
66 | 67 | 68 | 69 |
70 |
71 |

Learn Web Development in Mexico City

72 |

DesignWebtech

73 |

Web Development Course 2021

74 |
75 |
76 | 77 | 78 | 79 |
80 |
81 |

The DesignWebtech Web Development Course brings together experts, academics and trend-setters from the global community of web-developers in a different country every year.

82 |

We welcome all aspiring web-designers to join us and partake of the vast pool of knowledge and expertise so as to further their goal of becoming integrated and to contribute their creativity to this thriving community.

83 |

Web-development is a thriving field, constantly expanding and whose possibilities are mostly unexplored.

84 |
85 |
86 | 87 | 88 | 89 |
90 |
91 |

Please contact us per Email for any further questions about our Web Development Course 2021

92 | webdevelopmentcourse@designwebtech.org 93 |
94 |
95 | 96 | 97 | 98 | 107 | 108 |
109 | Design Webtech logo 110 |
111 | 112 | 113 | 114 |
115 | 116 |
117 |

See past DesignWebtech Web Development Courses

118 |

Take a look at the last two DesignWebtech Web Development Courses which took place in Sao Paulo and in Santiago de Chile.

119 | 120 |
121 |
122 |

2019

123 |

DesignWebtech Web Development Course in Sao Paulo

124 |
125 |
126 |

2018

127 |

DesignWebtech Web Development Course in Santiago de Chile

128 |
129 |
130 |
131 |
132 | 133 |
134 | 135 | 136 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /assets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/.DS_Store -------------------------------------------------------------------------------- /assets/Stylesheets/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/Stylesheets/.DS_Store -------------------------------------------------------------------------------- /assets/Stylesheets/about.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | width: 100%; 8 | font-family: 'Lato', sans-serif; 9 | font-size: 13px; 10 | color: #272a31; 11 | } 12 | 13 | @font-face { 14 | font-family: 'cocogoose'; 15 | font-weight: bold; 16 | font-style: normal; 17 | src: url("assets/fonts/cocogoose_trial.otf"); 18 | } 19 | 20 | .top-nav-items a { 21 | color: white; 22 | text-decoration: none; 23 | margin: 15px; 24 | } 25 | 26 | .middle-nav-leftitems a { 27 | text-decoration: none; 28 | margin: 15px; 29 | } 30 | 31 | .bottom-nav a { 32 | text-decoration: none; 33 | color: #272a31; 34 | margin: 10px; 35 | } 36 | 37 | .further-questions-box a { 38 | color: black; 39 | } 40 | 41 | .cocogoose-text { 42 | font-family: cocogoose, sans-serif; 43 | } 44 | 45 | .white-text { 46 | color: white; 47 | } 48 | 49 | .bright-text { 50 | color: #ec5242; 51 | } 52 | 53 | .dark-text { 54 | color: #272a31; 55 | } 56 | 57 | .notso-darktext { 58 | color: #d3d3d3; 59 | } 60 | 61 | .margin-text { 62 | margin-left: 10px; 63 | margin-right: 10px; 64 | } 65 | 66 | /* Navbars Section */ 67 | 68 | .dropdown { 69 | position: relative; 70 | display: inline-block; 71 | margin-top: 20px; 72 | margin-left: 30px; 73 | } 74 | 75 | .dropdown-content { 76 | display: none; 77 | position: absolute; 78 | background-color: #f1f1f1; 79 | min-width: 160px; 80 | } 81 | 82 | .dropdown-content a { 83 | color: black; 84 | padding: 12px 16px; 85 | text-decoration: none; 86 | display: block; 87 | } 88 | 89 | .dropdown-content a:hover { 90 | background-color: #ddd; 91 | } 92 | 93 | .dropdown:hover .dropdown-content { 94 | display: block; 95 | } 96 | 97 | .top-nav { 98 | background-color: #272a31; 99 | } 100 | 101 | .top-nav-items { 102 | display: flex; 103 | flex-direction: row; 104 | justify-content: flex-end; 105 | margin-right: 5%; 106 | } 107 | 108 | .middle-nav { 109 | border-bottom: 1px solid #d3d3d3; 110 | } 111 | 112 | .middle-nav-box { 113 | display: flex; 114 | flex-direction: row; 115 | justify-content: space-between; 116 | margin: 15px 5% 15px 5%; 117 | } 118 | 119 | .middle-nav-leftitems button { 120 | border: 3px solid #ec5242; 121 | padding: 5px 3px 5px 3px; 122 | } 123 | 124 | .bottom-nav { 125 | display: flex; 126 | flex-direction: row; 127 | justify-content: flex-end; 128 | margin-right: 5%; 129 | } 130 | 131 | /* Header Section */ 132 | 133 | .header-box { 134 | margin: 100px auto 50px auto; 135 | width: 95%; 136 | text-align: center; 137 | } 138 | 139 | .header-box h1, 140 | .header-box h2 { 141 | font-size: 23px; 142 | } 143 | 144 | .underline-small1 { 145 | position: relative; 146 | } 147 | 148 | .underline-small1::after { 149 | content: ''; 150 | height: 2px; 151 | width: 4%; 152 | background: #ec5242; 153 | position: absolute; 154 | left: 48%; 155 | bottom: -10px; 156 | } 157 | 158 | /* Info About Course Section */ 159 | 160 | .sec-about-course { 161 | margin: 50px auto 50px auto; 162 | display: flex; 163 | flex-direction: column; 164 | align-items: center; 165 | } 166 | 167 | .about-course-box { 168 | border: 1px solid #d3d3d3; 169 | width: 90%; 170 | text-align: center; 171 | line-height: 1.8; 172 | } 173 | 174 | .top-p { 175 | padding-top: 15px; 176 | } 177 | 178 | .bottom-p { 179 | padding-bottom: 15px; 180 | } 181 | 182 | /* Further Questions Section */ 183 | 184 | .sec-further-questions { 185 | display: flex; 186 | flex-direction: column; 187 | align-items: center; 188 | } 189 | 190 | .further-questions-box { 191 | width: 70%; 192 | text-align: center; 193 | line-height: 1.8; 194 | } 195 | 196 | /* DesignWebtech Logo Section */ 197 | 198 | .sec-designwebtech-logo { 199 | margin: 50px auto 50px auto; 200 | display: flex; 201 | flex-direction: column; 202 | align-items: center; 203 | } 204 | 205 | .designwebtech-logo-box { 206 | text-align: center; 207 | width: 70%; 208 | line-height: 1.8; 209 | } 210 | 211 | .designwebtech-logo-box h2 { 212 | padding-bottom: 30px; 213 | } 214 | 215 | .underline-small2 { 216 | position: relative; 217 | } 218 | 219 | .underline-small2::after { 220 | content: ''; 221 | height: 2px; 222 | width: 6%; 223 | background: #ec5242; 224 | position: absolute; 225 | left: 47%; 226 | bottom: 20px; 227 | } 228 | 229 | .logo-holder { 230 | display: flex; 231 | flex-direction: column; 232 | align-items: center; 233 | margin-bottom: 50px; 234 | } 235 | 236 | /* Past Courses Section */ 237 | 238 | .sec-past-courses { 239 | margin: 50px auto 100px auto; 240 | display: flex; 241 | flex-direction: column; 242 | align-items: center; 243 | } 244 | 245 | .past-courses-box { 246 | width: 90%; 247 | text-align: center; 248 | } 249 | 250 | .past-courses-box h2 { 251 | padding-bottom: 30px; 252 | } 253 | 254 | .underline-small3 { 255 | position: relative; 256 | } 257 | 258 | .underline-small3::after { 259 | content: ''; 260 | height: 2px; 261 | width: 6%; 262 | background: #ec5242; 263 | position: absolute; 264 | left: 47%; 265 | bottom: 18px; 266 | } 267 | 268 | .past-courses-box p { 269 | padding-bottom: 60px; 270 | } 271 | 272 | .imgs-txt { 273 | display: flex; 274 | flex-direction: column; 275 | justify-content: center; 276 | } 277 | 278 | .img-1 { 279 | width: 95%; 280 | height: 250px; 281 | background-image: 282 | linear-gradient(rgb(228 224 225 / 5%), rgb(8 8 8 / 93%)), 283 | url("../images/conference1.jpg"); 284 | background-repeat: no-repeat; 285 | background-size: cover; 286 | margin-bottom: 30px; 287 | } 288 | 289 | .img-2 { 290 | width: 95%; 291 | height: 250px; 292 | background-image: 293 | linear-gradient(rgb(228 224 225 / 5%), rgb(8 8 8 / 93%)), 294 | url("../images/conference2.jpg"); 295 | background-repeat: no-repeat; 296 | background-size: cover; 297 | } 298 | 299 | /* Partner Section */ 300 | 301 | .sec-partner { 302 | background-color: #272a31; 303 | } 304 | 305 | .sec-partner h2 { 306 | text-align: center; 307 | margin-top: 0; 308 | padding-top: 30px; 309 | } 310 | 311 | .bottomitems-partner { 312 | display: flex; 313 | flex-direction: row; 314 | justify-content: space-around; 315 | padding: 30px 60px 50px 60px; 316 | } 317 | 318 | /* Company Info Section */ 319 | 320 | footer { 321 | background-color: #272a31; 322 | } 323 | 324 | .sec-company-info-box { 325 | height: 180px; 326 | display: flex; 327 | flex-direction: row; 328 | justify-content: center; 329 | align-items: center; 330 | background-color: white; 331 | border: 1px solid black; 332 | } 333 | 334 | .leftitems-companyinfo img { 335 | width: 200px; 336 | } 337 | 338 | .rightitems-companyinfo p { 339 | margin-left: 35px; 340 | color: #272a31; 341 | } 342 | 343 | /* Responsive Section */ 344 | 345 | @media only screen and (max-width: 767px) { 346 | .top-nav { 347 | display: none; 348 | } 349 | 350 | .middle-nav { 351 | display: none; 352 | } 353 | 354 | .bottom-nav { 355 | display: none; 356 | } 357 | } 358 | 359 | @media only screen and (min-width: 768px) { 360 | .mobile-nav { 361 | display: none; 362 | } 363 | 364 | /* Header Section */ 365 | 366 | .header-box { 367 | text-align: center; 368 | } 369 | 370 | .header-box p { 371 | display: none; 372 | } 373 | 374 | .header-box h1, 375 | .header-box h2 { 376 | font-size: 40px; 377 | } 378 | 379 | /* Info About Course Section */ 380 | 381 | .about-course-box { 382 | width: 60%; 383 | } 384 | 385 | /* Further Questions Section */ 386 | 387 | .further-questions-box { 388 | width: 40%; 389 | } 390 | 391 | /* DesignWebtech Logo Section */ 392 | 393 | .designwebtech-logo-box { 394 | width: 60%; 395 | } 396 | 397 | /* Past Courses Section */ 398 | 399 | .past-courses-box { 400 | width: 80%; 401 | } 402 | 403 | .pc-imgs { 404 | display: flex; 405 | flex-direction: row; 406 | justify-content: space-between; 407 | } 408 | 409 | .img-1 { 410 | width: 48%; 411 | } 412 | 413 | .img-2 { 414 | width: 48%; 415 | } 416 | 417 | /* Partner Section */ 418 | 419 | .sec-partner { 420 | display: none; 421 | } 422 | 423 | /* Company Info Section */ 424 | 425 | .sec-company-info-box { 426 | background-color: #272a31; 427 | } 428 | 429 | .leftitems-companyinfo img { 430 | width: 250px; 431 | } 432 | 433 | .rightitems-companyinfo p { 434 | color: white; 435 | } 436 | } 437 | -------------------------------------------------------------------------------- /assets/Stylesheets/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | width: 100%; 8 | font-family: 'Lato', sans-serif; 9 | font-size: 13px; 10 | color: #272a31; 11 | } 12 | 13 | @font-face { 14 | font-family: 'cocogoose'; 15 | font-weight: bold; 16 | font-style: normal; 17 | src: url("assets/fonts/cocogoose_trial.otf"); 18 | } 19 | 20 | .top-nav-items a { 21 | color: white; 22 | text-decoration: none; 23 | margin: 15px; 24 | } 25 | 26 | .bottom-nav-leftitems a { 27 | text-decoration: none; 28 | margin: 15px; 29 | } 30 | 31 | .cocogoose-text { 32 | font-family: cocogoose, sans-serif; 33 | } 34 | 35 | .white-text { 36 | color: white; 37 | } 38 | 39 | .bright-text { 40 | color: #ec5242; 41 | } 42 | 43 | .dark-text { 44 | color: #272a31; 45 | } 46 | 47 | .notso-darktext { 48 | color: #d3d3d3; 49 | } 50 | 51 | .underline-small { 52 | position: relative; 53 | } 54 | 55 | .underline-small::after { 56 | content: ''; 57 | height: 2px; 58 | width: 50%; 59 | background: #ec5242; 60 | position: absolute; 61 | left: 25%; 62 | bottom: -10px; 63 | } 64 | 65 | /* Navbars Section */ 66 | 67 | .dropdown { 68 | position: relative; 69 | display: inline-block; 70 | margin-top: 20px; 71 | margin-left: 30px; 72 | } 73 | 74 | .dropdown-content { 75 | display: none; 76 | position: absolute; 77 | background-color: #f1f1f1; 78 | min-width: 160px; 79 | } 80 | 81 | .dropdown-content a { 82 | color: black; 83 | padding: 12px 16px; 84 | text-decoration: none; 85 | display: block; 86 | } 87 | 88 | .dropdown-content a:hover { 89 | background-color: #ddd; 90 | } 91 | 92 | .dropdown:hover .dropdown-content { 93 | display: block; 94 | } 95 | 96 | .top-nav { 97 | background-color: #272a31; 98 | } 99 | 100 | .top-nav-items { 101 | display: flex; 102 | flex-direction: row; 103 | justify-content: flex-end; 104 | margin-right: 5%; 105 | } 106 | 107 | .bottom-nav { 108 | border-bottom: 1px solid #d3d3d3; 109 | } 110 | 111 | .bottom-nav-box { 112 | display: flex; 113 | flex-direction: row; 114 | justify-content: space-between; 115 | margin: 15px 5% 15px 5%; 116 | } 117 | 118 | .bottom-nav-leftitems button { 119 | border: 3px solid #ec5242; 120 | padding: 5px 3px 5px 3px; 121 | } 122 | 123 | /* Header Section */ 124 | 125 | .sec-header { 126 | background-image: url("../images/pattern.jpg"); 127 | background-repeat: no-repeat; 128 | background-size: 100%; 129 | } 130 | 131 | .sec-header-box { 132 | padding-top: 100px; 133 | padding-bottom: 100px; 134 | margin-left: 3%; 135 | } 136 | 137 | .sec-header-item1 p { 138 | font-size: 25px; 139 | } 140 | 141 | .sec-header-item1 h1, 142 | .sec-header-item1 h2 { 143 | font-size: 30px; 144 | } 145 | 146 | .sec-header-item2 { 147 | margin: 30px auto 40px 30px; 148 | } 149 | 150 | .sec-header-item3 h2 { 151 | font-size: 30px; 152 | } 153 | 154 | .sec-header-item3 p { 155 | font-size: 16px; 156 | } 157 | 158 | /* Main Program Section */ 159 | 160 | .sec-main-program { 161 | border: 1px solid black; 162 | background-color: #272a31; 163 | display: flex; 164 | flex-direction: column; 165 | justify-content: center; 166 | } 167 | 168 | .sec-main-program h2 { 169 | margin: 60px auto 60px auto; 170 | color: white; 171 | } 172 | 173 | .main-program-item { 174 | display: flex; 175 | flex-direction: row; 176 | background-color: #423f3f; 177 | margin: 15px; 178 | } 179 | 180 | .main-program-item h5 { 181 | font-size: 13px; 182 | padding-right: 10px; 183 | margin-top: 10px; 184 | margin-bottom: 10px; 185 | } 186 | 187 | .main-program-item p { 188 | margin-bottom: 10px; 189 | } 190 | 191 | .linkto-program { 192 | margin: 60px auto 60px auto; 193 | } 194 | 195 | /* Featured Lecturers Section */ 196 | 197 | .sec-featured-lecturers { 198 | margin: 50px auto 60px 15px; 199 | } 200 | 201 | .sec-featured-lecturers h2 { 202 | text-align: center; 203 | text-decoration-color: #ec5254; 204 | margin-bottom: 50px; 205 | } 206 | 207 | .underline-small2 { 208 | position: relative; 209 | } 210 | 211 | .underline-small2::after { 212 | content: ''; 213 | height: 2px; 214 | width: 6%; 215 | background: #ec5242; 216 | position: absolute; 217 | left: 47%; 218 | bottom: -10px; 219 | } 220 | 221 | .featured-lecturers-item { 222 | display: flex; 223 | flex-direction: row; 224 | margin-bottom: 30px; 225 | } 226 | 227 | .f-l-leftitems { 228 | margin-right: 70px; 229 | } 230 | 231 | .f-l-leftitems img { 232 | padding-top: 23px; 233 | } 234 | 235 | .f-l-image1 { 236 | width: 60px; 237 | height: 60px; 238 | background-image: url("../images/checkerboard.jpg"); 239 | background-size: contain; 240 | } 241 | 242 | .f-l-image2 { 243 | padding-top: 16px; 244 | padding-left: 16px; 245 | } 246 | 247 | .f-l-rightitems { 248 | padding-top: 23px; 249 | } 250 | 251 | .padding-correct { 252 | padding-top: 10px; 253 | padding-bottom: 10px; 254 | } 255 | 256 | /* Partner Section */ 257 | 258 | .sec-partner { 259 | background-color: #272a31; 260 | } 261 | 262 | .sec-partner h2 { 263 | text-align: center; 264 | margin-top: 0; 265 | padding-top: 30px; 266 | } 267 | 268 | .underline-small3 { 269 | position: relative; 270 | } 271 | 272 | .underline-small3::after { 273 | content: ''; 274 | height: 2px; 275 | width: 4%; 276 | background: #ec5242; 277 | position: absolute; 278 | left: 48%; 279 | bottom: -10px; 280 | } 281 | 282 | .bottomitems-partner { 283 | display: flex; 284 | flex-direction: row; 285 | justify-content: space-around; 286 | padding: 30px 60px 50px 60px; 287 | } 288 | 289 | /* Company Info Section */ 290 | 291 | .sec-company-info-box { 292 | display: flex; 293 | flex-direction: column; 294 | margin: 50px auto 50px 15%; 295 | } 296 | 297 | /* Responsive Section */ 298 | 299 | @media only screen and (max-width: 767px) { 300 | .top-nav { 301 | display: none; 302 | } 303 | 304 | .bottom-nav { 305 | display: none; 306 | } 307 | 308 | .mp-item-img { 309 | padding-top: 20px; 310 | padding-left: 10px; 311 | width: 15%; 312 | } 313 | 314 | .main-program-item h5 { 315 | width: 25%; 316 | } 317 | 318 | .main-program-item p { 319 | padding-top: 10px; 320 | padding-right: 10px; 321 | width: 100%; 322 | } 323 | } 324 | 325 | @media only screen and (min-width: 768px) { 326 | .mobile-nav { 327 | display: none; 328 | } 329 | 330 | .sec-header-box { 331 | margin-left: 10%; 332 | } 333 | 334 | .sec-header-item1 p { 335 | font-size: 30px; 336 | } 337 | 338 | .sec-header-item1 h1, 339 | .sec-header-item1 h2 { 340 | font-size: 60px; 341 | } 342 | 343 | .sec-header-item3 h2 { 344 | font-size: 30px; 345 | } 346 | 347 | .sec-header-item2, 348 | .sec-header-item3 { 349 | width: 55%; 350 | } 351 | 352 | .main-program-box { 353 | display: flex; 354 | flex-direction: row; 355 | justify-content: center; 356 | } 357 | 358 | .main-program-item { 359 | border: 1px solid black; 360 | display: flex; 361 | flex-direction: column; 362 | width: 15%; 363 | margin: 2px; 364 | } 365 | 366 | .mp-item-img { 367 | margin-top: 15px; 368 | display: flex; 369 | flex-direction: row; 370 | justify-content: center; 371 | } 372 | 373 | .main-program-item h5, 374 | .main-program-item p { 375 | text-align: center; 376 | padding-left: 10px; 377 | padding-right: 10px; 378 | } 379 | 380 | .featured-lecturers-box { 381 | display: flex; 382 | flex-direction: row; 383 | justify-content: center; 384 | } 385 | 386 | .featured-lecturers-col1, 387 | .featured-lecturers-col2 { 388 | display: flex; 389 | flex-direction: column; 390 | width: 35%; 391 | margin: 10px; 392 | } 393 | 394 | .sec-company-info-box { 395 | margin-top: 100px; 396 | margin-bottom: 50px; 397 | display: flex; 398 | flex-direction: row; 399 | justify-content: start; 400 | } 401 | 402 | .leftitems-companyinfo { 403 | margin-left: 10%; 404 | } 405 | 406 | .rightitems-companyinfo { 407 | margin-left: 35px; 408 | } 409 | } 410 | -------------------------------------------------------------------------------- /assets/Stylesheets/tickets.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | font-size: 10px; 5 | } 6 | 7 | body { 8 | width: 100%; 9 | font-family: 'Lato', sans-serif; 10 | font-size: 13px; 11 | color: #272a31; 12 | } 13 | 14 | @font-face { 15 | font-family: 'cocogoose'; 16 | font-weight: bold; 17 | font-style: normal; 18 | src: url("assets/fonts/cocogoose_trial.otf"); 19 | } 20 | 21 | .top-nav-items a { 22 | color: white; 23 | text-decoration: none; 24 | margin: 15px; 25 | font-size: 13px; 26 | } 27 | 28 | .middle-nav-leftitems a { 29 | text-decoration: none; 30 | margin: 15px; 31 | font-size: 13px; 32 | } 33 | 34 | .bottom-nav a { 35 | text-decoration: none; 36 | color: #272a31; 37 | margin: 10px; 38 | font-size: 13px; 39 | } 40 | 41 | .submit a { 42 | font-size: 14px; 43 | } 44 | 45 | .white-text { 46 | color: white; 47 | } 48 | 49 | .bright-text { 50 | color: #ec5242; 51 | } 52 | 53 | .dark-text { 54 | color: #272a31; 55 | } 56 | 57 | /* Navbars Section */ 58 | 59 | .dropdown { 60 | position: relative; 61 | display: inline-block; 62 | margin-top: 20px; 63 | margin-left: 30px; 64 | } 65 | 66 | .dropdown-content { 67 | display: none; 68 | position: absolute; 69 | background-color: #f1f1f1; 70 | min-width: 160px; 71 | } 72 | 73 | .dropdown-content a { 74 | color: black; 75 | padding: 12px 16px; 76 | text-decoration: none; 77 | display: block; 78 | } 79 | 80 | .dropdown-content a:hover { 81 | background-color: #ddd; 82 | } 83 | 84 | .dropdown:hover .dropdown-content { 85 | display: block; 86 | } 87 | 88 | .top-nav { 89 | background-color: #272a31; 90 | } 91 | 92 | .top-nav-items { 93 | display: flex; 94 | flex-direction: row; 95 | justify-content: flex-end; 96 | margin-right: 5%; 97 | } 98 | 99 | .middle-nav { 100 | border-bottom: 1px solid #d3d3d3; 101 | } 102 | 103 | .middle-nav-box { 104 | display: flex; 105 | flex-direction: row; 106 | justify-content: space-between; 107 | margin: 15px 5% 15px 5%; 108 | } 109 | 110 | .middle-nav-leftitems button { 111 | border: 3px solid #ec5242; 112 | padding: 5px 3px 5px 3px; 113 | } 114 | 115 | .bottom-nav { 116 | display: flex; 117 | flex-direction: row; 118 | justify-content: flex-end; 119 | margin-right: 5%; 120 | } 121 | 122 | .subheaders { 123 | font-size: 35px; 124 | } 125 | 126 | .optionbox { 127 | width: 60%; 128 | display: flex; 129 | flex-direction: column; 130 | align-items: center; 131 | } 132 | 133 | .tickets-box { 134 | width: 80%; 135 | } 136 | 137 | .tickbox-toptitles p, 138 | .titles { 139 | padding-top: 10px; 140 | font-size: 12px; 141 | } 142 | 143 | .price { 144 | font-size: 14px; 145 | } 146 | 147 | .menu-box { 148 | width: 80%; 149 | } 150 | 151 | /* footer / Company Info Section */ 152 | 153 | .sec-company-info-box { 154 | height: 180px; 155 | display: flex; 156 | flex-direction: row; 157 | justify-content: center; 158 | align-items: center; 159 | background-color: #272a31; 160 | border: 1px solid black; 161 | } 162 | 163 | .leftitems-companyinfo img { 164 | width: 200px; 165 | } 166 | 167 | .rightitems-companyinfo p { 168 | margin-left: 35px; 169 | color: white; 170 | font-size: 13px; 171 | } 172 | 173 | /* Responsive Section */ 174 | 175 | @media only screen and (max-width: 767px) { 176 | .top-nav { 177 | display: none; 178 | } 179 | 180 | .middle-nav { 181 | display: none; 182 | } 183 | 184 | .bottom-nav { 185 | display: none; 186 | } 187 | } 188 | 189 | @media only screen and (min-width: 768px) { 190 | .mobile-nav { 191 | display: none; 192 | } 193 | 194 | /* Company Info Section */ 195 | 196 | .leftitems-companyinfo img { 197 | width: 250px; 198 | } 199 | 200 | .optionbox { 201 | display: flex; 202 | flex-direction: row; 203 | justify-content: center; 204 | align-items: center; 205 | } 206 | 207 | .optionbox li, 208 | .optionbox p { 209 | font-size: 12px; 210 | padding-top: 10px; 211 | } 212 | } 213 | -------------------------------------------------------------------------------- /assets/fonts/Cocogoose_trial.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/fonts/Cocogoose_trial.otf -------------------------------------------------------------------------------- /assets/images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/.DS_Store -------------------------------------------------------------------------------- /assets/images/About-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/About-page.png -------------------------------------------------------------------------------- /assets/images/Home-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/Home-page.png -------------------------------------------------------------------------------- /assets/images/Tickets-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/Tickets-page.png -------------------------------------------------------------------------------- /assets/images/checkerboard.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/checkerboard.jpg -------------------------------------------------------------------------------- /assets/images/computer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/computer.png -------------------------------------------------------------------------------- /assets/images/conference1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/conference1.jpg -------------------------------------------------------------------------------- /assets/images/conference2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/conference2.jpg -------------------------------------------------------------------------------- /assets/images/data-management.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/data-management.png -------------------------------------------------------------------------------- /assets/images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/home.png -------------------------------------------------------------------------------- /assets/images/menu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/menu.jpg -------------------------------------------------------------------------------- /assets/images/netoworking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/netoworking.png -------------------------------------------------------------------------------- /assets/images/pattern.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/pattern.jpg -------------------------------------------------------------------------------- /assets/images/romboid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/romboid.png -------------------------------------------------------------------------------- /assets/images/speaker1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/speaker1.jpg -------------------------------------------------------------------------------- /assets/images/speaker2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/speaker2.jpg -------------------------------------------------------------------------------- /assets/images/speaker3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/speaker3.jpg -------------------------------------------------------------------------------- /assets/images/speaker4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/speaker4.jpg -------------------------------------------------------------------------------- /assets/images/speaker5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/speaker5.jpg -------------------------------------------------------------------------------- /assets/images/speaker6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/speaker6.jpg -------------------------------------------------------------------------------- /assets/images/technical-support.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/technical-support.png -------------------------------------------------------------------------------- /assets/images/webtech-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/webtech-logo.png -------------------------------------------------------------------------------- /assets/images/work.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/German-Cobian/Web-Development-Course/70d1ac369c9a8a179e2752f6fe4e87fd0702a277/assets/images/work.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | DesignWebtech Web Development Course 11 | 12 | 13 | 14 | 15 | 16 | 17 | 31 | 32 | 42 | 43 | 59 | 60 |
61 | 62 | 63 | 64 |
65 |
66 |
67 |

Learn Web Development in Mexico City

68 |

DesignWebtech

69 |

Web Development Course

70 |

2021

71 |
72 |
73 |

Improve your skills as a Full-Stack web developer by immersing yourself in our week-long best practices lectures and workshops, directed by some of the most renowned web developers in the world.

74 |
75 |
76 |

2021.04.12(MON) ~ 16(FRI)

77 |

@Universidad Nacional Autonoma de Mexico.

78 |
79 |
80 |
81 | 82 | 83 | 84 |
85 | 86 |

Main Program

87 | 88 |
89 | 90 |
91 |
92 | compuwork icon 93 |
94 |
Prework
95 |

On the first day, our platform’s prep materials will guide you to set up your web development environment on your computer and proceed to learn the fundamentals of programming with HTML, CSS and JavaScript.

96 |
97 | 98 |
99 |
100 | technical support icon 101 |
102 |
Module 1: Responsive design with HTML and CSS
103 |

In this module you will learn the foundations of web development: HTML and CSS basics; responsive design using Flexbox and Bootstrap; JavaScript; DOM manipulation and version control.

104 |
105 | 106 |
107 |
108 | data management icon 109 |
110 |
Module 2: The Back-end
111 |

You will dive into the Back-end to become a Full-Stack developer. Topics include: NodeJS, ExpressJS, Handlebars, MongoDB and Mongoose.

112 |
113 | 114 |
115 |
116 | computer utilities icon 117 |
118 |
Module 3: The Front-end
119 |

In this final module you will begin to master the Front-end technologies that the biggest tech companies rely upon. Topics include: ReactJS, Single Page Apps (SPA) and Component-based frameworks.

120 |
121 | 122 |
123 |
124 | networking icon 125 |
126 |
Design Webtech Kindle
127 |

Our closing event gives you the opportunity to network with other aspiring and established full-stack web designers aroud the world.

128 |
129 | 130 |
131 | 132 |
133 | SEE THE WHOLE PROGRAM 134 |
135 | 136 |
137 | 138 | 139 | 140 |
141 | 142 |

Featured Lecturers

143 | 144 |
145 | 146 |
147 | 148 |
149 |
150 | Plavu Zoru photo 151 |
152 |
153 |

Plavu Zoru

154 |

Professor of Information Science at Laurentius University

155 |

Plavu is a certified Computer Scientist for Application Development and is training entire new generations of web-developers at Laurentius

156 |
157 |
158 | 159 |
160 |
161 | Henrietta Okum photo 162 |
163 |
164 |

Henrietta Okum

165 |

Director of the Mexico City Academy of Graphic Design

166 |

Henrietta has worked as the layout designer for several Mexican magazines, and she transmits her experience and knowledge to aspiring web designers.

167 |
168 |
169 | 170 |
171 |
172 | Pablum Trist photo 173 |
174 |
175 |

Pablum Trist

176 |

Electrical Enginner at TelAztec Communications

177 |

Pablum is the foremost authority in the field of cybernetics in Mexico a knowledge he owes to his management the information grid in Guadalajara.

178 |
179 |
180 | 181 |
182 | 183 |
184 | 185 |
186 |
187 | Leticia Poptarts photo 188 |
189 |
190 |

Leticia Poptarts

191 |

Head of Design for FabSpread Magazine

192 |

Leticia is renowned in her field for her unique, eye-grabbing designs in both printed and web-based magazines, and is an enthusiastic teacher of her craft.

193 |
194 |
195 | 196 |
197 |
198 | Andre Boccacio photo 199 |
200 |
201 |

Adre Boccacio

202 |

Marketing Specialist for Cyber-Positioning Consultants

203 |

It is often heard in Andre's milieu that he can sell anything to anyone. His tactics are of great use to students who wish to design web-pages that get customers.

204 |
205 |
206 | 207 |
208 |
209 | Giovanni Smalls photo 210 |
211 |
212 |

Giovanni Smalls

213 |

Executive Director of Media Analysis Corp.

214 |

Giovanni's profound insights are garnered from having collaborated in the world of cyber-communications at every level almost since the inception of the internet.

215 |
216 |
217 | 218 |
219 | 220 |
221 | 222 |
223 | 224 |
225 | 226 | 258 | 259 | 260 | 261 | -------------------------------------------------------------------------------- /tickets.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | DesignWebtech Web Development Course 12 | 13 | 14 | 15 | 16 | 30 | 31 | 41 | 42 | 58 | 59 | 65 | 66 |
67 | 68 |

Select Tickets

69 | 70 |
71 | 74 |

Please select the number of days that you Wish to attend.

75 |
76 | 77 |
78 | 79 |
80 | 81 |
82 |

Tickets

83 |
84 |
85 |

One Day

86 |
87 |
88 |

Two Days

89 |
90 |
91 |

Three Days

92 |
93 |
94 |

Four Days

95 |
96 |
97 |

Five Days

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

Student

107 |
108 |
109 |

$60

110 | 111 |
112 |
113 |

$115

114 | 115 |
116 |
117 |

$170

118 | 119 |
120 |
121 |

$225

122 | 123 |
124 |
125 |

$280

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

Normal

135 |
136 |
137 |

$70

138 | 139 |
140 |
141 |

$135

142 | 143 |
144 |
145 |

$200

146 | 147 |
148 |
149 |

$265

150 | 151 |
152 |
153 |

$300

154 | 155 |
156 | 157 |
158 | 159 |
160 | 161 |
162 | romboid icon 163 |
164 | 165 |

Select Your Meal

166 | 167 |
168 | 171 |

Please select your lunch and dinner for the registered days.

172 |
173 | 174 |
175 | 176 |
177 |

Lunch

178 |
179 | 180 |
181 | 182 |
183 |

Menu 1

184 | 185 |
186 |
187 |

Menu 2

188 | 189 |
190 |
191 |

Menu 3

192 | 193 |
194 |
195 |

Menu 4

196 | 197 |
198 |
199 |

Menu 5

200 | 201 |
202 | 203 |
204 | 205 |
206 | 207 |
208 | 209 |
210 |

Dinner

211 |
212 | 213 |
214 | 215 |
216 |

Menu 1

217 | 218 |
219 |
220 |

Menu 2

221 | 222 |
223 |
224 |

Menu 3

225 | 226 |
227 |
228 |

Menu 4

229 | 230 |
231 |
232 |

Menu 5

233 | 234 |
235 | 236 |
237 | 238 |
239 | 240 | 241 | 242 |
243 | Submit 244 |
245 | 246 |
247 | 248 | 265 | 266 | 267 | 268 | 269 | 270 | --------------------------------------------------------------------------------