From 0ee649245fc85c4fa290edbf5ff7e2a7915b4061 Mon Sep 17 00:00:00 2001 From: swapn_652 Date: Wed, 19 Oct 2022 19:16:16 +0530 Subject: [PATCH 1/2] Added navbar --- index.html | 72 +- styles.css | 1952 +++++++++++++++------------------------------------- 2 files changed, 595 insertions(+), 1429 deletions(-) diff --git a/index.html b/index.html index c6aa061..dd2d47c 100644 --- a/index.html +++ b/index.html @@ -18,33 +18,47 @@ -
-
- -
-

DEV/TRACK

-

A community driven programming and designing club, encouraging hackers to shape their ideas

- -
-
-
+ + + + + +
+
+ +
+

DEV/TRACK

+

A community driven programming and designing club, encouraging hackers to shape their ideas

+ +
+
+
+
@@ -130,7 +144,7 @@

WEB 3.0

-
+

FAQ

@@ -222,7 +236,7 @@
How will Dev/Track help my career prospects?
-
+
diff --git a/styles.css b/styles.css index 50572d8..0a734d6 100644 --- a/styles.css +++ b/styles.css @@ -1,7 +1,3 @@ - - - - @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Finlandica:ital@1&display=swap'); @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100,500,300;400&display=swap'); @@ -12,169 +8,154 @@ } - body { - margin: 0; - padding: 0; - overflow-x: hidden; - background: linear-gradient(to right, #0b0028, #2e012a); + margin: 0; + padding: 0; + overflow-x: hidden; + background: linear-gradient(to right, #0b0028, #2e012a); } canvas { - width: 100%; - height: 100%; - background: linear-gradient(to right, #0b0028, #2e012a); + width: 100%; + height: 100%; + background: linear-gradient(to right, #0b0028, #2e012a); } + body::-webkit-scrollbar { - width: 5px; + width: 5px; } body::-webkit-scrollbar-track { - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); } body::-webkit-scrollbar-thumb { - background-color: #2c012a; - border-bottom-right-radius: 5px; - /* outline: 1px solid rgb(0, 128, 36); */ -} + background-color: #2c012a; + border-bottom-right-radius: 5px; + /* outline: 1px solid rgb(0, 128, 36); */ +} .homewrap { - position: absolute; - top: 0; - left: 0; - height: 100vh; - width: 100vw; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding-top: 30px; - z-index: 2; + position: absolute; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + padding-top: 30px; + z-index: 2; } .scaleanim { - transform: scale(5.5); - animation-name: scaling; - animation-duration: 1s; - animation-fill-mode: forwards; + transform: scale(5.5); + animation-name: scaling; + animation-duration: 1s; + animation-fill-mode: forwards; } @keyframes scaling { - from { - transform: scale(1); - } + from { + transform: scale(1); + } - to { - transform: scale(19.5); - } + to { + transform: scale(19.5); + } } h1 { - color: white; - font-family: Arial, Helvetica, sans-serif; - letter-spacing: 6px; - font-size: 80px; - font-weight: 100; + color: white; + font-family: Arial, Helvetica, sans-serif; + letter-spacing: 6px; + font-size: 80px; + font-weight: 100; } h1::before { - content: "2022"; - position: absolute; - color: rgba(255, 255, 255, 0.146); - font-size: 150px; - margin-top: -50px; - left: calc(50% - 160px); - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - font-weight: 400; - text-align: center; + content: "2022"; + position: absolute; + color: rgba(255, 255, 255, 0.146); + font-size: 150px; + margin-top: -50px; + left: calc(50% - 160px); + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + font-weight: 400; + text-align: center; } .homewrap>p { - color: white; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - width: 35vw; - font-size: 15px; - text-align: center; - margin-top: 10px; -} - - - -nav { - position: fixed; - left: 0; - max-width: 10vw; - height: 50vw; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - padding-left: 30px; - z-index: 5; - /* backdrop-filter: blur(3px); */ - /* background-color: #a020f073; */ + color: white; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + width: 35vw; + font-size: 15px; + text-align: center; + margin-top: 10px; } .navitem>div { - height: 50px; - border-left: 1px solid rgba(81, 81, 218, 0.718); - margin-top: 0px; - padding-left: 5px; - margin-left: 5px; - cursor: pointer; - display: flex; - align-items: center; - margin-top: -40px; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-size: 15px; - color: rgba(255, 255, 255, 0.448); + height: 50px; + border-left: 1px solid rgba(81, 81, 218, 0.718); + margin-top: 0px; + padding-left: 5px; + margin-left: 5px; + cursor: pointer; + display: flex; + align-items: center; + margin-top: -40px; + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + font-size: 15px; + color: rgba(255, 255, 255, 0.448); } .navitem>p { - color: white; - font-size: 36px; + color: white; + font-size: 36px; } #home { - overflow: hidden; + overflow: hidden; } .navitem>p { - margin-top: -25px; - color: white; - margin-left: 1px; + margin-top: -25px; + color: white; + margin-left: 1px; } + /* .navitem:hover{ cursor: pointer; } */ .active { - border-left: 2px solid rgba(81, 81, 218, 0.718) !important; + border-left: 2px solid rgba(81, 81, 218, 0.718) !important; } .wrap1{ - margin-left: 30vw; - display: flex; - flex-direction: column; - /* align-items: center; */ - height: 40vh; - margin-top: 10vh; - justify-content: space-between; + margin-left: 30vw; + display: flex; + flex-direction: column; + /* align-items: center; */ + height: 40vh; + margin-top: 10vh; + justify-content: space-between; } .wrap1>p{ - font-family: Arial, Helvetica, sans-serif; - font-size: 16px; - color: rgb(189, 205, 224); - line-height: 40px; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; + color: rgb(189, 205, 224); + line-height: 40px; } .wrap1>p>span{ - /* margin-left: 5px; */ - color: rgb(230, 230, 156); - font-size: 15px; + /* margin-left: 5px; */ + color: rgb(230, 230, 156); + font-size: 15px; } + @media only screen and (max-width: 800px) { h1 { color: white; @@ -234,114 +215,116 @@ h1::before { } + /* SRINIDHI CSS */ *{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family:'Franklin Gothic Medium'; + /* margin: 0;/ */ + padding: 0; + box-sizing: border-box; + font-family:'Franklin Gothic Medium'; } - body{ - - justify-content: center; - align-items: center; - min-height: 100vh; - background: #111; - background: linear-gradient(to right, #0b0028, #2e012a); - } - .container{ - position: relative; - display: flex; - justify-content: center; - align-items: center; - padding: 40px 0; - flex-wrap: wrap; - } - .container .box{ - position: relative; - width: 520px; - height: 700px; - color: #fff; - background: #111; - display: flex; - justify-content: center; - align-items: center; - margin: 20px 30px; - transition: 0.5s; - } - .container .box:hover - { - transform: translateY(-15px); - } - .container .box::before{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(45deg,#be93d4,#710193); - } - .container .box::after{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(45deg,#be93d4,#710193); - filter: blur(15px); - } - .container .box:nth-child(2)::before, - .container .box:nth-child(2)::after - { - background: linear-gradient(315deg,#be93d4,#8b008b); - } - .container .box span{ - position: absolute; - top: 2px; - left: 2px; - right: 2px; - bottom: 2px; - background: rgba(0,0,0,0.6); - z-index: 2; - } - container .box span::before{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 50%; - height: 100%; - pointer-events:none; - } - .container .box .content - { - position: relative; - z-index: 10; - padding: 20px 40px; - align-content: center; - } - .content .box .content h2 - { - font-size: 4em; - color: #fff; - margin-bottom: 50px; - padding-top: 10px; - } - .container .box .content p{ - font-size: 1.1em; - color: fff; - margin-bottom: 30px; - line-height: 1.4em; - word-wrap: normal; - font-family: Georgia; - } + +body{ + justify-content: center; + align-items: center; + min-height: 100vh; + background: #111; + background: linear-gradient(to right, #0b0028, #2e012a); +} + +.container{ + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding: 40px 0; + flex-wrap: wrap; +} +.container .box{ + position: relative; + width: 520px; + height: 700px; + color: #fff; + background: #111; + display: flex; + justify-content: center; + align-items: center; + margin: 20px 30px; + transition: 0.5s; +} +.container .box:hover +{ + transform: translateY(-15px); +} +.container .box::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(45deg,#be93d4,#710193); +} +.container .box::after{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(45deg,#be93d4,#710193); + filter: blur(15px); +} +.container .box:nth-child(2)::before, +.container .box:nth-child(2)::after +{ + background: linear-gradient(315deg,#be93d4,#8b008b); +} +.container .box span{ + position: absolute; + top: 2px; + left: 2px; + right: 2px; + bottom: 2px; + background: rgba(0,0,0,0.6); + z-index: 2; +} +container .box span::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + pointer-events:none; +} +.container .box .content +{ + position: relative; + z-index: 10; + padding: 20px 40px; + align-content: center; +} +.content .box .content h2 +{ + font-size: 4em; + color: #fff; + margin-bottom: 50px; + padding-top: 10px; +} +.container .box .content p{ + font-size: 1.1em; + color: fff; + margin-bottom: 30px; + line-height: 1.4em; + word-wrap: normal; + font-family: Georgia; +} /* CSS for footer heart */ -@keyframes footer-heart-beat { + @keyframes footer-heart-beat { 0% { transform: scale(1); } @@ -366,358 +349,359 @@ h1::before { } + /*adnaa css*/ -:root { - --card-height: 300px; - --card-width: calc(var(--card-height) / 1.5); - } - .card { - background: #191c29; - width: var(--card-width); - height: var(--card-height); - padding: 3px; - position: relative; - border-radius: 6px; - justify-content: center; - align-items: center; - text-align: left; - display: block; - font-size: 16px; - padding-top: 12px; - padding-left: 12px; - color: rgba(216, 228, 233, 0); - cursor: pointer; - - } - - .card:hover { - color: rgb(88 199 250 / 100%); - transition: color 1s; - } - .card:hover:before, .card:hover:after { - animation: none; - opacity: 0; - } - - - .card::before { - content: ""; - width: 104%; - height: 102%; - border-radius: 8px; - background-image: linear-gradient( - var(--rotate) - , #5ddcff, #3c67e3 43%, #4e00c2); - position: absolute; - z-index: -1; - top: -1%; - left: -2%; - animation: spin 2.5s linear infinite; - } + :root { + --card-height: 300px; + --card-width: calc(var(--card-height) / 1.5); +} + .card { + background: #191c29; + width: var(--card-width); + height: var(--card-height); + padding: 3px; + position: relative; + border-radius: 6px; + justify-content: center; + align-items: center; + text-align: left; + display: block; + font-size: 16px; + padding-top: 12px; + padding-left: 12px; + color: rgba(216, 228, 233, 0); + cursor: pointer; - .card::after { +} + +.card:hover { + color: rgb(88 199 250 / 100%); + transition: color 1s; +} +.card:hover:before, .card:hover:after { + animation: none; + opacity: 0; +} + + +.card::before { + content: ""; + width: 104%; + height: 102%; + border-radius: 8px; + background-image: linear-gradient( + var(--rotate) + , #5ddcff, #3c67e3 43%, #4e00c2); position: absolute; - content: ""; - top: calc(var(--card-height) / 6); - left: 0; - right: 0; z-index: -1; - height: 100%; - width: 100%; - margin: 0 auto; - transform: scale(0.8); - filter: blur(calc(var(--card-height) / 6)); - background-image: linear-gradient( - var(--rotate) - , #5ddcff, #3c67e3 43%, #4e00c2); - opacity: 1; - transition: opacity .5s; + top: -1%; + left: -2%; animation: spin 2.5s linear infinite; +} + +.card::after { + position: absolute; + content: ""; + top: calc(var(--card-height) / 6); + left: 0; + right: 0; + z-index: -1; + height: 100%; + width: 100%; + margin: 0 auto; + transform: scale(0.8); + filter: blur(calc(var(--card-height) / 6)); + background-image: linear-gradient( + var(--rotate) + , #5ddcff, #3c67e3 43%, #4e00c2); + opacity: 1; + transition: opacity .5s; + animation: spin 2.5s linear infinite; +} + + +@keyframes spin { + 0% { + --rotate: 0deg; } - - @keyframes spin { - 0% { - --rotate: 0deg; - } - 100% { - --rotate: 360deg; - } - } - - .card:hover .track-p{ - visibility:hidden ; - - } - .track-p { - position:absolute; - display: inline; - - bottom:30%; - top: 40%; - color: #c2c8dd; - font-size: 24px; - text-decoration: none; - font-family: sans-serif; - font-weight: bold; - - - margin: auto; - text-align: center; - + 100% { + --rotate: 360deg; } - .trackh1{ - color: #fff; - - font-weight: 100; - text-align: center; - text-transform: uppercase; - font-size: 48px; +} + +.card:hover .track-p{ + visibility:hidden ; + +} +.track-p { + position:absolute; + display: inline; - } - /* SONAL CSS */ - footer{ - background: transparent; + bottom:30%; + top: 40%; + color: #c2c8dd; + font-size: 24px; + text-decoration: none; + font-family: sans-serif; + font-weight: bold; + + margin: auto; + text-align: center; + +} +.trackh1{ + color: #fff; + + font-weight: 100; + text-align: center; + text-transform: uppercase; + font-size: 48px; + +} +/* SONAL CSS */ +footer{ + background: transparent; + + } + .container-fluid{ + font-family: 'Baloo Bhai 2', cursive; + background: transparent; + + width: 40%; + margin: 0 auto; + margin-top: 100px; + } + p{ + color: white; /*This is the color of the answers and can change when wanted*/ + } + .container-fluid h1{ + color: #9D00FF; /*This is the color of the heading FAQs and can change when wanted*/ + position: relative; + width: 23rem; + } + /* This is the dash which comes under h2 (add if needed)*/ + /*.container-fluid h1::after{ + content: " "; + position: absolute; + bottom: 0; + right: 300px; + width:67px; + height: 2px; + background-color: #9D00FF; + }*/ + .accordion{ + width:100%; + border:2px solid white; /*bordercolor is white of the questions*/ + cursor: pointer; + padding:3px; + background-color: rgba(193, 210, 236, 0.13); + border-radius: 50px; + display: flex; + margin: 10px 0; + align-items: center; + text-align: left; + } + .accordion .icon{ + margin: 0 15px 0 0; + width: 50px; + border-radius: 50%; + float: left; + background: 8px 5px white; + } + .accordion .active .icon{ + background:8px 5px black ; + } + .accordion .icon:after { + content: '\002B'; /*+ sign*/ + font-weight: 1000; + font-size: 30px; + margin-left: 15px;/*placement of icon inside the white circle*/ + transition: all .5s ease; + color: black; + } + .active .icon:after { + content: '\2212'; + font-size: 30px; + font-weight: bolder; + color: black; + } + + .accordion h5{ + font-size: 22px; /*font size of questions*/ + margin: 0; + padding: 3px 0 0 0; + font-weight: normal; + color: white; /*Color of questions*/ + } + .panel{ + padding: 0 15px; + border-left: 1px solid white; + margin-left: 25px; + font-size: 14px; + text-align: justify; + overflow: hidden; + max-height: 0; /*height of answers*/ + transition: all .5s ease-in; + + } +.containersh{ + position: relative; + justify-content: center; + align-items: center; + padding: 40px 0; + } + +.so { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; } - .container-fluid{ - font-family: 'Baloo Bhai 2', cursive; - background: transparent; - - width: 40%; - margin: 0 auto; - margin-top: 100px; + .so .wrapper{ + padding-left: 625px; + overflow:auto; + background: transparent; + + padding-top: 50px; + padding-bottom: 50px; } - p{ - color: white; /*This is the color of the answers and can change when wanted*/ + .wrapper .button{ + display: inline-block; + height: 60px; + width: 60px; + float: left; + margin: 0 5px; + overflow: hidden; + background:rgba(255, 255, 255, .15); + backdrop-filter: saturate(180%) blur(10px); + border-radius: 50px; + cursor: pointer; + box-shadow: 0px 10px 10px rgba(9, 9, 9, 0.1); + transition: all 0.3s ease-out; } - .container-fluid h1{ - color: #9D00FF; /*This is the color of the heading FAQs and can change when wanted*/ - position: relative; - width: 23rem; + .wrapper .button:hover{ + width: 200px; } - /* This is the dash which comes under h2 (add if needed)*/ - /*.container-fluid h1::after{ - content: " "; - position: absolute; - bottom: 0; - right: 300px; - width:67px; - height: 2px; - background-color: #9D00FF; - }*/ - .accordion{ - width:100%; - border:2px solid white; /*bordercolor is white of the questions*/ - cursor: pointer; - padding:3px; - background-color: rgba(193, 210, 236, 0.13); + .wrapper .button .icon{ + display: inline-block; + height: 60px; + width: 60px; + text-align: center; border-radius: 50px; - display: flex; - margin: 10px 0; - align-items: center; - text-align: left; + box-sizing: border-box; + line-height: 60px; + transition: all 0.3s ease-out; + } - .accordion .icon{ - margin: 0 15px 0 0; - width: 50px; - border-radius: 50%; - float: left; - background: 8px 5px white; + .wrapper .button:nth-child(1):hover .icon{ + background: #4267B2; } - .accordion .active .icon{ - background:8px 5px black ; + .wrapper .button:nth-child(2):hover .icon{ + background: #1DA1F2; } - .accordion .icon:after { - content: '\002B'; /*+ sign*/ - font-weight: 1000; - font-size: 30px; - margin-left: 15px;/*placement of icon inside the white circle*/ - transition: all .5s ease; - color: black; + .wrapper .button:nth-child(3):hover .icon{ + background: #E1306C; } - .active .icon:after { - content: '\2212'; - font-size: 30px; - font-weight: bolder; - color: black; + .wrapper .button:nth-child(4):hover .icon{ + background: #A020F0; } - .accordion h5{ - font-size: 22px; /*font size of questions*/ - margin: 0; - padding: 3px 0 0 0; - font-weight: normal; - color: white; /*Color of questions*/ + .so .wrapper .button .icon i{ + font-size: 25px; + line-height: 60px; + transition: all 0.3s ease-out; } - .panel{ - padding: 0 15px; - border-left: 1px solid white; - margin-left: 25px; - font-size: 14px; - text-align: justify; - overflow: hidden; - max-height: 0; /*height of answers*/ - transition: all .5s ease-in; - + .wrapper .button:hover .icon i{ + color: white; + } + .so .wrapper .button span{ + font-size: 20px; + font-weight: 500; + line-height: 60px; + margin-left: 10px; + transition: all 0.3s ease-out; + } + .so .wrapper .button:nth-child(1) span{ + color: #4267B2; + } + .wrapper .button:nth-child(2) span{ + color: #1DA1F2; + } + .wrapper .button:nth-child(3) span{ + color: #E1306C; + } + .wrapper .button:nth-child(4) span{ + color: #A020F0; + } + #fb + { + color: #006fff; + text-shadow: 0 0 30px #006fff; + } + #ig + { + color: #ff5f40; + text-shadow: 0 0 30px #ff5f40; + } + #tw + { + color: #00acff; + text-shadow: 0 0 30px #00acff; } - .containersh{ - position: relative; - justify-content: center; - align-items: center; - padding: 40px 0; + #di + { + color: #9D00FF; + text-shadow: 0 0 30px #9D00FF; } - .so { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; - } - .so .wrapper{ - padding-left: 625px; - overflow:auto; - background: transparent; - - padding-top: 50px; - padding-bottom: 50px; - } - .wrapper .button{ - display: inline-block; - height: 60px; - width: 60px; - float: left; - margin: 0 5px; - overflow: hidden; - background:rgba(255, 255, 255, .15); - backdrop-filter: saturate(180%) blur(10px); - border-radius: 50px; - cursor: pointer; - box-shadow: 0px 10px 10px rgba(9, 9, 9, 0.1); - transition: all 0.3s ease-out; - } - .wrapper .button:hover{ - width: 200px; - } - .wrapper .button .icon{ - display: inline-block; - height: 60px; - width: 60px; - text-align: center; - border-radius: 50px; - box-sizing: border-box; - line-height: 60px; - transition: all 0.3s ease-out; - - } - .wrapper .button:nth-child(1):hover .icon{ - background: #4267B2; - } - .wrapper .button:nth-child(2):hover .icon{ - background: #1DA1F2; - } - .wrapper .button:nth-child(3):hover .icon{ - background: #E1306C; - } - .wrapper .button:nth-child(4):hover .icon{ - background: #A020F0; - } - - .so .wrapper .button .icon i{ - font-size: 25px; - line-height: 60px; - transition: all 0.3s ease-out; - } - .wrapper .button:hover .icon i{ - color: white; - } - .so .wrapper .button span{ - font-size: 20px; - font-weight: 500; - line-height: 60px; - margin-left: 10px; - transition: all 0.3s ease-out; - } - .so .wrapper .button:nth-child(1) span{ - color: #4267B2; - } - .wrapper .button:nth-child(2) span{ - color: #1DA1F2; - } - .wrapper .button:nth-child(3) span{ - color: #E1306C; - } - .wrapper .button:nth-child(4) span{ - color: #A020F0; - } - #fb - { - color: #006fff; - text-shadow: 0 0 30px #006fff; - } - #ig - { - color: #ff5f40; - text-shadow: 0 0 30px #ff5f40; - } - #tw - { - color: #00acff; - text-shadow: 0 0 30px #00acff; - } - #di - { - color: #9D00FF; - text-shadow: 0 0 30px #9D00FF; - } @media only screen and (max-width:1062px){ - .so .wrapper{ - padding-left: 25%; - overflow:auto; - padding-top: 50px; - padding-bottom: 50px; - } - - } - - /* CSS for heart in footer */ - @keyframes footer-heart-beat { - 0% { - transform: scale(1); - } - 69% { - transform: scale(1.23); - } - 100% { - transform: scale(1); - } - } - - .footer-heart{ - display: inline-block; + .so .wrapper{ + padding-left: 25%; + overflow:auto; + padding-top: 50px; + padding-bottom: 50px; } - - .footer-heart:hover{ - animation-name: footer-heart-beat; - animation-duration: 800ms; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - cursor: default; - } - - - -/* Go top btn styles */ +} -.btn-go-top{ - position: fixed; - bottom: 2vh; - right: 2vh; - width: 3.8rem; - height: 3.8rem; - font-size: 3rem; +/* CSS for heart in footer */ +@keyframes footer-heart-beat { + 0% { + transform: scale(1); + } + 69% { + transform: scale(1.23); + } + 100% { + transform: scale(1); + } +} + +.footer-heart{ + display: inline-block; +} + +.footer-heart:hover{ + animation-name: footer-heart-beat; + animation-duration: 800ms; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + cursor: default; +} + + +/* Go top btn styles */ + +.btn-go-top{ + position: fixed; + bottom: 2vh; + right: 2vh; + width: 3.8rem; + height: 3.8rem; + font-size: 3rem; font-weight: bold; border: 0; outline: 0; @@ -745,6 +729,7 @@ h1::before { font-family: consolas; } + .containerms body { display: flex; @@ -905,6 +890,7 @@ h1::before { opacity: 1; } + @keyframes animate { 0%, 100% @@ -971,885 +957,51 @@ h1::before { border: 1px solid rgba(255, 0, 88, 0.4); box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2); } -======= - - - -@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Finlandica:ital@1&display=swap'); -@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100,500,300;400&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap'); -@property --rotate { - syntax: ""; - initial-value: 132deg; - inherits: false; -} - - - -body { - margin: 0; - padding: 0; - overflow-x: hidden; - background: linear-gradient(to right, #0b0028, #2e012a); -} - -canvas { - width: 100%; - height: 100%; - background: linear-gradient(to right, #0b0028, #2e012a); -} - -body::-webkit-scrollbar { - width: 5px; -} - -body::-webkit-scrollbar-track { - box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); -} - -body::-webkit-scrollbar-thumb { - background-color: #2c012a; - border-bottom-right-radius: 5px; - /* outline: 1px solid rgb(0, 128, 36); */ -} - -.homewrap { - position: absolute; - top: 0; - left: 0; - height: 100vh; - width: 100vw; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - padding-top: 30px; - z-index: 2; -} - -.scaleanim { - transform: scale(5.5); - animation-name: scaling; - animation-duration: 1s; - animation-fill-mode: forwards; -} - -@keyframes scaling { - from { - transform: scale(1); - } - - to { - transform: scale(19.5); - } -} - -h1 { - color: white; - font-family: Arial, Helvetica, sans-serif; - letter-spacing: 6px; - font-size: 80px; - font-weight: 100; -} - -h1::before { - content: "2022"; - position: absolute; - color: rgba(255, 255, 255, 0.146); - font-size: 150px; - margin-top: -50px; - left: calc(50% - 160px); - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - font-weight: 400; - text-align: center; -} - -.homewrap>p { - color: white; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - width: 35vw; - font-size: 15px; - text-align: center; - margin-top: 10px; -} - - - -nav { - position: fixed; - left: 0; - max-width: 10vw; - height: 50vw; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - padding-left: 30px; - z-index: 5; - /* backdrop-filter: blur(3px); */ - /* background-color: #a020f073; */ -} - -.navitem>div { - height: 50px; - border-left: 1px solid rgba(81, 81, 218, 0.718); - margin-top: 0px; - padding-left: 5px; - margin-left: 5px; - cursor: pointer; - display: flex; - align-items: center; - margin-top: -40px; - font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; - font-size: 15px; - color: rgba(255, 255, 255, 0.448); -} - -.navitem>p { - color: white; - font-size: 36px; -} - -#home { - overflow: hidden; -} - -.navitem>p { - margin-top: -25px; - color: white; - margin-left: 1px; -} - -/* .navitem:hover{ - cursor: pointer; -} */ -.active { - border-left: 2px solid rgba(81, 81, 218, 0.718) !important; -} - -.wrap1{ - margin-left: 30vw; - display: flex; - flex-direction: column; - /* align-items: center; */ - height: 40vh; - margin-top: 10vh; - justify-content: space-between; -} -.wrap1>p{ - font-family: Arial, Helvetica, sans-serif; - font-size: 16px; - color: rgb(189, 205, 224); - line-height: 40px; -} -.wrap1>p>span{ - /* margin-left: 5px; */ - color: rgb(230, 230, 156); - font-size: 15px; -} - -@media only screen and (max-width: 800px) { - h1 { - color: white; - font-family: Arial, Helvetica, sans-serif; - letter-spacing: 6px; - font-size: 55px; - font-weight: 100; -} - -h1::before { - content: "2022"; - position: absolute; - color: rgba(255, 255, 255, 0.146); - font-size: 8rem; - margin-top: -50px; - left: calc(50% - 160px); - font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; - font-weight: 400; - text-align: center; -} - .content{ - padding: 0; - - } - .container .box{ - - width: 520px; - height: 900px; - color: rgb(88, 6, 6); - -} - .container .box .content{ - font-size: 0.85em; - color: fff; - margin-bottom: 10px; - line-height: 1em; - word-wrap: normal; - font-family: Georgia; - position: relative; - z-index: 10; - padding: 10px 0px; - align-content: center; - } - .container .box .content h2{ - font-size: 0.85em; - font-family: 'Poppins', 'Roboto', Nunito; - -} -.containersh .container-fluid{ - width: 80%; -} - -} - -/* SRINIDHI CSS */ -*{ - margin: 0; - padding: 0; - box-sizing: border-box; - font-family:'Franklin Gothic Medium'; -} - body{ - - justify-content: center; - align-items: center; - min-height: 100vh; - background: #111; - background: linear-gradient(to right, #0b0028, #2e012a); - - } - .container{ - position: relative; - display: flex; - justify-content: center; - align-items: center; - padding: 40px 0; - flex-wrap: wrap; - } - .container .box{ - position: relative; - width: 520px; - height: 700px; - color: #fff; - background: #111; - display: flex; - justify-content: center; - align-items: center; - margin: 20px 30px; - transition: 0.5s; - } - .container .box:hover - { - transform: translateY(-15px); - } - .container .box::before{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(45deg,#be93d4,#710193); - } - .container .box::after{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(45deg,#be93d4,#710193); - filter: blur(15px); - } - .container .box:nth-child(2)::before, - .container .box:nth-child(2)::after - { - background: linear-gradient(315deg,#be93d4,#8b008b); - } - .container .box span{ - position: absolute; - top: 2px; - left: 2px; - right: 2px; - bottom: 2px; - background: rgba(0,0,0,0.6); - z-index: 2; - } - container .box span::before{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 50%; - height: 100%; - pointer-events:none; - } - .container .box .content - { - position: relative; - z-index: 10; - padding: 20px 40px; - align-content: center; - } - .content .box .content h2 - { - font-size: 4em; - color: #fff; - margin-bottom: 50px; - padding-top: 10px; - } - .container .box .content p{ - font-size: 1.1em; - color: fff; - margin-bottom: 30px; - line-height: 1.4em; - word-wrap: normal; - font-family: Georgia; - } - - /* CSS for footer heart */ - -@keyframes footer-heart-beat { - 0% { - transform: scale(1); - } - 69% { - transform: scale(1.23); - } - 100% { - transform: scale(1); - } -} - -.footer-heart{ - display: inline-block; -} - -.footer-heart:hover{ - animation-name: footer-heart-beat; - animation-duration: 800ms; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - cursor: default; -} - - - /*adnaa css*/ - -:root { - --card-height: 300px; - --card-width: calc(var(--card-height) / 1.5); - } - .card { - background: #191c29; - width: var(--card-width); - height: var(--card-height); - padding: 3px; - position: relative; - border-radius: 6px; - justify-content: center; - align-items: center; - text-align: left; - display: block; - font-size: 16px; - padding-top: 12px; - padding-left: 12px; - color: rgba(216, 228, 233, 0); - cursor: pointer; - - } - - .card:hover { - color: rgb(88 199 250 / 100%); - transition: color 1s; - } - .card:hover:before, .card:hover:after { - animation: none; - opacity: 0; - } - - - .card::before { - content: ""; - width: 104%; - height: 102%; - border-radius: 8px; - background-image: linear-gradient( - var(--rotate) - , #5ddcff, #3c67e3 43%, #4e00c2); - position: absolute; - z-index: -1; - top: -1%; - left: -2%; - animation: spin 2.5s linear infinite; - } - - .card::after { - position: absolute; - content: ""; - top: calc(var(--card-height) / 6); - left: 0; - right: 0; - z-index: -1; - height: 100%; - width: 100%; - margin: 0 auto; - transform: scale(0.8); - filter: blur(calc(var(--card-height) / 6)); - background-image: linear-gradient( - var(--rotate) - , #5ddcff, #3c67e3 43%, #4e00c2); - opacity: 1; - transition: opacity .5s; - animation: spin 2.5s linear infinite; - } - - @keyframes spin { - 0% { - --rotate: 0deg; - } - 100% { - --rotate: 360deg; - } - } - - .card:hover .track-p{ - visibility:hidden ; - - } - .track-p { - position:absolute; - display: inline; - - bottom:30%; - top: 40%; - color: #c2c8dd; - font-size: 24px; - text-decoration: none; - font-family: sans-serif; - font-weight: bold; - - - margin: auto; - text-align: center; - - } - .trackh1{ - color: #fff; - - font-weight: 100; - text-align: center; - text-transform: uppercase; - font-size: 48px; - - } - /* SONAL CSS */ - footer{ - background: transparent; - - } - .container-fluid{ - font-family: 'Baloo Bhai 2', cursive; - background: transparent; - - width: 40%; - margin: 0 auto; - margin-top: 100px; - } - p{ - color: white; /*This is the color of the answers and can change when wanted*/ - } - .container-fluid h1{ - color: #9D00FF; /*This is the color of the heading FAQs and can change when wanted*/ - position: relative; - width: 23rem; - } - /* This is the dash which comes under h2 (add if needed)*/ - /*.container-fluid h1::after{ - content: " "; - position: absolute; - bottom: 0; - right: 300px; - width:67px; - height: 2px; - background-color: #9D00FF; - }*/ - .accordion{ - width:100%; - border:2px solid white; /*bordercolor is white of the questions*/ - cursor: pointer; - padding:3px; - background-color: rgba(193, 210, 236, 0.13); - border-radius: 50px; - display: flex; - margin: 10px 0; - align-items: center; - text-align: left; - } - .accordion .icon{ - margin: 0 15px 0 0; - width: 50px; - border-radius: 50%; - float: left; - background: 8px 5px white; - } - .accordion .active .icon{ - background:8px 5px black ; - } - .accordion .icon:after { - content: '\002B'; /*+ sign*/ - font-weight: 1000; - font-size: 30px; - margin-left: 15px;/*placement of icon inside the white circle*/ - transition: all .5s ease; - color: black; - } - .active .icon:after { - content: '\2212'; - font-size: 30px; - font-weight: bolder; - color: black; - } - - .accordion h5{ - font-size: 22px; /*font size of questions*/ - margin: 0; - padding: 3px 0 0 0; - font-weight: normal; - color: white; /*Color of questions*/ - } - .panel{ - padding: 0 15px; - border-left: 1px solid white; - margin-left: 25px; - font-size: 14px; - text-align: justify; - overflow: hidden; - max-height: 0; /*height of answers*/ - transition: all .5s ease-in; - - } - .containersh{ - position: relative; - justify-content: center; - align-items: center; - padding: 40px 0; - } - - .so { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: 'Poppins', sans-serif; - } - .so .wrapper{ - padding-left: 625px; - overflow:auto; - background: transparent; - - padding-top: 50px; - padding-bottom: 50px; - } - .wrapper .button{ - display: inline-block; - height: 60px; - width: 60px; - float: left; - margin: 0 5px; - overflow: hidden; - background:rgba(255, 255, 255, .15); - backdrop-filter: saturate(180%) blur(10px); - border-radius: 50px; - cursor: pointer; - box-shadow: 0px 10px 10px rgba(9, 9, 9, 0.1); - transition: all 0.3s ease-out; - } - .wrapper .button:hover{ - width: 200px; - } - .wrapper .button .icon{ - display: inline-block; - height: 60px; - width: 60px; - text-align: center; - border-radius: 50px; - box-sizing: border-box; - line-height: 60px; - transition: all 0.3s ease-out; - - } - .wrapper .button:nth-child(1):hover .icon{ - background: #4267B2; - } - .wrapper .button:nth-child(2):hover .icon{ - background: #1DA1F2; - } - .wrapper .button:nth-child(3):hover .icon{ - background: #E1306C; - } - .wrapper .button:nth-child(4):hover .icon{ - background: #A020F0; - } - - .so .wrapper .button .icon i{ - font-size: 25px; - line-height: 60px; - transition: all 0.3s ease-out; - } - .wrapper .button:hover .icon i{ - color: white; - } - .so .wrapper .button span{ - font-size: 20px; - font-weight: 500; - line-height: 60px; - margin-left: 10px; - transition: all 0.3s ease-out; - } - .so .wrapper .button:nth-child(1) span{ - color: #4267B2; - } - .wrapper .button:nth-child(2) span{ - color: #1DA1F2; - } - .wrapper .button:nth-child(3) span{ - color: #E1306C; - } - .wrapper .button:nth-child(4) span{ - color: #A020F0; - } - #fb - { - color: #006fff; - text-shadow: 0 0 30px #006fff; - } - #ig - { - color: #ff5f40; - text-shadow: 0 0 30px #ff5f40; - } - #tw - { - color: #00acff; - text-shadow: 0 0 30px #00acff; - } - #di - { - color: #9D00FF; - text-shadow: 0 0 30px #9D00FF; - } - @media only screen and (max-width:1062px){ - - .so .wrapper{ - padding-left: 25%; - overflow:auto; - padding-top: 50px; - padding-bottom: 50px; - } - - } - - - - -.card-flip-wrap -{ - font-family: 'Open Sans', sans serif; - font-size: 24px; - text-align: center; - color: #c2c8dd; - font-weight: bold; - width: 210px; - height: 310px; - margin: 80px auto; - border-radius: 10px; - perspective: 1400px; - cursor: pointer; - margin: 60px; -} - -.card-flip -{ - position: relative; - height: 100%; - border-radius: 10px; - width: 100%; - transform-style: preserve-3d; -} - -.card-front, -.card-back -{ - display: flex; - width: 100%; - height: 100%; - border-radius: 10px; - justify-content: center; - align-items: center; - backface-visibility: hidden; +.navbar{ + color: white; + display: flex; + flex-direction: column; + z-index: 10000; + top: 0px; + width: 100%; + align-items: center; + position: sticky; + /* height: 100px; */ } -.card-front -{ - background: #191c29; +.navbar::before{ + content: ""; + background-color: black; + position: absolute; + top:0px; + left:0px; + height: 100%; + width:100%; + z-index: -1; + opacity: 0.7; } -.card-back -{ - position: absolute; - top: 0; - left: 0; - transform: rotateY(180deg); - font-size: 1rem; - text-align: start; - flex-direction: column; - justify-content: space-between; - padding: 1rem; -} - -.card-front::before, .card-back::before { - content: ""; - width: 104%; - height: 102%; - border-radius: 8px; - background-image: linear-gradient( - var(--rotate) - , #5ddcff, #3c67e3 43%, #4e00c2); - position: absolute; - z-index: -1; - top: -1%; - left: -2%; - animation: spin 2.5s linear infinite; -} - -.card-flip-wrap::after { - position: absolute; - content: ""; - top: calc(var(--card-height) / 6); - left: 0; - right: 0; - z-index: -1; - height: 100%; - width: 100%; - margin: 0 auto; - transform: scale(0.8); - filter: blur(calc(var(--card-height) / 6)); - background-image: linear-gradient( - var(--rotate) - , #5ddcff, #3c67e3 43%, #4e00c2); - opacity: 1; - transition: opacity .5s; - animation: spin 2.5s linear infinite; +.navbar ul{ + display: flex; + font-family: 'Baloo Bhai', cursive; } -.card-github{ - border: 0.15rem solid #c2c8dd; - padding: 1rem 1.5rem; - border-radius: 5rem; +.navbar > ul > li { + list-style-type: none; + margin: 0; + padding: 0; + font-size: 1.3rem; + margin: 0px 15px; } - - - /* CSS for heart in footer */ - @keyframes footer-heart-beat { - 0% { - transform: scale(1); - } - 69% { - transform: scale(1.23); - } - 100% { - transform: scale(1); - } - } - - .footer-heart{ - display: inline-block; - } - - .footer-heart:hover{ - animation-name: footer-heart-beat; - animation-duration: 800ms; - animation-timing-function: ease-in-out; - animation-iteration-count: infinite; - cursor: default; - } - - - - -/* Go top btn styles */ - -.btn-go-top{ - position: fixed; - bottom: 2vh; - right: 2vh; - width: 3rem; - height: 2.5rem; - font-size: 2rem; - font-weight: bold; - cursor: pointer; +.navbar > ul > li > a{ + text-decoration: none; color: white; - bottom: 20px; - border-radius: 20%; - background-color: #4c2862; - border: #a639ea 3px; - box-shadow: 0px 4px 0px #83658b; - transition: all 0.2s ease-out; - opacity: 50%; -} - -.btn-go-top:hover{ - background: #d3c5c5; - font-weight: 600; - transition: all 0.2s ease-in-out; - color:#320f48; -} - -.btn-go-top:active{ - box-shadow: 0 4px #3d2f41; - transition: all 0.2s ease-in-out; - transform: translateY(4px); -} - -.btn-hidden{ - visibility: hidden; - opacity: 0; -} -.FaqAns{ - font-family: 'Quicksand', sans-serif; } - - -/* Media Query */ -@media screen and (max-width: 510px) { - - h1 { - font-size: 3rem; - } - - h2{ - font-size:1rem; - width:calc(100% + 20px); - } - - .container .box { - padding-top: 40px; - height: 100%; - } - - .so .wrapper{ - padding-left: 5px; - padding-right: 5px; - display: flex; - align-items: center; - justify-content:center; - } - - -} +html { + scroll-behavior: smooth; +} \ No newline at end of file From abd4d910f4e7844877ce01df28205c1b0df5eed3 Mon Sep 17 00:00:00 2001 From: swapn_652 Date: Thu, 20 Oct 2022 11:41:11 +0530 Subject: [PATCH 2/2] Changed some css to add responsiveness --- styles.css | 293 +++++++++++++++++++++++++++++++++-------------------- 1 file changed, 184 insertions(+), 109 deletions(-) diff --git a/styles.css b/styles.css index 0a734d6..f074341 100644 --- a/styles.css +++ b/styles.css @@ -216,112 +216,6 @@ h1::before { } -/* SRINIDHI CSS */ -*{ - /* margin: 0;/ */ - padding: 0; - box-sizing: border-box; - font-family:'Franklin Gothic Medium'; -} - - -body{ - justify-content: center; - align-items: center; - min-height: 100vh; - background: #111; - background: linear-gradient(to right, #0b0028, #2e012a); -} - -.container{ - position: relative; - display: flex; - justify-content: center; - align-items: center; - padding: 40px 0; - flex-wrap: wrap; -} -.container .box{ - position: relative; - width: 520px; - height: 700px; - color: #fff; - background: #111; - display: flex; - justify-content: center; - align-items: center; - margin: 20px 30px; - transition: 0.5s; -} -.container .box:hover -{ - transform: translateY(-15px); -} -.container .box::before{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(45deg,#be93d4,#710193); -} -.container .box::after{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: linear-gradient(45deg,#be93d4,#710193); - filter: blur(15px); -} -.container .box:nth-child(2)::before, -.container .box:nth-child(2)::after -{ - background: linear-gradient(315deg,#be93d4,#8b008b); -} -.container .box span{ - position: absolute; - top: 2px; - left: 2px; - right: 2px; - bottom: 2px; - background: rgba(0,0,0,0.6); - z-index: 2; -} -container .box span::before{ - content: ''; - position: absolute; - top: 0; - left: 0; - width: 50%; - height: 100%; - pointer-events:none; -} -.container .box .content -{ - position: relative; - z-index: 10; - padding: 20px 40px; - align-content: center; -} -.content .box .content h2 -{ - font-size: 4em; - color: #fff; - margin-bottom: 50px; - padding-top: 10px; -} -.container .box .content p{ - font-size: 1.1em; - color: fff; - margin-bottom: 30px; - line-height: 1.4em; - word-wrap: normal; - font-family: Georgia; -} - /* CSS for footer heart */ @keyframes footer-heart-beat { @@ -978,7 +872,7 @@ footer{ position: absolute; top:0px; left:0px; - height: 100%; + height: 70px; width:100%; z-index: -1; opacity: 0.7; @@ -986,7 +880,7 @@ footer{ .navbar ul{ display: flex; - font-family: 'Baloo Bhai', cursive; + margin-top: 20px; } .navbar > ul > li { @@ -1004,4 +898,185 @@ footer{ html { scroll-behavior: smooth; -} \ No newline at end of file +} + + +@media screen and (max-width: 450px) { + .navbar > ul > li { + list-style-type: none; + margin: 0; + padding: 0; + font-size: 0.85rem; + margin: 0px 15px; + } + + .navbar ul{ + display: flex; + margin-top: 25px; + } +} + +@media screen and (max-width: 360px) { + .navbar > ul > li { + list-style-type: none; + margin: 0; + padding: 0; + font-size: 0.8rem; + margin: 0px 15px; + } + +} + +/* SRINIDHI CSS */ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family:'Franklin Gothic Medium'; +} +body{ + + justify-content: center; + align-items: center; + min-height: 100vh; + background: #111; + background: linear-gradient(to right, #0b0028, #2e012a); + +} +.container{ + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding: 40px 0; + flex-wrap: wrap; +} +.container .box{ + position: relative; + width: 520px; + height: 700px; + color: #fff; + background: #111; + display: flex; + justify-content: center; + align-items: center; + margin: 20px 30px; + transition: 0.5s; +} +.container .box:hover +{ + transform: translateY(-15px); +} +.container .box::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(45deg,#be93d4,#710193); +} +.container .box::after{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(45deg,#be93d4,#710193); + filter: blur(15px); +} +.container .box:nth-child(2)::before, +.container .box:nth-child(2)::after +{ + background: linear-gradient(315deg,#be93d4,#8b008b); +} +.container .box span{ + position: absolute; + top: 2px; + left: 2px; + right: 2px; + bottom: 2px; + background: rgba(0,0,0,0.6); + z-index: 2; +} +container .box span::before{ + content: ''; + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + pointer-events:none; +} +.container .box .content +{ + position: relative; + z-index: 10; + padding: 20px 40px; + align-content: center; +} +.content .box .content h2 +{ + font-size: 4em; + color: #fff; + margin-bottom: 50px; + padding-top: 10px; +} +.container .box .content p{ + font-size: 1.1em; + color: fff; + margin-bottom: 30px; + line-height: 1.4em; + word-wrap: normal; + font-family: Georgia; +} + +/* CSS for footer heart */ + + +@media only screen and (max-width:1062px){ + + .so .wrapper{ + padding-left: 25%; + overflow:auto; + padding-top: 50px; + padding-bottom: 50px; + } + +} + + +/* Media Query */ +@media screen and (max-width: 510px) { + + h1 { + font-size: 3rem; + } + + h2{ + font-size:1rem; + width:calc(100% + 20px); + } + + .container .box { + padding-top: 40px; + height: 100%; + } + + .so .wrapper{ + padding-left: 5px; + padding-right: 5px; + display: flex; + align-items: center; + justify-content:center; + } + + + .accordion h5{ + max-width: 210px; + width:100%; + font-size: 19px; /*font size of questions*/ + } + +}