├── Documentation Page ├── index.html ├── index.js └── style.css ├── Portfolio website ├── Images │ ├── project1.png │ ├── project2.png │ └── project3.png ├── index.html ├── script.js └── style │ ├── contact.css │ ├── nav.css │ ├── projects.css │ ├── service.css │ ├── style.css │ └── welcome.css ├── Product Landing Page ├── cart.svg ├── index.html ├── logo.png └── product.png ├── README.md ├── Survey form └── index.html └── Tribute page ├── drapj.png └── index.html /Documentation Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 | 15 | 33 | 34 |
35 | 36 |
37 |
Introduction
38 |
39 |

40 | Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first 41 | sites, with BootstrapCDN and a template starter page. 42 |

43 |

Quick start

44 |

45 | Looking to quickly add Bootstrap to your project? Use BootstrapCDN, provided for free by the folks 46 | at MaxCDN. Using a package manager or need to download the source files? 47 |

48 |

CSS

49 |

Copy-paste the stylesheet link into your head before all other stylesheets to load our CSS. 51 |

52 | 54 | 55 | 56 |

JAVASCRIPT

57 |

58 | Many of our components require the use of JavaScript to function. Specifically, 59 | they require jQuery, Popper.js, and our own JavaScript plugins. Place the following script near the end of your pages, right before the closing 61 | tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins. 62 |

63 |

We use jQuery’s slim build, but the full version is also supported.

64 | 69 | 70 |

Curious which components explicitly require jQuery, our JS, and Popper.js? Click the show components link below. If 71 | you’re at all unsure about the general page structure, keep reading for an example page template.

72 |
73 |
74 | 75 |
76 |
Starter template
77 |
78 |

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 79 | doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your 80 | pages should look like this::

81 | 105 |
106 |

That’s all you need for overall page requirements. Visit the Layout docs or our official examples to start 107 | laying out your site’s content and components.

108 |
109 |
110 | 111 |
112 |
Download
113 |
114 |

115 | Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite 116 | package managers like npm, RubyGems, and more. 117 |

118 |

Compiled CSS and JS

119 |

120 | Download ready-to-use compiled code for Bootstrap v4.0.0 to easily drop into your project, which includes: 121 |

122 |
    123 |
  • Compiled and minified CSS bundles (see CSS files comparison)
    • 124 |
  • Compiled and minified JavaScript plugins
    • 125 |
126 |

This doesn’t include documentation, source files, or any optional JavaScript dependencies (jQuery and 127 | Popper.js).

128 | 129 | 130 |

Source files

131 |

132 | Compile Bootstrap with your own asset pipeline by downloading our source Sass, JavaScript, and documentation 133 | files. This option requires some additional tooling: 134 |

135 |
    136 |
  • Sass compiler (Libsass or Ruby Sass is supported) for compiling your CSS.
    • 137 |
  • Autoprefixer for CSS vendor prefixing
    • 138 |
139 |

Should you require build tools, they are included for developing Bootstrap and its docs, but they’re likely 140 | unsuitable for your own purposes.

141 | 142 |
143 |
144 | 145 |
146 |
BootstrapCDN
147 |
148 |

Skip the download with BootstrapCDN to deliver cached version of Bootstrap’s compiled CSS and JS to your 149 | project.

150 | 154 | 155 | 156 |

If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before 157 | it.

158 | 162 | 163 |
164 |
165 | 166 |
167 |
Precompiled Bootstrap
168 |

Once downloaded, unzip the compressed folder and you’ll see something like this:

169 | 
170 | 
171 | bootstrap/
172 | ├── css/
173 | │   ├── bootstrap.css
174 | │   ├── bootstrap.css.map
175 | │   ├── bootstrap.min.css
176 | │   ├── bootstrap.min.css.map
177 | │   ├── bootstrap-grid.css
178 | │   ├── bootstrap-grid.css.map
179 | │   ├── bootstrap-grid.min.css
180 | │   ├── bootstrap-grid.min.css.map
181 | │   ├── bootstrap-reboot.css
182 | │   ├── bootstrap-reboot.css.map
183 | │   ├── bootstrap-reboot.min.css
184 | │   └── bootstrap-reboot.min.css.map
185 | └── js/
186 | ├── bootstrap.bundle.js
187 | ├── bootstrap.bundle.min.js
188 | ├── bootstrap.js
189 | └── bootstrap.min.js
190 | 
191 |
192 |

