├── .vscode └── settings.json ├── README.md ├── css ├── ailmentstyle.css ├── style.css └── styleasana.css ├── html ├── asthama.html ├── balasana.html ├── bodypain.html ├── cobra.html ├── depression.html ├── diabetes.html ├── digestive.html ├── heartdisease.html ├── paripurnanavasana.html ├── pranayam.html ├── suryanamaskar.html ├── tadasana.html └── varkasana.html ├── images ├── Heart-Health.jpg ├── WhatsApp Image 2022-09-11 at 4.26.58 PM.jpeg ├── Yoga and Digestion.jpg ├── anulom-vulom.jpg ├── anxiety.jpg ├── asthma.jpg ├── balasana.jpg ├── bg.jpg ├── bg2.jpg ├── bg3.jpg ├── bg4.jpg ├── bhastrika.jpg ├── boat_pose.png ├── bodypain.jpg ├── dark.jpeg ├── depression.jpg ├── depression_anxiety.jpg ├── diabetes.jpg ├── digestive.jpg ├── grey.jpeg ├── heart.jpg ├── kapal-bhati.jpg ├── leaf-solid.svg ├── pain.jpg ├── self_improvement.png ├── step1-suryanamaskar.jpg ├── step2-suryanamaskar.jpg ├── step3-suryanamaskar.jpg ├── step5-suryanamaskar.jpg ├── step6-suryanamaskar.jpg ├── step7-suryanamaskar.jpg ├── step8-suryanamaskar.jpg ├── tadasana.jpg ├── varkasana.jpg ├── yoga.jpg ├── yoga1.jpg └── yoga2.jpg ├── index.html └── javascript ├── nav.js └── searchbox.js /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rog-Free 2 | 3 | Rog-Free is a website that shows you specialised yoga postures for specific diseases or ailments. 4 | 5 | It acts as a simplified yoga instructor, so you can follow along at your own pace whenever and wherever you want. 6 | 7 | It's simple to see and use so that it can be easier for people of any age group to easily browse through the website without any hassle. 8 | 9 |  10 | 11 | Visit the deployed site: Rog-Free 12 | 13 | 14 | # Color-Design 15 | 16 |  17 | 18 | 19 | # Features 20 | 21 | This website comprises of 14 html pages including the index file. 22 | 23 | 7 out of those 14 pages are different Asanas HTML pages like Balasana, Cobra pose, etc. 6 pages are used as ailments pages to inform you a bit about the specified disease and then that directs you to the Asanas which are best suited to you based on the choice you have made. 24 | 25 | The home page starts with a beautiful landing page with a minimalist look. On the top you can find the Navigation bar which can be used to easily browse the website. 26 | 27 |  28 | 29 | The Nav bar is not only responsive but also consists of a dropdown of asanas which opens up on hovering. 30 | Making browsing even easier and looks more appealing. 31 | 32 | As you scroll down you can see a search bar to search for your particular ailment and land at your desired page. Then there is a horizontal scroll to see some cue cards for easy navigation of Asanas. 33 | 34 | 35 | This is followed by a simple contact form, in order somebody wants to connect or ask any query. 36 | 37 | Throughout the website we have tried to keep it breathable and minimalistic looking, so that it can have a cool and calm vibe. 38 | 39 | # Technology 40 | 41 | Languages used : HTML, CSS and JAVASCRIPT 42 | 43 | 44 | 45 | Github : To save and store the files for the website. 46 | 47 | Google Fonts : Used for icon and fonts. 48 | 49 | Pexels : Used for stocked images. 50 | 51 | Am I responsive? : To show the website image on a range of devices. 52 | 53 | Hook Agency : used for picking a color scheme. 54 | 55 | 56 | 57 | Github Pages was used to deploy the website: Rog-Free 58 | -------------------------------------------------------------------------------- /css/ailmentstyle.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 2 | 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | text-decoration: none; 8 | font-family: 'PT Sans', sans-serif; 9 | box-sizing: border-box; 10 | letter-spacing: 0.5px; 11 | line-height: 30px; 12 | } 13 | 14 | body{ 15 | font-size: 17px; 16 | color: #16123f;; 17 | line-height: 1.6; 18 | } 19 | 20 | .material-symbols-outlined{ 21 | font-size: 70px; 22 | } 23 | 24 | nav{ 25 | position: fixed; 26 | display: flex; 27 | justify-content:space-between; 28 | padding: 0 7vw; 29 | align-items: center; 30 | background-color: #c7ddcc; 31 | width: 100%; 32 | height: 80px; 33 | z-index: 1; 34 | } 35 | 36 | .navlinks{ 37 | display: flex; 38 | justify-content: space-around; 39 | align-items: center; 40 | list-style: none; 41 | } 42 | 43 | 44 | .navlinks li { 45 | padding: 20px 15px; 46 | white-space:nowrap; 47 | text-align: center; 48 | min-width: 130px; 49 | letter-spacing: 1px; 50 | font-size: 25px; 51 | font-weight: 300; 52 | color: #16123f; 53 | position: relative; 54 | background-color: inherit; 55 | } 56 | 57 | .navlinks a, .navlinks a:visited { 58 | color: #16123f; 59 | } 60 | 61 | 62 | .dropdown { 63 | position: absolute; 64 | } 65 | 66 | .navlinks .dropdown .dropdown-content { 67 | background-color: #c7ddcc; 68 | min-width: 160px; 69 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 70 | display: flex; 71 | flex-direction: column; 72 | position: absolute; 73 | top: 70px; 74 | left: -40px; 75 | display: none; 76 | } 77 | 78 | .dropdown-content a { 79 | color:#16123f; 80 | padding: 12px 16px; 81 | text-align: center; 82 | } 83 | 84 | .dropdown:hover .dropdown-content { 85 | display:flex; 86 | } 87 | 88 | .dropdown-content a:hover{ 89 | text-decoration: underline; 90 | } 91 | 92 | .burger{ 93 | padding-left: 50%; 94 | display: none; 95 | cursor: pointer; 96 | } 97 | .burger div{ 98 | width: 26px; 99 | height: 3px; 100 | margin: 3px; 101 | background-color: #16123f; 102 | transition: all 0.3s ease; 103 | } 104 | 105 | @media screen and (max-width:768px) { 106 | body{ 107 | overflow-x: hidden; 108 | } 109 | .navlinks{ 110 | position: absolute; 111 | right: 0px; 112 | top: 80px; 113 | width: 40%; 114 | height: 50vh; 115 | display: flex; 116 | flex-direction:column; 117 | align-items: center; 118 | text-align: center; 119 | background-color: #c7ddcc; 120 | color: #16123f; 121 | transform: translateX(100%); 122 | transition: transform 0.5s ease-in; 123 | } 124 | 125 | .navlinks .dropdown .dropdown-content { 126 | display: none; 127 | position: absolute; 128 | top: 0; 129 | left: -210px; 130 | z-index: 2; 131 | } 132 | 133 | .dropdown:hover .dropdown-content { 134 | display: flex; 135 | } 136 | 137 | .navlinks li{ 138 | position: relative; 139 | opacity: 0; 140 | width: 100%; 141 | } 142 | .burger{ 143 | display: block; 144 | } 145 | 146 | } 147 | 148 | .nav-active{ 149 | transform: translateX(0%); 150 | } 151 | 152 | @keyframes navLinkFade { 153 | from{ 154 | opacity: 0; 155 | transform: translateX(50px); 156 | } 157 | to{ 158 | opacity: 1; 159 | transform: translateX(0px); 160 | } 161 | } 162 | .toggle .line1{ 163 | transform: rotate(-45deg) translate(-1px, 5px); 164 | } 165 | .toggle .line2{ 166 | opacity:0; 167 | } 168 | .toggle .line3{ 169 | transform: rotate(45deg) translate(-5px, -8px) ; 170 | } 171 | 172 | 173 | 174 | 175 | .title{ 176 | background-image:url('../images/yoga1.jpg'), url(../images/grey.jpeg); 177 | background-size: cover; 178 | background-blend-mode:multiply; 179 | background-position: center; 180 | display: flex; 181 | flex-direction: column; 182 | justify-content: center; 183 | align-items: center; 184 | text-align: center; 185 | max-height: 500px; 186 | height: fit-content; 187 | color: #16123F; 188 | padding: 20vw 5vw; 189 | border-bottom: 10px solid #75c9b76e; 190 | color: rgb(217, 217, 217); 191 | text-shadow: 0.5px 0.5px #b9bdbc; 192 | } 193 | 194 | .title #mainPage { 195 | margin: 20px; 196 | font-size: 30px; 197 | } 198 | 199 | .title a{ 200 | color: #fff; 201 | } 202 | 203 | .title .diseaseTitle { 204 | margin: 20px; 205 | font-size: 45px; 206 | } 207 | 208 | .diseaseTitle p { 209 | line-height: 50px; 210 | } 211 | 212 | .title a span:hover { 213 | background-color: #fff; 214 | color: #75c9b7; 215 | border-radius: 30px; 216 | padding: 1px 1px 7px 7px; 217 | box-shadow: 0 0 12px 9px #fff; 218 | } 219 | 220 | .container{ 221 | color:#16123F; 222 | padding: 6vw; 223 | width: 100%; 224 | background-color: #c7ddcc; 225 | text-align: justify; 226 | font-size: 20px; 227 | line-height: 1.2; 228 | font-weight: 500; 229 | } 230 | 231 | .intro { 232 | display: flex; 233 | flex-direction: column; 234 | justify-content: center; 235 | text-align: justify; 236 | } 237 | 238 | .intro div, .intro h3, .cure h2, .asana h2 { 239 | padding-bottom: 30px; 240 | } 241 | 242 | .intro img { 243 | display: block; 244 | border: 8px solid #fff; 245 | padding: 20px; 246 | margin: 40px auto; 247 | background-color: #75c9b75a; 248 | max-width: 500px; 249 | width: 100%; 250 | max-height: 500px; 251 | } 252 | 253 | .cure { 254 | padding: 50px 0; 255 | margin: 20px 0; 256 | } 257 | 258 | .cure li, div li { 259 | list-style: disc; 260 | padding: 7px 0; 261 | margin: 0 20px; 262 | } 263 | 264 | .asana { 265 | padding: 50px 0; 266 | margin: 20px 0; 267 | } 268 | 269 | .asanaCollection { 270 | display: flex; 271 | justify-content: space-between; 272 | align-items: center; 273 | flex-wrap: wrap; 274 | min-height: 350px; 275 | height: 100%; 276 | width: 100%; 277 | } 278 | 279 | .asanaCollection .box { 280 | display: flex; 281 | flex-direction: column; 282 | align-items: center; 283 | justify-content: center; 284 | border: 2px solid #fff; 285 | border-radius: 20px; 286 | margin: 10px 0; 287 | padding: 20px; 288 | background-color: #75c9b74e; 289 | } 290 | 291 | .box img { 292 | min-width: 300px; 293 | max-width: 350px; 294 | width: 100%; 295 | min-height: 170px; 296 | height: 100%; 297 | border-radius: 20px; 298 | border: 8px solid #fff; 299 | } 300 | 301 | @media screen and (max-width: 480px) { 302 | .box img { 303 | max-width: 300px; 304 | min-width: 250px; 305 | width: 100%; 306 | } 307 | } 308 | 309 | .box span { 310 | font-size: 22px; 311 | border: 2px solid #fff; 312 | border-radius: 10px; 313 | padding: 10px 20px; 314 | margin-top: 30px; 315 | background-color: #75c9b7; 316 | transition: all 0.3s ease-in; 317 | } 318 | 319 | .box span a { 320 | color: #16123F; 321 | } 322 | 323 | .box span:hover { 324 | background-color: #fff; 325 | cursor: pointer; 326 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 2 | 3 | *{ 4 | margin:0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'PT Sans', sans-serif; 8 | text-decoration: none; 9 | } 10 | 11 | body{ 12 | font-size: 17px; 13 | color: #16123f;; 14 | line-height: 1.6; 15 | } 16 | 17 | 18 | .material-symbols-outlined{ 19 | font-size: 70px; 20 | } 21 | 22 | nav{ 23 | position: fixed; 24 | display: flex; 25 | justify-content:space-between; 26 | padding: 0 7vw; 27 | align-items: center; 28 | background-color: #c7ddcc; 29 | width: 100%; 30 | height: 80px; 31 | z-index: 1; 32 | } 33 | 34 | .navlinks{ 35 | display: flex; 36 | justify-content: space-around; 37 | align-items: center; 38 | list-style: none; 39 | } 40 | 41 | 42 | .navlinks li { 43 | padding: 20px 15px; 44 | white-space:nowrap; 45 | text-align: center; 46 | min-width: 130px; 47 | letter-spacing: 1px; 48 | font-size: 25px; 49 | font-weight: 300; 50 | color: #16123f; 51 | position: relative; 52 | background-color: inherit; 53 | } 54 | 55 | .navlinks a, .navlinks a:visited { 56 | color: #16123f; 57 | } 58 | 59 | 60 | .dropdown { 61 | position: absolute; 62 | } 63 | 64 | .navlinks .dropdown .dropdown-content { 65 | background-color: #c7ddcc; 66 | min-width: 160px; 67 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 68 | display: flex; 69 | flex-direction: column; 70 | position: absolute; 71 | top: 80px; 72 | left: -47px; 73 | display: none; 74 | } 75 | 76 | .dropdown-content a { 77 | color:#16123f; 78 | padding: 12px 16px; 79 | text-align: center; 80 | } 81 | 82 | .dropdown:hover .dropdown-content { 83 | display:flex; 84 | } 85 | 86 | .dropdown-content a:hover{ 87 | text-decoration: underline; 88 | } 89 | 90 | .burger{ 91 | padding-left: 50%; 92 | display: none; 93 | cursor: pointer; 94 | } 95 | .burger div{ 96 | width: 26px; 97 | height: 3px; 98 | margin: 3px; 99 | background-color: #16123f; 100 | transition: all 0.3s ease; 101 | } 102 | 103 | @media screen and (max-width:768px) { 104 | body{ 105 | overflow-x: hidden; 106 | } 107 | .navlinks{ 108 | position: absolute; 109 | right: 0px; 110 | top: 80px; 111 | width: 40%; 112 | height: 50vh; 113 | display: flex; 114 | flex-direction:column; 115 | align-items: center; 116 | text-align: center; 117 | background-color: #c7ddcc; 118 | color: #16123f; 119 | transform: translateX(100%); 120 | transition: transform 0.5s ease-in; 121 | } 122 | 123 | .navlinks .dropdown .dropdown-content { 124 | display: none; 125 | position: absolute; 126 | top: 0; 127 | left: -217px; 128 | z-index: 2; 129 | } 130 | 131 | .dropdown:hover .dropdown-content { 132 | display: flex; 133 | } 134 | 135 | .navlinks li{ 136 | position: relative; 137 | opacity: 0; 138 | width: 100%; 139 | } 140 | .burger{ 141 | display: block; 142 | } 143 | 144 | } 145 | 146 | .nav-active{ 147 | transform: translateX(0%); 148 | } 149 | 150 | @keyframes navLinkFade { 151 | from{ 152 | opacity: 0; 153 | transform: translateX(50px); 154 | } 155 | to{ 156 | opacity: 1; 157 | transform: translateX(0px); 158 | } 159 | } 160 | .toggle .line1{ 161 | transform: rotate(-45deg) translate(-1px, 5px); 162 | } 163 | .toggle .line2{ 164 | opacity:0; 165 | } 166 | .toggle .line3{ 167 | transform: rotate(45deg) translate(-5px, -8px) ; 168 | } 169 | 170 | 171 | #showcase{ 172 | background-image:url('../images/bg4.jpg'); 173 | background-size: cover; 174 | background-position: center; 175 | 176 | height: 100vh; 177 | display: flex; 178 | flex-direction: column; 179 | justify-content: center; 180 | align-items: center; 181 | padding: 0 20px; 182 | } 183 | 184 | #showcase h1{ 185 | font-size: 75px; 186 | font-weight: 100; 187 | line-height: 1.2; 188 | padding-bottom: 10px ; 189 | } 190 | 191 | #showcase p{ 192 | font-size: 25px; 193 | justify-content: center; 194 | align-items: center; 195 | text-align: center; 196 | } 197 | 198 | #showcase .button{ 199 | font-size: 18px; 200 | color: #16123f; 201 | border: #16123f 1px solid; 202 | padding: 10px 20px; 203 | border-radius: 10px; 204 | margin-top: 20px; 205 | } 206 | 207 | #showcase .button:hover{ 208 | background-color: #16123f; 209 | color: #fff; 210 | } 211 | 212 | 213 | /* Search Bar styling */ 214 | 215 | .search-box { 216 | max-width: 450px; 217 | min-width: 50%; 218 | margin: 0px auto; 219 | margin-top: 70px; 220 | /* border: 2px solid blue; */ 221 | } 222 | 223 | .search-input { 224 | background: #fff; 225 | width: 100%; 226 | position: relative; 227 | /* border: 2px solid red; */ 228 | border-radius: 30px; 229 | box-shadow: 0px 1px 5px 3px rgba(0,0,0,0.12); 230 | } 231 | 232 | .search-input input { 233 | height: 55px; 234 | width: 100%; 235 | outline: none; 236 | border: none; 237 | border-radius: 30px; 238 | padding: 0 60px 0 20px; 239 | font-size: 18px; 240 | box-shadow: 0px 1px 5px rgba(0,0,0,0.1); 241 | } 242 | 243 | .search-input.active input{ 244 | border-radius: 5px 5px 0 0; 245 | } 246 | 247 | .search-input .autocom-box { 248 | padding: 0; 249 | opacity: 0; 250 | pointer-events: none; 251 | max-height: 280px; 252 | overflow-y: auto; 253 | } 254 | 255 | .search-input.active .autocom-box{ 256 | padding: 10px 8px; 257 | opacity: 1; 258 | pointer-events: auto; 259 | } 260 | 261 | .autocom-box li { 262 | list-style: none; 263 | padding: 8px 12px; 264 | display: none; 265 | width: 100%; 266 | cursor: default; 267 | border-radius: 3px; 268 | } 269 | 270 | .search-input.active .autocom-box li{ 271 | display: block; 272 | } 273 | 274 | .autocom-box li:hover{ 275 | background: #efefef; 276 | } 277 | 278 | .search-input .material-symbols-outlined { 279 | position: absolute; 280 | right: 0px; 281 | top: 0px; 282 | height: 55px; 283 | width: 55px; 284 | text-align: center; 285 | line-height: 55px; 286 | font-size: 32px; 287 | cursor: pointer; 288 | color: #16123f; 289 | } 290 | 291 | 292 | 293 | /* Cards styling */ 294 | 295 | 296 | .cards{ 297 | padding:100px 0px; 298 | display: flex; 299 | background-color: #8cbc97; 300 | height: fit-content; 301 | align-items: center; 302 | justify-content: center; 303 | flex-direction: column; 304 | } 305 | 306 | .cards h1{ 307 | font-size: 50px; 308 | line-height:60px; 309 | text-align: center; 310 | } 311 | 312 | .cue{ 313 | padding-top: 40px; 314 | width: 100%; 315 | height: 400px; 316 | display: flex; 317 | position: relative; 318 | overflow-y: hidden; 319 | justify-content: left; 320 | align-items: center; 321 | scroll-behavior: smooth; 322 | } 323 | 324 | .cue::-webkit-scrollbar{ 325 | -webkit-appearance: none; 326 | } 327 | .cue img{ 328 | width: 100%; 329 | height: 100%; 330 | justify-content: left; 331 | align-items: center; 332 | overflow: auto; 333 | } 334 | 335 | .box:hover{ 336 | cursor: pointer; 337 | box-shadow: 2px 2px 10px 4px #2c3d30 338 | } 339 | 340 | .box{ 341 | height: 230px; 342 | min-width: 200px; 343 | margin: 20px; 344 | border:#3d5e45 0.5px groove; 345 | overflow: hidden; 346 | } 347 | 348 | .box a:visited{ 349 | color: #16123f; 350 | } 351 | 352 | .dis{ 353 | position: absolute; 354 | z-index: 0; 355 | } 356 | 357 | 358 | .contact{ 359 | background-color: #c7ddcc; 360 | height: 90vh; 361 | display: flex; 362 | flex-direction:column ; 363 | justify-content: center; 364 | align-items: center; 365 | padding-bottom: 50px; 366 | } 367 | 368 | .contact h1{ 369 | padding-bottom: 20px; 370 | padding-top: 10px; 371 | font-size: 40px; 372 | } 373 | 374 | .contact input, .contact button, .contact textarea{ 375 | font-size: 20px; 376 | justify-content: space-around; 377 | align-items: center; 378 | padding: 5px 80px 5px 5px; 379 | margin: 10px; 380 | border: #16123f 1px solid; 381 | border-radius: 5px; 382 | } 383 | 384 | .contact .message{ 385 | padding: 5px 80px 100px 5px; 386 | /* display: ; */ 387 | flex-wrap: nowrap; 388 | } 389 | 390 | .contact button{ 391 | font-size: 25px; 392 | background-color: #abd699; 393 | color: #16123f; 394 | border-radius: 20px; 395 | padding: 5px 50px; 396 | border: #16123f 1px solid; 397 | } 398 | 399 | .contact button:hover{ 400 | cursor: pointer; 401 | } 402 | 403 | .footer{ 404 | display: flex; 405 | justify-content:center; 406 | align-items: center; 407 | padding:25px 50px; 408 | font-size: 30px; 409 | } 410 | 411 | .footer a{ 412 | 413 | padding-right: 10px; 414 | color: #16123f; 415 | } 416 | .footer a:visited{ 417 | color: #16123f; 418 | } 419 | 420 | .footer .foot{ 421 | display: flex; 422 | flex-wrap: nowrap; 423 | margin: 0 50px;; 424 | 425 | } 426 | .footer p{ 427 | display: flex; 428 | flex-wrap: nowrap; 429 | font-size: 20px; 430 | font-weight:400; 431 | padding-right: 25px; 432 | line-height: 1.2; 433 | } 434 | 435 | @media screen and (max-width:768px) { 436 | .footer { 437 | padding: 27px 50px; 438 | } 439 | } -------------------------------------------------------------------------------- /css/styleasana.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 2 | 3 | 4 | *{ 5 | margin: 0; 6 | padding: 0; 7 | text-decoration: none; 8 | font-family: 'PT Sans', sans-serif; 9 | box-sizing: border-box; 10 | letter-spacing: 0.5px; 11 | line-height: 30px; 12 | } 13 | 14 | .material-symbols-outlined{ 15 | font-size: 70px; 16 | } 17 | 18 | nav{ 19 | position: fixed; 20 | display: flex; 21 | justify-content:space-between; 22 | padding: 0 7vw; 23 | align-items: center; 24 | background-color: #c7ddcc; 25 | width: 100%; 26 | height: 80px; 27 | z-index: 1; 28 | } 29 | 30 | .navlinks{ 31 | display: flex; 32 | justify-content: space-around; 33 | align-items: center; 34 | list-style: none; 35 | } 36 | 37 | 38 | .navlinks li { 39 | padding: 20px 15px; 40 | white-space:nowrap; 41 | text-align: center; 42 | min-width: 130px; 43 | letter-spacing: 1px; 44 | font-size: 25px; 45 | font-weight: 300; 46 | color: #16123f; 47 | position: relative; 48 | background-color: inherit; 49 | } 50 | 51 | .navlinks a, .navlinks a:visited { 52 | color: #16123f; 53 | } 54 | 55 | 56 | .dropdown { 57 | position: absolute; 58 | } 59 | 60 | .navlinks .dropdown .dropdown-content { 61 | background-color: #c7ddcc; 62 | min-width: 160px; 63 | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 64 | display: flex; 65 | flex-direction: column; 66 | position: absolute; 67 | top: 70px; 68 | left: -40px; 69 | display: none; 70 | } 71 | 72 | .dropdown-content a { 73 | color:#16123f; 74 | padding: 12px 16px; 75 | text-align: center; 76 | } 77 | 78 | .dropdown:hover .dropdown-content { 79 | display:flex; 80 | } 81 | 82 | .dropdown-content a:hover{ 83 | text-decoration: underline; 84 | } 85 | 86 | .burger{ 87 | padding-left: 50%; 88 | display: none; 89 | cursor: pointer; 90 | } 91 | .burger div{ 92 | width: 26px; 93 | height: 3px; 94 | margin: 3px; 95 | background-color: #16123f; 96 | transition: all 0.3s ease; 97 | } 98 | 99 | @media screen and (max-width:768px) { 100 | body{ 101 | overflow-x: hidden; 102 | } 103 | .navlinks{ 104 | position: absolute; 105 | right: 0px; 106 | top: 80px; 107 | width: 40%; 108 | height: 50vh; 109 | display: flex; 110 | flex-direction:column; 111 | align-items: center; 112 | text-align: center; 113 | background-color: #c7ddcc; 114 | color: #16123f; 115 | z-index: 0; 116 | transform: translateX(100%); 117 | transition: transform 0.5s ease-in; 118 | } 119 | 120 | .navlinks .dropdown .dropdown-content { 121 | display: none; 122 | position: absolute; 123 | top: 0; 124 | left: -210px; 125 | z-index: 2; 126 | } 127 | 128 | .dropdown:hover .dropdown-content { 129 | display: flex; 130 | } 131 | 132 | .navlinks li{ 133 | position: relative; 134 | opacity: 0; 135 | width: 100%; 136 | } 137 | .burger{ 138 | display: block; 139 | } 140 | 141 | } 142 | 143 | .nav-active{ 144 | transform: translateX(0%); 145 | } 146 | 147 | @keyframes navLinkFade { 148 | from{ 149 | opacity: 0; 150 | transform: translateX(50px); 151 | } 152 | to{ 153 | opacity: 1; 154 | transform: translateX(0px); 155 | } 156 | } 157 | 158 | .toggle .line1{ 159 | transform: rotate(-45deg) translate(-1px, 5px); 160 | } 161 | 162 | .toggle .line2{ 163 | opacity:0; 164 | } 165 | 166 | .toggle .line3{ 167 | transform: rotate(45deg) translate(-5px, -8px) ; 168 | } 169 | 170 | .title{ 171 | display: flex; 172 | flex-direction: column; 173 | justify-content: center; 174 | align-items: center; 175 | text-align: center; 176 | max-height: 500px; 177 | height: fit-content; 178 | color: rgb(217, 217, 217); 179 | text-shadow: 0.5px 0.5px #b9bdbc; 180 | padding: 20vw 5vw; 181 | background-image:url('../images/yoga1.jpg'), url(../images/grey.jpeg); 182 | background-size: cover; 183 | background-blend-mode:multiply; 184 | border-bottom: 10px solid #75c9b76e; 185 | } 186 | 187 | .title #mainPage { 188 | margin: 20px; 189 | font-size: 30px; 190 | } 191 | 192 | .title a{ 193 | color: #fff; 194 | } 195 | 196 | .title .asanaTitle { 197 | margin: 20px; 198 | font-size: 45px; 199 | } 200 | 201 | .asanaTitle p { 202 | line-height: 50px; 203 | } 204 | 205 | .title .asanasubtitle{ 206 | margin: 20px; 207 | font-size: 25px; 208 | } 209 | 210 | .title a span:hover{ 211 | background-color: #fff; 212 | color: #75c9b7; 213 | border-radius: 30px; 214 | padding: 1px 7px 7px 7px; 215 | box-shadow: 0 0 12px 8px #fff; 216 | } 217 | 218 | .container{ 219 | color:#16123F; 220 | padding: 6vw; 221 | width: 100%; 222 | background-color: #c7ddcc; 223 | text-align: justify; 224 | font-size: 20px; 225 | } 226 | 227 | .container h1{ 228 | font-size: 35px; 229 | padding: 15px 0; 230 | } 231 | 232 | .container .asana{ 233 | font-size: 25px; 234 | padding: 20px 0; 235 | } 236 | 237 | .step{ 238 | font-size: 20px; 239 | display: flex; 240 | flex-wrap: wrap; 241 | justify-content: center; 242 | } 243 | 244 | .step .img img{ 245 | max-width: 900px; 246 | width: 100%; 247 | max-height: 700px; 248 | margin-bottom: 50px; 249 | border: 8px solid #fff; 250 | padding: 20px; 251 | background-color: #75c9b788; 252 | } 253 | 254 | .step li{ 255 | padding: 15px 0 0 10px ; 256 | margin-left: 15px; 257 | } -------------------------------------------------------------------------------- /html/asthama.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 |65 | Yoga asanas for Asthamatics 66 |
67 |74 | If you have asthma, you’re not alone. Approximately 300 million peopleTrusted Source around the world have this chronic inflammatory disorder.Despite innumerable medical advances we’ve made in the last few decades, asthma - its causes and cures - still remains a mystery. Asthma, which affects the lungs by constricting the airways and making it harder for the person to breathe, is a by-product of many factors, some physiological and others because of environmental conditions. 75 |
76 |79 | In simple terms, asthma is a very strong response of the body’s immune system to fight the infiltration of substances in the lungs. Although there is no cure for asthma, leading a healthy lifestyle is credited to alleviating the problem to a point where the symptoms are almost negligible - and practising yoga asanas for asthma is observed to be especially helpful. 80 |
81 |91 | Yoga helps in strengthening the lungs as it focuses on not only holding the asana but breathing through the same, allowing the respiratory system to work while the body is in unnatural poses. This in turn strengthens it. Practising yoga asanas for asthma has helped control asthma effectively and in some cases, asanas are used for preventing asthma attacks altogether. 92 |
93 |Balasana - Child's Pose
Avoid Child's Pose if you have a knee injury. If you are pregnant, spread your legs wider and don't press your stomach onto your thighs. If you have a shoulder injury, keeping your arms by your side will provide the most support.
74 | If you feel any pain, ease out of the pose.
64 | Yoga asanas to reduce body pain/back pain 65 |
66 |73 | Yoga has countless benefits, a prominent one is that it helps relieve muscle pain and stretches your muscles. 74 |
75 |78 | Yoga is a powerful practice that helps us stay active, manage stress, and also help with pain management. Yoga helps because of its strong focus on breathing, which energizes and relaxes our nervous system. Secondly, we move in so many different ways and planes of motion in a yoga class that it works like a complete reset for our posture. And a good posture means less pain. That's why a wholesome yoga practice with a wide variety of poses and mindful breathing helps reduce chronic pain and stiffness in muscles or joints. Here are eight strengthening and stretching postures that are particularly helpful in managing pain in the most common areas of the body. 79 |
80 |87 | Yoga provides a more traditional and effective way of leading a healthy life. Yoga helps in the complete toning of the whole body of a person. Doing yoga provides strength and flexibility to the body. Taking medicine for pain has side effects associated with it. Only yoga helps in leading a pain-free life in a natural way. A person who encounter pain like headache, back pain or if there is pain in the entire body then he/she can rely on yoga to provide complete relief from the condition. 88 |
89 |92 | There are various asanas in yoga that help in treating the pain of the body in a natural manner. These yoga asanas not only help in alleviating pain but they also improve the quality of life of a person. Yoga releases the stress on the muscles of the body thereby imparting relief. Doing yoga improves blood circulation in the body. Yoga provides the necessary strength to the various muscles of the body. Yoga stimulates the functioning of the nerve thereby providing relief in the body pain. Given below are some of the asanas of yoga that help a person suffering from body pain. 93 |
94 |Bhujangasana - Cobra Pose
If you're in the middle of a Sun Salutation, you'll be coming into Cobra from Knees, Chest, and Chin. If not, you can begin by lying down flat on your stomach.
Cobra Pose should not be done if you have carpal tunnel syndrome or an injury to your back, arms, or shoulders. Also, avoid it if you recently had abdominal surgery or are pregnant.
72 | If you feel any strain on your lower back, relax the pose to lower yourself a bit, or release down to rest on your forearms.
64 | Yoga asanas to overcome Anxiety and Depression 65 |
66 |73 | There’s nothing like the serenity, bliss, and relaxation that can come following a good yoga session. In fact, many first-time yoga practitioners are surprised by how elevated their mood is after a yoga class. 74 |
75 |78 | One of the primary reasons for this sense of upliftment is that exercise naturally increases serotonin levels in our brains. Seratonin is a neurotransmitter that makes us feel good. Unfortunately, it’s often deficient in people who suffer from depressive disorders. 79 |
80 |101 | Although there are hundreds of yoga poses, some are particularly good for dealing with anxiety and depression. Here, we will discuss some postures that you can incorporate into your own practice to invite greater mental health into your life. 102 |
103 |106 | As you practice these, be sure to breathe steadily and deeply, even when your body feels strained. Ideally, you should maintain ujjayi breath throughout your practice. Doing this will help you remain calm in states of adversity, a skill that can help you stay grounded in many of life’s challenging moments! 107 |
108 |65 | Yoga asanas for Diabetes 66 |
67 |74 | Yoga is an additional treatment for those living with diabetes type-2. It helps in improving all the health parameters to promote physical and mental health. Yoga helps in managing diabetes better if you practice yoga for long enough. It will also reduce the risk of complications related to diabetes. Yoga in the early stage of diabetes not only controls your diabetes but also gives the best results for your health. You can practice the best yoga for diabetes to keep your blood sugar levels in control. 75 |
76 |79 | Many people with diabetes are now turning to practicing yoga to keep their blood sugar levels under control. Yoga is an ancient known practice that helps in improving overall well-being, reduces stress, lowers blood pressure, and enhances mobility. Adding the simple yogic practice to your daily regime is a way to address diabetes besides medicines. You need to maintain consistency and regularity to get the best results of yoga on your health. 80 |
81 |91 | The key factors that increase the risk of Type -2 Diabetes by 3 times are: 92 |
93 |98 | These factors also pose a risk of coronary heart disease and the risk or severity of diabetes. Therefore it is necessary to have a balance of medicines, physical exercise, and a diabetic diet plan for efficient management of health in diabetic conditions. Yoga is a set of activities that helps in controlling your stress, and emotions and helps in balancing the body to its perfect shape. 99 |
100 |64 | Yoga asanas for good digestion 65 |
66 |73 | Bad digestion is the root of all evil,’ says Hippocrates. Our ancient texts concur. According 74 | to Ayurveda, the root cause of all disorders lies in poor digestion. That is why it is 75 | imperative that our digestive fire remain strong. So that the food that we eat is efficiently 76 | metabolized. Otherwise, regardless of how healthy our food choices may be, our body will find it 77 | difficult to assimilate and absorb the nutrients present in what we eat. 78 |
79 |89 | Think of the digestive system as a juicer, ‘agni’ as juicer blades, body toxins as fruit waste, and 90 | energy as juice! 91 |
92 | 93 |94 | If the juicer blades are weak, there is less juice and more fruit waste. So, if the ‘agni’ (juicer blades) 95 | is weak, the digestive system produces less energy (juice). This results in more toxins (fruit waste) 96 | getting accumulated in the cells. Thus, a strong agni is required for a good digestive system. With its 97 | rejuvenating powers, yoga can make your agni strong and help improve your digestion! 98 |
99 |64 | Yoga asanas for good heart health 65 |
66 |73 | Today, there is no age factor that determines heart ailments. People in their 20s are falling prey to heart attacks. Is it because like Atlas, the world is on our shoulders? Is it because we skip our meals and substitute it with convenience food with zero nutrition? The reasons are many, especially related to an unhealthy lifestyle. 74 |
75 |78 | The good news is that one can do a lot about it. Committing to a healthier lifestyle is critical and easier to follow than most imagine. What if a few simple stretches and breathing exercises could make you feel good (especially your heart)! Yoga for healthy heart asanas are a preventive measure and are beneficial as a curative one too. And with no side-effects, except a feeling of greater peace and health. 79 |
80 |86 | Gurudev Sri Sri Ravi Shankar says: “Yoga is a study of life, the study of your body, breath, mind, intellect, memory, and ego; study of your inner faculties.” 87 |
88 |Paripurna Navasana - Boat Pose
Pranayam
This pranayama is all about deep breathing and has no sound as such. For this exercise sit in a comfortable position, close your right nostril with your thumb and slowly exhale from the left nostril. After exhaling slowly and steadily inhale through the same nostril. Do the same process with your left nostril with your ring finger and exhale through the right nostril. Repeat this process for 2-5 minutes.
This pranayama is all about forceful and active inhalation and exhalation, where you have to inhale normally and exhale forcefully. During exhalation the stomach muscles should be moved fiercely (pulling it closer to your back). Do this breathing exercise for 2-5 minutes.
Start this breathing exercise with normal inhalation and exhale completely. Bow your head down blocking the free flow of air and inhale as long as you can. Hold back for 2-5 seconds. While exhaling, close your right nostril with your right thumb and breathe out through your left nostril. You can repeat this exercise for ten to twelve times.
This breathing exercise starts with deep breath-in where we expand our stomach. The air is completely breathed out with strength, sucking your stomach towards the backbone. During inhalation, your stomach should be extended to the maximum. Do this exercise for 1-2 minutes and do take rest.
In this pranayama the breathing sounds like a humming bee. To do this, sit in a relaxed posture and close your ears with your thumbs, place your index fingers on the temple and close your eyes with the other three fingers. Slowly inhale through your nose and hold it for a few seconds. Keeping your mouth closed, slowly exhale by making a humming sound. Repeat it 5 times.
Initially one should start with eleven cycles of breathing, and it should be increased to one hundred and twenty one without any fear. However, later the breathing should be made a part of daily practice of other Asanas, and be practiced for two to three minutes. All these types can also be practiced with slow inhalation and exhalation. Here it is important to note that practicing these types of breathing does not mean doing Pranayama. This is simply a preparation of the actual practice of Pranayama.
84 | 85 |60 | Surya Namaskar - Sun Salutation 61 |
62 |69 | Surya Namaskar serves as a great practice to manage psychosomatic ailments such as Diabetes and reduce 70 | the risk for Heart Disease. Surya Namaskar or Sun Salutation is a sequence of 12 powerful yoga poses. 71 | Besides being a great cardiovascular workout, Surya Namaskar is also known to have an immensely positive 72 | impact on the body and mind. Practicing Surya Namaskar steps is best done early morning on an empty 73 | stomach. Each round of Sun Salutation consists of two sets, and each set is composed of 12 yoga poses. 74 | You might find several versions on how to practice Sun Salutation. However, it is advisable to stick to 75 | one particular version and practice it regularly for the best results. Besides good health, Surya 76 | Namaskar also provides an opportunity to express gratitude to the sun for sustaining life on this 77 | planet. 78 |
79 |Stand at the edge of your mat, keep your feet together and balance your weight 89 | equally on both feet. Expand your chest and relax your shoulders. As you breathe in, lift both arms 90 | up from the sides, and as you exhale, bring your palms together in front of the chest in a prayer 91 | position.
Breathing in, lift the arms up and back, keeping the biceps close to the ears. In
98 | this pose, the effort is to stretch the whole body up from the heels to the tips of the fingers.
99 |
100 | Tip to deepen this yoga stretch:
101 | You may push the pelvis forward a little bit. Ensure you're reaching up with the fingers rather
102 | than trying to bend backward.
103 |
Breathing out, bend forward from the waist keeping the spine erect. As you exhale
110 | completely, bring the hands down to the floor beside the feet.
111 | Tip to deepen this yoga stretch:
112 | You may bend the knees, if necessary, to bring the palms down to the floor. Now make a gentle
113 | effort to straighten the knees. It's a good idea to keep the hands fixed in this position and
114 | not move them henceforth until we finish the sequence.
115 |
Breathing in, push your right leg back, as far back as possible. Bring the right knee
120 | to the floor and look up.
121 | Tip to deepen this yoga stretch:
122 | Ensure that the left foot is exactly in between the palms.
123 |
As you breathe in, take the left leg back and bring the whole body in a straight line.
130 |
131 | Tip to deepen this yoga stretch:
132 | Keep your arms perpendicular to the floor.
133 |
Gently bring your knees down to the floor and exhale. Take the hips back slightly, 140 | slide forward, rest your chest and chin on the floor. Raise your posterior a little bit. The two hands, 141 | two feet, two knees, chest and chin (eight parts of the body) should touch the floor.
Slide forward and raise the chest up into the Cobra pose. You may keep your elbows bent
148 | in this pose with the shoulders away from the ears. Look up at the ceiling.
149 | Tip to deepen this yoga stretch:
150 | As you inhale, make a gentle effort to push the chest forward; as you exhale, make a gentle effort to
151 | push the navel down. Tuck the toes under. Ensure you're stretching just as much as you can and not
152 | forcing your body.
153 |
Breathing out, lift the hips and the tailbone up to bring the body into an inverted ‘V’
160 | pose.
161 | Tip to deepen this yoga stretch:
162 | f possible, try and keep the heels on the ground and make a gentle effort to lift the tailbone up,
163 | going deeper into the stretch.
164 |
Breathing in, bring the right foot forward in between the two hands. The left knee goes
170 | down on the floor. Press the hips down and look up.
171 | Tip to deepen this yoga stretch:
172 | Place the right foot exactly between the two hands and the right calf perpendicular to the floor. In
173 | this
174 | position, make a gentle effort to push the hips down towards the floor, to deepen the stretch.
175 |
Breathing out, bring the left foot forward. Keep the palms on the floor. You may bend
182 | the
183 | knees, if necessary.
184 | Tip to deepen this yoga stretch:
185 | Gently straighten the knees, and if you can, try and touch your nose to the knees. Keep
186 | breathing.
187 |
Breathing in, roll the spine up. Raise the hands up and bend backward a little bit,
194 | pushing
195 | the hips slightly outward.
196 | Tip to deepen this yoga stretch:
197 | Ensure that your biceps are beside your ears. The idea is to stretch up more rather than stretching
198 | backward.
199 |
As you exhale, first straighten the body, then bring the arms down. Relax in this
206 | position
207 | and observe the sensations in your body.
208 |
This completes one set of Surya Namaskar. Complete the round by repeating the steps. Only 211 | this 212 | time, start with taking the left foot behind in step number 4 and bringing the right foot forward in step 213 | number 214 | 10. Once done, you would’ve completed one round of Surya Namaskar.
215 | 216 |Tadasana - Mountain Pose
Your stance is extremely important. To begin with a balanced Mountain Pose: Place your feet where they naturally fall when you walk forward, and leave a few inches between them. Keep your hips and knees facing forward.
73 | Try to gently activate your core to keep your stance strong and retain the pose’s integrity, and prevent yourself from locking your joints.
Varkasana - Tree Pose
57 | Yoga helps you in forming perfect harmony between your body and your mind. 58 |
59 | Read more 60 |