From 29f1613dca9c99a612c55270c66deab013c22892 Mon Sep 17 00:00:00 2001 From: Kamlendra Singh Date: Mon, 6 May 2024 13:13:59 +0200 Subject: [PATCH] Add files via upload --- app/_styles/Ask.module.css | 277 ++++++++++++++ app/_styles/Bookmarks.module.css | 44 +++ app/_styles/Code.module.css | 19 + app/_styles/Courses.module.css | 35 ++ app/_styles/Explore.module.css | 84 +++++ app/_styles/Favorites.module.css | 38 ++ app/_styles/Footer.module.scss | 91 +++++ app/_styles/Home.module.css | 595 +++++++++++++++++++++++++++++++ app/_styles/Nav.module.scss | 289 +++++++++++++++ app/_styles/accordion.module.css | 6 + app/_styles/header.module.css | 92 +++++ app/_styles/msearch.module.scss | 143 ++++++++ app/_styles/play.module.css | 40 +++ 13 files changed, 1753 insertions(+) create mode 100644 app/_styles/Ask.module.css create mode 100644 app/_styles/Bookmarks.module.css create mode 100644 app/_styles/Code.module.css create mode 100644 app/_styles/Courses.module.css create mode 100644 app/_styles/Explore.module.css create mode 100644 app/_styles/Favorites.module.css create mode 100644 app/_styles/Footer.module.scss create mode 100644 app/_styles/Home.module.css create mode 100644 app/_styles/Nav.module.scss create mode 100644 app/_styles/accordion.module.css create mode 100644 app/_styles/header.module.css create mode 100644 app/_styles/msearch.module.scss create mode 100644 app/_styles/play.module.css diff --git a/app/_styles/Ask.module.css b/app/_styles/Ask.module.css new file mode 100644 index 0000000..fcb2ebf --- /dev/null +++ b/app/_styles/Ask.module.css @@ -0,0 +1,277 @@ +.void { + display: flex; + height: 100vh; + max-width: 1300px; + margin-left: auto; + margin-right: auto; + padding: 0 10px; +} + + + +.sidebar1 { + border-right: 1px solid #1565c0; + flex: 0.3; + /* min-width: 250px; */ + margin-top: 20px; + padding-left: 20px; + padding-right: 20px; + /* color: #2196f3; */ + + text-decoration: none; +} + +.active { + text-decoration: none; +} + +.sidebar__tweet1 { + background-color: var(--twitter-color) !important; + border: none !important; + color: rgb(255, 255, 255) !important; + font-weight: 900 !important; + text-transform: inherit !important; + border-radius: 30px !important; + height: 50px !important; + margin-top: 20px !important; +} + +.cc4 { + text-decoration: none; + color: #212121; +} + +.sidebar { + border-right: 1px solid rgb(231, 231, 231); + flex: 0.3; + /* min-width: 250px; */ + margin-top: 20px; + padding-left: 20px; + padding-right: 20px; +} + +.sidebartwitterIcon { + color: #1a73e8; + font-size: 30px !important; + margin-left: 20px; + margin-bottom: 20px; +} + +.sidebartweet { + background-color: #1a73e8 !important; + border: none !important; + color: rgb(255, 255, 255) !important; + font-weight: 900 !important; + text-transform: inherit !important; + border-radius: 30px !important; + height: 50px !important; + margin-top: 20px !important; +} +.sidebartweets { + background-color: #1a73e8 !important; + border: none !important; + color: rgb(255, 255, 255) !important; + /* font-weight: 900 !important; */ + text-transform: inherit !important; + border-radius: 30px !important; + /* height: 50px !important; */ + /* margin-top: 20px !important; */ +} + +.feed { + flex: 0.5; + border-right: 1px solid var(--twitter-background); + min-width: fit-content; + overflow-y: scroll; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +.feed::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.feed { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.feed__header { + position: sticky; + top: 0; + z-index: 100; + +} + + +.t__t { + background-color: var(--twitter-color) !important; + border: none !important; + color: white !important; + font-weight: 900 !important; + text-transform: inherit !important; + border-radius: 30px !important; + width: 100px; + height: 40px !important; + margin-top: -10px !important; + /* margin-left: auto !important; */ +} + +.tweetBox { + padding-bottom: 10px; + border-bottom: 1px solid #1a73e8; + padding-right: 10px; +} + +.tweetBox > form { + display: flex; + flex-direction: column; +} + +.tweetBox__input { + padding: 20px; + display: flex; +} + +.tweetBox__input > input { + flex: 1; + margin-left: 20px; + font-size: 20px; + border: none; +} + +.tweetBox__imageInput { + border: none; + padding: 10px; +} + +.tweetBox__tweetButton { + background-color: #1a73e8 !important; + border: none !important; + color: white !important; + font-weight: 900 !important; + text-transform: inherit !important; + border-radius: 30px !important; + width: 80px; + height: 40px !important; + margin-top: 20px !important; + margin-left: auto !important; +} + + +.post { + display: flex; + align-items: flex-start; + border-bottom: 1px solid #1a73e8; + padding-bottom: 10px; + outline: 4px solid rgb(255, 255, 255); +} + +.post__body { + flex: 1; + padding: 10px; +} + +.post__body > img { + border-radius: 20px; +} + +.post__footer { + display: flex; + justify-content: space-between; + margin-top: 20px; +} + +.post__headerDescription { + margin-bottom: 10px; + font-size: 15px; +} + +.post__headerText > h3 { + font-size: 15px; + margin-bottom: 5px; +} + +.post__badge { + font-size: 14px !important; + color: var(--twitter-color); +} + +.post__headerSpecial { + font-weight: 600; + font-size: 12px; + color: gray; +} + +.post__avatar { + padding: 20px; +} + +.w__i { + display: flex; + align-items: center; + background-color: var(--twitter-background); + margin: 10px; + border-radius: 20px; + /* margin-top: 10px; */ + /* margin-left: 20px; */ +} +.pick { + border-radius: 50px; + border: none; + outline: none; +} +.pick2 { + position: relative; + left: 200px; +} +.widgets { + flex: 0.3; + overflow-y: scroll; +} + +/* Hide scrollbar for Chrome, Safari and Opera */ +.widgets::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.widgets { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.widgets__input { + display: flex; + align-items: center; + background-color: var(--twitter-background); + padding: 10px; + border-radius: 20px; + margin-top: 10px; + margin-left: 20px; + position: sticky; + top: 0; + z-index: 100; +} + +.widgets__input > input { + border: none; + background-color: var(--twitter-background); +} + +.widgets__searchIcon { + color: gray; +} + +.widgets__widgetContainer { + margin-top: 15px; + margin-left: 20px; + padding: 20px; + background-color: #f5f8fa; + border-radius: 20px; +} + +.widgets__widgetContainer > h2 { + font-size: 16px; + font-weight: 600; +} diff --git a/app/_styles/Bookmarks.module.css b/app/_styles/Bookmarks.module.css new file mode 100644 index 0000000..94f1bae --- /dev/null +++ b/app/_styles/Bookmarks.module.css @@ -0,0 +1,44 @@ +.Footern{ + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 0; + left: 0; + /* top: 0; */ + bottom: 0; + margin: auto; +color: rgb(255, 255, 255); +} + +.Container{ + + overflow: hidden; + display: flex; + flex-direction: column; + text-align: center; + height: 100vh; +} + +.Content{ + margin-bottom: 10vw; + width: 100%; + position: relative; + min-height: 100vh; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 80px 40px; + height: 100%; +} + +.CTA{ + max-width: 650px; + width: 100%; + display: flex; + flex-direction: column; + +} + diff --git a/app/_styles/Code.module.css b/app/_styles/Code.module.css new file mode 100644 index 0000000..7ec4a91 --- /dev/null +++ b/app/_styles/Code.module.css @@ -0,0 +1,19 @@ +.grid{ + margin-top: 5rem; + display: inline-grid; + grid-template-columns: auto auto auto; + margin-left: 1rem; + margin-right: 1rem; + margin-bottom: 0.5rem; + grid-gap: 0px 0rem; + background-color: rgb(204, 236, 255); + + } + + .body{ + background-color: rgb(255, 255, 255) !important; + + } + .icodev{ +margin-top: 6rem; + } \ No newline at end of file diff --git a/app/_styles/Courses.module.css b/app/_styles/Courses.module.css new file mode 100644 index 0000000..a82aec2 --- /dev/null +++ b/app/_styles/Courses.module.css @@ -0,0 +1,35 @@ +.Swiper { + margin-bottom: 20rem; + display: flex; + margin-top: 6rem; +} + + +.grid{ + + display: inline-grid; + grid-template-columns: auto auto auto; + margin-left: 0.34rem; + margin-right: 0.34rem; + margin-bottom: 0.34rem; + grid-gap: 0px 0rem; + /* background-color: rgb(204, 236, 255); */ + +} + +@media only screen and (max-width: 600px) { + + .grid{ + + display: inline-grid; + grid-template-columns: auto auto auto; + margin-left: 0rem; + margin-right: 0rem; + margin-bottom: 0rem; + grid-gap: 0px 0rem; + background-color: rgb(204, 236, 255); + + } + + +} \ No newline at end of file diff --git a/app/_styles/Explore.module.css b/app/_styles/Explore.module.css new file mode 100644 index 0000000..d4e89b2 --- /dev/null +++ b/app/_styles/Explore.module.css @@ -0,0 +1,84 @@ +.block { + position: sticky; + top: 0; + background-color: #ffffff; + padding: 0.1%; + width: 100%; + height: 2.9rem; + opacity: 0.9; + z-index: 1; + margin-top: 2rem; + margin-bottom: 4rem; + } + + .bo { + margin-left: 1rem; + background: linear-gradient(90deg,#0099ff,#1291b8,#1b7ec0,#006eff,#0077ff,#005aa3); + background-size:400% ; + font-size: 2.5rem; + font-family: sans-serif; + letter-spacing: 5px; + /* font-weight: 600; */ + word-spacing: 5px; + -webkit-text-fill-color: transparent; + -webkit-background-clip: text; + animation: animate 10s linear infinite; + } + + @keyframes animate{ + 0%{ + background-position: 0%; + + } + 100%{ + background-position: 400%; + } + } + + + + + .eshow{ + cursor: pointer; + + } + .eshow:hover { + transition: 0.1s; + color: rgb(255, 255, 255); + background: #0277bd; + } + .eshow1img{ + display: inline-block; + } + .eshow1text{ + display: inline-block; + font-size: 2rem; + + } + + + .eshow2img{ + display: inline-block; + } + .eshow2text{ + display: inline-block; + font-size: 2rem; + } + + + .eshow3img{ + display: inline-block; + } + .eshow3text{ + display: inline-block; + font-size: 2rem; + } + + + .eshow4img{ + display: inline-block; + } + .eshow4text{ + display: inline-block; + font-size: 2rem; + } \ No newline at end of file diff --git a/app/_styles/Favorites.module.css b/app/_styles/Favorites.module.css new file mode 100644 index 0000000..a0d257d --- /dev/null +++ b/app/_styles/Favorites.module.css @@ -0,0 +1,38 @@ +.heart{ + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + +} +.heartt{ + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; +color: rgb(255, 255, 255); +font-size: larger; +} + +.Footern{ + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 0; + left: 0; + /* top: 0; */ + bottom: 0; + margin: auto; +color: rgb(255, 255, 255); +} \ No newline at end of file diff --git a/app/_styles/Footer.module.scss b/app/_styles/Footer.module.scss new file mode 100644 index 0000000..6d6592b --- /dev/null +++ b/app/_styles/Footer.module.scss @@ -0,0 +1,91 @@ +.Box{ + + padding: 80px 60px; +background: white; + +width: 100%; + + +@media (max-width: 1000px) { + padding: 70px 30px; +} +} + + +.Container{ + display: flex; + flex-direction: column; + justify-content: center; + max-width: 1000px; + margin: 0 auto; + /* background: red; */ +} + +.Column{ + display: flex; +flex-direction: column; +text-align: left; +margin-left: 60px; +} +.Row{ + display: grid; +grid-template-columns: repeat(auto-fill, + minmax(185px, 1fr)); +grid-gap: 20px; + +@media (max-width: 1000px) { + grid-template-columns: repeat(auto-fill, + minmax(200px, 1fr)); +} +} + +.FooterLink{ + color: grey; +margin-bottom: 20px; +font-size: 18px; +text-decoration: none; +cursor: pointer; +&:hover { + color: black; + transition: 200ms ease-in; +} +} +.FooterLinky{ + color: grey; +margin-bottom: 20px; +font-size: 18px; +text-decoration: none; +cursor: pointer; +&:hover { + color: rgb(255, 0, 0); + transition: 200ms ease-in; +} +} +.FooterLinkt{ + color: grey; +margin-bottom: 20px; +font-size: 18px; +text-decoration: none; +cursor: pointer; +&:hover { + color: rgb(0, 132, 255); + transition: 200ms ease-in; +} +} +.FooterLinkl{ + color: grey; +margin-bottom: 20px; +font-size: 18px; +text-decoration: none; +cursor: pointer; +&:hover { + color: rgb(62, 162, 255); + transition: 200ms ease-in; +} +} +.Heading{ + font-size: 24px; +color: grey; +margin-bottom: 40px; +font-weight: bold; +} \ No newline at end of file diff --git a/app/_styles/Home.module.css b/app/_styles/Home.module.css new file mode 100644 index 0000000..e7083fa --- /dev/null +++ b/app/_styles/Home.module.css @@ -0,0 +1,595 @@ + +.ve{ + margin-top: 2rem; +} +/* Login */ +.Container { + padding: 0px; +} +.Nav { + max-width: "100%"; + margin-top: 0.1rem; + margin-right: 0.1rem; + margin-left: 0.3rem; + padding: 0rem 0 16px; + display: flex; + + align-items: center; + position: relative; + justify-content: space-between; + flex-wrap: nowrap; +} + + +.Section { + display: flex; + align-content: start; + min-height: 700px; + padding-bottom: 138px; + padding-top: 40px; + padding: 60px 0; + position: relative; + flex-wrap: wrap; + width: 100%; + max-width: 1128px; + align-items: center; + margin: auto; + +} + +.hb { + /* padding-bottom: 0; */ + width: 55%; + font-size: 3.5rem; + color: #2977c9; + font-weight: 200; + line-height: 4.375rem; +} + +.message { + width: 50%; + display: flex; + +} + +.Form { + margin-top: 1000px; + width: 408px; + margin-top: 10rem !important; + @media (max-width: 768px) { + margin-top: 20px; + } +} + +.Google { + display: flex; + justify-content: center; + background-color: #fff; + align-items: center; + height: 56px; + width: 100%; + border-radius: 28px; + box-shadow: inset 0 0 0 1px rgb(0 0 0 / 60%), + inset 0 0 0 2px rgb(0 0 0 / 0%) inset 0 0 0 1px rgb(0 0 0 / 0); + vertical-align: middle; + z-index: 0; + transition-duration: 167ms; + font-size: 20px; + color: rgba(0, 0, 0, 0.6); + border: 0.125rem solid #42a5f5; +} + +.Google:hover { + background-color: white; + color: rgba(0, 0, 0, 0.75); + border: 0.125rem solid #1976d2; +} + + + +.person{ + height: 200px !important; + width: 200px !important; + /* color: rgb(0, 255, 213); */ + color: var(--twitter-color) !important; +} + +@media only screen and (min-width: 992px) { + .messa{ + height: 412; + + } + .hb { + /* padding-bottom: 0; */ + width: 55%; + font-size: 2.5rem; + color: #2977c9; + font-weight: 200; + line-height: 4.375rem; + } + .message { + width: 50%; + height: 400; + display: flex; + + } + + .Form { + margin-top: 100px; + width: 408px; + margin-top: 10rem !important; + @media (max-width: 768px) { + margin-top: 20px; + } + } + + .Google { + display: flex; + justify-content: center; + background-color: #fff; + align-items: center; + height: 56px; + width: 100%; + border-radius: 28px; + box-shadow: inset 0 0 0 1px rgb(0 0 0 / 60%), + inset 0 0 0 2px rgb(0 0 0 / 0%) inset 0 0 0 1px rgb(0 0 0 / 0); + vertical-align: middle; + z-index: 0; + transition-duration: 167ms; + font-size: 20px; + color: rgba(0, 0, 0, 0.6); + border: 0.125rem solid #42a5f5; + } + + .Google:hover { + background-color: white; + color: rgba(0, 0, 0, 0.75); + border: 0.125rem solid #1976d2; + } +} +/* Navbar Logo */ +.nap { + font-family: "Raleway", sans-serif; + font-size: 2.5rem; + cursor: pointer; +} +@media screen and (max-width: 480px) { + .nap { + font-size: 1.5rem; + } +} + +/* Show.jsx */ +.G { + display: flex; + align-content: start; + min-height: 700px; + padding-bottom: 138px; + padding-top: 40px; + padding: 60px 0; + position: relative; + flex-wrap: wrap; + width: 100%; + max-width: 1128px; + align-items: center; + margin: auto; + @media (max-width: 768px) { + margin: auto; + min-height: 0px; + } +} +.hero1 { + width: 100%; +} +.hero1img { + width: 40%; + height: auto; + float: left; + + @media (max-width: 768px) { + top: 230px; + width: initial; + position: initial; + height: initial; + } +} + +.hero1h1 { + position: absolute; + bottom: 330px; + right: -200px; + padding-bottom: 0; + width: 55%; + float: right; + font-size: 56px; + color: #2977c9; + font-weight: 200; + line-height: 70px; + display: flex; + @media (max-width: 768px) { + text-align: center; + font-size: 20px; + width: 100%; + line-height: 2; + } +} + +.hero2 { + width: 100%; +} +.hero2img { + float: right; + position: relative; + right: 100rem; +} +.hero2h1 { + float: left; +} + +.hero3 { + width: 100%; +} + +.hero3h1 { + position: absolute; + bottom: 330px; + right: -200px; + padding-bottom: 0; + width: 55%; + float: right; + font-size: 56px; + color: #2977c9; + font-weight: 200; + line-height: 70px; + display: flex; + @media (max-width: 768px) { + text-align: center; + font-size: 20px; + width: 100%; + line-height: 2; + } +} + +.hero3img { + width: 40%; + height: auto; + float: left; + + @media (max-width: 768px) { + top: 230px; + width: initial; + position: initial; + height: initial; + } +} +.ox { + white-space: nowrap; + text-decoration: none; +} +.cour { + margin-bottom: 5rem; +} + +/* Navigate */ + +.welcome { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; +} +.boder { + border: 0.1rem; + margin: 50rem; +} + +.boo2 { + border: 0.2rem solid blue; + margin: 3rem; +} + +.clogo { + margin-left: 1rem; + position: fixed; + margin-top: 0.3rem; +} + +.explorepaper1 { + text-align: left; + font-size: 2rem; + margin-left: 1rem; + color: rgb(168, 168, 42); +} + +.load { + text-align: center; + + display: flex; + + justify-content: center; + + align-items: center; + margin-bottom: 10rem; +} +.he { + z-index: 200; +} + +.error { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; + margin: auto; + color: rgb(0, 47, 255); +} + +.homo1 { + margin-left: 7%; + color: #3d87db; + display: inline; + margin-bottom: 1%; +} + +.homo2 { + display: inline; +} + +i.z { + position: relative; + top: 0.25rem; +} + +.x { + mix-blend-mode: multiply; +} + +.cc { + position: absolute; + top: 10px; + left: 180px; +} + +.hr { + border: 0.3125rem solid grey; +} +@media only screen and (max-width: 600px) { + .hr { + border: 0.125rem solid grey; + } +} + +.td { + color: grey; + margin-bottom: 20px; + font-size: 18px; + text-decoration: none; +} + +.tel { + text-decoration: none; +} + +.o { + width: 50%; + height: auto; +} + +.oo { + width: 50%; + height: auto; + -webkit-transform: scaleX(-1); + transform: scaleX(-1); +} + +.apple { + text-decoration: none; + color: #424242; + transition: 0.3s; +} +.apple:hover { + color: #2979ff; + transition: 0.3s; +} +.applee { + text-decoration: none; + color: #424242; + transition: 0.3s; +} +.applee:hover { + color: #2979ff; + transition: 0.3s; +} +.td:hover { + color: black; + transition: 200ms ease-in; +} + +span.m { + color: white; + position: absolute; + top: 20%; + left: 75%; + font-size: 2.5rem; + cursor: pointer; + transition: 0.3s; +} + +.m:hover { + color: rgb(7, 106, 225); + background-color: rgb(255, 255, 255); + /* transition: 0.1s; */ + height: 60px; + width: 60px; + -webkit-appearance: none; + box-shadow: -10px -10px 15px rgba(255, 255, 255, 0.5), + 10px 10px 15px rgbs(70, 70, 70, 0.12); + position: absolute; + top: 13%; + left: 74.5%; + /* transform: translate(-50%,-50%); */ + border-radius: 50%; + border: 8px solid #ececec; + outline: none; + display: flex; +} + +span.mmm { + color: white; + position: absolute; + top: 20%; + left: 95%; + font-size: 2.5rem; + cursor: pointer; +} + +span.custommii { + color: white; + position: absolute; + top: 1.25rem; + left: 96.25rem; + cursor: pointer; + transition: all 0.5s; +} + +span.custommii:hover { + color: rgb(44, 148, 248); + transition: all 0.5s; +} + +.rotate { + animation: rotation 2s infinite linear; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } +} + +/* search bar */ + +.container .input { + border: 0; + outline: none; + color: #8b7d77; +} + +.search_wrap { + width: 100%; + + /* margin: 38px auto; */ +} + +.search_wrap .search_box { + position: relative; + width: 100%; + height: 3rem; +} + +.search_wrap .search_box .input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0.625rem 1.25rem; + border-radius: 0.1875rem; + font-size: 1rem; + border: 0.125rem solid #42a5f5; + transition: 0.1s; +} +.search_wrap .search_box .input:hover { + border: 0.125rem solid #1976d2; + transition: 0.1s; +} + +.search_wrap .search_box .btn { + position: absolute; + top: 0; + right: 0; + width: 3rem; + height: 100%; + background: #1976d2; + z-index: 1; + cursor: pointer; +} +.search_wrap .search_box .btn:hover { + background: #1565c0; +} +.search_wrap .search_box .btn.btn_common .fas { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fff; + font-size: 1.25rem; +} +.search_wrap.search_wrap_3 .search_box .input { + padding-right: 5rem; +} + +.search_wrap.search_wrap_3 .search_box .input { + border-radius: 3.125rem; +} +.search_wrap.search_wrap_3 .search_box .btn { + right: 0px; + border-radius: 50%; +} + +/* end search bar */ + + + +.top-pane { + background-color: transparent; +} + +.pane { + height: 100% !important; +} + +.editor-container { + background-color: hsl(225, 6%, 25%); + + padding: 1rem; + height: 100%; + width: 100%; +} + +.editor-title { + justify-content: space-between; + background-color: hsl(225, 6%, 13%); + color: white; + padding: 0.5rem 0.5rem 0.5rem 1rem; + border-top-right-radius: 0.5rem; + border-top-left-radius: 0.5rem; + margin-right: 1rem; + margin-left: 1rem; + margin-top: 1rem; +} + +.CodeMirror { + height: 11.5rem !important; +} + +.code-mirror-wrapper { + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; + overflow: hidden; + margin-bottom: 1rem; + margin-right: 1rem; + margin-left: 1rem; +} diff --git a/app/_styles/Nav.module.scss b/app/_styles/Nav.module.scss new file mode 100644 index 0000000..5b2922f --- /dev/null +++ b/app/_styles/Nav.module.scss @@ -0,0 +1,289 @@ +.Home { + width: 10.625rem; + height: 3.75rem; + border: none; + color: white; + padding: 0.938rem 2rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.25rem; + border-radius: 100rem; + cursor: pointer; + background: linear-gradient(90deg, #0051ff, #00ddff); + transition: 0.3s; + margin-left: 0.5rem; +} +.Home:hover { + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + transition: 0.2s; + content: "Float"; + width: 12.5rem; + height: 4.375rem; +} + + +.Code { + width: 9.0625rem; + height: 3.75rem; + background: linear-gradient(90deg, #0051ff, #00ddff); + border: none; + color: white; + padding: 0.9375rem 2rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.25rem; + + cursor: pointer; + border-radius: 3.125rem; + + content: "Float"; + + transition: 0.3s; + margin-left: 0.5rem; +} +.Code:hover { + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + transition: 0.2s; + content: "Float"; + width: 9.6875rem; + height: 4.375rem; +} + + + +.Courses { + width: 12.5rem; + height: 3.75rem; + background: linear-gradient(90deg, #0051ff, #00ddff); + border: none; + color: white; + padding: 0.9375rem 2rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.25rem; + + cursor: pointer; + border-radius: 3.125rem; + content: "Float"; + transition: 0.3s; + margin-left: 0.5rem; +} +.Courses:hover { + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + transition: 0.2s; + content: "Float"; + width: 13.125rem; + height: 4.375rem; +} + +.explore { + width: 11.25rem; + height: 3.75rem; + color: white; + + background: linear-gradient(90deg, #276bff, #00ddff); + border: none; + padding: 0.9375rem 2rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.25rem; + cursor: pointer; + border-radius: 3.125rem; + content: "Float"; + transition: 0.3s; + margin-left: 0.5rem; +} +.explore:hover { + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + transition: 0.2s; + content: "Float"; + width: 11.875rem; + height: 4.375rem; +} + +.Ask { + color: white; + width: 8rem; + height: 3.75rem; + background: linear-gradient(90deg, #0051ff, #00ddff); + border: none; + padding: 0.9375rem 2rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.25rem; +margin-left: 0.5rem; + cursor: pointer; + border-radius: 3.125rem; + content: "Float"; + transition: 0.3s; +} + +.Ask:hover { + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + width: 8.625rem; + height: 4.375rem; + transition: 0.2s; + content: "Float"; +} +.i1 { + position: relative; + bottom: 0.1875rem; +} +.i2 { + position: relative; + bottom: 0.125rem; +} +.i3 { + position: relative; + bottom: 0.1875rem; +} +.i4 { + position: relative; + bottom: 0.125rem; +} +.i5 { + position: relative; + bottom: 0.1rem; +} + +@media only screen and (min-width: 992px) { + .Code { + width: 8rem; + height: 2.8rem; + background: linear-gradient(90deg, #0051ff, #00ddff); + border: none; + color: white; + padding: 0rem 0rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.2rem; + + cursor: pointer; + border-radius: 3.125rem; + + content: "Float"; + + transition: 0.3s; + margin-left: 0.5rem; + } + .Code:hover { + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + transition: 0.2s; + content: "Float"; + width: 9rem; + height: 3rem; + } + + .Courses { + width: 10rem; + height: 2.8rem; + background: linear-gradient(90deg, #0051ff, #00ddff); + border: none; + color: white; + padding: 0rem 0rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.2rem; + + cursor: pointer; + border-radius: 3.125rem; + content: "Float"; + transition: 0.3s; + margin-left: 0.5rem; + } + .Courses:hover { + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + transition: 0.2s; + content: "Float"; + width: 11rem; + height: 3rem; + } + + .explore { + width: 10rem; + height: 2.8rem; + color: white; + + background: linear-gradient(90deg, #276bff, #00ddff); + border: none; + padding: 0rem 0rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.25rem; + cursor: pointer; + border-radius: 3.125rem; + content: "Float"; + transition: 0.3s; + margin-left: 0.5rem; + } + .explore:hover { + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + transition: 0.2s; + content: "Float"; + width: 11rem; + height: 3rem; + } + + .Ask { + color: white; + width: 8rem; + height: 2.8rem; + background: linear-gradient(90deg, #0051ff, #00ddff); + border: none; + padding: 0rem 0rem; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 1.25rem; + margin-left: 0.5rem; + cursor: pointer; + border-radius: 3.125rem; + content: "Float"; + transition: 0.3s; + } + + .Ask:hover { + box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), + 0 17px 50px 0 rgba(0, 0, 0, 0.19); + width: 9rem; + height: 3rem; + transition: 0.2s; + content: "Float"; + } + .i1 { + position: relative; + bottom: 0.1875rem; + } + .i2 { + position: relative; + bottom: 0.125rem; + } + .i3 { + position: relative; + bottom: 0.1875rem; + } + .i4 { + position: relative; + bottom: 0.125rem; + } + .i5 { + position: relative; + bottom: 0.1rem; + } +} \ No newline at end of file diff --git a/app/_styles/accordion.module.css b/app/_styles/accordion.module.css new file mode 100644 index 0000000..25fa6e7 --- /dev/null +++ b/app/_styles/accordion.module.css @@ -0,0 +1,6 @@ +.accordion { + margin-bottom: 2.5rem; + margin-left: 1.25rem; + margin-right: 1.25rem; + margin-top: 3.125rem; + } \ No newline at end of file diff --git a/app/_styles/header.module.css b/app/_styles/header.module.css new file mode 100644 index 0000000..a6c1497 --- /dev/null +++ b/app/_styles/header.module.css @@ -0,0 +1,92 @@ +/* Set min-height to avoid page reflow while session loading */ +.signedInStatus { + display: block; + min-height: 4rem; + width: 100%; + } + + .loading, + .loaded { + position: relative; + top: 0; + opacity: 1; + overflow: hidden; + border-radius: 0 0 0.6rem 0.6rem; + padding: 0.6rem 1rem; + margin: 0; + background-color: rgba(0, 0, 0, 0.05); + transition: all 0.2s ease-in; + } + + .loading { + top: -2rem; + opacity: 0; + } + + .signedInText, + .notSignedInText { + position: absolute; + padding-top: 0.8rem; + left: 1rem; + right: 6.5rem; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: inherit; + z-index: 1; + line-height: 1.3rem; + } + + .signedInText { + padding-top: 0rem; + left: 4.6rem; + } + + .avatar { + border-radius: 2rem; + float: left; + height: 2.8rem; + width: 2.8rem; + background-color: white; + background-size: cover; + background-repeat: no-repeat; + } + + .button, + .buttonPrimary { + float: right; + margin-right: -0.4rem; + font-weight: 500; + border-radius: 0.3rem; + cursor: pointer; + font-size: 1rem; + line-height: 1.4rem; + padding: 0.7rem 0.8rem; + position: relative; + z-index: 10; + background-color: transparent; + color: #555; + } + + .buttonPrimary { + background-color: #346df1; + border-color: #346df1; + color: #fff; + text-decoration: none; + padding: 0.7rem 1.4rem; + } + + .buttonPrimary:hover { + box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.2); + } + + .navItems { + margin-bottom: 2rem; + padding: 0; + list-style: none; + } + + .navItem { + display: inline-block; + margin-right: 1rem; + } \ No newline at end of file diff --git a/app/_styles/msearch.module.scss b/app/_styles/msearch.module.scss new file mode 100644 index 0000000..925ed73 --- /dev/null +++ b/app/_styles/msearch.module.scss @@ -0,0 +1,143 @@ +// *, +// *::before, +// *::after { +// box-sizing: border-box; +// font-family: Helvetica, sans-serif; +// font-weight: 100; +// } + +.container { + align-items: center; + background: var(--color-background); + display: flex; +// height: 100vh; + justify-content: center; +} + +.search { + --easing: cubic-bezier(0.4, 0, 0.2, 1); + --font-size: 2rem; + --color: var(--color-foreground); + --color-highlight: white; + --transition-time-icon: 0.2s; + --transition-time-input: 0.3s 0.25s; + + &:not(:focus-within) { + --transition-time-input: 0.2s 0s; + } + + @media (prefers-reduced-motion: reduce) { + --transition-time-icon: 0s !important; + --transition-time-input: 0s !important; + } + + $root: &; + + border-radius: 999px; + border: 2px solid transparent; + display: flex; + transition: border-color var(--transition-time-icon) linear, + padding var(--transition-time-input) var(--easing); + + &__input { + background: transparent; + border: none; + color: var(--color-highlight); + font-size: var(--font-size); + opacity: 0; + outline: none; + padding: 0; + transition: width var(--transition-time-input) var(--easing), + padding var(--transition-time-input) var(--easing), + opacity var(--transition-time-input) linear; + width: 0; + + &::placeholder { + color: var(--color); + opacity: 0.75; + } + } + + &__icon-container { + height: calc(var(--font-size) + 2rem); + position: relative; + width: calc(var(--font-size) + 2rem); + } + + &__label, + &__submit { + color: var(--color); + cursor: pointer; + display: block; + height: 100%; + padding: 0; + position: absolute; + width: 100%; + + &:hover, + &:focus, + &:active { + color: var(--color-highlight); + } + } + + &__label { + transition: transform var(--transition-time-icon) var(--easing), color 0.1s; + } + + &__submit { + background: none; + border-radius: 50%; + border: none; + box-shadow: 0 0 0 4px inset transparent; + display: none; + outline: none; + transition: color 0.1s, box-shadow 0.1s; + + svg { + transform: scale(0.5); + } + + &:focus { + box-shadow: 0 0 0 4px inset var(--color-highlight); + } + } + + &:focus-within { + border-color: var(--color); + + #{$root} { + &__input { + opacity: 1; + padding: 0 1rem 0 2rem; + width: calc(var(--font-size) * 12); + } + + &__label { + transform: scale(0.5); + } + + &__submit { + animation: unhide var(--transition-time-icon) steps(1, end); + display: block; + } + } + } +} + +@keyframes unhide { + from { + height: 0; + opacity: 0; + } + + to { + height: auto; + opacity: 1; + } +} + +.xp{ + height: 1rem; + width: 1rem; +} \ No newline at end of file diff --git a/app/_styles/play.module.css b/app/_styles/play.module.css new file mode 100644 index 0000000..54334fd --- /dev/null +++ b/app/_styles/play.module.css @@ -0,0 +1,40 @@ +#app { + height: 100%; +} +html, +body { + position: relative; + height: 100%; +} + +body { + background: #eee; + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + font-size: 14px; + color: #000; + margin: 0; + padding: 0; +} + +.swiper { + width: 100%; + height: 100%; +} + +.swiper-slide { + text-align: center; + font-size: 18px; + background: #fff; + + /* Center slide text vertically */ + display: flex; + justify-content: center; + align-items: center; +} + +.swiper-slide img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; +} \ No newline at end of file