This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We 193 | provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). CSS 194 | source maps (bootstrap.*.map) are available for use with certain browsers’ developer tools. Bundled JS files 195 | (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper, but not jQuery.

196 | 197 |

CSS files

198 |

Bootstrap includes a handful of options for including some or all of our compiled CSS.

199 |
200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 236 | 237 | 238 | 239 | 240 | 241 | 242 |
CSS filesLayoutContentComponentsUtilities
213 |
bootstrap.css
214 |
bootstrap.min.css
215 | 		includedincludedincludedincluded
223 |
bootstrap-grid.css
224 |
bootstrap-grid.min.css
225 | 		Only grid systemNot includedNot includedOnly flex utilities
233 |
bootstrap-reboot.css
234 |
bootstrap-reboot.min.css
235 | 		Not includedOnly RebootNot includedNot included
243 |
244 |

JS files

245 |

Similarly, we have options for including some or all of our compiled JavaScript.

246 |
247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 261 | 262 | 263 | 264 | 265 | 269 | 270 | 271 | 272 | 273 |
JS filesPopperjQuery
258 |
bootstrap.bundle.js
259 |
bootstrap.bundle.min.js
260 | 		includedNot included
266 |
bootstrap.js
267 |
bootstrap.min.js
268 | 		Not includedNot included
274 |
275 |
276 |
277 | 278 |
279 |
Bootstrap source code
280 |
281 |

282 | The Bootstrap source code download includes the precompiled CSS and JavaScript assets, along with source 283 | Sass, JavaScript, and documentation. More specifically, it includes the following and more: 284 |

285 | 
286 | 
287 | bootstrap/
288 | ├── dist/
289 | │   ├── css/
290 | │   └── js/
291 | ├── docs/
292 | │   └── examples/
293 | ├── js/
294 | └── scss/
295 | 
296 |
297 | 298 |

299 | The scss/ and js/ are the source code for our 300 | CSS and JavaScript. The dist/ folder 301 | includes everything 302 | listed in the precompiled download section above. The docs/ folder includes 303 | the source code for our 304 | documentation, and examples/ of Bootstrap usage. Beyond that, any other 305 | included file provides support for 306 | packages, license information, and development. 307 |

308 |
309 |
310 | 311 |
312 |
Browsers and devices
313 |
314 |

315 | Learn about the browsers and devices, from modern to old, that are supported by Bootstrap, including known 316 | quirks and bugs for each. 317 |

318 |

Supported browsers

319 |

320 | Bootstrap supports the latest, stable releases of all major browsers and platforms. On Windows, we 321 | support 322 | Internet Explorer 10-11 / Microsoft Edge. 323 |

324 |

325 | Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the 326 | platform’s web view API, are not explicitly supported. However, Bootstrap should (in most cases) display and 327 | function correctly in these browsers as well. More specific support information is provided below. 328 |

329 | 330 |

Mobile devices

331 |

Generally speaking, Bootstrap supports the latest versions of each major platform’s default browsers. Note 332 | that proxy browsers (such as Opera Mini, Opera Mobile’s Turbo mode, UC Browser Mini, Amazon Silk) are not 333 | supported.

334 |
335 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 368 | 369 | 370 | 371 | 372 | 373 | 374 |
ChromeFirefoxSafari Android Browser & WebView
348 | Android 349 | Supported Supported N/A Android v5.0+ supported
357 | iOS 358 | Supported SupportedSupportedOnly flex utilitie
366 | Windows 10 Mobile 367 | N/A N/A N/A N/A
375 |
376 |

Desktop browsers

377 |

Similarly, the latest versions of most desktop browsers are supported.

378 |
379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 | 401 | 402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 |
Chrome FirefoxInternet Explorer Microsoft Edge Opera Safari
MacSupported Supported N/A N/A Supported Supported
WindowsSupported Supported Supported, IE10+ Supported Supported Not supported
413 |
414 |

For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support 415 | Release (ESR) version of Firefox.

416 |

Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for 417 | Linux, and Internet Explorer 9, though they are not officially supported

418 |

For a list of some of the browser bugs that Bootstrap has to grapple with, see our Wall of browser bugs.

419 |
420 |
421 | 422 |
423 |
JavaScript
424 |
425 |

426 | Global variables are in fact properties of the global object. In web 427 | pages the global object is window, so you can set and access global 428 | variables using the window.variable syntax. 429 |

430 | 431 |

Individual or compiled

432 |

433 | Plugins can be included individually (using Bootstrap’s individual *.js files), or all at once using 434 | bootstrap.js or the minified bootstrap.min.js (don’t include both). 435 |

436 |

Dependencies

437 |

Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure 438 | to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means 439 | jQuery must be included before the plugin files). Consult our package.json to see which versions of 440 | jQuery are supported. 441 | 442 |

443 |

Data attributes

444 |

Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our 445 | preferred way of using JavaScript functionality). Be sure to only use one set of data attributes on a 446 | single 447 | element (e.g., you cannot trigger a tooltip and modal from the same button.)

448 |

However, in some situations it may be desirable to disable this functionality. To disable the data attribute 449 | API, unbind all events on the document namespaced with data-api like so:

450 | 
451 | $(document).off('.data-api')
452 |
453 |

Alternatively, to target a specific plugin, just include the plugin’s name as a namespace along with the 454 | data-api namespace like this:

455 | 
456 | $(document).off('.alert.data-api')
457 |
458 |
459 |
460 | 461 |
462 |
Events
463 |
464 |

465 | Bootstrap provides custom events for most plugins’ unique actions. Generally, these come in an infinitive 466 | and past participle form - where the infinitive (ex. show) is triggered at the start of an event, and its 467 | past participle form (ex. shown) is triggered on the completion of an action. 468 |

469 |

All infinitive events provide preventDefault() functionality. This provides the ability to stop the execution 470 | of an action before it starts. Returning false from an event handler will also automatically call 471 | preventDefault(). 472 |

473 | 
474 | 
475 | $('#myModal').on('show.bs.modal', function (e) {
476 | if (!data) return e.preventDefault() // stops modal from being shown
477 | })
478 | 
479 |
480 |
481 |
482 | 483 |
484 |
Theming Bootstrap
485 |
486 |

Customize Bootstrap 4 with our new built-in Sass variables for global style preferences for easy theming and 487 | component changes. 488 |

489 | 490 |

Introduction

491 |

In Bootstrap 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme 492 | stylesheet that we included in our dist files. With some effort, one could completely redesign the look of 493 | Bootstrap 3 without touching the core files. Bootstrap 4 provides a familiar, but slightly different 494 | approach.

495 |

Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There’s no more dedicated theme 496 | stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.

497 | 498 |

Sass

499 |

Utilize our source Sass files to take advantage of variables, maps, mixins, and more.

500 | 501 |

File structure

502 |

Whenever possible, avoid modifying Bootstrap’s core files. For Sass, that means creating your own stylesheet 503 | that imports Bootstrap so you can modify and extend it. Assuming you’re using a package manager like npm, 504 | you’ll have a file structure that looks like this:

