├── Contact.html ├── README.md ├── Responsive Navbar ├── To Do List ├── Weather App ├── app.js.txt ├── index.html.txt ├── package-lock.json.txt └── package.json.txt ├── console.js ├── css ├── contact.css ├── improved ui ├── nav.css └── style.css ├── footer ├── img ├── 100572.jpg ├── 1080x360.jpg ├── city.png ├── logo-laptop.png ├── logo02.jpg ├── moon.png ├── online-shop.jpg ├── search.png ├── search1.png └── sun.png ├── index.html └── script.js /Contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Contact us 9 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 44 | 45 |
46 |
Contact US
47 |
We'll get back to you soon!
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 |
75 |
76 |
77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Hacktoberfest 2022 2 | 3 |
4 | 5 |
6 | Follow the README below to get started! 7 | # This is a website designed with HTML5 and CSS3 only. 8 | 9 | ##How you can contribute: 10 | 11 | #Code: 12 | 13 | --> GO to ISSUES tab and contribute in any previously created issue or create a new issue. 14 | 15 | #Non-code 16 | 17 | --> You can work toward making the readme and introduction better in the repository. You can also add more data to the website or correct incorrect data. 18 | 19 | #Please star the repository if you think it is beginner friendly. 20 | 21 | 22 | ## Getting Started 23 | 24 | * Note : Create issue first or Work on created issue 25 | 26 | 1. Fork this repository 27 | 2. Run ```git clone ``` 28 | 3. CD into your cloned repo 29 | 4. Run ```git checkout -b [your branch name goes here]``` to create your new branch 30 | 5. Make your edits and save 31 | 6. Run ```git add .``` 32 | 7. Run ```git commit -m "Commit message goes here"``` 33 | 8. Finally, run ```git push origin [your branch name goes here]``` 34 | 9. **Star this repo** 35 | 10. Create a new pull request from your forked repository (Click the `New Pull Request` button located at the top of your repo) 36 | 11. Wait for your new PR to be reviewed and merged! 37 | 38 | 39 | 40 | 41 | After you have contributed, I will add your name in the people who contributed here. 42 | -------------------------------------------------------------------------------- /Responsive Navbar: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Responsive Navigation Menu 10 | 11 | 12 | 13 | 14 | 15 | 31 |
32 |
33 | Responsive Navigation Menu Bar Design 34 |
35 |
36 | using only HTML & CSS 37 |
38 |
39 | 40 | 41 | 42 | 43 | 44 | /* CSS CODE */ 45 | 46 | 47 | 48 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); 49 | *{ 50 | margin: 0; 51 | padding: 0; 52 | box-sizing: border-box; 53 | font-family: 'Poppins', sans-serif; 54 | } 55 | nav{ 56 | display: flex; 57 | height: 80px; 58 | width: 100%; 59 | background: #1b1b1b; 60 | align-items: center; 61 | justify-content: space-between; 62 | padding: 0 50px 0 100px; 63 | flex-wrap: wrap; 64 | } 65 | nav .logo{ 66 | color: #fff; 67 | font-size: 35px; 68 | font-weight: 600; 69 | } 70 | nav ul{ 71 | display: flex; 72 | flex-wrap: wrap; 73 | list-style: none; 74 | } 75 | nav ul li{ 76 | margin: 0 5px; 77 | } 78 | nav ul li a{ 79 | color: #f2f2f2; 80 | text-decoration: none; 81 | font-size: 18px; 82 | font-weight: 500; 83 | padding: 8px 15px; 84 | border-radius: 5px; 85 | letter-spacing: 1px; 86 | transition: all 0.3s ease; 87 | } 88 | nav ul li a.active, 89 | nav ul li a:hover{ 90 | color: #111; 91 | background: #fff; 92 | } 93 | nav .menu-btn i{ 94 | color: #fff; 95 | font-size: 22px; 96 | cursor: pointer; 97 | display: none; 98 | } 99 | input[type="checkbox"]{ 100 | display: none; 101 | } 102 | @media (max-width: 1000px){ 103 | nav{ 104 | padding: 0 40px 0 50px; 105 | } 106 | } 107 | @media (max-width: 920px) { 108 | nav .menu-btn i{ 109 | display: block; 110 | } 111 | #click:checked ~ .menu-btn i:before{ 112 | content: "\f00d"; 113 | } 114 | nav ul{ 115 | position: fixed; 116 | top: 80px; 117 | left: -100%; 118 | background: #111; 119 | height: 100vh; 120 | width: 100%; 121 | text-align: center; 122 | display: block; 123 | transition: all 0.3s ease; 124 | } 125 | #click:checked ~ ul{ 126 | left: 0; 127 | } 128 | nav ul li{ 129 | width: 100%; 130 | margin: 40px 0; 131 | } 132 | nav ul li a{ 133 | width: 100%; 134 | margin-left: -100%; 135 | display: block; 136 | font-size: 20px; 137 | transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); 138 | } 139 | #click:checked ~ ul li a{ 140 | margin-left: 0px; 141 | } 142 | nav ul li a.active, 143 | nav ul li a:hover{ 144 | background: none; 145 | color: cyan; 146 | } 147 | } 148 | .content{ 149 | position: absolute; 150 | top: 50%; 151 | left: 50%; 152 | transform: translate(-50%, -50%); 153 | text-align: center; 154 | z-index: -1; 155 | width: 100%; 156 | padding: 0 30px; 157 | color: #1b1b1b; 158 | } 159 | .content div{ 160 | font-size: 40px; 161 | font-weight: 700; 162 | } 163 | -------------------------------------------------------------------------------- /To Do List: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | My Website 11 | 12 | 13 |
14 | 22 |
23 |

24 | Manage your tasks Hello 25 |

26 | 27 |
28 |
29 | 30 |
31 |

Your plan for today ?

32 | 33 |
34 | 35 | 36 |
37 | 38 | 47 |
48 | 49 |
50 |

Sign Up

51 | 78 |
79 | 80 | 81 | 82 | 83 | 84 | // CSS CODE 85 | 86 | 87 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"); 88 | 89 | * { 90 | box-sizing: border-box; 91 | padding: 0; 92 | margin: 0; 93 | } 94 | 95 | body { 96 | font-family: "Poppins", sans-serif; 97 | } 98 | 99 | a { 100 | text-decoration: none; 101 | color: white; 102 | } 103 | 104 | .header { 105 | position: relative; 106 | min-height: 60vh; 107 | background: url("./bg.jpg"); 108 | background-position: center; 109 | background-repeat: no-repeat; 110 | background-size: cover; 111 | color: white; 112 | } 113 | .bg-dark { 114 | background: #000; 115 | color: #eee; 116 | } 117 | 118 | .container { 119 | max-width: 1200px; 120 | margin: auto; 121 | width: 90%; 122 | } 123 | .nav { 124 | min-height: 8vh; 125 | display: flex; 126 | justify-content: space-between; 127 | align-items: center; 128 | } 129 | 130 | .nav-items { 131 | width: 40%; 132 | display: flex; 133 | list-style-type: none; 134 | justify-content: space-between; 135 | } 136 | .headline { 137 | text-align: center; 138 | position: absolute; 139 | top: 50%; 140 | left: 50%; 141 | transform: translate(-50%, -50%); 142 | } 143 | 144 | .btn { 145 | display: inline-block; 146 | outline: none; 147 | border: none; 148 | cursor: pointer; 149 | } 150 | 151 | .btn-headline { 152 | padding: 1rem 2rem; 153 | font-size: 1rem; 154 | margin-top: 1rem; 155 | font-weight: 600; 156 | } 157 | 158 | .section-todo { 159 | margin-top: 5rem; 160 | text-align: center; 161 | } 162 | 163 | .form-todo { 164 | min-height: 5vh; 165 | display: flex; 166 | justify-content: space-between; 167 | margin-top: 1rem; 168 | } 169 | 170 | .form-todo input { 171 | min-height: 100%; 172 | } 173 | .form-todo input[type="text"] { 174 | width: 78%; 175 | padding: 0.8rem; 176 | font-size: 1rem; 177 | font-weight: 400; 178 | } 179 | .form-todo input[type="submit"] { 180 | width: 20%; 181 | background: rgb(44, 55, 63); 182 | color: white; 183 | font-weight: bold; 184 | } 185 | .todo-list { 186 | text-align: left; 187 | font-size: 1.2rem; 188 | list-style-type: none; 189 | } 190 | .todo-list li { 191 | padding: 0.7rem; 192 | background: #444; 193 | color: white; 194 | margin-top: 1rem; 195 | text-transform: capitalize; 196 | display: flex; 197 | justify-content: space-between; 198 | align-items: center; 199 | } 200 | .todo-btn { 201 | /* min-height: 100%; */ 202 | padding: 0.5rem 1rem; 203 | font-size: 1rem; 204 | font-weight: bold; 205 | cursor: pointer; 206 | } 207 | .section-signup { 208 | margin: 5rem auto; 209 | text-align: center; 210 | background: rgb(240, 240, 240); 211 | border-radius: 10px; 212 | padding: 1rem; 213 | } 214 | 215 | .signup-form { 216 | max-width: 800px; 217 | width: 95%; 218 | text-align: left; 219 | margin: auto; 220 | } 221 | .signup-form label { 222 | display: block; 223 | } 224 | 225 | .signup-form input { 226 | display: block; 227 | width: 100%; 228 | padding: 0.5rem; 229 | } 230 | .form-group { 231 | margin-top: 1rem; 232 | } 233 | .signup-form textarea { 234 | width: 100%; 235 | } 236 | .signup-btn { 237 | background: rgb(44, 55, 63); 238 | color: white; 239 | padding: 1rem 2rem; 240 | display: block; 241 | margin: auto; 242 | margin-top: 1rem; 243 | } 244 | -------------------------------------------------------------------------------- /Weather App/app.js.txt: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const https = require('https'); 3 | const bodyParser = require('body-parser'); 4 | const app = express(); 5 | app.use(bodyParser.urlencoded({extended: true})); 6 | 7 | app.get("/", function(req, res) { 8 | res.sendFile(__dirname + "/index.html"); 9 | }); 10 | 11 | app.post("/", function(req, res) { 12 | const query = req.body.city; 13 | const units = "metric"; 14 | const apiKey = "ohnooo" 15 | const url = "https://api.openweathermap.org/data/2.5/weather?q=" + query + "&units=" + units + "&appid=" + apiKey; 16 | https.get(url, function(response) { 17 | console.log(response.statusCode); 18 | response.on("data", function(data) { 19 | const weatherData = JSON.parse(data); 20 | const temp = weatherData.main.temp; 21 | const description = weatherData.weather[0].description; 22 | const icon = weatherData.weather[0].icon; 23 | const imgURL = "http://openweathermap.org/img/wn/" + icon + "@2x.png"; 24 | res.write("

The temperature in " + query + " is " + temp + " degrees Celsius

"); 25 | res.write("

The weather description is: " + description + ".

"); 26 | res.write(""); 27 | res.send(); 28 | }); 29 | }); 30 | }); 31 | 32 | app.listen(3000, function() { 33 | console.log("Server started on port 3000"); 34 | }); -------------------------------------------------------------------------------- /Weather App/index.html.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Weather App 6 | 7 | 8 |
9 |
10 |

Enter the name of any city

11 |

12 | 13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /Weather App/package-lock.json.txt: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weatherproj", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.7", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", 10 | "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", 11 | "requires": { 12 | "mime-types": "~2.1.24", 13 | "negotiator": "0.6.2" 14 | } 15 | }, 16 | "array-flatten": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 20 | }, 21 | "body-parser": { 22 | "version": "1.19.0", 23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz", 24 | "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==", 25 | "requires": { 26 | "bytes": "3.1.0", 27 | "content-type": "~1.0.4", 28 | "debug": "2.6.9", 29 | "depd": "~1.1.2", 30 | "http-errors": "1.7.2", 31 | "iconv-lite": "0.4.24", 32 | "on-finished": "~2.3.0", 33 | "qs": "6.7.0", 34 | "raw-body": "2.4.0", 35 | "type-is": "~1.6.17" 36 | } 37 | }, 38 | "bytes": { 39 | "version": "3.1.0", 40 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", 41 | "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==" 42 | }, 43 | "content-disposition": { 44 | "version": "0.5.3", 45 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", 46 | "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==", 47 | "requires": { 48 | "safe-buffer": "5.1.2" 49 | } 50 | }, 51 | "content-type": { 52 | "version": "1.0.4", 53 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 54 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 55 | }, 56 | "cookie": { 57 | "version": "0.4.0", 58 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz", 59 | "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==" 60 | }, 61 | "cookie-signature": { 62 | "version": "1.0.6", 63 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 64 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 65 | }, 66 | "debug": { 67 | "version": "2.6.9", 68 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 69 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 70 | "requires": { 71 | "ms": "2.0.0" 72 | } 73 | }, 74 | "depd": { 75 | "version": "1.1.2", 76 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 77 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 78 | }, 79 | "destroy": { 80 | "version": "1.0.4", 81 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 82 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 83 | }, 84 | "ee-first": { 85 | "version": "1.1.1", 86 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 87 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 88 | }, 89 | "encodeurl": { 90 | "version": "1.0.2", 91 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 92 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 93 | }, 94 | "escape-html": { 95 | "version": "1.0.3", 96 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 97 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 98 | }, 99 | "etag": { 100 | "version": "1.8.1", 101 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 102 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 103 | }, 104 | "express": { 105 | "version": "4.17.1", 106 | "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz", 107 | "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==", 108 | "requires": { 109 | "accepts": "~1.3.7", 110 | "array-flatten": "1.1.1", 111 | "body-parser": "1.19.0", 112 | "content-disposition": "0.5.3", 113 | "content-type": "~1.0.4", 114 | "cookie": "0.4.0", 115 | "cookie-signature": "1.0.6", 116 | "debug": "2.6.9", 117 | "depd": "~1.1.2", 118 | "encodeurl": "~1.0.2", 119 | "escape-html": "~1.0.3", 120 | "etag": "~1.8.1", 121 | "finalhandler": "~1.1.2", 122 | "fresh": "0.5.2", 123 | "merge-descriptors": "1.0.1", 124 | "methods": "~1.1.2", 125 | "on-finished": "~2.3.0", 126 | "parseurl": "~1.3.3", 127 | "path-to-regexp": "0.1.7", 128 | "proxy-addr": "~2.0.5", 129 | "qs": "6.7.0", 130 | "range-parser": "~1.2.1", 131 | "safe-buffer": "5.1.2", 132 | "send": "0.17.1", 133 | "serve-static": "1.14.1", 134 | "setprototypeof": "1.1.1", 135 | "statuses": "~1.5.0", 136 | "type-is": "~1.6.18", 137 | "utils-merge": "1.0.1", 138 | "vary": "~1.1.2" 139 | } 140 | }, 141 | "finalhandler": { 142 | "version": "1.1.2", 143 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", 144 | "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", 145 | "requires": { 146 | "debug": "2.6.9", 147 | "encodeurl": "~1.0.2", 148 | "escape-html": "~1.0.3", 149 | "on-finished": "~2.3.0", 150 | "parseurl": "~1.3.3", 151 | "statuses": "~1.5.0", 152 | "unpipe": "~1.0.0" 153 | } 154 | }, 155 | "forwarded": { 156 | "version": "0.2.0", 157 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", 158 | "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==" 159 | }, 160 | "fresh": { 161 | "version": "0.5.2", 162 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 163 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 164 | }, 165 | "http-errors": { 166 | "version": "1.7.2", 167 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", 168 | "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==", 169 | "requires": { 170 | "depd": "~1.1.2", 171 | "inherits": "2.0.3", 172 | "setprototypeof": "1.1.1", 173 | "statuses": ">= 1.5.0 < 2", 174 | "toidentifier": "1.0.0" 175 | } 176 | }, 177 | "iconv-lite": { 178 | "version": "0.4.24", 179 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", 180 | "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", 181 | "requires": { 182 | "safer-buffer": ">= 2.1.2 < 3" 183 | } 184 | }, 185 | "inherits": { 186 | "version": "2.0.3", 187 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 188 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 189 | }, 190 | "ipaddr.js": { 191 | "version": "1.9.1", 192 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", 193 | "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==" 194 | }, 195 | "media-typer": { 196 | "version": "0.3.0", 197 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 198 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 199 | }, 200 | "merge-descriptors": { 201 | "version": "1.0.1", 202 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 203 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 204 | }, 205 | "methods": { 206 | "version": "1.1.2", 207 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 208 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 209 | }, 210 | "mime": { 211 | "version": "1.6.0", 212 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", 213 | "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" 214 | }, 215 | "mime-db": { 216 | "version": "1.48.0", 217 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz", 218 | "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==" 219 | }, 220 | "mime-types": { 221 | "version": "2.1.31", 222 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz", 223 | "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==", 224 | "requires": { 225 | "mime-db": "1.48.0" 226 | } 227 | }, 228 | "ms": { 229 | "version": "2.0.0", 230 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 231 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 232 | }, 233 | "negotiator": { 234 | "version": "0.6.2", 235 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", 236 | "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" 237 | }, 238 | "on-finished": { 239 | "version": "2.3.0", 240 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 241 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 242 | "requires": { 243 | "ee-first": "1.1.1" 244 | } 245 | }, 246 | "parseurl": { 247 | "version": "1.3.3", 248 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", 249 | "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==" 250 | }, 251 | "path-to-regexp": { 252 | "version": "0.1.7", 253 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 254 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 255 | }, 256 | "proxy-addr": { 257 | "version": "2.0.7", 258 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", 259 | "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", 260 | "requires": { 261 | "forwarded": "0.2.0", 262 | "ipaddr.js": "1.9.1" 263 | } 264 | }, 265 | "qs": { 266 | "version": "6.7.0", 267 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", 268 | "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==" 269 | }, 270 | "range-parser": { 271 | "version": "1.2.1", 272 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", 273 | "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==" 274 | }, 275 | "raw-body": { 276 | "version": "2.4.0", 277 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", 278 | "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==", 279 | "requires": { 280 | "bytes": "3.1.0", 281 | "http-errors": "1.7.2", 282 | "iconv-lite": "0.4.24", 283 | "unpipe": "1.0.0" 284 | } 285 | }, 286 | "safe-buffer": { 287 | "version": "5.1.2", 288 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", 289 | "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" 290 | }, 291 | "safer-buffer": { 292 | "version": "2.1.2", 293 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", 294 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" 295 | }, 296 | "send": { 297 | "version": "0.17.1", 298 | "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", 299 | "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==", 300 | "requires": { 301 | "debug": "2.6.9", 302 | "depd": "~1.1.2", 303 | "destroy": "~1.0.4", 304 | "encodeurl": "~1.0.2", 305 | "escape-html": "~1.0.3", 306 | "etag": "~1.8.1", 307 | "fresh": "0.5.2", 308 | "http-errors": "~1.7.2", 309 | "mime": "1.6.0", 310 | "ms": "2.1.1", 311 | "on-finished": "~2.3.0", 312 | "range-parser": "~1.2.1", 313 | "statuses": "~1.5.0" 314 | }, 315 | "dependencies": { 316 | "ms": { 317 | "version": "2.1.1", 318 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", 319 | "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==" 320 | } 321 | } 322 | }, 323 | "serve-static": { 324 | "version": "1.14.1", 325 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz", 326 | "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==", 327 | "requires": { 328 | "encodeurl": "~1.0.2", 329 | "escape-html": "~1.0.3", 330 | "parseurl": "~1.3.3", 331 | "send": "0.17.1" 332 | } 333 | }, 334 | "setprototypeof": { 335 | "version": "1.1.1", 336 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", 337 | "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==" 338 | }, 339 | "statuses": { 340 | "version": "1.5.0", 341 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", 342 | "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" 343 | }, 344 | "toidentifier": { 345 | "version": "1.0.0", 346 | "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", 347 | "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" 348 | }, 349 | "type-is": { 350 | "version": "1.6.18", 351 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", 352 | "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", 353 | "requires": { 354 | "media-typer": "0.3.0", 355 | "mime-types": "~2.1.24" 356 | } 357 | }, 358 | "unpipe": { 359 | "version": "1.0.0", 360 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 361 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 362 | }, 363 | "utils-merge": { 364 | "version": "1.0.1", 365 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 366 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 367 | }, 368 | "vary": { 369 | "version": "1.1.2", 370 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 371 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 372 | } 373 | } 374 | } -------------------------------------------------------------------------------- /Weather App/package.json.txt: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weatherproj", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "body-parser": "^1.19.0", 13 | "express": "^4.17.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /console.js: -------------------------------------------------------------------------------- 1 | var darkmode = document.getElementById("darkmode-icon"); 2 | 3 | darkmode.onclick = function () { 4 | document.body.classList.toggle("light-mode"); 5 | if (document.body.classList.contains("light-mode")) { 6 | 7 | darkmode.src = "/img/moon.png"; 8 | 9 | } 10 | else { 11 | 12 | darkmode.src = "/img/sun.png"; 13 | } 14 | 15 | } -------------------------------------------------------------------------------- /css/contact.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-image: url('/img/city.png'); 3 | background-size: cover ; 4 | background-repeat: no-repeat; 5 | } 6 | 7 | main 8 | { 9 | display: flex; 10 | flex-direction: column; 11 | 12 | width: 90%; 13 | margin: auto; 14 | 15 | } 16 | 17 | .title 18 | { 19 | font-size: 50px; 20 | font-weight: bold; 21 | padding: 1.5% 0; 22 | color: #ffffff; 23 | text-align: center; 24 | } 25 | 26 | .title-info 27 | { 28 | padding-bottom: 2%; 29 | color: #ffffff; 30 | text-align: center; 31 | } 32 | 33 | .form 34 | { 35 | display: flex; 36 | flex-direction: column; 37 | width: 60%; 38 | padding: 2%; 39 | 40 | } 41 | 42 | .input-group, .textarea-group 43 | { 44 | padding: 1% 0; 45 | color: darkgray; 46 | } 47 | 48 | input, textarea 49 | { 50 | color: inherit; 51 | width: 100%; 52 | border: none; 53 | border-bottom: 1px solid darkgray; 54 | padding: 1.5%; 55 | font-size: 20px; 56 | } 57 | 58 | input:focus, textarea:focus 59 | { 60 | outline: transparent; 61 | border-bottom: 2px solid darkgray; 62 | } 63 | 64 | input::placeholder, textarea::placeholder 65 | { 66 | color: transparent; 67 | } 68 | 69 | label 70 | { 71 | color: #212121; 72 | position: relative; 73 | left: 0.5em; 74 | top: -2em; 75 | cursor: auto; 76 | transition: 0.3s ease all; 77 | } 78 | 79 | input:focus ~ label, input:not(:placeholder-shown) ~ label 80 | { 81 | top: -5em; 82 | color: black; 83 | font-size: 15px; 84 | } 85 | 86 | textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label 87 | { 88 | top: -10.5em; 89 | color: darkgrey; 90 | font-size: 15px; 91 | } 92 | 93 | .button-div 94 | { 95 | display: flex; 96 | align-items: center; 97 | } 98 | 99 | button 100 | { 101 | padding: 2%; 102 | width: 25%; 103 | border: 1px solid; 104 | border-color: #212121; 105 | border-radius: 5px; 106 | font-family: inherit; 107 | font-size: 18px; 108 | background-color: paleturquoise; 109 | color: inherit; 110 | box-shadow: 0 0 10px #212121; 111 | } 112 | 113 | button:hover 114 | { 115 | background-color: #424242; 116 | color: #ffffff; 117 | cursor: pointer; 118 | } -------------------------------------------------------------------------------- /css/improved ui: -------------------------------------------------------------------------------- 1 | body{ 2 | background-image: url('/img/city.png'); 3 | background-size: cover ; 4 | background-repeat: no-repeat; 5 | } 6 | 7 | main 8 | { 9 | display: flex; 10 | flex-direction: column; 11 | 12 | width: 90%; 13 | margin: auto; 14 | 15 | } 16 | 17 | .title 18 | { 19 | font-size: 50px; 20 | font-weight: bold; 21 | padding: 1.5% 0; 22 | color: #ffffff; 23 | text-align: center; 24 | } 25 | 26 | .title-info 27 | { 28 | padding-bottom: 2%; 29 | color: #ffffff; 30 | text-align: center; 31 | } 32 | 33 | .form 34 | { 35 | display: flex; 36 | flex-direction: column; 37 | width: 60%; 38 | padding: 2%; 39 | 40 | } 41 | 42 | .input-group, .textarea-group 43 | { 44 | padding: 1% 0; 45 | color: darkgray; 46 | } 47 | 48 | input, textarea 49 | { 50 | color: inherit; 51 | width: 100%; 52 | border: none; 53 | border-bottom: 1px solid darkgray; 54 | padding: 1.5%; 55 | font-size: 20px; 56 | } 57 | 58 | input:focus, textarea:focus 59 | { 60 | outline: transparent; 61 | border-bottom: 2px solid darkgray; 62 | } 63 | 64 | input::placeholder, textarea::placeholder 65 | { 66 | color: transparent; 67 | } 68 | 69 | label 70 | { 71 | color: #212121; 72 | position: relative; 73 | left: 0.5em; 74 | top: -2em; 75 | cursor: auto; 76 | transition: 0.3s ease all; 77 | } 78 | 79 | input:focus ~ label, input:not(:placeholder-shown) ~ label 80 | { 81 | top: -5em; 82 | color: black; 83 | font-size: 15px; 84 | } 85 | 86 | textarea:focus ~ label, textarea:not(:placeholder-shown) ~ label 87 | { 88 | top: -10.5em; 89 | color: darkgrey; 90 | font-size: 15px; 91 | } 92 | 93 | .button-div 94 | { 95 | display: flex; 96 | align-items: center; 97 | } 98 | 99 | button 100 | { 101 | padding: 2%; 102 | width: 25%; 103 | border: 1px solid; 104 | border-color: #212121; 105 | border-radius: 5px; 106 | font-family: inherit; 107 | font-size: 18px; 108 | background-color: paleturquoise; 109 | color: inherit; 110 | box-shadow: 0 0 10px #212121; 111 | } 112 | 113 | button:hover 114 | { 115 | background-color: #424242; 116 | color: #ffffff; 117 | cursor: pointer; 118 | } 119 | -------------------------------------------------------------------------------- /css/nav.css: -------------------------------------------------------------------------------- 1 | .topnav { 2 | overflow: hidden; 3 | background-color: #212529; 4 | overflow: hidden; 5 | background-color: #212529; 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } 10 | 11 | .topnav a { 12 | float: left; 13 | display: block; 14 | color: #f2f2f2b6; 15 | text-align: center; 16 | padding: 14px 16px; 17 | text-decoration: none; 18 | font-size: 17px; 19 | } 20 | 21 | .topnav a:hover { 22 | color: rgb(255, 255, 255); 23 | font-weight: 500; 24 | } 25 | 26 | .topnav a.active { 27 | color: white; 28 | } 29 | 30 | .topnav .icon { 31 | display: none; 32 | } 33 | .nvl{ 34 | display: flex; 35 | align-items: center; 36 | justify-content: flex-end; 37 | } 38 | .srch{ 39 | display: flex; 40 | height:27px; 41 | margin-top: auto; 42 | margin-bottom: auto; 43 | 44 | } 45 | @media screen and (max-width: 600px) { 46 | .topnav a:not(:first-child) {display: none;} 47 | .topnav a.icon { 48 | float: right; 49 | display: block; 50 | } 51 | .nvl{ 52 | display: flex; 53 | flex-direction: column; 54 | align-items: center; 55 | align-content: center; 56 | } 57 | .srch { 58 | display: none!important; 59 | } 60 | } 61 | 62 | @media screen and (max-width: 600px) { 63 | .topnav.responsive {position: relative;} 64 | .topnav.responsive .icon { 65 | position: absolute; 66 | right: 0; 67 | top: 0; 68 | } 69 | .topnav.responsive a { 70 | float: none; 71 | display: block; 72 | text-align: left; 73 | } 74 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Varela+Round&display=swap"); 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | :root{ 10 | --primary-colour:rgb(21, 23, 26); 11 | --secondary-colour:aliceblue; 12 | } 13 | .light-mode{ 14 | --primary-colour:aliceblue; 15 | --secondary-colour:rgb(21, 23, 26); 16 | } 17 | 18 | #darkmode-icon { 19 | cursor: pointer; 20 | border: none; 21 | } 22 | 23 | body{ 24 | background-color: var(--primary-colour); 25 | } 26 | 27 | .section{ 28 | background-color: var(--secondary-colour); 29 | color: var(--primary-colour); 30 | width: 100%; 31 | } 32 | 33 | /* Header styling */ 34 | nav{ 35 | width: 100%; 36 | } 37 | 38 | .header-div{ 39 | width: 100%; 40 | background-color:var(--primary-colour); 41 | display: flex; 42 | justify-content: space-between; 43 | align-items: center; 44 | position: flex; 45 | top: 0; 46 | z-index: 1; 47 | } 48 | /* Logo styling */ 49 | .logo { 50 | width: 10rem; 51 | display: flex; 52 | justify-content: center; 53 | align-items: center; 54 | } 55 | .logo img { 56 | width: 25%; 57 | border: 3px solid var(--secondary-colour); 58 | border-radius: 100px; 59 | } 60 | 61 | /* List and search button styling */ 62 | .main-menu { 63 | display: flex; 64 | justify-content: space-around; 65 | align-items: center; 66 | } 67 | 68 | .menu a { 69 | list-style: none; 70 | text-decoration: none; 71 | color:var(--secondary-colour); 72 | padding: 0px 25px; 73 | margin-top: 10px; 74 | font-size: 20px; 75 | } 76 | 77 | .menu a:first-child { 78 | font-size: 25px; 79 | } 80 | 81 | .menu a:hover { 82 | font-size: 25px; 83 | text-decoration: none; 84 | color: var(--secondary-colour); 85 | } 86 | .main-menu input { 87 | width: 70%; 88 | padding: 5px; 89 | border: none; 90 | outline: none; 91 | font-size: 15px; 92 | border-radius: 8px; 93 | left: 20px; 94 | } 95 | 96 | .main-menu button { 97 | width: 20%; 98 | background:var(--secondary-colour); 99 | border: none; 100 | margin-left: 2px; 101 | outline: none; 102 | font-size: 15px; 103 | border-radius: 8px; 104 | } 105 | 106 | /* background styling */ 107 | .background { 108 | background: rgba(0, 0, 0, 0.7) url(../img/city.png); 109 | background-size: cover; 110 | background-blend-mode: lighten; 111 | } 112 | 113 | /* firstsection / hero section styling */ 114 | .firstsection { 115 | height: 100vh; 116 | position: relative; 117 | } 118 | 119 | .box-main { 120 | height: 70%; 121 | display: flex; 122 | justify-content: center; 123 | align-items: center; 124 | color:#fff; 125 | font-family: Georgia, "Times New Roman", Times, serif; 126 | max-width: 50%; 127 | margin: auto; 128 | } 129 | 130 | .firsthalf { 131 | width: 100%; 132 | display: flex; 133 | justify-content: flex-start; 134 | flex-direction: column; 135 | } 136 | .secondhalf { 137 | width: 30%; 138 | } 139 | 140 | .secondhalf img { 141 | width: 100%; 142 | border: 3px solid var(--secondary-colour); 143 | border-radius: 150px; 144 | display: flex; 145 | margin: auto; 146 | position: relative; 147 | margin-top: 30px; 148 | } 149 | 150 | .text-big { 151 | font-size: 2.2rem; 152 | margin: 2rem 0 0.7rem; 153 | } 154 | .text-small { 155 | font-size: 1.2rem; 156 | margin-bottom: 1rem; 157 | } 158 | 159 | /* remaining sections styling */ 160 | .section { 161 | display: flex; 162 | justify-content: center; 163 | align-items: center; 164 | max-width: 100%; 165 | margin: auto; 166 | font-family: "Ubuntu", sans-serif; 167 | padding: 10px 40px; 168 | 169 | } 170 | 171 | .section-left { 172 | flex-direction: row-reverse; 173 | } 174 | 175 | .fluid-img img { 176 | width: 250px; 177 | padding: 7px; 178 | margin:12px; 179 | border: 2px solid darkslateblue; 180 | border-radius: 134px; 181 | } 182 | .sectiontag { 183 | padding: 6px 0px; 184 | } 185 | .sectionsubtag { 186 | font-family: Verdana, Geneva, Tahoma, sans-serif; 187 | } 188 | 189 | /* contributing section styles */ 190 | .contributing-heading { 191 | font-family: "Varela Round", sans-serif; 192 | font-size: 1.5rem; 193 | padding: 10px; 194 | margin-left: 100px; 195 | margin-top: 50px; 196 | } 197 | .container_contributor{ 198 | padding:0 20vw; 199 | 200 | } 201 | .box { 202 | display: flex; 203 | } 204 | .contributors-2022 { 205 | font-family: "poppins", sans-serif; 206 | width: 600px; 207 | margin: 40px 0px; 208 | background-color: var(--primary-colour); 209 | padding: 25px; 210 | border-radius: 20px; 211 | box-shadow: 0 0 5px 10px darkslateblue; 212 | margin-left: 10%; 213 | } 214 | .contributors-heading { 215 | font-size: 2rem; 216 | color: darkslategrey; 217 | } 218 | 219 | .inner-box1 ul { 220 | display: flex; 221 | flex-direction: column; 222 | margin-left: 50px; 223 | margin-top: 20px; 224 | letter-spacing: 1px; 225 | } 226 | .inner-box1 ul li { 227 | font-size: 1.3rem; 228 | padding: 5px; 229 | } 230 | ul li::marker { 231 | color: var(--secondary-colour); 232 | font-size: 1.5rem; 233 | } 234 | a { 235 | font-weight: 600; 236 | text-decoration: none; 237 | color:var(--secondary-colour); 238 | font-size: 1.5rem; 239 | } 240 | .inner-box1 a:hover { 241 | text-decoration: underline; 242 | color:var(--secondary-colour); 243 | } 244 | 245 | /* footer section */ 246 | footer { 247 | background-color:var(--primary-colour); 248 | color:var(--secondary-colour); 249 | width: 100%; 250 | height: 60vh; 251 | } 252 | 253 | .foot { 254 | display: flex; 255 | position: relative; 256 | } 257 | .bottom { 258 | width: 80%; 259 | border: 2px solid sec; 260 | display: flex; 261 | position: absolute; 262 | padding: 10px 20px; 263 | margin: 50px 100px; 264 | height: 27vh; 265 | text-align: center; 266 | } 267 | 268 | .newsletter { 269 | width: 50%; 270 | margin: 10px; 271 | color:var(--secondary-colour); 272 | } 273 | 274 | .newsletter h1 { 275 | text-align: center; 276 | font-size: 2.5em; 277 | margin-bottom: 10px; 278 | } 279 | 280 | .newsletter p { 281 | line-height: 10px; 282 | font-size: 1em; 283 | } 284 | 285 | /* .subscribe { 286 | width: 40%; 287 | margin: 10px; 288 | margin-top: 30px; 289 | } */ 290 | 291 | .subscribe input { 292 | width: 40%; 293 | margin-top: 20px; 294 | padding: 10px; 295 | border: none; 296 | outline: none; 297 | font-size: 15px; 298 | border-radius: 8px; 299 | color:var(--secondary-colour); 300 | } 301 | 302 | .subscribe button { 303 | width: 7em; 304 | padding: 10px; 305 | color:var(--secondary-colour); 306 | background-color: #e74c3c; 307 | border: none; 308 | outline: none; 309 | font-size: 1rem; 310 | border-radius: 8px; 311 | } 312 | 313 | .icons { 314 | width: 100%; 315 | position: absolute; 316 | text-align: center; 317 | margin: auto; 318 | margin-top: 32vh; 319 | } 320 | 321 | .fa-brands, 322 | .fab { 323 | font-weight: 400; 324 | margin:0px 20px; 325 | padding: 2px; 326 | cursor: pointer; 327 | } 328 | .footer-list { 329 | text-align: center; 330 | padding: 1em; 331 | } 332 | footer ul { 333 | width: 100%; 334 | margin: 10px; 335 | margin-top: 300px; 336 | font-weight: bold; 337 | text-align: center; 338 | font-size: 1.2em; 339 | display: flex; 340 | gap: 1rem; 341 | list-style: none; 342 | justify-content: center; 343 | cursor: pointer; 344 | font-weight: bold; 345 | font-size: 1em; 346 | display: flex; 347 | gap: 1rem; 348 | list-style: none; 349 | justify-content: center; 350 | flex-wrap: wrap; 351 | } 352 | .footer-list a{ 353 | text-decoration: none; 354 | color:white; 355 | 356 | } 357 | 358 | /* media queries */ 359 | @media (max-width: 700px) { 360 | .section { 361 | flex-direction: column-reverse; 362 | } 363 | } 364 | 365 | @media (max-width: 600px) { 366 | .contributors-2022 { 367 | width: 100%; 368 | margin-left: 0; 369 | border-radius: 0; 370 | } 371 | } 372 | 373 | /* scroll bar */ 374 | 375 | ::-webkit-scrollbar { 376 | width: 7px; 377 | background-color: rgb(223, 242, 255); 378 | } 379 | 380 | ::-webkit-scrollbar-track { 381 | box-shadow: inset 0 0 5px rgba(199, 199, 199, 0.263); 382 | border-radius: 5px; 383 | } 384 | 385 | ::-webkit-scrollbar-thumb { 386 | background:var(--primary-colour); 387 | border-radius: 5px; 388 | } 389 | 390 | ::-webkit-scrollbar-thumb:hover { 391 | background: rgb(83, 138, 220); 392 | } 393 | 394 | 395 | 396 | /* ############################################################################################*/ 397 | 398 | 399 | 400 | /* =============================== F O O T E R ==================================== */ 401 | .footer_section{ 402 | 403 | width:100%; 404 | } 405 | 406 | /* =============================== FIRST = F O O T E R ==================================== */ 407 | 408 | .subscriber_head{ 409 | 410 | /* background-color: #435978; */ 411 | background-color: #9cdda2; 412 | /* display: flex; */ 413 | display: grid; 414 | text-align: center; 415 | width: 100%; 416 | padding:12px; 417 | box-sizing: border-box; 418 | grid-template-columns: 1fr 1.5fr 0.5fr; 419 | grid-template-areas: 420 | "head input subscribe"; 421 | /* align-items: center; 422 | justify-content: center; */ 423 | /* display: flex; */ 424 | /* margin: auto; */ 425 | 426 | } 427 | 428 | .subscriber_search_box{ 429 | 430 | margin: auto; 431 | display: flex; 432 | width: 98%; 433 | grid-area: input; 434 | 435 | } 436 | 437 | .subscriber_search_bar{ 438 | width: 100%; 439 | max-width: 100%; 440 | font-family: inherit; 441 | 442 | /* max-width: calc(100% - 50%); */ 443 | color: #435978; 444 | font-weight: 500; 445 | border-radius:50px 0px 0px 50px; 446 | border: 0px; 447 | padding: 12px 0px 12px 20px; 448 | 449 | font-size: 15px; 450 | background: #F0F4EF; 451 | 452 | 453 | 454 | 455 | 456 | 457 | } 458 | 459 | .subscriber_head h1{ 460 | font-size: 1.5rem; 461 | font-weight: lighter; 462 | color: white; 463 | margin-top: auto; 464 | margin-bottom: auto; 465 | font-family: sans-serif; 466 | grid-area: head; 467 | text-align: right; 468 | margin-right: 10px; 469 | 470 | } 471 | 472 | .subscriber_button{ 473 | border: 0px; 474 | width: 150px; 475 | max-width: 100%; 476 | font-size: 700; 477 | padding: 15px; 478 | font-size: 1rem; 479 | color: white; 480 | letter-spacing: 4px; 481 | grid-area: subscribe; 482 | font-family: sans-serif; 483 | background: #2cb95b; 484 | cursor: pointer; 485 | margin-top: auto; 486 | margin-bottom: auto; 487 | 488 | font-weight: 500; 489 | border-radius: 0px 50px 50px 0px; 490 | outline: 0; 491 | transition: all 0.2s; 492 | 493 | } 494 | 495 | /* =============================== FIRST = F O O T E R = ENDS ==================================== */ 496 | 497 | 498 | 499 | 500 | /* =============================== MID = F O O T E R ==================================== */ 501 | .subscriber_mid{ 502 | 503 | background-color: #a9d1ff; 504 | width: 100%; 505 | height: 100%; 506 | display: grid; 507 | grid-template-rows: 0.8fr 1.3fr; 508 | grid-template-columns: 1fr; 509 | } 510 | 511 | 512 | .first_para{ 513 | display: flex; 514 | justify-content: space-around; 515 | align-items: center; 516 | flex-wrap: wrap; 517 | } 518 | 519 | .second-para{ 520 | display: grid; 521 | grid-template-rows: 1fr; 522 | grid-template-columns: 1fr 0.5fr; 523 | border-top: 1px solid white; 524 | padding: 20px 50px 0px 50px; 525 | } 526 | 527 | .second-para .middle_para{ 528 | display: grid; 529 | grid-template-rows: 1fr; 530 | grid-template-columns: repeat(4, minmax(20%, 1fr)); 531 | } 532 | 533 | .footer_About_para{ 534 | margin-top: 10%; 535 | margin-bottom: 10%; 536 | } 537 | 538 | .footer_About_head{ 539 | 540 | color: black; 541 | } 542 | 543 | .footer_About_links{ 544 | 545 | font-weight: lighter; 546 | color: black; 547 | font-size: 18px; 548 | text-decoration: none; 549 | transition: 0.5s; 550 | } 551 | 552 | .footer_About_links:hover{ 553 | 554 | color: #ffffff; 555 | background-color: rgb(12, 127, 158); 556 | } 557 | 558 | 559 | .last_para{ 560 | margin-top: auto; 561 | margin-bottom: auto; 562 | } 563 | 564 | .footer_form_mid{ 565 | margin-top: 3%; 566 | display: flex; 567 | width: 100%; 568 | } 569 | 570 | .footer_mid_subscribe_bar{ 571 | width: 100%; 572 | max-width: 100%; 573 | font-family: inherit; 574 | color: #435978; 575 | font-weight: 500; 576 | border-radius:50px 0px 0px 50px; 577 | border: 0px; 578 | padding: 15px 0px 15px 20px; 579 | font-size: 14px; 580 | background: #F0F4EF; 581 | } 582 | 583 | .footer_mid_subscriber_button{ 584 | border: 0px; 585 | width: 100px; 586 | max-width: 100%; 587 | font-size: 700; 588 | padding: 13px; 589 | font-size: 1rem; 590 | color: white; 591 | letter-spacing: 1px; 592 | grid-area: subscribe; 593 | font-family: sans-serif; 594 | background: #2cb95b; 595 | cursor: pointer; 596 | margin-top: auto; 597 | margin-bottom: auto; 598 | margin-right: 2%; 599 | font-weight: 500; 600 | border-radius: 0px 50px 50px 0px; 601 | outline: 0; 602 | transition: all 0.2s; 603 | } 604 | 605 | .subscriber_button:hover{ 606 | background: rgb(0, 140, 255); 607 | 608 | } 609 | 610 | .footer_mid_subscriber_button:hover{ 611 | 612 | background: rgb(0, 140, 255); 613 | } 614 | 615 | 616 | 617 | .footer_mid_icons_inner:hover{ 618 | 619 | color: #006aff; 620 | } 621 | 622 | .quick_signup{ 623 | position: relative; 624 | font-size: 1.4rem; 625 | font-weight: bold; 626 | } 627 | .quick_signup::before{ 628 | content: ''; 629 | position: absolute; 630 | left: 0; 631 | bottom: -2px; 632 | height: 2px; 633 | width: 50px; 634 | background: rgb(0, 0, 0); 635 | } 636 | 637 | .footer_last{ 638 | margin-bottom: 4%; 639 | } 640 | 641 | .footer_mid_icons_inner{ 642 | font-size: 26px; 643 | color: blue; 644 | } 645 | 646 | .icon_section{ 647 | display: block; 648 | } 649 | 650 | 651 | 652 | /* ====================================== MID = F O O T E R ENDS ======================================= */ 653 | 654 | /* ====================================== LAST = F O O T E R STARTS ======================================= */ 655 | .subscriber_last{ 656 | background-color: #0048ac; 657 | height: 70px; 658 | width: 100%; 659 | display: grid; 660 | grid-gap: 25px; 661 | grid-template-columns: 2fr 0.01fr 3fr 1fr; 662 | grid-template-areas: 663 | "logo line3 mid-section copyright"; 664 | 665 | } 666 | 667 | 668 | .footer_logo_last{ 669 | 670 | text-align: end; 671 | margin-top: auto; 672 | margin-bottom: auto; 673 | } 674 | 675 | 676 | .footer_last_mid_para{ 677 | 678 | margin-top: auto; 679 | margin-bottom: auto; 680 | 681 | } 682 | 683 | #unleash{ 684 | 685 | color: white; 686 | font-weight: lighter; 687 | 688 | } 689 | 690 | .copyright2{ 691 | 692 | color: white; 693 | font-size: 0.7rem; 694 | font-weight: lighter; 695 | } 696 | 697 | .footer_last_last_para{ 698 | 699 | margin-top: auto; 700 | margin-bottom: auto; 701 | } 702 | div.subscriber_mid{ 703 | padding:20px 15px; 704 | color:rgb(28, 46, 75); 705 | font-family :ubuntu; 706 | } 707 | 708 | 709 | /* ====================================== LAST = F O O T E R ENDS ======================================= */ 710 | 711 | /* -----------------------------MEDIA QUERIES----------------------------- */ 712 | 713 | @media only screen and (max-width: 992px) { 714 | 715 | .subscriber_head{ 716 | 717 | grid-template-columns: 0.5fr 2.5fr 0.5fr; 718 | } 719 | #free_daily_updates{ 720 | display: none; 721 | } 722 | 723 | } 724 | 725 | 726 | @media only screen and (max-width: 768px) { 727 | 728 | 729 | .subscriber_head{ 730 | 731 | grid-template-columns: 0.1fr 1fr 0.1fr; 732 | } 733 | 734 | .second-para{ 735 | grid-template-rows: 0.8fr auto; 736 | grid-template-columns: 1fr; 737 | border-top: 1px solid white; 738 | } 739 | 740 | .second-para .middle_para{ 741 | grid-template-rows: 1fr auto; 742 | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 743 | } 744 | 745 | div.first_para{ 746 | 747 | justify-content: center; 748 | flex-direction: column; 749 | } 750 | .middle_para{ 751 | flex-wrap: wrap; 752 | } 753 | 754 | .last_para{ 755 | padding-top: 20px; 756 | width: 75%; 757 | text-align: left; 758 | } 759 | 760 | .footer_mid_subscriber_button{ 761 | margin-right: 0; 762 | } 763 | 764 | .contacts h4{ 765 | text-align: left; 766 | margin-left: 2%; 767 | margin-top: 2%; 768 | margin-bottom: 2%; 769 | } 770 | 771 | .contacts{ 772 | 773 | margin-top: 3%; 774 | margin-bottom: 3%; 775 | } 776 | 777 | .icon_section{ 778 | margin-left: 0%; 779 | justify-content: center; 780 | } 781 | 782 | .footer_mid_icons_inner{ 783 | font-size: 3rem; 784 | } 785 | 786 | .subscriber_last{ 787 | display: block; 788 | width: 100%; 789 | height: 100%; 790 | padding: 1%; 791 | } 792 | 793 | .footer_logo_last{ 794 | text-align: center; 795 | } 796 | 797 | .footer_last_mid_para{ 798 | text-align: center; 799 | } 800 | 801 | .footer_last_last_para{ 802 | text-align: center; 803 | } 804 | 805 | .footer_last{ 806 | margin: 0; 807 | } 808 | 809 | 810 | } 811 | 812 | 813 | 814 | @media only screen and (max-width: 576px) { 815 | .subscriber_mid{ 816 | grid-template-rows: 0.8fr 1fr; 817 | } 818 | .box-main{ 819 | max-width: 75%; 820 | } 821 | 822 | .subscriber_head{ 823 | 824 | grid-template-columns: 0.1fr 1fr 0.1fr; 825 | } 826 | 827 | 828 | .second-para{ 829 | padding: 20px 10px 20px 10px; 830 | } 831 | 832 | .middle_para{ 833 | text-align: left; 834 | } 835 | 836 | .last_para{ 837 | width: 100%; 838 | text-align: left; 839 | padding: 20px 20px; 840 | } 841 | 842 | .footer_About{ 843 | 844 | 845 | margin-top: auto; 846 | margin-bottom: auto; 847 | margin-left: 8.4%; 848 | margin-right: 8.4%; 849 | } 850 | 851 | .footer_About_head{ 852 | 853 | font-size: 1.4rem; 854 | } 855 | 856 | .footer_About_links{ 857 | 858 | font-size: 1.6rem; 859 | } 860 | 861 | 862 | #footer_first_head{ 863 | 864 | font-size: 2rem; 865 | } 866 | 867 | 868 | .footer_para h5{ 869 | 870 | font-size: 1.2rem; 871 | } 872 | 873 | } 874 | .copyright-txt{ 875 | width: 100%; 876 | text-align: center; 877 | 878 | } 879 | a.copyright{ 880 | font-family: monospace; 881 | font-size:large; 882 | } 883 | .copyright { 884 | display:inline-block; 885 | text-decoration: none !important; 886 | margin:0 auto; 887 | 888 | -webkit-transition: all 0.2s ease-in-out; 889 | -moz-transition: all 0.2s ease-in-out; 890 | -ms-transition: all 0.2s ease-in-out; 891 | -o-transition: all 0.2s ease-in-out; 892 | transition: all 0.2s ease-in-out; 893 | } 894 | 895 | #srch{ 896 | display: flex; 897 | align-items: center; 898 | } 899 | /* display: flex; 900 | align-content: flex-end; 901 | justify-content: center; */ -------------------------------------------------------------------------------- /footer: -------------------------------------------------------------------------------- 1 | /* HTML Code */ 2 | 43 | 44 | /* CSS Code */ 45 | 46 | .footer{ 47 | display: flex; 48 | flex-wrap: wrap; 49 | justify-content: space-between; 50 | padding: 40px 60px; 51 | } 52 | .footer .col{ 53 | display: flex; 54 | align-items: flex-start; 55 | flex-direction: column; 56 | margin-bottom: 20px; 57 | } 58 | .footer .col.add{ 59 | line-height: 1; 60 | margin: 5px 0; 61 | } 62 | .footer .foo-logo{ 63 | height: 60px; 64 | width: 60px; 65 | } 66 | .footer h4{ 67 | margin-bottom: 10px; 68 | font-size: 20px; 69 | } 70 | 71 | .footer a{ 72 | margin-bottom: 6px; 73 | font-size: 14px; 74 | font-weight: 500; 75 | color: #458b0c; 76 | cursor: pointer; 77 | transition: 0.5s ease; 78 | } 79 | .footer a:hover{ 80 | color: #113510; 81 | } 82 | .footer .icons i{ 83 | margin: 0 10px 0 0; 84 | } 85 | .footer .play{ 86 | display: flex; 87 | padding: 20px 0; 88 | } 89 | .footer .play img{ 90 | height: 8vh; 91 | width: 30vh; 92 | padding-right: 10px; 93 | 94 | } 95 | .footer .visa{ 96 | height: 5vh; 97 | width: 30vh; 98 | max-width: 40%; 99 | max-height: 30%; 100 | } 101 | -------------------------------------------------------------------------------- /img/100572.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/100572.jpg -------------------------------------------------------------------------------- /img/1080x360.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/1080x360.jpg -------------------------------------------------------------------------------- /img/city.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/city.png -------------------------------------------------------------------------------- /img/logo-laptop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/logo-laptop.png -------------------------------------------------------------------------------- /img/logo02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/logo02.jpg -------------------------------------------------------------------------------- /img/moon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/moon.png -------------------------------------------------------------------------------- /img/online-shop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/online-shop.jpg -------------------------------------------------------------------------------- /img/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/search.png -------------------------------------------------------------------------------- /img/search1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/search1.png -------------------------------------------------------------------------------- /img/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/numcys/Basic_website_HTML_CSS_only/20a2e168003671ab7d13a56b8577bda91c356fdb/img/sun.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Project 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 24 | 25 | 26 | 27 | 28 | 29 | 51 | 52 |
53 | 54 | 55 |
56 |
57 |
58 | 59 |
60 |

The Shopping place 61 | for all needs!

62 |

63 | Welcome! Find all the products you need all at great discounts. 64 | This is the future of shopping. 65 |

66 | 67 |
68 |
69 |
70 |
71 |
72 | 73 |

When speaking about our global environment, a common adage to hear is that “we 74 | know more about outer space than we do about the ocean.” Life in the ocean, they discovered, followed a simple 75 | mathematical rule: 76 | The abundance of an organism is closely linked to its body size. To put it another way, the smaller the 77 | organism, the more 78 | of them you find in the ocean. This exclusive Faunalytics Fundamental examines our relationships with ocean 79 | life, exploring some of 80 | the most important issues facing fishes, aquatic mammals, and other species, based on the best available and 81 | current data. We hope you find the information useful in your advocacy, and in your day-to-day lives advocacy. 82 | Please be sure to check out all of the source links embedded in the text and infographics below, and be sure to 83 | check out the blog about what we included, and what we left out.

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

Unlike companion animals, certain kinds of wildlife, and even farmed 93 | animals, 94 | there are relatively few opportunities to “get to know” ocean life. As with farmed animals, many people only get 95 | close to or experience ocean creatures after they’ve already been killed, processed, and plated. In other cases, 96 | people may “meet” animals like whales, dolphins, and other species in situations of extreme and unnatural 97 | captivity, like zoos and aquariums. Even with activities like whale watching, it can be difficult to truly 98 | “know” the vast range of ocean life out there. Below, we look at different categories of ocean life and just how 99 | incredible they truly are.

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

While most people don’t have a direct connection to ocean life, that doesn’t 108 | stop people from having opinions about it! Whether it’s trophy fishing, marine conservation, pescetarianism, or 109 | any other issue, all of us land-dwelling humans have a lot of ideas about the oceans, marine life, and what our 110 | responsibilities to these amazing creatures are. Below, we explore some of the key attitudes people have about 111 | the state of our oceans, and their protection.

112 |
113 |
114 |
115 |
116 |
117 |
118 | 119 |

Through the ages, people have claimed dogs as one of their closest, and 120 | best 121 | companions. Of all the domesticated animals, dogs serve the widest array of roles: protector, helper, lifesaver, 122 | and companion. Dogs are incredible friends to people, and they’ve been companions through centuries. The 123 | relationship between dogs and people is deep and old. 124 | Dogs have proven themselves time and again to be loyal, kind, understanding, and have an indomitable spirit. 125 | They greet us happily after what may have been the worst day of our lives and make us feel better with a wag of 126 | their tail and a playful grin.

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

136 | Hacktoberfest is a movement to contribute to open source projects. This movement takes place during the month of October on Github and Gitlab.

137 |
138 |
139 |
140 |
141 | 142 | 143 |
144 | 145 | 146 |
147 |

      Our Project Contributors

148 | 149 | 150 |
151 |
152 |

Names of contributors - 2022

153 |
154 |
155 | 208 |
209 |
210 |
211 |
212 |
213 |
214 | 215 | 216 | 217 | 252 | 253 | 254 | 255 | 371 | 372 | 373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | function myFunction() { 2 | var x = document.getElementById("myTopnav"); 3 | if (x.className === "topnav") { 4 | x.className += " responsive"; 5 | } else { 6 | x.className = "topnav"; 7 | } 8 | } --------------------------------------------------------------------------------