├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── custom.md ├── 2.1 Web Dev Syllabus.pdf ├── 5.1 12 Rules to Learn to Code eBook [Updated 26.11.18].pdf ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── Learning Resources ├── CSS │ ├── SAMPLE PAGE - I LOVE EGGS │ │ ├── README.md │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── CSS-Layout : DISPLAY │ │ ├── README.md │ │ ├── css │ │ │ └── style.css │ │ └── index.html │ ├── Position-Property │ │ ├── ABSOLUTE │ │ │ ├── css │ │ │ │ └── style.css │ │ │ └── index.html │ │ ├── FIXED │ │ │ ├── css │ │ │ │ └── style.css │ │ │ └── index.html │ │ ├── RELATIVE │ │ │ ├── css │ │ │ │ └── style.css │ │ │ └── index.html │ │ └── Readme.md │ ├── README.md │ ├── THE BOX MODEL OF WEBSITE STYLING │ │ ├── css │ │ │ └── style.css │ │ ├── favicon.ico │ │ └── index.html │ ├── css-1.png │ └── css-2.png ├── Git │ ├── README.md │ ├── git-1.png │ ├── git-2.png │ └── git-cheat-sheet-education.pdf └── HTML │ ├── HTML FORM.html │ ├── HTML boilerplate.html │ ├── HTML tables.html │ ├── HTML-1.png │ ├── HTML-2.png │ ├── README.md │ └── personal site.html ├── Projects ├── Personal-Portfolio-Sample-Projects │ ├── HTML - Personal Site │ │ ├── README.md │ │ ├── contact.html │ │ ├── hobbies.html │ │ ├── image.png │ │ ├── images │ │ │ ├── DSC_0943.jpg │ │ │ ├── Earth.gif │ │ │ ├── books.jpg │ │ │ ├── footer.png │ │ │ └── hanshul.png │ │ └── index.html │ ├── Personal-site(HTML-CSS) │ │ ├── README.md │ │ ├── css │ │ │ └── style.css │ │ ├── favicon.ico │ │ ├── image.png │ │ ├── images │ │ │ ├── chillies.png │ │ │ ├── cloud.png │ │ │ ├── computer.png │ │ │ ├── languages image.png │ │ │ ├── mountain.png │ │ │ ├── pencil.png │ │ │ └── user-image.png │ │ └── index.html │ └── portfolio │ │ ├── CNAME │ │ ├── README.md │ │ ├── css │ │ ├── skins │ │ │ ├── blue.css │ │ │ ├── green.css │ │ │ ├── orange.css │ │ │ ├── pink.css │ │ │ └── yellow.css │ │ ├── style.css │ │ └── styleSwitcher.css │ │ ├── favicon.ico │ │ ├── images │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── about.png │ │ ├── blog │ │ │ └── 1.jpeg │ │ └── portfolio │ │ │ ├── 1.png │ │ │ ├── 2.jpg │ │ │ ├── 3.jpg │ │ │ └── 4.png │ │ ├── index.html │ │ └── js │ │ ├── ityped.min.js │ │ ├── script.js │ │ └── styleSwitcher.js ├── TinDog │ ├── README.md │ ├── css │ │ └── styles.css │ ├── images │ │ ├── TechCrunch.png │ │ ├── bizinsider.png │ │ ├── dog-img.jpg │ │ ├── iphone6.png │ │ ├── lady-img.jpg │ │ ├── mashable.png │ │ └── tnw.png │ ├── index.html │ └── tindog.png ├── connect-four │ ├── README.md │ ├── css │ │ └── main.css │ ├── index.html │ └── js │ │ └── main.js ├── drink-water │ ├── README.md │ ├── drink-water.jpg │ ├── index.html │ ├── script.js │ └── style.css └── orderkaro │ ├── README.md │ ├── index.html │ ├── resources │ ├── css │ │ ├── img │ │ │ ├── back-customers-min.jpg │ │ │ ├── back-customers.jpg │ │ │ ├── hero-min.jpg │ │ │ └── hero.jpg │ │ ├── queries.css │ │ └── styles.css │ ├── img │ │ ├── 1.jpg │ │ ├── 2.jpg │ │ ├── 3.jpg │ │ ├── 4.jpg │ │ ├── 5.jpg │ │ ├── 6.jpg │ │ ├── 7.jpg │ │ ├── 8.jpg │ │ ├── Order Karo-logos_black.png │ │ ├── Order Karo-logos_white.png │ │ ├── Rishikesh.jpg │ │ ├── app-iphone.png │ │ ├── back-customers.jpg │ │ ├── berlin.jpg │ │ ├── customer-1.jpeg │ │ ├── customer-2.jpg │ │ ├── customer-3.jpg │ │ ├── download-app-android.png │ │ ├── download-app.svg │ │ ├── hero.jpg │ │ ├── lisbon-3.jpg │ │ ├── london.jpg │ │ ├── paonta.jpg │ │ ├── san-francisco.jpg │ │ ├── shimla.jpeg │ │ └── solan.jpg │ └── js │ │ └── scripts.js │ └── vendors │ ├── css │ ├── animate.css │ ├── grid.css │ ├── ionicons.min.css │ └── node_modules │ │ └── normalize.css │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── normalize.css │ │ └── package.json │ ├── fonts │ ├── ionicons.eot │ ├── ionicons.svg │ ├── ionicons.ttf │ └── ionicons.woff │ └── js │ ├── gmaps.js │ └── jquery.waypoints.min.js ├── README.md └── Web-Dev.jpg /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /2.1 Web Dev Syllabus.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/2.1 Web Dev Syllabus.pdf -------------------------------------------------------------------------------- /5.1 12 Rules to Learn to Code eBook [Updated 26.11.18].pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/5.1 12 Rules to Learn to Code eBook [Updated 26.11.18].pdf -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | hanshul.chandel@gmail.com. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 |

HacktoberFest 2021 :fire:

2 | 3 |

4 | 5 | 6 |

7 | 8 | 9 | >- HacktoberFest is back again. Showcase your coding skills by creating PRs and contributing to the Open Source. 10 | 11 | #### [hacktoberfest 2021](https://hacktoberfest.digitalocean.com/) 12 | 13 | 14 | ### Let's Contribute :+1: 15 | - **Step 1** - Fork this repository. 16 | - **Step 2** - Clone the repository to your local machine. 17 | - **Step 3** - Resolve the bugs, mentions provided in the Issues section of the repository. *Also add a description of what changes you have done*. 18 | - **Step 4** - Add the changes to your repository. 19 | - **Step 5** - Create a PULL Request. And that's all. 20 | - **NOTE** - Please start the Directoryname with the project name. For eg if you are submitting a project on Personal Portfolio so name directory as **(Yourname) Personal-Portfolio**. 21 | 22 | ### What you can contribute in this repo? :punch: 23 | - You can add your own Web-Development Projects in the main directory. 24 | - There are various topics. ***You can contribute in them*** 25 | - You can contribute some **Learning Resources** in the ***Readme.md*** File. 26 | - You can modify previous Projects if you feel like your solution was better ***Time or Space complexity.*** 27 | 28 | 29 | ##### Let's Contribute :smiley: 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Hanshul Chandel 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 | -------------------------------------------------------------------------------- /Learning Resources/CSS/ SAMPLE PAGE - I LOVE EGGS/README.md: -------------------------------------------------------------------------------- 1 | # CSS - Cascading Style Sheet 2 | 3 | ## WHY CSS WAS CREATED? 4 | - Developers wanted to style up their website making it look the way they wanted to but they are limited by the tools available in html. 5 | 6 | ## CSS WRITING FORMAT 7 | - selector { propety : value;} 8 | 9 | `Selector is who ? ` 10 | 11 | For ex -> `,` basically it is the thing you want to style. 12 | 13 | `Property is what ?` 14 | 15 | For ex -> `background-color,color,font,text-property etc.` what you want to style. 16 | 17 | `Value is how ?` 18 | 19 | For ex :-
20 |
21 | 22 | ## TAG SELECTOR 23 | 24 | h1 {
25 | color: red;
26 | font-size: 200px;
27 | }
28 | 29 | img:hover {
30 | background-color: gold;
31 | }
32 |

33 | 34 | ## CLASS SELECTOR 35 | 36 | 37 | .egg {
38 | background-color: green;
39 | }
40 | 41 | .broccoli {
42 | background-color: red;
43 | }
44 | .circular{
45 | border-radius: 100%;
46 | }
47 |
48 | 49 | ## ID SELECTOR 50 | 51 | #heading {
52 | color: blue;
53 | }
54 | -------------------------------------------------------------------------------- /Learning Resources/CSS/ SAMPLE PAGE - I LOVE EGGS/css/style.css: -------------------------------------------------------------------------------- 1 | /************************************* TAG SELECTOR *********************************/ 2 | 3 | h1{ 4 | color: red; 5 | font-size: 200px; 6 | } 7 | 8 | img:hover{ 9 | background-color: gold; 10 | } 11 | 12 | 13 | /************************************* CLASS SELECTOR*********************************/ 14 | 15 | 16 | .egg { 17 | background-color: green; 18 | } 19 | 20 | .broccoli { 21 | background-color: red; 22 | } 23 | .circular{ 24 | border-radius: 100%; 25 | } 26 | 27 | 28 | /************************************* ID SELECTOR *********************************/ 29 | 30 | #heading { 31 | color: blue; 32 | } 33 | -------------------------------------------------------------------------------- /Learning Resources/CSS/ SAMPLE PAGE - I LOVE EGGS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bacon Fansite 7 | 8 | 9 | 10 | 11 |

I Love Egg

12 |

EGG,EGG,EGG,EGG,EGG,EGG

13 |

EGG,EGG,EGG,EGG,EGG,EGG

14 |

EGG,EGG,EGG,EGG,EGG,EGG

15 | egg-img 16 | broccoli-img 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Learning Resources/CSS/CSS-Layout : DISPLAY/README.md: -------------------------------------------------------------------------------- 1 | # CSS DISPLAY PROPERTY 2 | 3 | ## Has 4 different values 4 | 5 | - block 6 | - inline 7 | - inline-block 8 | - none 9 |
10 | 11 | ### BLOCK-LEVEL ELEMENT 12 | 13 | - A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). 14 | 15 | 16 | 17 | #### COMMON BLOCK ELEMENTS 18 | - Paragraph `

` 19 | - Header `

through

