diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..febb024 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "githubPullRequests.ignoredPullRequestBranches": ["main"] +} diff --git a/chech.h b/chech.h new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 64c5cda..77cc0ca 100644 --- a/index.html +++ b/index.html @@ -1,79 +1,70 @@ - arise tech + Webster + + -
-
-
- -
-
- -
- -
- - -
+ + + + +
+
+

With the India's largest
Tutorial Site.

+
+

Welcome to Webster

+

+ The ultimate resource for computer science students! Whether you're + just starting out or looking to enhance your skills our comprehensive + tutorials and guides cover everything from programming languages to + algorithms and data structures. With easy-to-follow explanations, + practical examples, and interactive exercises you'll be able to master + the fundamentals and advance your knowledge in no time. Join our + community of learners and let's embark on a journey of discovery and + growth in the exciting world of computer science.

-
- -
-

Login Here

- - - -

Don't have an account
- Sign Up Here

-

Login With

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

Sign in to Webster

+ + + +

Don't have an account? Sign Up

+ +
+ + + + + +
+
+ + diff --git a/majicNav.css b/majicNav.css new file mode 100644 index 0000000..1627dec --- /dev/null +++ b/majicNav.css @@ -0,0 +1,145 @@ +* +{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body +{ + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: #222327; +} +.navigation +{ + position: relative; + width: 400px; + height: 60px; + background: #6d1e1e; + display: flex; + justify-content: center; + align-items: center; + border-radius: 10px; +} +.navigation ul +{ + display: flex; + width: 350px; +} +.navigation ul li +{ + list-style: none; + position: relative; + /* 350 / 5 = 70 */ + width: 70px; + height: 60px; + z-index: 2; +} +.navigation ul li a +{ + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + text-align: center; +} +.navigation ul li a .icon +{ + position: relative; + display: block; + line-height: 65px; + font-size: 1.5em; + width: 55px; + height: 55px; + border-radius: 50%; + transition: 0.5s; + transition-delay: 0s; + color: #222327; +} +.navigation ul li.active a .icon +{ + transform: translateY(-27px); + color: #fff; + transition-delay: 0.25s; + background: var(--clr); +} +.navigation ul li a .icon::before +{ + content: ''; + position: absolute; + top: 10px; + left: 0; + width: 100%; + height: 100%; + transition: 0.5s; + transition-delay: 0s; + border-radius: 50%; + background: var(--clr); + filter: blur(5px); + opacity: 0; +} +.navigation ul li.active a .icon::before +{ + transition-delay: 0.5s; + opacity: 0.5; +} +.indicator +{ + position: absolute; + top: -35px; + width: 70px; + height: 70px; + background: #fff; + border-radius: 50%; + z-index: 1; + transition: 0.5s; +} +.indicator::before +{ + content: ''; + position: absolute; + top: 5px; + left: -28px; + width: 30px; + height: 30px; + background: transparent; + border-radius: 50%; + box-shadow: 15px 18px #fff; +} +.indicator::after +{ + content: ''; + position: absolute; + top: 5px; + right: -28px; + width: 30px; + height: 30px; + background: transparent; + border-radius: 50%; + box-shadow: -15px 18px #fff; +} + +.navigation ul li:nth-child(1).active ~ .indicator +{ + transform: translateX(calc(70px * 0)); +} +.navigation ul li:nth-child(2).active ~ .indicator +{ + transform: translateX(calc(70px * 1)); +} +.navigation ul li:nth-child(3).active ~ .indicator +{ + transform: translateX(calc(70px * 2)); +} +.navigation ul li:nth-child(4).active ~ .indicator +{ + transform: translateX(calc(70px * 3)); +} +.navigation ul li:nth-child(5).active ~ .indicator +{ + transform: translateX(calc(70px * 4)); +} \ No newline at end of file diff --git a/majicNav.html b/majicNav.html new file mode 100644 index 0000000..e101269 --- /dev/null +++ b/majicNav.html @@ -0,0 +1,64 @@ + + + +Magic Menu Indicator | 03 + + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/responsive.css b/responsive.css new file mode 100644 index 0000000..cd814bf --- /dev/null +++ b/responsive.css @@ -0,0 +1,58 @@ +/* for small device/smartphones */ + +@media (max-width: 537px) { + .form { + /* background-color: red; + width: 40%; */ + display: none; + } + .form > h2 { + font-size: 1.3rem; + color: yellow; + } + .hero .content, + .hero .form { + width: 50%; + } + + body{ + background-color: white !important; + } + .navbar{ + + + + } + + + .nav { + width: 50%; + display: flex; + flex-direction: row; + gap: 0.5rem; + /* box-shadow: 14px 0 6px 4px rgba(255, 255, 255, 0.25); */ + background: blue; + display: inline-block; +margin-top: 60px; +position: relative; + +} +.navbar{ + background-color: red !important; + margin: 2px 5px 3px 5px; +} +nav h1{ + position:absolute; + left: -10; + bottom: 0; +} + +.content{ + display: none; + width: 45%; + min-height: 800px; + background-color: orange; +} +} + + diff --git a/style.css b/style.css index f7a8bef..eca2b4a 100644 --- a/style.css +++ b/style.css @@ -1,32 +1,91 @@ +/* Gredient color: background: rgb(2,0,36); +background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); +Primary color:#0073ff + background: linear-gradient( + 90deg, + rgba(2, 0, 36, 1) 0%, + rgba(9, 9, 121, 1) 35%, + rgb(66, 49, 175) 100% + ); +secoundary color: +box-shadow: 0 0 6px rgba(255, 255, 255, 0.25);*/ + * { margin: 0; padding: 0; + box-sizing: border-box; + font-family: "inter", sans-serif; } -.main { - width: 100%; - background: linear-gradient( +body { + height: 100vh; + font-family: "inter", sans-serif; + /* background: linear-gradient( to top, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 50% - ), - url(2.jpg); - background-position: center; + ) + url("2.jpg"); */ + + background: linear-gradient( + 138deg, + rgb(32, 201, 255) 36.7%, + rgb(0, 8, 187) 84.4%, + rgb(255, 255, 255) 119.7% + ); background-size: cover; - height: 109vh; + + +} + +.nav { + width: 100%; + height: 5rem; + display: flex; + flex-direction: row; + gap: 0.5rem; + box-shadow: 14px 0 6px 4px rgba(255, 255, 255, 0.25); } .navbar { - width: 1200px; - height: 75px; - margin: auto; + width: 7.7rem; + height: 2rem; + margin: 22px 10px; + + background: linear-gradient( + 90deg, + rgba(2, 0, 36, 1) 0%, + rgba(9, 9, 121, 1) 35%, + rgb(66, 49, 175) 100% + ); + box-shadow: 0 0 10px rgba(255, 255, 255, 0.25); + border: none; + border-radius: 0.5rem; + font-size: 1rem; + font-weight: bold; + list-style: none; + text-align: center; + + + + /* display: inline-block; */ +} + +.navbar a { + color: #fff; + text-decoration: none; +} +.hero { + width: 100%; + display: grid; + grid-template-columns: auto; } .icon { width: 200px; float: left; - height: 70px; + height: 2rem; } .logo { - color: #e9e9e9; + color: #fff; font-size: 35px; font-family: Arial; padding-left: 20px; @@ -34,70 +93,39 @@ padding-top: 10px; } .logo span { - color: #0073ff; -} -.menu { - width: 400px; - float: left; - height: 70px; -} -ul { - float: left; - display: flex; - justify-content: center; - align-items: center; + color: #6217e4; } -ul li { - list-style: none; - margin-left: 62px; - margin-top: 27px; - font-size: 14px; -} - -ul li a { - text-decoration: none; - color: #fff; - font-family: Arial; - font-weight: bold; - transition: 0.4s ease-in-out; -} - ul li a:hover { color: #0073ff; } -.search { - width: 330px; - float: left; - margin-left: 270px; -} .srch { - margin-top: 13px; - font-family: "Times New Roman"; + margin-top: 22px; + font-family: "inter", sans-serif; width: 200px; - height: 40px; + height: 2rem; background: transparent; - border: 1px solid #0073ff; - border-color: #0073ff; + border: 1px solid #fff; color: #fff; border-right: none; font-size: 16px; float: left; padding: 10px; - border-bottom-left-radius: 5px; - border-bottom-left-radius: 5px; + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; } -.btn { - width: 100px; - height: 40px; - background: #0073ff; - border: 2px solid #0073ff; - margin-top: 13px; +.srch::placeholder { color: #fff; - font-size: 15px; - border-top-right-radius: 5px; - border-bottom-right-radius: 5px; - border-bottom-right-radius: 5px; +} +.search_btn { + width: 60px; + height: 2rem; + background: #3de417; + border: 1px solid #ffffff; + margin-left: 22px; + color: #0073ff; + font-size: 12px; + margin: 22px auto; } .btn:focus { outline: none; @@ -106,27 +134,38 @@ ul li a:hover { outline: none; } +/* description/hero section */ + +.hero { + display: flex; + justify-content: space-evenly; + align-items: center; +} .content { - width: 1200px; + margin-top: 30px; + width: 590px; height: auto; - margin: auto; + right: 20%; color: #fff; position: relative; } -.content .par { - padding-left: 20px; - padding-bottom: 25px; - font-family: Arial; - letter-spacing: 1.2px; - line-height: 30px; -} + .content h1 { font-family: "Times New Roman"; font-size: 50px; - padding-left: 20px; - margin-top: 9%; + /* padding-left: 20px; */ + /* margin-top: 9%; */ letter-spacing: 2px; } +.text { + font-size: 1rem; + text-align: justify; + line-height: 1.5; + margin-top: 14px; + display: flex; + flex-direction: column; + gap: 12px; +} .content .cn { width: 160px; height: 40px; @@ -138,77 +177,109 @@ ul li a:hover { border-radius: 18px; cursor: pointer; transition: 0.4s ease; + background: linear-gradient( + 90deg, + rgba(2, 0, 36, 1) 0%, + rgba(9, 9, 121, 1) 35%, + rgb(66, 49, 175) 100% + ); + box-shadow: 0 0 6px rgba(255, 255, 255, 0.25); } .content .cn a { text-decoration: none; - color: #000; + color: #fff; transition: 0.3s ease; } .cn:hover { background-color: #fff; } .content span { - color: #0073ff; + color: #6217e4; font-size: 60px; } +/* Form Code Start +--------------------- */ .form { - width: 250px; + width: 300px; height: 380px; - background: linear-gradient( + /* background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.8) 50% + ); */ + + background: linear-gradient( + 90deg, + rgba(2, 0, 36, 1) 0%, + rgba(9, 9, 121, 1) 35%, + rgb(66, 49, 175) 100% ); + box-shadow: 0 0 10px rgba(215, 213, 213, 0.25); position: absolute; - top: -20px; + top: 8rem; left: 870px; - border-radius: 10px; - padding: 25px; + right: 0.2rem; + border-radius: 8px; + padding: 14px; + margin-right: 36px; } .form h2 { width: 220px; font-family: sans-serif; text-align: center; - color: #0073ff; + color: #ffffff; font-size: 22px; - background-color: #fff; - border-radius: 10px; - margin: 2px; - padding: 8px; + /* background-color: #fff; */ + /* border-radius: 8px; */ + margin: 20px auto; + padding: 4px; } .form input { - width: 240px; - height: 35px; + display: flex; + flex-direction: column; + width: 200px; + height: 36px; background: transparent; + border: none; border-bottom: 1px solid #0073ff; - border-top: none; - border-right: none; - border-left: none; color: #fff; font-size: 15px; letter-spacing: 1px; margin-top: 30px; - font-family: sans-serif; + margin: 10px auto; + font-family: "inter" sans-serif; +} +.form p { + color: #fff; } .form input:focus { outline: none; } ::placeholder { color: #fff; - font-family: Arial; + font-family: "inter", sans-serif; + font-size: 1rem; } + .btnn { - width: 240px; - height: 40px; - background: #0073ff; + width: 202px; + height: 36px; + background: radial-gradient( + circle at -0.1% 100.8%, + rgb(0, 234, 255) 0.2%, + rgb(0, 124, 255) 59.1%, + rgb(155, 67, 180) 100.2% + ); border: none; - margin-top: 30px; font-size: 18px; - border-radius: 10px; + border-radius: 8px; cursor: pointer; color: #fff; transition: 0.4s ease; + margin-top: 20px; + margin-left: 34px; + box-shadow: 0 0 10px rgba(215, 213, 213, 0.25); } .btnn:hover { background: #fff; @@ -216,27 +287,26 @@ ul li a:hover { } .btnn a { text-decoration: none; - color: #000; + color: #fff; font-weight: bold; } .form .link { - font-family: Arial, Helvetica, sans-serif; - font-size: 17px; - padding: 20px; - text-align: center; + margin-left: 30px; + font-family: "inter", sans-serif; + font-size: 12px; + padding: 8px; + text-align: left; } .form .link a { text-decoration: none; color: #0073ff; } -.liw { - padding-top: 3px; - padding-bottom: 10px; - text-align: center; -} .icon { text-decoration: none; color: #fff; + display: flex; + flex-direction: row; + margin: 10px 50px; } .icon ion-icon { color: #fff; @@ -250,3 +320,5 @@ ul li a:hover { .icon ion-icon:hover { color: #0073ff; } + +