505 | 
506 | 
507 | your-project/
508 | ├── scss
509 | │   └── custom.scss
510 | └── node_modules/
511 | └── bootstrap
512 | ├── js
513 | └── scss
514 | 
515 |
516 | 517 |

If you’ve downloaded our source files and aren’t using a package manager, you’ll want to manually setup 518 | something similar to that structure, keeping Bootstrap’s source files separate from your own.

519 | 520 | 
521 | 
522 | your-project/
523 | ├── scss
524 | │   └── custom.scss
525 | └── bootstrap/
526 | ├── js
527 | └── scss
528 | 
529 |
530 |
531 |
532 | 533 |
534 |
Build tools
535 |
536 |

Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, 537 | and more.

538 | 539 |

Tooling setup

540 |

Bootstrap uses NPM scripts for its build system. Our package.json includes convenient methods for working 541 | with the framework, including compiling code, running tests, and more.

542 |

543 | To use our build system and run our documentation locally, you’ll need a copy of Bootstrap’s source files 544 | and Node. Follow these steps and you should be ready to rock: 545 |

546 | 547 |
    548 |
  1. Download and install Node.js, which we use to manage our dependencies.
    2. 549 |
  2. Navigate to the root /bootstrap directory and run npm install to install our local dependencies listed 550 | in package.json.
    3. 551 |
  3. Install Ruby, install Bundler with gem install bundler, and finally run bundle install. This will 552 | install all Ruby dependencies, such as Jekyll and plugins. 553 |
      554 |
    • Windows users: Read this guide to get Jekyll up and running without problems.
      • 555 |
    556 |
557 |

When completed, you’ll be able to run the various commands provided from the command line.

558 |
559 |
560 | 561 |
562 |
Webpack
563 |
564 |

Learn how to include Bootstrap in your project using Webpack 3.

565 | 566 |

Installing Bootstrap

567 |

Install bootstrap as a Node.js module using npm.

568 | 569 |

Importing JavaScript

570 |

571 | Import Bootstrap’s JavaScript by adding this line to your app’s entry point (usually index.js or app.js): 573 |

574 | import 'bootstrap'; 575 |

Alternatively, you may import plugins individually as needed:

576 | 577 | import 'bootstrap/js/dist/util';
578 | import 'bootstrap/js/dist/dropdown'; 579 | ... 580 | 581 | 582 |

The following while loop iterates as long as n is less than three:

583 | 584 | var n = 0; var x = 0; while (n < 3) { n++; x += n; } 585 |

586 | With each iteration, the loop increments n and adds that value to x. 587 | Therefore, x and n take on the following values: 588 |

589 | 590 |
    591 |
  • After the first pass: n = 1 and x = 1
    • 592 |
  • After the second pass: n = 2 and x = 3
    • 593 |
  • After the third pass: n = 3 and x = 6
    • 594 |
595 |

596 | After completing the third pass, the condition n < 3 is no longer 597 | true, so the loop terminates. 598 |

599 |
600 |
601 | 602 |
603 |
Accessibility
604 |
605 |

A brief overview of Bootstrap’s features and limitations for the creation of accessible content.

606 |

Bootstrap provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, 607 | allowing developers to create websites and applications that are visually appealing, functionally rich, and 608 | accessible out of the box.

609 | 610 |

Overview and Limitations

611 |

The overall accessibility of any project built with Bootstrap depends in large part on the author’s markup, 612 | additional styling, and scripting they’ve included. However, provided that these have been implemented 613 | correctly, it should be perfectly possible to create websites and applications with Bootstrap that fulfill 614 | WCAG 2.0 (A/AA/AAA), Section 508 and similar accessibility standards and requirements.

615 | 616 |

Structural markup

617 |

Bootstrap’s styling and layout can be applied to a wide range of markup structures. This documentation aims 618 | to provide developers with best practice examples to demonstrate the use of Bootstrap itself and illustrate 619 | appropriate semantic markup, including ways in which potential accessibility concerns can be addressed.

620 | 621 |

Interactive components

622 |

Bootstrap’s interactive components—such as modal dialogs, dropdown menus and custom tooltips—are designed to 623 | work for touch, mouse and keyboard users. Through the use of relevant WAI-ARIA roles and attributes, these 624 | components should also be understandable and operable using assistive technologies (such as screen readers). 625 |