` 20 | - Division `
` 21 | - List and List item `
    ,
      ,
    • ` 22 | - Form `
      ` 23 | - Footer `
      ` 24 | - Section `
      ` 25 | 26 | ##### EXAMPLE :- 27 | 28 | h1 {
      29 | display: block;
      30 | background: red;
      31 | } 32 |
      33 | 34 | ### INLINE ELEMENT 35 | 36 | - An inline element does not start on a new line and only takes up as much width as necessary. 37 | 38 | #### COMMON INLILNE ELEMENTS 39 | - Spans ` ` 40 | - Images `` 41 | - Anchors ` ` 42 | 43 | ##### EXAMPLE :- 44 | img {
      45 | display: inline;
      46 | }
      47 | 48 |
      49 | 50 | ### INLINE-BLOCK ELEMENT 51 | 52 | - Compared to `display: inline`, the major difference is that `display: inline-block` allows to set a width and height on the element. 53 | - Also, with `display: inline-block`, the top and bottom margins/paddings are respected, but with `display: inline` they are not. 54 | - Compared to` display: block`, the major difference is that` display: inline-block` does not add a line-break after the element, so the element can sit next to other elements. 55 | 56 | #### EXAMPLE :- 57 | div {
      58 | display: inline-block;
      59 | background: grey;
      60 | } 61 |
      62 | 63 | ### NONE ELEMENT 64 | 65 | - `display: none;` is commonly used with JavaScript to hide and show elements without deleting and recreating them. 66 | - The ` 22 | 23 | 24 | 27 | 30 | 33 | 34 | 35 | 36 |
      37 |
      38 | 39 | 59 | 60 | 61 |
      62 |
      63 |

      Meet new and interesting dogs nearby.

      64 | 67 | 70 |
      71 |
      72 | iphone-mockup 73 |
      74 |
      75 |
      76 |
      77 | 78 | 79 | 80 |
      81 |
      82 |
      83 | 84 |

      Easy to use.

      85 |

      So easy to use, even your dog could do it.

      86 |
      87 |
      88 | 89 |

      Elite Clientele

      90 |

      We have all the dogs, the greatest dogs.

      91 |
      92 |
      93 | 94 |

      Guaranteed to work.

      95 |

      Find the love of your dog's life or your money back.

      96 |
      97 |
      98 |
      99 | 100 | 101 | 102 |
      103 | 131 |
      132 | 133 | 134 |
      135 | tc-logo 136 | tnw-logo 137 | biz-insider-logo 138 | mashable-logo 139 |
      140 | 141 | 142 |
      143 |

      A Plan for Every Dog's Needs

      144 |

      Simple and affordable price plans for your and your dog.

      145 | 146 |
      147 |
      148 |
      149 |
      150 |

      Chihuahua

      151 |
      152 |
      153 |

      Free

      154 |

      5 Matches Per Day

      155 |

      10 Messages Per Day

      156 |

      Unlimited App Usage

      157 | 158 |
      159 |
      160 |
      161 | 162 |
      163 |
      164 |
      165 |

      Labrador

      166 |
      167 |
      168 |

      ₹ 3636.31 / mo

      169 |

      Unlimited Matches

      170 |

      Unlimited Messages

      171 |

      Unlimited App Usage

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

      Mastiff

      181 |
      182 |
      183 |

      ₹ 7346.84 / mo

      184 |

      Priority Listing

      185 |

      Unlimited Matches

      186 |

      Unlimited Messages

      187 |

      Unlimited App Usage

      188 | 189 |
      190 |
      191 |
      192 |
      193 |
194 | 195 | 196 | 197 | 198 |
199 |

Find the True Love of Your Dog's Life Today!

200 | 203 | 206 | 207 |
208 | 209 | 210 | 211 | 229 | 230 | 231 | 232 | -------------------------------------------------------------------------------- /Projects/TinDog /tindog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/TinDog /tindog.png -------------------------------------------------------------------------------- /Projects/connect-four/README.md: -------------------------------------------------------------------------------- 1 | # Connect Four! 2 | 3 | ## Play: https://countchrisdo.github.io/connect-four/ 4 | 5 | Local 2-Player *Connect Four* broswer game 6 | 7 | ![connectfour](https://user-images.githubusercontent.com/7240924/121605143-de72f100-ca19-11eb-9197-8571d9874ec4.gif) 8 | 9 | ## Technologies used: 10 | HTML 11 | CSS 12 | JavaScript 13 | 14 | ## Gameplay 15 | ### Objective 16 | *Connect four* of your game pieces vertically, horizontally, or diagonally before the other player does so. 17 | 18 | ### How to play? 19 | [Click here](https://countchrisdo.github.io/connect-four) 20 | At each turn, player will drop a game piece in one of the seven columns by clicking on the top of the chosen column. 21 | 22 | ### More info 23 | Read [Wikipedia page on Connect Four](https://en.wikipedia.org/wiki/Connect_Four) 24 | -------------------------------------------------------------------------------- /Projects/connect-four/css/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | background-image: url("https://wallpaperaccess.com/full/1853779.jpg"); 4 | flex-direction: column; 5 | justify-content: center; 6 | align-items: center; 7 | } 8 | 9 | main { 10 | border: black .5vh solid; 11 | } 12 | 13 | h1 { 14 | text-align: center; 15 | color: whitesmoke; 16 | font-size: 5.5vh; 17 | -webkit-text-stroke: .25vh black; 18 | background-color: rgba(0, 0, 0, 0.25); 19 | } 20 | 21 | #gameboard { 22 | display: grid; 23 | grid-template-rows: repeat(6, 10vmin); 24 | grid-template-columns: repeat(7, 10vmin); 25 | gap: 1vmin; 26 | background-color: #95fff7; 27 | height: 66.5vmin; 28 | width: 78vmin; 29 | justify-content: center; 30 | } 31 | 32 | #gameboard > div { 33 | border-radius: 50%; 34 | border: black .5vh solid; 35 | background-color: whitesmoke; 36 | align-content: center; 37 | cursor:not-allowed; 38 | } 39 | 40 | #choiceButtons { 41 | display: grid; 42 | background-color: #95fff7; 43 | grid-template-columns: repeat(7, 10vmin); 44 | padding-bottom: 2vmin; 45 | padding-top: 1.5vmin; 46 | gap: 1vmin; 47 | width: 78vmin; 48 | justify-content: center; 49 | cursor: pointer; 50 | } 51 | 52 | #choiceButtons > div { 53 | border: .5vmin solid black; 54 | background-color: whitesmoke; 55 | align-content: center; 56 | height: 5vmin; 57 | cursor: pointer; 58 | } 59 | 60 | #choiceButtons > div:hover { 61 | background-color: #0f70b7; 62 | } 63 | 64 | #replay { 65 | font-size: 2vmin; 66 | background-repeat: no-repeat; 67 | background-position: 50% 90; 68 | font-weight: bold; 69 | padding: 2vmin; 70 | margin: 2vmin; 71 | border: .3vmin solid grey; 72 | color: grey; 73 | border-radius: 2vmin; 74 | cursor: pointer; 75 | } 76 | 77 | #replay:hover { 78 | background-color: rgb(47, 48, 48); 79 | color: black; 80 | } 81 | 82 | @keyframes textGlow { 83 | 0% {text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px} 84 | 5% {text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px} 85 | 10% {text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px} 86 | 15% {text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px} 87 | 20% {text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px} 88 | 25% {text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px} 89 | 30% {text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px} 90 | 35% {text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px} 91 | 40% {text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px} 92 | 45% {text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px} 93 | 50% {text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px} 94 | 55% {text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px} 95 | 60% {text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px} 96 | 65% {text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px} 97 | 70% {text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px} 98 | 75% {text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px} 99 | 80% {text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px} 100 | 85% {text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px} 101 | 90% {text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px} 102 | 95% {text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px} 103 | 100% {text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px} 104 | } 105 | @keyframes rotate { 106 | 0% {margin-right: 0px;transform: rotate(0deg)} 107 | 5% {margin-right: 1px;transform: rotate(1deg)} 108 | 10% {margin-right: 2px;transform: rotate(2deg)} 109 | 15% {margin-right: 3px;transform: rotate(3deg)} 110 | 20% {margin-right: 4px;transform: rotate(4deg)} 111 | 25% {margin-right: 5px;transform: rotate(5deg)} 112 | 30% {margin-right: 4px;transform: rotate(4deg)} 113 | 35% {margin-right: 3px;transform: rotate(3deg)} 114 | 40% {margin-right: 2px;transform: rotate(2deg)} 115 | 45% {margin-right: 1px;transform: rotate(1deg)} 116 | 50% {margin-right: 0px;transform: rotate(0deg)} 117 | 55% {margin-left: 1px;transform: rotate(-1deg)} 118 | 60% {margin-left: 2px;transform: rotate(-2deg)} 119 | 65% {margin-left: 3px;transform: rotate(-3deg)} 120 | 70% {margin-left: 4px;transform: rotate(-4deg)} 121 | 75% {margin-left: 5px;transform: rotate(-5deg)} 122 | 80% {margin-left: 4px;transform: rotate(-4deg)} 123 | 85% {margin-left: 3px;transform: rotate(-3deg)} 124 | 90% {margin-left: 2px;transform: rotate(-2deg)} 125 | 95% {margin-left: 1px;transform: rotate(-1deg)} 126 | 100% {margin-right: 0px;transform: rotate(0deg)} 127 | } 128 | 129 | .glow { 130 | animation: textGlow 1.6s infinite, rotate 3.2s infinite; 131 | text-align: center; 132 | } 133 | 134 | /* 1000px and below */ 135 | @media screen and (max-width: 800px) { 136 | aside { 137 | display: none !important; 138 | } 139 | } 140 | 141 | /* 1000px and below */ 142 | @media screen and (max-width: 1000px) { 143 | aside { 144 | position: absolute; 145 | padding: 1vh; 146 | bottom: 20vmin; 147 | right: 2vmin; 148 | width: 10vmin; 149 | text-align: center; 150 | background-color: rgba(0, 0, 0, 0.25); 151 | } 152 | } 153 | 154 | /* 1000px and above */ 155 | @media screen and (min-width: 1000px) { 156 | aside { 157 | position:fixed; 158 | bottom: 30vmin; 159 | right: 10vmin; 160 | text-align: center; 161 | } 162 | 163 | aside h2 { 164 | background-color: rgba(0, 0, 0, 0.25); 165 | font-size: 10vh; 166 | } 167 | 168 | aside img { 169 | display: none; 170 | } 171 | } 172 | 173 | footer { 174 | text-align: center; 175 | } 176 | 177 | .pink { 178 | color: pink; 179 | -webkit-text-stroke: .1vh black; 180 | } 181 | 182 | .black { 183 | color: black; 184 | -webkit-text-stroke: .05vh whitesmoke; 185 | } -------------------------------------------------------------------------------- /Projects/connect-four/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Connect Four 10 | 11 | 12 |

JS Error

13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 | 81 |
82 | 83 |
84 |
85 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /Projects/connect-four/js/main.js: -------------------------------------------------------------------------------- 1 | /*----- constants -----*/ 2 | const colors = { 3 | '1' : "#ffc2e2", //pink 4 | '-1' : "black", //black 5 | '0' : "#f7fcff" //white 6 | } 7 | 8 | const TOTALTURNS = 42; 9 | 10 | /*----- app's state (variables) -----*/ 11 | let testVar = 1; 12 | let board; 13 | let turnsTaken = 0; 14 | let playerTurn; // 1, -1 15 | let winner; // null, 1, -1, "T" 16 | let winc1 = 0; //pink win count 17 | let winc2 = 0; //black win count 18 | 19 | /*----- cached element references -----*/ 20 | const choiceEl = [...document.querySelectorAll("#choiceButtons > div")]; 21 | const replayEl = document.getElementById("replay"); 22 | const headerEl = document.getElementById("header"); 23 | const pinkEl = document.querySelector(".pink"); 24 | const blackEl = document.querySelector(".black"); 25 | const audio = document.getElementById('clack'); 26 | audio.volume = 0.5; 27 | const winnerSound = document.getElementById("winner"); 28 | 29 | /*----- event listeners -----*/ 30 | document.getElementById("choiceButtons").addEventListener("click", handleMove); 31 | document.getElementById("replay").addEventListener("click", init); 32 | 33 | // /*----- functions -----*/ 34 | init(); 35 | function init() { 36 | 37 | //rng to find 1st player 38 | const randomIdx = Math.floor(Math.random() * 2); 39 | if (randomIdx === 0) { 40 | playerTurn = 1 41 | } else { 42 | playerTurn = -1 43 | } 44 | 45 | winnerSound.pause(); 46 | headerEl.classList.remove("glow"); 47 | turnsTaken = 0; 48 | winner = null; 49 | board = [ 50 | [0, 0, 0, 0, 0, 0], // Column 0 51 | [0, 0, 0, 0, 0, 0], // Column 1 52 | [0, 0, 0, 0, 0, 0], // Column 2 53 | [0, 0, 0, 0, 0, 0], // Column 3 54 | [0, 0, 0, 0, 0, 0], // Column 4 55 | [0, 0, 0, 0, 0, 0], // Column 5 56 | [0, 0, 0, 0, 0, 0], // Column 6 57 | ]; 58 | render(); 59 | } 60 | 61 | function render() { 62 | // itterate over each column in board 63 | board.forEach((column, columnidx) => { 64 | // itterate over each cell in column 65 | column.forEach((cell, cellidx) => { 66 | // find specific cell using columnidx and cellidx 67 | let div = document.getElementById(`c${columnidx}r${cellidx}`); 68 | div.style.backgroundColor = colors[cell]; 69 | }); 70 | //if column full make button invisible 71 | choiceEl[columnidx].style.visibility = column.includes(0) ? "visible" : "hidden"; 72 | }); 73 | 74 | //render header message 75 | if (winner === 'T') { 76 | header.innerText = "It's a Tie!!!"; 77 | } else if (winner) { 78 | winnerSound.play(); 79 | replayEl.innerText = "Play Again"; 80 | headerEl.classList.add("glow"); 81 | if (winner === 1) { 82 | ++winc1; 83 | headerEl.innerText = `Winner Winner, Chicken Dinner: Pink`; 84 | pinkEl.innerText = `${winc1}`; 85 | } else if (winner === -1) { 86 | ++winc2; 87 | headerEl.innerText = `Winner Winner, Chicken Dinner: Black`; 88 | blackEl.innerText = `${winc2}`; 89 | } 90 | } else { 91 | headerEl.innerHTML = `Player ${playerTurn === 1 ? 'PINK' : 'BLACK'}'s turn!`; 92 | replayEl.innerText = "Restart Game"; 93 | } 94 | } 95 | 96 | function handleMove(evt) { 97 | // update all impacted state 98 | const colIdx = choiceEl.indexOf(evt.target); 99 | 100 | if (colIdx === -1 || winner) return; 101 | const colArr = board[colIdx]; 102 | const rowIdx = colArr.indexOf(0); 103 | if (rowIdx === -1) return; 104 | 105 | colArr[rowIdx] = playerTurn; 106 | turnsTaken++; 107 | playerTurn = playerTurn * -1; 108 | 109 | winner = getWinner(colIdx, rowIdx); 110 | render(); 111 | audio.play(); 112 | } 113 | 114 | //Win logic 115 | function getWinner() { 116 | //check for tie 117 | if (turnsTaken === 42) return winner = "T"; 118 | 119 | //check every collumn for a winner, if so return the winner 120 | for (let colIdx = 0; colIdx <= 6; colIdx++) { 121 | winner = checkCol(colIdx); 122 | if (winner) break; 123 | } 124 | return winner; 125 | } 126 | 127 | //check Col at it's index within the board 2d array 128 | function checkCol(colIdx) { 129 | const colArr = board[colIdx]; 130 | // for every row in the col: check for winner and set var winner = winning color's number value 131 | for (let rowIdx = 0; rowIdx < colArr.length; rowIdx++) { 132 | let winner = checkVert(colArr, rowIdx) || checkHori(colIdx, rowIdx) || 133 | checkDiag(colIdx, rowIdx, 1) || checkDiag(colIdx, rowIdx, -1); 134 | if (winner) return winner; 135 | } 136 | return null; 137 | } 138 | 139 | function checkDiag(colIdx, rowIdx, dir) { 140 | // Boundary check 141 | if (dir > 0 && colIdx > 3 || dir > 0 && rowIdx > 2) return null; 142 | if (dir < 0 && colIdx > 3 || dir < 0 && rowIdx < 3) return null; 143 | 144 | if (Math.abs(board[colIdx][rowIdx] + board[colIdx + 1][rowIdx + dir] + 145 | board[colIdx + 2][rowIdx + dir * 2] + board[colIdx + 3][rowIdx + dir * 3]) === 4) { 146 | return board[colIdx][rowIdx]; 147 | } else { 148 | return null; 149 | } 150 | } 151 | 152 | function checkHori(colIdx, rowIdx) { 153 | // Boundary check 154 | if (colIdx > 3) return null; 155 | 156 | //add the value of all spaces to the right of colIdx and look for +4 or -4 157 | //then return the value of +4 using Math.abs to get a winner 158 | if (Math.abs(board[colIdx][rowIdx] + board[colIdx + 1][rowIdx] + 159 | board[colIdx + 2][rowIdx] + board[colIdx + 3][rowIdx]) === 4) { 160 | return board[colIdx][rowIdx]; 161 | } else { 162 | return null; 163 | } 164 | } 165 | 166 | function checkVert(colArr, rowIdx) { 167 | // Boundary check 168 | if (rowIdx > 2) return null; 169 | 170 | //add the value of all spaces above row indx and look for +4 or -4 171 | //then return the value of +4 using Math.abs to get a winner 172 | if (Math.abs(colArr[rowIdx] + colArr[rowIdx + 1] + colArr[rowIdx + 2] + colArr[rowIdx + 3]) === 4) { 173 | return colArr[rowIdx]; 174 | } else { 175 | return null; 176 | } 177 | } -------------------------------------------------------------------------------- /Projects/drink-water/README.md: -------------------------------------------------------------------------------- 1 |

PROJECT'S SAMPLE SCREENSHOTS

2 |
3 | 4 | WEB-DEV 5 |
6 | -------------------------------------------------------------------------------- /Projects/drink-water/drink-water.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/drink-water/drink-water.jpg -------------------------------------------------------------------------------- /Projects/drink-water/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Drink Water 8 | 9 | 10 |

Drink Water

11 |

Goal: 2 Liters

12 | 13 |
14 |
15 | 16 | Remained 17 |
18 | 19 |
20 |
21 | 22 |

Select how many glasses of water that you have drank

23 | 24 |
25 |
250 ml
26 |
250 ml
27 |
250 ml
28 |
250 ml
29 |
250 ml
30 |
250 ml
31 |
250 ml
32 |
250 ml
33 |
34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /Projects/drink-water/script.js: -------------------------------------------------------------------------------- 1 | const smallCups = document.querySelectorAll('.cup-small') 2 | const liters = document.getElementById('liters') 3 | const percentage = document.getElementById('percentage') 4 | const remained = document.getElementById('remained') 5 | 6 | updateBigCup() 7 | 8 | smallCups.forEach((cup, idx) => { 9 | cup.addEventListener('click', () => highlightCups(idx)) 10 | }) 11 | 12 | function highlightCups(idx) { 13 | if (idx===7 && smallCups[idx].classList.contains("full")) idx--; 14 | else if(smallCups[idx].classList.contains('full') && !smallCups[idx].nextElementSibling.classList.contains('full')) { 15 | idx-- 16 | } 17 | 18 | smallCups.forEach((cup, idx2) => { 19 | if(idx2 <= idx) { 20 | cup.classList.add('full') 21 | } else { 22 | cup.classList.remove('full') 23 | } 24 | }) 25 | 26 | updateBigCup() 27 | } 28 | 29 | function updateBigCup() { 30 | const fullCups = document.querySelectorAll('.cup-small.full').length 31 | const totalCups = smallCups.length 32 | 33 | if(fullCups === 0) { 34 | percentage.style.visibility = 'hidden' 35 | percentage.style.height = 0 36 | } else { 37 | percentage.style.visibility = 'visible' 38 | percentage.style.height = `${fullCups / totalCups * 330}px` 39 | percentage.innerText = `${fullCups / totalCups * 100}%` 40 | } 41 | 42 | if(fullCups === totalCups) { 43 | remained.style.visibility = 'hidden' 44 | remained.style.height = 0 45 | } else { 46 | remained.style.visibility = 'visible' 47 | liters.innerText = `${2 - (250 * fullCups / 1000)}L` 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /Projects/drink-water/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap'); 2 | 3 | :root { 4 | --border-color: #144fc6; 5 | --fill-color: #6ab3f8; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | background-color: #3494e4; 14 | color: #fff; 15 | font-family: 'Montserrat', sans-serif; 16 | display: flex; 17 | flex-direction: column; 18 | align-items: center; 19 | margin-bottom: 40px; 20 | } 21 | 22 | h1 { 23 | margin: 10px 0 0; 24 | } 25 | 26 | h3 { 27 | font-weight: 400; 28 | margin: 10px 0; 29 | } 30 | 31 | .cup { 32 | background-color: #fff; 33 | border: 4px solid var(--border-color); 34 | color: var(--border-color); 35 | border-radius: 0 0 40px 40px; 36 | height: 330px; 37 | width: 150px; 38 | margin: 30px 0; 39 | display: flex; 40 | flex-direction: column; 41 | overflow: hidden; 42 | } 43 | 44 | .cup.cup-small { 45 | height: 95px; 46 | width: 50px; 47 | border-radius: 0 0 15px 15px; 48 | background-color: rgba(255, 255, 255, 0.9); 49 | cursor: pointer; 50 | font-size: 14px; 51 | align-items: center; 52 | justify-content: center; 53 | text-align: center; 54 | margin: 5px; 55 | transition: 0.3s ease; 56 | } 57 | 58 | .cup.cup-small.full { 59 | background-color: var(--fill-color); 60 | color: #fff; 61 | } 62 | 63 | .cups { 64 | display: flex; 65 | flex-wrap: wrap; 66 | align-items: center; 67 | justify-content: center; 68 | width: 280px; 69 | } 70 | 71 | .remained { 72 | display: flex; 73 | flex-direction: column; 74 | align-items: center; 75 | justify-content: center; 76 | text-align: center; 77 | flex: 1; 78 | transition: 0.3s ease; 79 | } 80 | 81 | .remained span { 82 | font-size: 20px; 83 | font-weight: bold; 84 | } 85 | 86 | .remained small { 87 | font-size: 12px; 88 | } 89 | 90 | .percentage { 91 | background-color: var(--fill-color); 92 | display: flex; 93 | align-items: center; 94 | justify-content: center; 95 | font-weight: bold; 96 | font-size: 30px; 97 | height: 0; 98 | transition: 0.3s ease; 99 | } 100 | 101 | .text { 102 | text-align: center; 103 | margin: 0 0 5px; 104 | } 105 | -------------------------------------------------------------------------------- /Projects/orderkaro/README.md: -------------------------------------------------------------------------------- 1 | #OrderKaro landing page [v1]. 2 | 3 | This is a simple one-page website featuring the fictitious OrderKaro brand. This is built and taught from a Udemy course [RWD and Development with HTML5 and CSS3](https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/). 4 | 5 | The site also uses subtle animations using jQuery. Another version will make use of different tools/ languages to enhance the landing page's performance and development time. 6 | -------------------------------------------------------------------------------- /Projects/orderkaro/resources/css/img/back-customers-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/css/img/back-customers-min.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/css/img/back-customers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/css/img/back-customers.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/css/img/hero-min.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/css/img/hero-min.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/css/img/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/css/img/hero.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/css/queries.css: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * Media Queries for Responsive Web Design - basic 4 | */ 5 | 6 | /* Big tablet - 1024px - 1200px 7 | *****************************************/ 8 | 9 | @media only screen and (max-width: 1200px) { 10 | .hero-text{ 11 | width: 100%; 12 | padding: 0 2%; 13 | } 14 | .row { padding: 0 2%; } 15 | } 16 | 17 | 18 | 19 | /* Tablets - 768px - 1023px 20 | *****************************************/ 21 | 22 | @media only screen and (max-width: 1023px) { 23 | body { 24 | font-size: 18px; 25 | } 26 | section { 27 | padding: 60px 0; 28 | } 29 | .long-copy { 30 | width: 80%; 31 | margin-left: 10%; 32 | margin-right: 10%; 33 | } 34 | 35 | .steps-box { 36 | margin-top: 10px; 37 | } 38 | .steps-box:last-child { 39 | margin-top: 10px; 40 | } 41 | .works-steps { 42 | margin-bottom: 40px; 43 | } 44 | .works-steps:last-of-type { 45 | margin-bottom: 80px; 46 | } 47 | .app-screen { 48 | width: 50%; 49 | } 50 | .icon-small { 51 | width: 17px; 52 | margin-right: 5px; 53 | } 54 | .city-features { 55 | font-size: 0.85em; 56 | } 57 | .plan-box { 58 | width: 100%; 59 | margin-left: 0%; 60 | } 61 | .plan-price { 62 | font-size: 2.5em; 63 | } 64 | .section-form { 65 | width: 90%; 66 | } 67 | .social-icons, 68 | .footer-nav { 69 | float: none; 70 | text-align: center; 71 | } 72 | .footer-nav { 73 | margin-bottom: 10px; 74 | } 75 | } 76 | 77 | 78 | /* Small phones/ tablets - 481px - 767px 79 | *****************************************/ 80 | 81 | @media only screen and (max-width: 767px) { 82 | body{ 83 | font-size: 16px; 84 | } 85 | section { 86 | padding: 30px 0; 87 | } 88 | .row, 89 | .hero-text { 90 | padding: 0 4%; 91 | } 92 | .col { 93 | width: 100%; 94 | margin: 0 0 4% 0; 95 | } 96 | 97 | .main-nav { 98 | display: none; 99 | } 100 | 101 | .main-nav { 102 | float: left; 103 | margin-top: 35px; 104 | margin-left: 25px; 105 | } 106 | 107 | .main-nav li { 108 | display: block; 109 | } 110 | 111 | .main-nav li a:link, 112 | .main-nav li a:visited { 113 | display: block; 114 | border: 0; 115 | padding: 10px 0; 116 | font-size: 1em; 117 | } 118 | 119 | .mobile-nav-icon { 120 | display: inline-block; 121 | } 122 | 123 | .sticky .main-nav { 124 | margin-top: 10px; 125 | } 126 | 127 | .sticky .main-nav li a:link, 128 | .sticky .main-nav li a:visited { 129 | padding: 10px 0; 130 | } 131 | 132 | .sticky .mobile-nav-icon { 133 | margin-top: 10px; 134 | } 135 | 136 | .sticky .mobile-nav-icon i { 137 | color: #555; 138 | } 139 | 140 | 141 | .long-copy { 142 | width: 100%; 143 | margin-left: 0%; 144 | } 145 | h1 { 146 | font-size: 1.8em; 147 | } 148 | h2 { 149 | font-size: 1.5em; 150 | } 151 | .steps-box:first-child { 152 | text-align: center; 153 | margin-top: 10px; 154 | } 155 | .steps-box:last-child { 156 | margin-top: 20px; 157 | } 158 | .works-steps { 159 | margin-bottom: 30px; 160 | } 161 | .works-steps div { 162 | height: 40px; 163 | width: 40px; 164 | margin-right: 15px; 165 | padding: 4px; 166 | font-size: 1.2em; 167 | } 168 | .works-steps:last-of-type { 169 | margin-bottom: 30px; 170 | } 171 | .app-screen { 172 | width: 40%; 173 | } 174 | input[type="submit"] { 175 | width: 100%; 176 | } 177 | 178 | .map-box { 179 | width: 100%; 180 | height: auto; 181 | position: relative; 182 | } 183 | 184 | .map { 185 | width: 100%; 186 | height: 300px; 187 | position: relative; 188 | z-index: 0; 189 | } 190 | 191 | .form-box { 192 | position: relative; 193 | width: 100%; 194 | height: auto; 195 | padding: 30px 20px 0 30px; 196 | } 197 | } 198 | 199 | 200 | /* Small phones - Less than or equal to 480px 201 | *********************************************/ 202 | 203 | @media only screen and (max-width: 480px) { 204 | section { 205 | padding: 25px 0; 206 | } 207 | .section-form { 208 | width: 100%; 209 | } 210 | } -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/1.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/2.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/3.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/4.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/5.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/6.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/7.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/8.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/Order Karo-logos_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/Order Karo-logos_black.png -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/Order Karo-logos_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/Order Karo-logos_white.png -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/Rishikesh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/Rishikesh.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/app-iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/app-iphone.png -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/back-customers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/back-customers.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/berlin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/berlin.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/customer-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/customer-1.jpeg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/customer-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/customer-2.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/customer-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/customer-3.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/download-app-android.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/download-app-android.png -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/download-app.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 11 | 12 | 13 | 18 | 20 | 21 | 22 | 23 | 26 | 32 | 38 | 45 | 48 | 54 | 57 | 63 | 64 | 65 | 66 | 71 | 77 | 81 | 85 | 86 | 92 | 98 | 104 | 110 | 114 | 117 | 120 | 126 | 127 | 128 | 129 | 130 | -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/hero.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/lisbon-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/lisbon-3.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/london.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/london.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/paonta.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/paonta.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/san-francisco.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/san-francisco.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/shimla.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/shimla.jpeg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/img/solan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/resources/img/solan.jpg -------------------------------------------------------------------------------- /Projects/orderkaro/resources/js/scripts.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | /* Add/ Remove Sticky Navigation */ 4 | 5 | $('.js--features').waypoint(function(direction) { 6 | if (direction == "down") { 7 | $('nav').addClass('sticky'); 8 | } else { 9 | $('nav').removeClass('sticky'); 10 | } 11 | }, { 12 | offset: '60px;' 13 | }); 14 | 15 | /* Scroll to section on click event */ 16 | 17 | $('.js--scroll-to-plans').click(function() { 18 | $('html, body').animate({ scrollTop: $('.js--section-plans').offset().top }, 1500); 19 | }); 20 | 21 | $('.js--scroll-to-start').click(function() { 22 | $('html, body').animate({ scrollTop: $('.js--features').offset().top }, 1000); 23 | }); 24 | 25 | /* CSS Tricks: Smooth Scrolling to elements with ID */ 26 | 27 | $(function() { 28 | $('a[href*=#]:not([href=#])').click(function() { 29 | if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 30 | var target = $(this.hash); 31 | target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 32 | if (target.length) { 33 | $('html,body').animate({ 34 | scrollTop: target.offset().top 35 | }, 1000); 36 | return false; 37 | } 38 | } 39 | }); 40 | }); 41 | 42 | /* Add Animations on scroll */ 43 | 44 | $('.js--wp-1').waypoint(function(direction) { 45 | $('.js--wp-1').addClass('animated fadeIn'); 46 | }, { 47 | offset: '50%' 48 | }); 49 | $('.js--wp-2').waypoint(function(direction) { 50 | $('.js--wp-2').addClass('animated fadeInUp'); 51 | }, { 52 | offset: '50%' 53 | }); 54 | $('.js--wp-3').waypoint(function(direction) { 55 | $('.js--wp-3').addClass('animated fadeIn'); 56 | }, { 57 | offset: '60%' 58 | }); 59 | $('.js--wp-4').waypoint(function(direction) { 60 | $('.js--wp-4').addClass('animated pulse'); 61 | }, { 62 | offset: '50%' 63 | }); 64 | 65 | /* Mobile Navigation */ 66 | $('.js--nav-icon').click(function() { 67 | var nav = $('.js--main-nav'); 68 | var icon = $('.js--nav-icon i') 69 | 70 | nav.slideToggle(200); 71 | /* switch from hamburger to cross icon */ 72 | if (icon.hasClass('ion-navicon-round')) { 73 | icon.addClass('ion-close-round'); 74 | icon.removeClass('ion-navicon-round'); 75 | } else { 76 | icon.addClass('ion-navicon-round'); 77 | icon.removeClass('ion-close-round'); 78 | } 79 | }); 80 | 81 | /* gmaps.js: Google Maps plugin */ 82 | var map = new GMaps({ 83 | div: '.map', 84 | lat: 30.4453, 85 | lng: 77.6021, 86 | zoom: 12 87 | }); 88 | 89 | map.addMarker({ 90 | lat: 30.4453, 91 | lng: 77.6021, 92 | title: 'Paonta Sahib', 93 | infoWindow: { 94 | content: '

Our Paonta Sahib HQ

' 95 | } 96 | }); 97 | }); -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/css/grid.css: -------------------------------------------------------------------------------- 1 | 2 | /* SECTIONS ============================================================================= */ 3 | 4 | .section { 5 | clear: both; 6 | padding: 0px; 7 | margin: 0px; 8 | } 9 | 10 | /* GROUPING ============================================================================= */ 11 | 12 | .row { 13 | zoom: 1; /* For IE 6/7 (trigger hasLayout) */ 14 | } 15 | 16 | .row:before, 17 | .row:after { 18 | content:""; 19 | display:table; 20 | } 21 | .row:after { 22 | clear:both; 23 | } 24 | 25 | /* GRID COLUMN SETUP ==================================================================== */ 26 | 27 | .col { 28 | display: block; 29 | float:left; 30 | margin: 1% 0 1% 1.6%; 31 | } 32 | 33 | .col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */ 34 | 35 | 36 | /* REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */ 37 | 38 | @media only screen and (max-width: 480px) { 39 | .col { 40 | /*margin: 1% 0 1% 0%;*/ 41 | margin: 0; 42 | } 43 | } 44 | 45 | 46 | /* GRID OF TWO ============================================================================= */ 47 | 48 | 49 | .span-2-of-2 { 50 | width: 100%; 51 | } 52 | 53 | .span-1-of-2 { 54 | width: 49.2%; 55 | } 56 | 57 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 58 | 59 | @media only screen and (max-width: 480px) { 60 | .span-2-of-2 { 61 | width: 100%; 62 | } 63 | .span-1-of-2 { 64 | width: 100%; 65 | } 66 | } 67 | 68 | 69 | /* GRID OF THREE ============================================================================= */ 70 | 71 | 72 | .span-3-of-3 { 73 | width: 100%; 74 | } 75 | 76 | .span-2-of-3 { 77 | width: 66.13%; 78 | } 79 | 80 | .span-1-of-3 { 81 | width: 32.26%; 82 | } 83 | 84 | 85 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 86 | 87 | @media only screen and (max-width: 480px) { 88 | .span-3-of-3 { 89 | width: 100%; 90 | } 91 | .span-2-of-3 { 92 | width: 100%; 93 | } 94 | .span-1-of-3 { 95 | width: 100%; 96 | } 97 | } 98 | 99 | /* GRID OF FOUR ============================================================================= */ 100 | 101 | 102 | .span-4-of-4 { 103 | width: 100%; 104 | } 105 | 106 | .span-3-of-4 { 107 | width: 74.6%; 108 | } 109 | 110 | .span-2-of-4 { 111 | width: 49.2%; 112 | } 113 | 114 | .span-1-of-4 { 115 | width: 23.8%; 116 | } 117 | 118 | 119 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 120 | 121 | @media only screen and (max-width: 480px) { 122 | .span-4-of-4 { 123 | width: 100%; 124 | } 125 | .span-3-of-4 { 126 | width: 100%; 127 | } 128 | .span-2-of-4 { 129 | width: 100%; 130 | } 131 | .span-1-of-4 { 132 | width: 100%; 133 | } 134 | } 135 | 136 | 137 | /* GRID OF FIVE ============================================================================= */ 138 | 139 | 140 | .span-5-of-5 { 141 | width: 100%; 142 | } 143 | 144 | .span-4-of-5 { 145 | width: 79.68%; 146 | } 147 | 148 | .span-3-of-5 { 149 | width: 59.36%; 150 | } 151 | 152 | .span-2-of-5 { 153 | width: 39.04%; 154 | } 155 | 156 | .span-1-of-5 { 157 | width: 18.72%; 158 | } 159 | 160 | 161 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 162 | 163 | @media only screen and (max-width: 480px) { 164 | .span-5-of-5 { 165 | width: 100%; 166 | } 167 | .span-4-of-5 { 168 | width: 100%; 169 | } 170 | .span-3-of-5 { 171 | width: 100%; 172 | } 173 | .span-2-of-5 { 174 | width: 100%; 175 | } 176 | .span-1-of-5 { 177 | width: 100%; 178 | } 179 | } 180 | 181 | 182 | /* GRID OF SIX ============================================================================= */ 183 | 184 | 185 | .span-6-of-6 { 186 | width: 100%; 187 | } 188 | 189 | .span-5-of-6 { 190 | width: 83.06%; 191 | } 192 | 193 | .span-4-of-6 { 194 | width: 66.13%; 195 | } 196 | 197 | .span-3-of-6 { 198 | width: 49.2%; 199 | } 200 | 201 | .span-2-of-6 { 202 | width: 32.26%; 203 | } 204 | 205 | .span-1-of-6 { 206 | width: 15.33%; 207 | } 208 | 209 | 210 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 211 | 212 | @media only screen and (max-width: 480px) { 213 | .span-6-of-6 { 214 | width: 100%; 215 | } 216 | .span-5-of-6 { 217 | width: 100%; 218 | } 219 | .span-4-of-6 { 220 | width: 100%; 221 | } 222 | .span-3-of-6 { 223 | width: 100%; 224 | } 225 | .span-2-of-6 { 226 | width: 100%; 227 | } 228 | .span-1-of-6 { 229 | width: 100%; 230 | } 231 | } 232 | 233 | 234 | 235 | /* GRID OF SEVEN ============================================================================= */ 236 | 237 | 238 | .span-7-of-7 { 239 | width: 100%; 240 | } 241 | 242 | .span-6-of-7 { 243 | width: 85.48%; 244 | } 245 | 246 | .span-5-of-7 { 247 | width: 70.97%; 248 | } 249 | 250 | .span-4-of-7 { 251 | width: 56.45%; 252 | } 253 | 254 | .span-3-of-7 { 255 | width: 41.94%; 256 | } 257 | 258 | .span-2-of-7 { 259 | width: 27.42%; 260 | } 261 | 262 | .span-1-of-7 { 263 | width: 12.91%; 264 | } 265 | 266 | 267 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 268 | 269 | @media only screen and (max-width: 480px) { 270 | .span-7-of-7 { 271 | width: 100%; 272 | } 273 | .span-6-of-7 { 274 | width: 100%; 275 | } 276 | .span-5-of-7 { 277 | width: 100%; 278 | } 279 | .span-4-of-7 { 280 | width: 100%; 281 | } 282 | .span-3-of-7 { 283 | width: 100%; 284 | } 285 | .span-2-of-7 { 286 | width: 100%; 287 | } 288 | .span-1-of-7 { 289 | width: 100%; 290 | } 291 | } 292 | 293 | 294 | /* GRID OF EIGHT ============================================================================= */ 295 | 296 | 297 | .span-8-of-8 { 298 | width: 100%; 299 | } 300 | 301 | .span-7-of-8 { 302 | width: 87.3%; 303 | } 304 | 305 | .span-6-of-8 { 306 | width: 74.6%; 307 | } 308 | 309 | .span-5-of-8 { 310 | width: 61.9%; 311 | } 312 | 313 | .span-4-of-8 { 314 | width: 49.2%; 315 | } 316 | 317 | .span-3-of-8 { 318 | width: 36.5%; 319 | } 320 | 321 | .span-2-of-8 { 322 | width: 23.8%; 323 | } 324 | 325 | .span-1-of-8 { 326 | width: 11.1%; 327 | } 328 | 329 | 330 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 331 | 332 | @media only screen and (max-width: 480px) { 333 | .span-8-of-8 { 334 | width: 100%; 335 | } 336 | .span-7-of-8 { 337 | width: 100%; 338 | } 339 | .span-6-of-8 { 340 | width: 100%; 341 | } 342 | .span-5-of-8 { 343 | width: 100%; 344 | } 345 | .span-4-of-8 { 346 | width: 100%; 347 | } 348 | .span-3-of-8 { 349 | width: 100%; 350 | } 351 | .span-2-of-8 { 352 | width: 100%; 353 | } 354 | .span-1-of-8 { 355 | width: 100%; 356 | } 357 | } 358 | 359 | 360 | /* GRID OF NINE ============================================================================= */ 361 | 362 | 363 | .span-9-of-9 { 364 | width: 100%; 365 | } 366 | 367 | .span-8-of-9 { 368 | width: 88.71%; 369 | } 370 | 371 | .span-7-of-9 { 372 | width: 77.42%; 373 | } 374 | 375 | .span-6-of-9 { 376 | width: 66.13%; 377 | } 378 | 379 | .span-5-of-9 { 380 | width: 54.84%; 381 | } 382 | 383 | .span-4-of-9 { 384 | width: 43.55%; 385 | } 386 | 387 | .span-3-of-9 { 388 | width: 32.26%; 389 | } 390 | 391 | .span-2-of-9 { 392 | width: 20.97%; 393 | } 394 | 395 | .span-1-of-9 { 396 | width: 9.68%; 397 | } 398 | 399 | 400 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 401 | 402 | @media only screen and (max-width: 480px) { 403 | .span-9-of-9 { 404 | width: 100%; 405 | } 406 | .span-8-of-9 { 407 | width: 100%; 408 | } 409 | .span-7-of-9 { 410 | width: 100%; 411 | } 412 | .span-6-of-9 { 413 | width: 100%; 414 | } 415 | .span-5-of-9 { 416 | width: 100%; 417 | } 418 | .span-4-of-9 { 419 | width: 100%; 420 | } 421 | .span-3-of-9 { 422 | width: 100%; 423 | } 424 | .span-2-of-9 { 425 | width: 100%; 426 | } 427 | .span-1-of-9 { 428 | width: 100%; 429 | } 430 | } 431 | 432 | 433 | /* GRID OF TEN ============================================================================= */ 434 | 435 | 436 | .span-10-of-10 { 437 | width: 100%; 438 | } 439 | 440 | .span-9-of-10 { 441 | width: 89.84%; 442 | } 443 | 444 | .span-8-of-10 { 445 | width: 79.68%; 446 | } 447 | 448 | .span-7-of-10 { 449 | width: 69.52%; 450 | } 451 | 452 | .span-6-of-10 { 453 | width: 59.36%; 454 | } 455 | 456 | .span-5-of-10 { 457 | width: 49.2%; 458 | } 459 | 460 | .span-4-of-10 { 461 | width: 39.04%; 462 | } 463 | 464 | .span-3-of-10 { 465 | width: 28.88%; 466 | } 467 | 468 | .span-2-of-10 { 469 | width: 18.72%; 470 | } 471 | 472 | .span-1-of-10 { 473 | width: 8.56%; 474 | } 475 | 476 | 477 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 478 | 479 | @media only screen and (max-width: 480px) { 480 | .span-10-of-10 { 481 | width: 100%; 482 | } 483 | .span-9-of-10 { 484 | width: 100%; 485 | } 486 | .span-8-of-10 { 487 | width: 100%; 488 | } 489 | .span-7-of-10 { 490 | width: 100%; 491 | } 492 | .span-6-of-10 { 493 | width: 100%; 494 | } 495 | .span-5-of-10 { 496 | width: 100%; 497 | } 498 | .span-4-of-10 { 499 | width: 100%; 500 | } 501 | .span-3-of-10 { 502 | width: 100%; 503 | } 504 | .span-2-of-10 { 505 | width: 100%; 506 | } 507 | .span-1-of-10 { 508 | width: 100%; 509 | } 510 | } 511 | 512 | 513 | /* GRID OF ELEVEN ============================================================================= */ 514 | 515 | .span-11-of-11 { 516 | width: 100%; 517 | } 518 | 519 | .span-10-of-11 { 520 | width: 90.76%; 521 | } 522 | 523 | .span-9-of-11 { 524 | width: 81.52%; 525 | } 526 | 527 | .span-8-of-11 { 528 | width: 72.29%; 529 | } 530 | 531 | .span-7-of-11 { 532 | width: 63.05%; 533 | } 534 | 535 | .span-6-of-11 { 536 | width: 53.81%; 537 | } 538 | 539 | .span-5-of-11 { 540 | width: 44.58%; 541 | } 542 | 543 | .span-4-of-11 { 544 | width: 35.34%; 545 | } 546 | 547 | .span-3-of-11 { 548 | width: 26.1%; 549 | } 550 | 551 | .span-2-of-11 { 552 | width: 16.87%; 553 | } 554 | 555 | .span-1-of-11 { 556 | width: 7.63%; 557 | } 558 | 559 | 560 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 561 | 562 | @media only screen and (max-width: 480px) { 563 | .span-11-of-11 { 564 | width: 100%; 565 | } 566 | .span-10-of-11 { 567 | width: 100%; 568 | } 569 | .span-9-of-11 { 570 | width: 100%; 571 | } 572 | .span-8-of-11 { 573 | width: 100%; 574 | } 575 | .span-7-of-11 { 576 | width: 100%; 577 | } 578 | .span-6-of-11 { 579 | width: 100%; 580 | } 581 | .span-5-of-11 { 582 | width: 100%; 583 | } 584 | .span-4-of-11 { 585 | width: 100%; 586 | } 587 | .span-3-of-11 { 588 | width: 100%; 589 | } 590 | .span-2-of-11 { 591 | width: 100%; 592 | } 593 | .span-1-of-11 { 594 | width: 100%; 595 | } 596 | } 597 | 598 | 599 | /* GRID OF TWELVE ============================================================================= */ 600 | 601 | .span-12-of-12 { 602 | width: 100%; 603 | } 604 | 605 | .span-11-of-12 { 606 | width: 91.53%; 607 | } 608 | 609 | .span-10-of-12 { 610 | width: 83.06%; 611 | } 612 | 613 | .span-9-of-12 { 614 | width: 74.6%; 615 | } 616 | 617 | .span-8-of-12 { 618 | width: 66.13%; 619 | } 620 | 621 | .span-7-of-12 { 622 | width: 57.66%; 623 | } 624 | 625 | .span-6-of-12 { 626 | width: 49.2%; 627 | } 628 | 629 | .span-5-of-12 { 630 | width: 40.73%; 631 | } 632 | 633 | .span-4-of-12 { 634 | width: 32.26%; 635 | } 636 | 637 | .span-3-of-12 { 638 | width: 23.8%; 639 | } 640 | 641 | .span-2-of-12 { 642 | width: 15.33%; 643 | } 644 | 645 | .span-1-of-12 { 646 | width: 6.86%; 647 | } 648 | 649 | 650 | /* GO FULL WIDTH AT LESS THAN 480 PIXELS */ 651 | 652 | @media only screen and (max-width: 480px) { 653 | .span-12-of-12 { 654 | width: 100%; 655 | } 656 | .span-11-of-12 { 657 | width: 100%; 658 | } 659 | .span-10-of-12 { 660 | width: 100%; 661 | } 662 | .span-9-of-12 { 663 | width: 100%; 664 | } 665 | .span-8-of-12 { 666 | width: 100%; 667 | } 668 | .span-7-of-12 { 669 | width: 100%; 670 | } 671 | .span-6-of-12 { 672 | width: 100%; 673 | } 674 | .span-5-of-12 { 675 | width: 100%; 676 | } 677 | .span-4-of-12 { 678 | width: 100%; 679 | } 680 | .span-3-of-12 { 681 | width: 100%; 682 | } 683 | .span-2-of-12 { 684 | width: 100%; 685 | } 686 | .span-1-of-12 { 687 | width: 100%; 688 | } 689 | } -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/css/node_modules/normalize.css/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | === HEAD 2 | 3 | === 3.0.3 (March 30, 2015) 4 | 5 | * Remove unnecessary vendor prefixes. 6 | * Add `main` property. 7 | 8 | === 3.0.2 (October 4, 2014) 9 | 10 | * Only alter `background-color` of links in IE 10. 11 | * Add `menu` element to HTML5 display definitions. 12 | 13 | === 3.0.1 (March 27, 2014) 14 | 15 | * Add package.json for npm support. 16 | 17 | === 3.0.0 (January 28, 2014) 18 | 19 | === 3.0.0-rc.1 (January 26, 2014) 20 | 21 | * Explicit tests for each normalization. 22 | * Fix i18n for `q` element. 23 | * Fix `pre` text formatting and overflow. 24 | * Fix vertical alignment of `progress`. 25 | * Address `button` overflow in IE 8/9/10. 26 | * Revert `textarea` alignment modification. 27 | * Fix number input button cursor in Chrome on OS X. 28 | * Remove `a:focus` outline normalization. 29 | * Fix `figure` margin normalization. 30 | * Normalize `optgroup`. 31 | * Remove default table cell padding. 32 | * Set correct display for `progress` in IE 8/9. 33 | * Fix `font` and `color` inheritance for forms. 34 | 35 | === 2.1.3 (August 26, 2013) 36 | 37 | * Fix component.json. 38 | * Remove the gray background color from active links in IE 10. 39 | 40 | === 2.1.2 (May 11, 2013) 41 | 42 | * Revert root `color` and `background` normalizations. 43 | 44 | === 2.1.1 (April 8, 2013) 45 | 46 | * Normalize root `color` and `background` to counter the effects of system 47 | color schemes. 48 | 49 | === 2.1.0 (January 21, 2013) 50 | 51 | * Normalize `text-transform` for `button` and `select`. 52 | * Normalize `h1` margin when within HTML5 sectioning elements. 53 | * Normalize `hr` element. 54 | * Remove unnecessary `pre` styles. 55 | * Add `main` element to HTML5 display definitions. 56 | * Fix cursor style for disabled button `input`. 57 | 58 | === 2.0.1 (August 20, 2012) 59 | 60 | * Remove stray IE 6/7 `inline-block` hack from HTML5 display settings. 61 | 62 | === 2.0.0 (August 19, 2012) 63 | 64 | * Remove legacy browser form normalizations. 65 | * Remove all list normalizations. 66 | * Add `quotes` normalizations. 67 | * Remove all heading normalizations except `h1` font size. 68 | * Form elements automatically inherit `font-family` from ancestor. 69 | * Drop support for IE 6/7, Firefox < 4, and Safari < 5. 70 | 71 | === 1.0.1 (August 19, 2012) 72 | 73 | * Adjust `small` font size normalization. 74 | 75 | === 1.0.0 (August 14, 2012) 76 | 77 | (Only the notable changes since public release) 78 | 79 | * Add MIT License. 80 | * Hide `audio` elements without controls in iOS 5 (#69). 81 | * Normalize heading margins and font size. 82 | * Move font-family normalization from `body` to `html` (#62). 83 | * Remove scrollbar normalization (#64 #65). 84 | * Remove excess padding from checkbox and radio inputs in IE 7 (#42). 85 | * Add IE9 correction for SVG overflow (#16). 86 | * Add fix for legend not inheriting color in IE 6/7/8/9. 87 | -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/css/node_modules/normalize.css/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Nicolas Gallagher and Jonathan Neal 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/css/node_modules/normalize.css/README.md: -------------------------------------------------------------------------------- 1 | # normalize.css v3 2 | 3 | Normalize.css is a customisable CSS file that makes browsers render all 4 | elements more consistently and in line with modern standards. 5 | 6 | The project relies on researching the differences between default browser 7 | styles in order to precisely target only the styles that need or benefit from 8 | normalizing. 9 | 10 | [View the test file](http://necolas.github.io/normalize.css/latest/test.html) 11 | 12 | ## Install 13 | 14 | * [npm](http://npmjs.org/): `npm install --save normalize.css` 15 | * [Component(1)](https://github.com/component/component/): `component install necolas/normalize.css` 16 | * [Bower](http://bower.io/): `bower install --save normalize.css` 17 | * [cdnjs](https://cdnjs.com/libraries/normalize) 18 | * [Download](http://necolas.github.io/normalize.css/latest/normalize.css). 19 | 20 | No other styles should come before Normalize.css. 21 | 22 | It is recommended that you include the `normalize.css` file as untouched 23 | library code. 24 | 25 | ## What does it do? 26 | 27 | * Preserves useful defaults, unlike many CSS resets. 28 | * Normalizes styles for a wide range of elements. 29 | * Corrects bugs and common browser inconsistencies. 30 | * Improves usability with subtle improvements. 31 | * Explains what code does using detailed comments. 32 | 33 | ## Browser support 34 | 35 | * Google Chrome (latest) 36 | * Mozilla Firefox (latest) 37 | * Mozilla Firefox ESR 38 | * Opera (latest) 39 | * Apple Safari 6+ 40 | * Internet Explorer 8+ 41 | 42 | [Normalize.css v1 provides legacy browser 43 | support](https://github.com/necolas/normalize.css/tree/v1) (IE 6+, Safari 4+), 44 | but is no longer actively developed. 45 | 46 | ## Extended details 47 | 48 | Additional detail and explanation of the esoteric parts of normalize.css. 49 | 50 | #### `pre, code, kbd, samp` 51 | 52 | The `font-family: monospace, monospace` hack fixes the inheritance and scaling 53 | of font-size for preformated text. The duplication of `monospace` is 54 | intentional. [Source](http://en.wikipedia.org/wiki/User:Davidgothberg/Test59). 55 | 56 | #### `sub, sup` 57 | 58 | Normally, using `sub` or `sup` affects the line-box height of text in all 59 | browsers. [Source](http://gist.github.com/413930). 60 | 61 | #### `svg:not(:root)` 62 | 63 | Adding `overflow: hidden` fixes IE9's SVG rendering. Earlier versions of IE 64 | don't support SVG, so we can safely use the `:not()` and `:root` selectors that 65 | modern browsers use in the default UA stylesheets to apply this style. [SVG 66 | Mailing List discussion](http://lists.w3.org/Archives/Public/public-svg-wg/2008JulSep/0339.html) 67 | 68 | #### `input[type="search"]` 69 | 70 | The search input is not fully stylable by default. In Chrome and Safari on 71 | OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In 72 | Chrome and Safari on Windows you can't control `border` properly. It will apply 73 | `border-width` but will only show a border color (which cannot be controlled) 74 | for the outer 1px of that border. Applying `-webkit-appearance: textfield` 75 | addresses these issues without removing the benefits of search inputs (e.g. 76 | showing past searches). 77 | 78 | #### `legend` 79 | 80 | Adding `border: 0` corrects an IE 8–11 bug where `color` (yes, `color`) is not 81 | inherited by `legend`. 82 | 83 | ## Contributing 84 | 85 | Please read the CONTRIBUTING.md 86 | 87 | ## Acknowledgements 88 | 89 | Normalize.css is a project by [Nicolas Gallagher](https://github.com/necolas), 90 | co-created with [Jonathan Neal](https://github.com/jonathantneal). 91 | -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/css/node_modules/normalize.css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS and IE text size adjust after device orientation change, 6 | * without disabling user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability of focused elements when they are also in an 95 | * active/hover state. 96 | */ 97 | 98 | a:active, 99 | a:hover { 100 | outline: 0; 101 | } 102 | 103 | /* Text-level semantics 104 | ========================================================================== */ 105 | 106 | /** 107 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 108 | */ 109 | 110 | abbr[title] { 111 | border-bottom: 1px dotted; 112 | } 113 | 114 | /** 115 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 116 | */ 117 | 118 | b, 119 | strong { 120 | font-weight: bold; 121 | } 122 | 123 | /** 124 | * Address styling not present in Safari and Chrome. 125 | */ 126 | 127 | dfn { 128 | font-style: italic; 129 | } 130 | 131 | /** 132 | * Address variable `h1` font-size and margin within `section` and `article` 133 | * contexts in Firefox 4+, Safari, and Chrome. 134 | */ 135 | 136 | h1 { 137 | font-size: 2em; 138 | margin: 0.67em 0; 139 | } 140 | 141 | /** 142 | * Address styling not present in IE 8/9. 143 | */ 144 | 145 | mark { 146 | background: #ff0; 147 | color: #000; 148 | } 149 | 150 | /** 151 | * Address inconsistent and variable font size in all browsers. 152 | */ 153 | 154 | small { 155 | font-size: 80%; 156 | } 157 | 158 | /** 159 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 160 | */ 161 | 162 | sub, 163 | sup { 164 | font-size: 75%; 165 | line-height: 0; 166 | position: relative; 167 | vertical-align: baseline; 168 | } 169 | 170 | sup { 171 | top: -0.5em; 172 | } 173 | 174 | sub { 175 | bottom: -0.25em; 176 | } 177 | 178 | /* Embedded content 179 | ========================================================================== */ 180 | 181 | /** 182 | * Remove border when inside `a` element in IE 8/9/10. 183 | */ 184 | 185 | img { 186 | border: 0; 187 | } 188 | 189 | /** 190 | * Correct overflow not hidden in IE 9/10/11. 191 | */ 192 | 193 | svg:not(:root) { 194 | overflow: hidden; 195 | } 196 | 197 | /* Grouping content 198 | ========================================================================== */ 199 | 200 | /** 201 | * Address margin not present in IE 8/9 and Safari. 202 | */ 203 | 204 | figure { 205 | margin: 1em 40px; 206 | } 207 | 208 | /** 209 | * Address differences between Firefox and other browsers. 210 | */ 211 | 212 | hr { 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 354 | */ 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; /* 1 */ 358 | box-sizing: content-box; /* 2 */ 359 | } 360 | 361 | /** 362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | * Safari (but not Chrome) clips the cancel button when the search input has 364 | * padding (and `textfield` appearance). 365 | */ 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | /** 373 | * Define consistent border, margin, and padding. 374 | */ 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | /** 383 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | */ 386 | 387 | legend { 388 | border: 0; /* 1 */ 389 | padding: 0; /* 2 */ 390 | } 391 | 392 | /** 393 | * Remove default vertical scrollbar in IE 8/9/10/11. 394 | */ 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | /** 401 | * Don't inherit the `font-weight` (applied by a rule above). 402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | */ 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | /* Tables 410 | ========================================================================== */ 411 | 412 | /** 413 | * Remove most spacing between table cells. 414 | */ 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } 425 | -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/css/node_modules/normalize.css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "normalize.css", 3 | "version": "3.0.3", 4 | "description": "Normalize.css as a node packaged module", 5 | "style": "normalize.css", 6 | "files": [ 7 | "LICENSE.md", 8 | "normalize.css" 9 | ], 10 | "homepage": "http://necolas.github.io/normalize.css", 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/necolas/normalize.css.git" 14 | }, 15 | "main": "normalize.css", 16 | "author": { 17 | "name": "Nicolas Gallagher" 18 | }, 19 | "license": "MIT", 20 | "gitHead": "2bdda84272650aedfb45d8abe11a6d177933a803", 21 | "bugs": { 22 | "url": "https://github.com/necolas/normalize.css/issues" 23 | }, 24 | "_id": "normalize.css@3.0.3", 25 | "scripts": {}, 26 | "_shasum": "acc00262e235a2caa91363a2e5e3bfa4f8ad05c6", 27 | "_from": "normalize.css@*", 28 | "_npmVersion": "2.7.0", 29 | "_nodeVersion": "0.10.35", 30 | "_npmUser": { 31 | "name": "necolas", 32 | "email": "nicolasgallagher@gmail.com" 33 | }, 34 | "maintainers": [ 35 | { 36 | "name": "tjholowaychuk", 37 | "email": "tj@vision-media.ca" 38 | }, 39 | { 40 | "name": "necolas", 41 | "email": "nicolasgallagher@gmail.com" 42 | } 43 | ], 44 | "dist": { 45 | "shasum": "acc00262e235a2caa91363a2e5e3bfa4f8ad05c6", 46 | "tarball": "http://registry.npmjs.org/normalize.css/-/normalize.css-3.0.3.tgz" 47 | }, 48 | "directories": {}, 49 | "_resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-3.0.3.tgz" 50 | } 51 | -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/fonts/ionicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/vendors/fonts/ionicons.eot -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/fonts/ionicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/vendors/fonts/ionicons.ttf -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/fonts/ionicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Projects/orderkaro/vendors/fonts/ionicons.woff -------------------------------------------------------------------------------- /Projects/orderkaro/vendors/js/jquery.waypoints.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | Waypoints - 3.1.1 3 | Copyright © 2011-2015 Caleb Troughton 4 | Licensed under the MIT license. 5 | https://github.com/imakewebthings/waypoints/blog/master/licenses.txt 6 | */ 7 | !function(){"use strict";function t(o){if(!o)throw new Error("No options passed to Waypoint constructor");if(!o.element)throw new Error("No element option passed to Waypoint constructor");if(!o.handler)throw new Error("No handler option passed to Waypoint constructor");this.key="waypoint-"+e,this.options=t.Adapter.extend({},t.defaults,o),this.element=this.options.element,this.adapter=new t.Adapter(this.element),this.callback=o.handler,this.axis=this.options.horizontal?"horizontal":"vertical",this.enabled=this.options.enabled,this.triggerPoint=null,this.group=t.Group.findOrCreate({name:this.options.group,axis:this.axis}),this.context=t.Context.findOrCreateByElement(this.options.context),t.offsetAliases[this.options.offset]&&(this.options.offset=t.offsetAliases[this.options.offset]),this.group.add(this),this.context.add(this),i[this.key]=this,e+=1}var e=0,i={};t.prototype.queueTrigger=function(t){this.group.queueTrigger(this,t)},t.prototype.trigger=function(t){this.enabled&&this.callback&&this.callback.apply(this,t)},t.prototype.destroy=function(){this.context.remove(this),this.group.remove(this),delete i[this.key]},t.prototype.disable=function(){return this.enabled=!1,this},t.prototype.enable=function(){return this.context.refresh(),this.enabled=!0,this},t.prototype.next=function(){return this.group.next(this)},t.prototype.previous=function(){return this.group.previous(this)},t.invokeAll=function(t){var e=[];for(var o in i)e.push(i[o]);for(var n=0,r=e.length;r>n;n++)e[n][t]()},t.destroyAll=function(){t.invokeAll("destroy")},t.disableAll=function(){t.invokeAll("disable")},t.enableAll=function(){t.invokeAll("enable")},t.refreshAll=function(){t.Context.refreshAll()},t.viewportHeight=function(){return window.innerHeight||document.documentElement.clientHeight},t.viewportWidth=function(){return document.documentElement.clientWidth},t.adapters=[],t.defaults={context:window,continuous:!0,enabled:!0,group:"default",horizontal:!1,offset:0},t.offsetAliases={"bottom-in-view":function(){return this.context.innerHeight()-this.adapter.outerHeight()},"right-in-view":function(){return this.context.innerWidth()-this.adapter.outerWidth()}},window.Waypoint=t}(),function(){"use strict";function t(t){window.setTimeout(t,1e3/60)}function e(t){this.element=t,this.Adapter=n.Adapter,this.adapter=new this.Adapter(t),this.key="waypoint-context-"+i,this.didScroll=!1,this.didResize=!1,this.oldScroll={x:this.adapter.scrollLeft(),y:this.adapter.scrollTop()},this.waypoints={vertical:{},horizontal:{}},t.waypointContextKey=this.key,o[t.waypointContextKey]=this,i+=1,this.createThrottledScrollHandler(),this.createThrottledResizeHandler()}var i=0,o={},n=window.Waypoint,r=window.onload;e.prototype.add=function(t){var e=t.options.horizontal?"horizontal":"vertical";this.waypoints[e][t.key]=t,this.refresh()},e.prototype.checkEmpty=function(){var t=this.Adapter.isEmptyObject(this.waypoints.horizontal),e=this.Adapter.isEmptyObject(this.waypoints.vertical);t&&e&&(this.adapter.off(".waypoints"),delete o[this.key])},e.prototype.createThrottledResizeHandler=function(){function t(){e.handleResize(),e.didResize=!1}var e=this;this.adapter.on("resize.waypoints",function(){e.didResize||(e.didResize=!0,n.requestAnimationFrame(t))})},e.prototype.createThrottledScrollHandler=function(){function t(){e.handleScroll(),e.didScroll=!1}var e=this;this.adapter.on("scroll.waypoints",function(){(!e.didScroll||n.isTouch)&&(e.didScroll=!0,n.requestAnimationFrame(t))})},e.prototype.handleResize=function(){n.Context.refreshAll()},e.prototype.handleScroll=function(){var t={},e={horizontal:{newScroll:this.adapter.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.adapter.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};for(var i in e){var o=e[i],n=o.newScroll>o.oldScroll,r=n?o.forward:o.backward;for(var s in this.waypoints[i]){var a=this.waypoints[i][s],l=o.oldScroll=a.triggerPoint,p=l&&h,u=!l&&!h;(p||u)&&(a.queueTrigger(r),t[a.group.id]=a.group)}}for(var c in t)t[c].flushTriggers();this.oldScroll={x:e.horizontal.newScroll,y:e.vertical.newScroll}},e.prototype.innerHeight=function(){return this.element==this.element.window?n.viewportHeight():this.adapter.innerHeight()},e.prototype.remove=function(t){delete this.waypoints[t.axis][t.key],this.checkEmpty()},e.prototype.innerWidth=function(){return this.element==this.element.window?n.viewportWidth():this.adapter.innerWidth()},e.prototype.destroy=function(){var t=[];for(var e in this.waypoints)for(var i in this.waypoints[e])t.push(this.waypoints[e][i]);for(var o=0,n=t.length;n>o;o++)t[o].destroy()},e.prototype.refresh=function(){var t,e=this.element==this.element.window,i=this.adapter.offset(),o={};this.handleScroll(),t={horizontal:{contextOffset:e?0:i.left,contextScroll:e?0:this.oldScroll.x,contextDimension:this.innerWidth(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:e?0:i.top,contextScroll:e?0:this.oldScroll.y,contextDimension:this.innerHeight(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};for(var n in t){var r=t[n];for(var s in this.waypoints[n]){var a,l,h,p,u,c=this.waypoints[n][s],d=c.options.offset,f=c.triggerPoint,w=0,y=null==f;c.element!==c.element.window&&(w=c.adapter.offset()[r.offsetProp]),"function"==typeof d?d=d.apply(c):"string"==typeof d&&(d=parseFloat(d),c.options.offset.indexOf("%")>-1&&(d=Math.ceil(r.contextDimension*d/100))),a=r.contextScroll-r.contextOffset,c.triggerPoint=w+a-d,l=f=r.oldScroll,p=l&&h,u=!l&&!h,!y&&p?(c.queueTrigger(r.backward),o[c.group.id]=c.group):!y&&u?(c.queueTrigger(r.forward),o[c.group.id]=c.group):y&&r.oldScroll>=c.triggerPoint&&(c.queueTrigger(r.forward),o[c.group.id]=c.group)}}for(var g in o)o[g].flushTriggers();return this},e.findOrCreateByElement=function(t){return e.findByElement(t)||new e(t)},e.refreshAll=function(){for(var t in o)o[t].refresh()},e.findByElement=function(t){return o[t.waypointContextKey]},window.onload=function(){r&&r(),e.refreshAll()},n.requestAnimationFrame=function(e){var i=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||t;i.call(window,e)},n.Context=e}(),function(){"use strict";function t(t,e){return t.triggerPoint-e.triggerPoint}function e(t,e){return e.triggerPoint-t.triggerPoint}function i(t){this.name=t.name,this.axis=t.axis,this.id=this.name+"-"+this.axis,this.waypoints=[],this.clearTriggerQueues(),o[this.axis][this.name]=this}var o={vertical:{},horizontal:{}},n=window.Waypoint;i.prototype.add=function(t){this.waypoints.push(t)},i.prototype.clearTriggerQueues=function(){this.triggerQueues={up:[],down:[],left:[],right:[]}},i.prototype.flushTriggers=function(){for(var i in this.triggerQueues){var o=this.triggerQueues[i],n="up"===i||"left"===i;o.sort(n?e:t);for(var r=0,s=o.length;s>r;r+=1){var a=o[r];(a.options.continuous||r===o.length-1)&&a.trigger([i])}}this.clearTriggerQueues()},i.prototype.next=function(e){this.waypoints.sort(t);var i=n.Adapter.inArray(e,this.waypoints),o=i===this.waypoints.length-1;return o?null:this.waypoints[i+1]},i.prototype.previous=function(e){this.waypoints.sort(t);var i=n.Adapter.inArray(e,this.waypoints);return i?this.waypoints[i-1]:null},i.prototype.queueTrigger=function(t,e){this.triggerQueues[e].push(t)},i.prototype.remove=function(t){var e=n.Adapter.inArray(t,this.waypoints);e>-1&&this.waypoints.splice(e,1)},i.prototype.first=function(){return this.waypoints[0]},i.prototype.last=function(){return this.waypoints[this.waypoints.length-1]},i.findOrCreate=function(t){return o[t.axis][t.name]||new i(t)},n.Group=i}(),function(){"use strict";function t(t){this.$element=e(t)}var e=window.jQuery,i=window.Waypoint;e.each(["innerHeight","innerWidth","off","offset","on","outerHeight","outerWidth","scrollLeft","scrollTop"],function(e,i){t.prototype[i]=function(){var t=Array.prototype.slice.call(arguments);return this.$element[i].apply(this.$element,t)}}),e.each(["extend","inArray","isEmptyObject"],function(i,o){t[o]=e[o]}),i.adapters.push({name:"jquery",Adapter:t}),i.Adapter=t}(),function(){"use strict";function t(t){return function(){var i=[],o=arguments[0];return t.isFunction(arguments[0])&&(o=t.extend({},arguments[1]),o.handler=arguments[0]),this.each(function(){var n=t.extend({},o,{element:this});"string"==typeof n.context&&(n.context=t(this).closest(n.context)[0]),i.push(new e(n))}),i}}var e=window.Waypoint;window.jQuery&&(window.jQuery.fn.waypoint=t(window.jQuery)),window.Zepto&&(window.Zepto.fn.waypoint=t(window.Zepto))}(); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

WEB-DEVELOPMENT

2 | 3 | 4 |

This repository includes various concepts related to Web-Development by using which students can start their Development journey this repository include amazing cheatsheets of the concepts like Git, Html, Css, and many small projects which students can re-produce for testing their skills and much more to come and also feel free to contribute and help for this good cause all types of suggestions are more than welcome. You can contribute by adding your amazing projects to this repository.

5 | 6 |
7 |
8 |

WEB-DEVELOPMENT ROADMAP

9 | 10 | 11 |
12 | 13 | WEB-DEV 14 |
15 |
16 | 17 |
18 | 19 | ### Front-End: 20 | HTML5 CSS3 JavaScript 21 | 22 |
23 | 24 | ## 🚀 Quick Start : 25 | 26 | #### Step 1: Forking the repository : 27 | 28 | To work on this project, you will first need to make a copy of this repository. To do this, you should fork the repository and then clone it so that you have a local working copy. 29 | 30 | Get your own Fork/Copy of this repository by clicking `Fork` button at right upper corner of your screen.

31 | 32 | #### Step 2: Clone the Forked Repository 33 | 34 | After the repository is forked, you can now clone it so that you have a local working copy of the codebase. 35 | 36 | To make your local copy of the repository follow the steps: 37 | - Open the Command Prompt 38 | - Type this command: 39 | 40 | ```bash 41 | $ git clone https://github.com//WEB-DEVELOPMENT 42 | ``` 43 | 44 | 45 | #### Step 3: Creating a new branch 46 | This is one of the very important step that you should follow to contribute in Open Source. A branch helps to manage the workflow, isolate your code and does not creates a mess. To create a new branch: 47 | 48 | ```bash 49 | $ git branch 50 | $ git checkout -b 51 | ``` 52 | 53 | Keep your cloned repository upto to date by pulling from upstream (this will also avoid any merge conflicts while committing new changes) 54 | ```bash 55 | git pull origin main 56 | ``` 57 | 58 | #### Step 5: Contribute 59 | Make relevant changes according to the issue that you were assigned on. Contribute in any way you feel like :) 60 | 61 | #### Step 6: Commiting and Pushing 62 | Once you have modified an existing file or added a new file to the project, you can add it to your local repository, which is being done with the git add command. 63 | 64 | ```bash 65 | git add . 66 | ``` 67 | With our file staged, we’ll want to record the changes that we have made to the repository with the `git commit` command. 68 | 69 | The commit message is an important aspect of your code contribution; it helps the other contributors fully understand the changes you have made, why you made it, and how significant it is. 70 | 71 | ```bash 72 | git commit -m "useful commit message" 73 | ``` 74 | 75 | At this point you can use the git push command to push the changes to the current branch of your forked repository: 76 | 77 | ```bash 78 | git push origin 79 | ``` 80 | 81 | #### Step 7: Create Pull Request 82 | Now, you are ready to make a pull request to the original repository. 83 | 84 | You should navigate to your forked repository, and press the "Compare & pull request" button on the page. 85 | 86 | GitHub will alert you that you can merge the two branches because there is no competing code. You should add in a title, a comment, and then press the “Create pull request” button. 87 | 88 | 89 | 90 | 91 |
92 | 93 | 94 |

Project Admin ❤️

95 |

96 | 97 | 98 | 99 | 100 | 101 |

Hanshul Chandel
💻
102 | 103 | 104 | 105 |

✨ Contributors

106 | 107 | Thanks go to these **Wonderful People** 👨🏻‍💻: 🚀 **Contributions** of any kind are welcome! 108 | 109 | 110 | 111 | 116 | 117 |
112 | 113 | 114 | 115 |
118 |
119 | 120 | ## License 121 | 122 | ![License](https://img.shields.io/badge/license-MIT%20License-blue.svg) 123 | 124 | This project is licensed under the MIT License. 125 | 126 | Copyright (c) 2021 Hanshul Chandel 127 | 128 | Permission is hereby granted, free of charge, to any person obtaining a copy 129 | of this software and associated documentation files (the "Software"), to deal 130 | in the Software without restriction, including without limitation the rights 131 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 132 | copies of the Software, and to permit persons to whom the Software is 133 | furnished to do so, subject to the following conditions: 134 | 135 | The above copyright notice and this permission notice shall be included in all 136 | copies or substantial portions of the Software. 137 | 138 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 139 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 140 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 141 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 142 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 143 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 144 | SOFTWARE. 145 | 146 |
147 | 148 |

Happy Coding 👨‍💻

149 | 150 |

show some ❤️  by giving a star to this repo!!

151 | -------------------------------------------------------------------------------- /Web-Dev.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hanshulll/WEB-DEVELOPMENT/e9d6af69920fca3d3dd65fdd04f692ed194585a0/Web-Dev.jpg --------------------------------------------------------------------------------