626 | 627 |
628 |
629 | 630 |
631 | 632 | 633 | 634 | 635 | 636 | -------------------------------------------------------------------------------- /Documentation Page/index.js: -------------------------------------------------------------------------------- 1 | function myFunction0() { 2 | var copyText = document.getElementById("select-this0"); 3 | copyText.select(); 4 | copyText.setSelectionRange(0, 99999) 5 | document.execCommand("copy"); 6 | } 7 | 8 | function myFunction() { 9 | var copyText = document.getElementById("select-this2"); 10 | copyText.select(); 11 | copyText.setSelectionRange(0, 99999) 12 | document.execCommand("copy"); 13 | } 14 | 15 | function myFunction4() { 16 | var copyText = document.getElementById("select-this4"); 17 | copyText.select(); 18 | copyText.setSelectionRange(0, 99999) 19 | document.execCommand("copy"); 20 | } 21 | 22 | function myFunction5() { 23 | var copyText = document.getElementById("select-this5"); 24 | copyText.select(); 25 | copyText.setSelectionRange(0, 99999) 26 | document.execCommand("copy"); 27 | } 28 | -------------------------------------------------------------------------------- /Documentation Page/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | html, body { 8 | min-width: 290px; 9 | color: #4d4e53; 10 | background-color: #ffffff; 11 | font-family: 'Open Sans', Arial, sans-serif; 12 | line-height: 1.5; 13 | } 14 | 15 | #navbar { 16 | position: fixed; 17 | min-width: 290px; 18 | top: 0px; 19 | left: 0px; 20 | width: 300px; 21 | height: 100%; 22 | border-right: solid; 23 | border-color: rgba(0, 22, 22, 0.4); 24 | } 25 | 26 | header { 27 | color: black; 28 | margin: 10px; 29 | text-align: center; 30 | font-size: 1.8em; 31 | font-weight: thin; 32 | } 33 | 34 | #main-doc header { 35 | text-align: left; 36 | margin: 0px; 37 | } 38 | 39 | #navbar ul { 40 | height: 88%; 41 | padding: 0; 42 | overflow-y: auto; 43 | overflow-x: hidden; 44 | } 45 | 46 | #navbar li { 47 | color: #4d4e53; 48 | border-top: 1px solid; 49 | list-style: none; 50 | position: relative; 51 | width: 100%; 52 | } 53 | 54 | #navbar a { 55 | display: block; 56 | padding: 10px 30px; 57 | color: #4d4e53; 58 | text-decoration: none; 59 | cursor: pointer; 60 | } 61 | 62 | #main-doc { 63 | position: absolute; 64 | margin-left: 310px; 65 | padding: 20px; 66 | margin-bottom: 110px; 67 | } 68 | 69 | section article { 70 | color: #4d4e53; 71 | margin: 15px; 72 | font-size: 0.96em; 73 | } 74 | 75 | section li { 76 | margin: 15px 0px 0px 20px; 77 | } 78 | 79 | /* code { 80 | display: block; 81 | text-align: left; 82 | white-space: pre-line; 83 | position: relative; 84 | word-break: normal; 85 | word-wrap: normal; 86 | line-height: 2; 87 | background-color: #f7f7f7; 88 | padding: 15px; 89 | margin: 10px; 90 | border-radius: 5px; 91 | } */ 92 | 93 | .textcode { 94 | font-family: Consolas, "courier new"; 95 | color: crimson; 96 | background-color: #f1f1f1; 97 | /* padding: 2px; */ 98 | font-size: 115%; 99 | } 100 | 101 | textarea { 102 | /* margin: 4px, 4px; */ 103 | padding: 4px; 104 | /* background-color: #08c708; */ 105 | width: 75%; 106 | overflow-x: auto; 107 | overflow-y: hidden; 108 | white-space: nowrap; 109 | } 110 | 111 | .button { 112 | display: inline-block; 113 | position: absolute; 114 | font-size: 0.9em; 115 | background-color: rgb(230, 14, 43); 116 | color: #fff; 117 | transition: all 300ms ease; 118 | cursor: pointer; 119 | width: 20%; 120 | height: 50px; 121 | margin-left: 20px; 122 | margin-top: -5px; 123 | } 124 | 125 | .button:hover { 126 | background-color: rgb(24, 40, 185); 127 | color: #fff; 128 | } 129 | 130 | .startertemplate { 131 | text-align-last: left; 132 | float: left; 133 | width: 100%; 134 | height: 400px; 135 | } 136 | 137 | .downloadbtn { 138 | font-weight: 500; 139 | color: #7952b3; 140 | border-color: #7952b3; 141 | width: 100px; 142 | height: 40px; 143 | } 144 | 145 | table { 146 | border: 1px solid #111; 147 | width: 800px; 148 | height: 150px; 149 | border-collapse: collapse; 150 | } 151 | 152 | th, td { 153 | text-align: left; 154 | border: 1px solid #111; 155 | padding: .75rem; 156 | } 157 | 158 | tr div { 159 | width: 250px; 160 | } 161 | 162 | .included { 163 | color: red; 164 | } 165 | 166 | .notincluded { 167 | color: rgb(136, 226, 17); 168 | background-color: #f8f9fa; 169 | } 170 | 171 | a { 172 | text-decoration: none; 173 | } 174 | 175 | @media only screen and (max-width: 600px) { 176 | #navbar ul { 177 | border: 1px solid; 178 | height: 207px; 179 | } 180 | #navbar { 181 | position: relative; 182 | top: 0; 183 | padding: 0; 184 | margin: 0; 185 | width: 100%; 186 | max-height: 275px; 187 | border: none; 188 | z-index: 1; 189 | } 190 | #main-doc { 191 | margin: 0; 192 | width: 100%; 193 | } 194 | .button { 195 | position: relative; 196 | font-size: 0.9em; 197 | background-color: rgb(230, 14, 43); 198 | color: #fff; 199 | transition: all 300ms ease; 200 | cursor: pointer; 201 | width: 150px; 202 | height: 50px; 203 | margin-left: 0; 204 | margin-top: 5px; 205 | margin-bottom: 10px; 206 | } 207 | .tablediv { 208 | overflow-x: auto; 209 | } 210 | textarea { 211 | width: 100%; 212 | margin-top: 15px; 213 | } 214 | .downloadbtn { 215 | margin: 10px 0 10px 0; 216 | width: 50%; 217 | } 218 | } -------------------------------------------------------------------------------- /Portfolio website/Images/project1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Freecodecamp-responsive-web-design-projects/7f672f02355b6dc79121a90fbf352a4c0685ca0c/Portfolio website/Images/project1.png -------------------------------------------------------------------------------- /Portfolio website/Images/project2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Freecodecamp-responsive-web-design-projects/7f672f02355b6dc79121a90fbf352a4c0685ca0c/Portfolio website/Images/project2.png -------------------------------------------------------------------------------- /Portfolio website/Images/project3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Freecodecamp-responsive-web-design-projects/7f672f02355b6dc79121a90fbf352a4c0685ca0c/Portfolio website/Images/project3.png -------------------------------------------------------------------------------- /Portfolio website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 21 | 45 |
46 | 47 |
48 |
49 |
50 |

Hi, I'm Sumit. 👋

51 |
52 |

Frontend web developer with a passion for designing a UI/UX & Graphic

53 |
54 | 55 | 59 | 60 |
61 | 62 |
63 | 65 |
66 |
67 |
68 | 69 |
70 |

⬇️ What I Do ⬇️

71 |
72 |
73 | 74 |
75 |
76 |
77 | 78 |

Web Design

79 |

⚡ Designing highly attractive user interface for mobile and web applications 80 | ⚡ Customizing logo designs and building logos from scratch 81 | ⚡ Creating the flow of application functionalities to optimize user experience

82 |
83 |
84 |
85 | 86 |
87 |
88 |
89 | 90 |

Development

91 |

⚡ Building resposive website front end using React-Redux 92 | ⚡ Developing mobile applications using Flutter, React Native and solo android apps using 93 | Kotlin 94 | ⚡ Creating application backend in Node, Express & Flask

95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 | 103 |

Graphic Design

104 |

⚡ Designing highly attractive illustrations, logos, layouts and photos. 105 | ⚡ Customizing logo designs and building logos from scratch 106 | ⚡ visual aspects of websites, books, magazines, product packaging,

107 |
108 |
109 |
110 |
111 |
112 |
113 | 114 |
115 |

⬇️ Projects ⬇️

116 |
117 |
118 | 119 | 120 | 121 |
122 |
123 |

Tribute page

124 |
125 |
126 | 127 | 128 | 129 | 130 | 131 | 132 |
133 |
134 |
135 |
136 | 137 | 138 | 139 |
140 |
141 |

Survey form

142 |
143 |
144 | 145 | 146 | 147 | 148 | 149 | 150 |
151 |
152 |
153 |
154 | 155 | 156 | 157 |
158 |
159 |

Product landing

160 |
161 |
162 | 163 | 164 | 165 | 166 | 167 | 168 |
169 |
170 |
171 |
172 |
173 | 174 |
175 |

⬇️ Contact me ⬇️

176 |
177 | 178 | 179 | 180 | 181 |
182 |
183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | -------------------------------------------------------------------------------- /Portfolio website/script.js: -------------------------------------------------------------------------------- 1 | const navToggle = document.querySelector('.nav-toggle'); 2 | const navLinks = document.querySelectorAll('.nav__link') 3 | 4 | navToggle.addEventListener('click', () => { 5 | document.body.classList.toggle('nav-open'); 6 | }); 7 | 8 | navLinks.forEach(link => { 9 | link.addEventListener('click', () => { 10 | document.body.classList.remove('nav-open'); 11 | }) 12 | }) 13 | -------------------------------------------------------------------------------- /Portfolio website/style/contact.css: -------------------------------------------------------------------------------- 1 | .sm { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | /* min-height: 30vh; */ 6 | /* padding-bottom: 50px; */ 7 | margin: 15px; 8 | } 9 | 10 | #contact h1 { 11 | text-align: center; 12 | /* margin: 50px auto 20px; */ 13 | color: #fff; 14 | text-transform: uppercase; 15 | } 16 | 17 | .sm a { 18 | display: inline-block; 19 | font-size: 40px; 20 | width: 100px; 21 | height: 100px; 22 | line-height: 100px; 23 | text-align: center; 24 | color: #fff; 25 | margin: 0 16px; 26 | transition: .4s linear; 27 | position: relative; 28 | } 29 | 30 | .sm a::before, .sm a::after { 31 | content: ''; 32 | position: absolute; 33 | box-sizing: border-box; 34 | width: 100%; 35 | height: 100%; 36 | left: 0; 37 | top: 0; 38 | transition: .4s linear; 39 | } 40 | 41 | .sm a:hover { 42 | transform: scale(.8); 43 | } 44 | 45 | .sm a:hover::before { 46 | border-radius: 50%; 47 | border-left: 4px solid; 48 | border-right: 4px solid; 49 | transform: skewX(20deg); 50 | } 51 | 52 | .sm a:hover::after { 53 | border-radius: 50%; 54 | border-top: 4px solid; 55 | border-bottom: 4px solid; 56 | transform: skewY(-20deg); 57 | } -------------------------------------------------------------------------------- /Portfolio website/style/nav.css: -------------------------------------------------------------------------------- 1 | header { 2 | top: 0; 3 | position: fixed; 4 | width: 100%; 5 | } 6 | 7 | .nav__list { 8 | list-style: none; 9 | display: flex; 10 | height: 100%; 11 | justify-content: space-evenly; 12 | margin: 0; 13 | padding: 8px; 14 | background-color: rgb(240, 240, 20); 15 | } 16 | 17 | .nav__link { 18 | color: inherit; 19 | font-weight: var(--fw-bold); 20 | font-size: var(--fs-h2); 21 | text-decoration: none; 22 | } 23 | 24 | .nav__link:hover { 25 | color: var(--clr-accent); 26 | } 27 | 28 | .nav-toggle { 29 | position: absolute; 30 | } 31 | 32 | label { 33 | position: relative; 34 | margin-right: -410px; 35 | } 36 | 37 | .nav__item { 38 | color: #111; 39 | } 40 | 41 | @media (max-width: 800px) { 42 | .nav { 43 | display: flex; 44 | justify-content: center; 45 | position: fixed; 46 | background: var(--clr-dark); 47 | color: var(--clr-light); 48 | top: 0; 49 | bottom: 0; 50 | left: 0; 51 | right: 0; 52 | z-index: 100; 53 | transform: translateY(100%); 54 | transition: transform 250ms cubic-bezier(.5, 0, .5, 1); 55 | } 56 | .nav__list { 57 | list-style: none; 58 | display: flex; 59 | height: 100%; 60 | flex-direction: column; 61 | justify-content: space-evenly; 62 | margin: 0; 63 | padding: 0; 64 | background-color: transparent; 65 | } 66 | .nav__link { 67 | color: inherit; 68 | font-weight: var(--fw-bold); 69 | font-size: var(--fs-h2); 70 | text-decoration: none; 71 | } 72 | .nav__link:hover { 73 | color: var(--clr-accent); 74 | } 75 | .nav-toggle { 76 | padding: .5em; 77 | background: transparent; 78 | border: 0; 79 | cursor: pointer; 80 | position: absolute; 81 | right: 1em; 82 | top: 1em; 83 | z-index: 1000; 84 | outline: none; 85 | } 86 | .nav-open .nav { 87 | transform: translateX(0); 88 | } 89 | .nav-open .nav-toggle { 90 | position: fixed; 91 | } 92 | .nav-open .hamburger { 93 | transform: rotate(.625turn); 94 | } 95 | .nav-open .hamburger::before { 96 | transform: rotate(90deg) translateX(-6px); 97 | } 98 | .nav-open .hamburger::after { 99 | opacity: 0; 100 | } 101 | .hamburger { 102 | display: block; 103 | position: relative; 104 | } 105 | .hamburger, .hamburger::before, .hamburger::after { 106 | background: var(--clr-accent); 107 | width: 2em; 108 | height: 3px; 109 | border-radius: 1em; 110 | transition: transform 250ms ease-in-out; 111 | } 112 | .hamburger::before, .hamburger::after { 113 | content: ''; 114 | position: absolute; 115 | left: 0; 116 | right: 0; 117 | } 118 | .hamburger::before { 119 | top: 6px; 120 | } 121 | .hamburger::after { 122 | bottom: 6px; 123 | } 124 | label { 125 | position: relative; 126 | margin: 2px; 127 | } 128 | label::before { 129 | position: absolute; 130 | content: ""; 131 | top: 0; 132 | left: -3rem; 133 | width: 0.25rem; 134 | height: 100%; 135 | background: var(--menu-link-active-color); 136 | transition: 2s; 137 | margin-left: 5px; 138 | } 139 | label li { 140 | position: relative; 141 | background: linear-gradient(var(--menu-link-active-color) 0 100%) left/0 no-repeat; 142 | color: transparent; 143 | background-clip: text; 144 | -webkit-background-clip: text; 145 | transition: background-size 0.45s 0.04s; 146 | } 147 | label li::before { 148 | position: absolute; 149 | content: attr(data-text); 150 | z-index: -1; 151 | color: #fff; 152 | } 153 | label:nth-child(1) { 154 | --menu-link-active-color: rgb(252, 252, 128); 155 | } 156 | label:nth-child(2) { 157 | --menu-link-active-color: rgb(241, 100, 100); 158 | } 159 | label:nth-child(3) { 160 | --menu-link-active-color: rgb(243, 161, 10); 161 | } 162 | label:nth-child(4) { 163 | --menu-link-active-color: rgb(21, 185, 240); 164 | ; 165 | } 166 | label:hover::before { 167 | left: var(--speed); 168 | } 169 | .nav__item { 170 | color: #fff; 171 | } 172 | header { 173 | top: 0; 174 | position: absolute; 175 | width: 100%; 176 | } 177 | } -------------------------------------------------------------------------------- /Portfolio website/style/projects.css: -------------------------------------------------------------------------------- 1 | .card { 2 | height: 23rem; 3 | width: 21rem; 4 | margin: 1rem; 5 | box-shadow: 3px 2px 10px grey; 6 | color: #fff; 7 | } 8 | 9 | .card img { 10 | opacity: 0.5; 11 | transition: opacity 0.5s ease; 12 | } 13 | 14 | .card img:hover { 15 | opacity: 1; 16 | } 17 | 18 | .project-grid { 19 | min-height: 60vh; 20 | width: 100%; 21 | flex-wrap: wrap; 22 | display: flex; 23 | flex-direction: row; 24 | justify-content: center; 25 | align-items: center; 26 | text-align: center; 27 | } 28 | 29 | #projects h1 { 30 | text-align: center; 31 | margin: 50px auto 20px; 32 | color: #fff; 33 | text-transform: uppercase; 34 | } 35 | 36 | #projects img { 37 | width: 100%; 38 | border-bottom: 1px solid #55198b; 39 | height: 80%; 40 | } 41 | 42 | .project-links { 43 | display: flex; 44 | flex-direction: row; 45 | width: 100%; 46 | justify-content: space-evenly; 47 | align-items: center; 48 | } 49 | 50 | #projects { 51 | padding: 5%; 52 | } 53 | 54 | .icons, a { 55 | text-decoration: none; 56 | color: #fff; 57 | } 58 | 59 | i { 60 | transform: scale(0.6); 61 | transition: 0.5s linear; 62 | } 63 | i:hover { 64 | color: rgb(240, 240, 20); 65 | } -------------------------------------------------------------------------------- /Portfolio website/style/service.css: -------------------------------------------------------------------------------- 1 | #services h1 { 2 | text-align: center; 3 | margin: 50px auto 20px; 4 | color: #fff; 5 | text-transform: uppercase; 6 | } 7 | 8 | .main { 9 | width: 100%; 10 | min-height: 380px; 11 | text-align: center; 12 | position: relative; 13 | cursor: pointer; 14 | } 15 | 16 | .service { 17 | background: #111; 18 | padding: 30px; 19 | border-radius: 10px; 20 | position: absolute; 21 | bottom: 0; 22 | z-index: 1; 23 | box-shadow: 0 0 25px -5px rgb(253, 253, 253); 24 | transition: transform .8s; 25 | height: 405px; 26 | margin: 50px; 27 | color: #fff; 28 | } 29 | 30 | .service-logo { 31 | width: 130px; 32 | height: 130px; 33 | border-radius: 50%; 34 | margin: -90px auto 0; 35 | background: #111; 36 | border: 18px solid rgb(240, 240, 20); 37 | display: flex; 38 | justify-content: center; 39 | align-items: center; 40 | } 41 | 42 | .service h4 { 43 | height: 35px; 44 | width: 80%; 45 | margin: 50px auto; 46 | background: #111; 47 | position: relative; 48 | } 49 | 50 | .service h4::after, 51 | .service h4::before { 52 | content: ''; 53 | width: 40px; 54 | height: 30px; 55 | position: absolute; 56 | z-index: -1; 57 | } 58 | 59 | .service h4::after { 60 | background: linear-gradient(to right, #fff, rgb(240, 240, 20)); 61 | right: -5px; 62 | top: -5px; 63 | } 64 | 65 | .service h4::before { 66 | background: linear-gradient(to right, rgb(240, 240, 20), #fff); 67 | left: -5px; 68 | bottom: -5px; 69 | } 70 | 71 | .main:hover .service { 72 | transform: translateY(-40px); 73 | } 74 | 75 | .row { 76 | display: flex; 77 | justify-content: space-around; 78 | align-items: center; 79 | margin-top: 180px; 80 | } 81 | 82 | .service-colum { 83 | flex: 3; 84 | background: #111; 85 | } 86 | 87 | i { 88 | font-size: 50px; 89 | } 90 | 91 | @media (max-width: 800px) { 92 | #services h1 { 93 | margin: 50px auto -150px; 94 | } 95 | .row { 96 | display: block; 97 | } 98 | .main { 99 | min-height: 500px; 100 | } 101 | .service { 102 | margin: 15px; 103 | height: 424px; 104 | } 105 | .service-colum { 106 | margin-top: 40px; 107 | } 108 | } -------------------------------------------------------------------------------- /Portfolio website/style/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | :root { 6 | --ff-primary: 'Source Sans Pro', sans-serif; 7 | --fw-bold: 600; 8 | --clr-light: rgb(240, 240, 20); 9 | --clr-dark: #303030; 10 | --clr-accent: #16e0bd; 11 | --fs-h2: 1.25rem; 12 | --fs-body: 1rem; 13 | --speed: 180px; 14 | } 15 | 16 | @media (max-width: 800px) { 17 | :root { 18 | --fs-h2: 1.75rem; 19 | --fs-body: 1.125rem; 20 | --speed: 300px; 21 | --fw-bold: 900; 22 | } 23 | } 24 | 25 | * { 26 | margin: 0; 27 | padding: 0; 28 | box-sizing: border-box; 29 | } 30 | 31 | body { 32 | background: #111111; 33 | color: var(--clr-dark); 34 | margin: 0; 35 | font-family: var(--ff-primary); 36 | font-size: var(--fs-body); 37 | line-height: 1.6; 38 | user-select: none; 39 | } -------------------------------------------------------------------------------- /Portfolio website/style/welcome.css: -------------------------------------------------------------------------------- 1 | .welcome-section { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | align-items: center; 6 | width: 100%; 7 | height: 100vh; 8 | padding: 5%; 9 | } 10 | 11 | .welcomecontainer { 12 | display: flex; 13 | justify-content: space-around; 14 | align-items: center; 15 | width: 100%; 16 | } 17 | 18 | .hello { 19 | flex: 0 0 50%; 20 | max-width: 50%; 21 | } 22 | 23 | .hello h1 { 24 | font-family: Verdana, Geneva, Tahoma, sans-serif; 25 | color: var(--clr-light); 26 | } 27 | 28 | .hello p { 29 | color: var(--clr-accent); 30 | } 31 | 32 | .profile { 33 | max-width: 50%; 34 | } 35 | 36 | .profile img { 37 | border-radius: 50%; 38 | right: 50%; 39 | } 40 | 41 | /* css for leran more button */ 42 | 43 | .draw-border { 44 | box-shadow: inset 0 0 0 4px var(--clr-accent); 45 | color: var(--clr-accent); 46 | transition: color 0.25s; 47 | position: relative; 48 | } 49 | 50 | .draw-border::before, .draw-border::after { 51 | border: 0 solid transparent; 52 | box-sizing: border-box; 53 | content: ""; 54 | pointer-events: none; 55 | position: absolute; 56 | width: 0; 57 | height: 0; 58 | bottom: 0; 59 | right: 0; 60 | } 61 | 62 | .draw-border::before { 63 | border-bottom-width: 4px; 64 | border-left-width: 4px; 65 | } 66 | 67 | .draw-border::after { 68 | border-top-width: 4px; 69 | border-right-width: 4px; 70 | } 71 | 72 | .draw-border:hover { 73 | color: rgb(192, 226, 97); 74 | } 75 | 76 | .draw-border:hover::before, .draw-border:hover::after { 77 | border-color: yellow; 78 | transition: border-color 0s, width 0.25s, height 0.25s; 79 | width: 100%; 80 | height: 100%; 81 | border-bottom-left-radius: 15px; 82 | border-bottom-right-radius: 15px; 83 | border-top-right-radius: 15px; 84 | border-top-left-radius: 15px; 85 | } 86 | 87 | .draw-border:hover::before { 88 | transition-delay: 0s, 0s, 0.25s; 89 | } 90 | 91 | .draw-border:hover::after { 92 | transition-delay: 0s, 0.25s, 0s; 93 | } 94 | 95 | .btn { 96 | background: none; 97 | border: none; 98 | outline: none; 99 | cursor: pointer; 100 | line-height: 1.5; 101 | padding: 1em 1em; 102 | letter-spacing: 0.05rem; 103 | font: 700 1.2rem 'Roboto Slab', sans-serif; 104 | margin: -5px 0 0 -2px; 105 | border-bottom-left-radius: 15px; 106 | border-bottom-right-radius: 15px; 107 | border-top-right-radius: 15px; 108 | border-top-left-radius: 15px; 109 | } 110 | 111 | .btn a { 112 | text-decoration: none; 113 | color: ; 114 | } 115 | 116 | @media (max-width: 800px) { 117 | .welcomecontainer { 118 | display: flex; 119 | justify-content: unset; 120 | flex-direction: column; 121 | align-items: center; 122 | width: 100%; 123 | } 124 | .hello { 125 | max-width: 90%; 126 | position: relative; 127 | text-align: center; 128 | } 129 | .profile { 130 | max-width: 100%; 131 | margin-top: 50px; 132 | } 133 | .profile img { 134 | width: 250px; 135 | height: 250px; 136 | } 137 | } -------------------------------------------------------------------------------- /Product Landing Page/cart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Product Landing Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 273 | 274 | 275 | 276 |
277 | 295 | 296 |
297 |
298 |
299 |

300 | 100% Cashback for new user 301 |

302 |
303 |

304 | get 100% cashback on your first purchase this is valid for only for new user for Use code - NEW100 to avail this offer sign up now 305 |

306 |
307 | 309 | 310 |
311 |
312 | 313 |
314 | 315 |
316 |
317 | 318 | 319 |
320 |

Services

321 |
322 |
323 | 324 |
325 |
326 |
327 | 328 |

SLEEP BETTER

329 |

⚡ Blue light impedes the brain production of melatonin, resulting in sleep disorders. 330 |

331 |
332 |
333 |
334 | 335 |
336 |
337 |
338 | 339 |

WORK BETTER

340 |

⚡ Digital eye strain negatively affects the output, and can lead to less 341 | productivity.

342 |
343 |
344 |
345 | 346 |
347 |
348 |
349 | 350 |

SEE BETTER

351 |

⚡ Blue wavelengths can provoke headaches, sore eyes and blurred vision.

352 |
353 |
354 |
355 |
356 |
357 |
358 | 359 |
360 | 363 |
364 |
365 | 366 | 367 | 368 | 369 | -------------------------------------------------------------------------------- /Product Landing Page/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Freecodecamp-responsive-web-design-projects/7f672f02355b6dc79121a90fbf352a4c0685ca0c/Product Landing Page/logo.png -------------------------------------------------------------------------------- /Product Landing Page/product.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Freecodecamp-responsive-web-design-projects/7f672f02355b6dc79121a90fbf352a4c0685ca0c/Product Landing Page/product.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | DEMO :- 👀 3 | 4 | - Tribute page :- https://codepen.io/smtharijan/pen/eYdVjPQ 5 | - Survey form :- https://codepen.io/smtharijan/pen/mdrXGOw 6 | - Documentation page :- https://codepen.io/smtharijan/pen/PoGQdWE 7 | - Landing page :- https://codepen.io/smtharijan/full/OJRvyEb 8 | - Portfolio page :- https://codepen.io/smtharijan/full/VwKXemK 9 | 10 | 11 | Certificate of Completion 12 | 13 | ![image](https://user-images.githubusercontent.com/65243909/119261624-d895a700-bbf5-11eb-89e7-66dd5e251ccb.png) 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Survey form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 144 | 145 | 146 | 147 | 148 |
149 |
150 |

Developers Survey Form

151 |

Thank you for taking the time to help us know the about world wide developers

152 |
153 |
154 | 155 |
156 | 157 | 158 |
159 |
160 | 161 | 162 |
163 |
164 | 165 | 166 |
167 | 168 |
169 |

Nationality :-

170 | 178 |
179 |
180 |

Developer :-

181 | 182 | 183 | 184 |
185 |
186 |

Qualification :-

187 | 188 | 189 | 190 |
191 |
192 |

Describe about you :-

193 | 194 |
195 |
196 | 197 |
198 |
199 |
200 | 201 | 202 | 203 | 204 | -------------------------------------------------------------------------------- /Tribute page/drapj.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Freecodecamp-responsive-web-design-projects/7f672f02355b6dc79121a90fbf352a4c0685ca0c/Tribute page/drapj.png -------------------------------------------------------------------------------- /Tribute page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 122 | 123 | 124 | 125 |
126 |
127 |

Dr. APJ Abdul Kalam

128 |

Missile Man & president of India

129 |
130 |
131 | 133 |
A.P.J. Abdul Kalam, in full Avul Pakir Jainulabdeen Abdul 134 | Kalam, 135 | (born October 15, 1931, Rameswaram, India—died July 27, 2015, Shillong), Indian scientist 136 | and politician who played a 137 | leading role in the development of India’s missile and nuclear weapons programs. 138 | He was president of India from 2002 to 2007. 139 |
140 |
141 |
142 | 143 |
144 |
145 | What is A.P.J. Abdul Kalam known for? 146 |

147 | A.P.J. Abdul Kalam served as president of the Republic of India from 2002 to 2007. As president, 148 | Kalam promoted the advancement of the national nuclear weapons program. Kalam also devised a 149 | 20-year action plan to achieve economic growth through technological development in India. 150 |

151 |
152 | 153 |
154 | What organizations was A.P.J. Abdul Kalam associated with? 155 |

156 | A.P.J. Abdul Kalam attended the Madras Institute of Technology, where he received a degree in 157 | aeronautical engineering in 1960. After graduation he joined the Defence Research and 158 | Development Organisation (DRDO)—an Indian military research institute—and later the Indian Space 159 | Research Organisation (ISRO). Kalam’s associations were not limited to research organizations: 160 | he was also associated with political groups, such as the National Democratic Alliance (NDA). 161 |

162 |
163 |

164 | Read more about "Dr. A. P. J. Abdul Kalam on " 165 | Wikipedia. 167 |

168 |
169 |
170 |
171 | 172 | 173 | 174 | --------------------------------------------------------------------------------