diff --git a/Easy/Issue 1-kshitija/css.css b/Easy/Issue 1-kshitija/css.css new file mode 100644 index 0000000..e8d355a --- /dev/null +++ b/Easy/Issue 1-kshitija/css.css @@ -0,0 +1,241 @@ + +* { + margin: 0; + padding: 0px; + * { + margin: 0; + padding:5px; + box-sizing: border-box; + } font-family: "Poppins", sans-serif; +} +.container { + height: auto; + width: auto; + background-color: rgba(0, 34, 24, 0.61); + display: flex; + align-items: left; + justify-content: space-around; + text-align: left; + flex-direction: column; + border: 2px solid black; + border-radius: 26px; + gap: 25px; + padding: 15px 45px; + margin-top: 1.5%; + position: absolute; + box-shadow: 4px 4px 8px #1f1c2c67; + /* top: 13%; + left: 30%; */ + margin-left: 25%; + margin-top: 5%; + border-radius: 50px; + margin-right: 50%; +} + +.outer-div { + height: 100%; + width:100%; + background: linear-gradient( bottom right, darkgrey, #666); +} + +.inner-div { + height: 100vh; + width:100%; + background-image: + linear-gradient(to right, #e5e7eb 1px, transparent 1px), + linear-gradient(to bottom, #e5e7eb 1px, transparent 1px); + background-size: 4rem 4rem; +} + +h2 { + text-align: center; + margin-bottom: 20px; + color: white; +} + +#svg{ + margin-top: 10px; + padding: 0px; + display: flex; + justify-content:center ; +} + +.wrapper{ + background:transparent; + border-radius: 10px; + min-width: 100px; + height: auto; + padding: 10px; + overflow: hidden; + color: aliceblue; +} +.wrapper .container { + width: 40%; + height:auto; + color:#fff; + overflow: hidden; + display: inline-grid; + +} + +.container { + background:rgb(243, 244, 245); + border-radius: 10px; + display: inline-flex; + box-shadow: 0 5px 15px white(0, 0, 0, 0.1); + height: 80%; + overflow: hidden; +} + +.content { + display: none; + padding: 30px; +} +.input{ + margin-bottom: 30px; +} + +input[type="radio"] { + display: none; +} + +.tab { + display: flex; + align-items: center; + width: 100%; + position: relative; +} + +.tab-content { + display: block; + padding-top:5px; + height: 50px; + padding-bottom: 0px; + width:100%; + background: -webkit-linear-gradient( + right, + #004080, + #0059b3, + #9bc9f7 + ); + cursor: pointer; + transition: all 0.3s ease; + font-weight: bold; + color: black; + border-radius: 10px; +} + + +.tab-input { + display: none; +} +.tab-controls { + + display: grid; + padding: 10px ; + cursor: pointer; + transition: all 0.3s ease; + font-weight: bold; + border-radius: 15px; + color:#0059b3 ; + transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); + +} +.container .form-inner { + display: flex; + width: 200%; +} +.container .form-inner form { + width: 50%; + transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} +.form-inner form .field { + height: 50px; + width: 100%; + margin-top: 20px;} + +.form-inner form .field input { + height: 100%; + width: 100%; + outline: none; + padding-left: 15px; + border-radius: 15px; + border: 1px solid lightgrey; + border-bottom-width: 2px; + font-size: 17px; + transition: all 0.3s ease; +} +.form-inner form .field input:focus { + border-color: #1a75ff; + +} +.form-inner form .field input::placeholder { + color: #999; + transition: all 0.3s ease; +} +form .field input:focus::placeholder { + color: #1a75ff; +} + +.form-inner form .signup-link { + text-align: center; + margin-top: 30px; +} +.form-inner form .signup-link a { + color: #1a75ff; + text-decoration: underline; +} +.form-inner form .signup-link a:hover { + text-decoration: underline; +} + +form .btn { + height: 50px; + width: 100%; + border-radius: 15px; + position: relative; + overflow: hidden; +} +form .btn .btn-layer { + height: 100%; + width: 300%; + position: absolute; + left: -100%; + background: -webkit-linear-gradient( + right, + #003366, + #004080, + #0059b3, + #9bc9f7 + ); + border-radius: 0px; + transition: all 0.4s ease; +} +form .btn:hover .btn-layer { + left: 0; +} +form .btn input[type="submit"] { + height: 100%; + width: 100%; + z-index: 1; + position: relative; + background: none; + border :black; + color: #fff; + padding-left: 0; + font-size: 20px; + font-weight: 500; + cursor: pointer; +} + +@media screen and (max-width: 480px) { + .container { + max-width: 100%; + } + + .input-group input, + .btn { + padding: 10px; + } +} + diff --git a/Easy/Issue 1-kshitija/image.png b/Easy/Issue 1-kshitija/image.png new file mode 100644 index 0000000..40ff571 Binary files /dev/null and b/Easy/Issue 1-kshitija/image.png differ diff --git a/Easy/Issue 1-kshitija/login.html b/Easy/Issue 1-kshitija/login.html new file mode 100644 index 0000000..8876772 --- /dev/null +++ b/Easy/Issue 1-kshitija/login.html @@ -0,0 +1,47 @@ + + + + +Login and signup + + + + +
+
+
+
+
photo
+
+ + + + + +
+
+
+ + +
+
+ + +
+ + +
+
+ +
+
+
+
+ + +
+
+ + diff --git a/Easy/Issue 1-kshitija/signup.html b/Easy/Issue 1-kshitija/signup.html new file mode 100644 index 0000000..62ed8a5 --- /dev/null +++ b/Easy/Issue 1-kshitija/signup.html @@ -0,0 +1,59 @@ + + + + +Login and signup + + + + +
+
+ +
+
+
photo
+ +
+
+ + +
+ + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+
+
+ +
+
+
+
+ + + + + + diff --git a/Easy/Issue 2-kshitija/WebGenesis b/Easy/Issue 2-kshitija/WebGenesis new file mode 160000 index 0000000..15932c6 --- /dev/null +++ b/Easy/Issue 2-kshitija/WebGenesis @@ -0,0 +1 @@ +Subproject commit 15932c6d3e9aaf50ea043780eee8ee408b772124 diff --git a/Easy/Issue 2-kshitija/img.jpg b/Easy/Issue 2-kshitija/img.jpg new file mode 100644 index 0000000..e20aac7 Binary files /dev/null and b/Easy/Issue 2-kshitija/img.jpg differ diff --git a/Easy/Issue 2-kshitija/nav.css b/Easy/Issue 2-kshitija/nav.css new file mode 100644 index 0000000..a08b61b --- /dev/null +++ b/Easy/Issue 2-kshitija/nav.css @@ -0,0 +1,239 @@ +* { + margin: 0; + padding: 0; +} + body { + font-family: Impact, sans-serif; + background-image: url("img.jpg"); + } + .navbar { + background-color: #d4e0e5; + padding: 15px; + position: fixed; + display: flex; + justify-content: center; + text-align: center; + width: 100%; + } + + .outer-div { + height: 100%; + width:100%; + background: linear-gradient( bottom right, darkgrey, #666); +} + +.inner-div { + height: 100vh; + width:100%; + background-image: + linear-gradient(to right, #e5e7eb 1px, transparent 1px), + linear-gradient(to bottom, #e5e7eb 1px, transparent 1px); + background-size: 4rem 4rem; +} + + .navbar-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 20px; +} +.logo-image{ + width: 46px; + height: 46px; + border-radius: 50%; + overflow: hidden; + margin-top: -6px; +} + .dropdown { + position: relative; + +} +.dropdown-content { + display: none; + position: absolute; + background-color:white; + -webkit-text-fill-color:#20778f; + min-width: 150px; + border-radius: 10px; + overflow: hidden; + text-align: center; +} +.dropdown-content a { + padding: 10px; + border-bottom: 1px solid #ddd; + transition : 0.3s ease; + display: block; + color:white; +} + +.dropdown-content a:hover { + background-color: grey; +} +.dropdown:hover .dropdown-content { + display: block; +} +.dropdown-content li:hover { + background-color: black; +} + .logo a { + color:rgb(255, 255, 255); + background: -webkit-linear-gradient( + right, + #b8cfd5, + #5c8c9c, + #5c94a4 + ); + font-size: 50px; + border-radius: 5px; + text-decoration:none ; + } + + + .nav-links { + display: flex; + list-style: none; + } + + .nav-links li { + margin-left: 20px; + color: #3a3e4f; + } + + .nav-links li { + margin-left: 20px; + text-decoration: none; + padding: 10px; + transition: all 0.3s ease; + } + + + .nav-links a { + color: #3a3e4f; + text-decoration: none; + padding: 10px; + transition: all 0.3s ease; + } + .nav-links li a :hover { + border-radius: 5px; + background-color: #e2e2e2; + } + .nav-links a:hover { + background-color: #e2e2e2; + border-radius: 5px; + } + + .search-container { + display: flex; + align-items: center; + margin-right: auto; + } + + .search-container input { + padding: 10px; + border: none; + border-radius: 5px; + } + + .search-btn { + background-color: #395279; + color: white; + padding: 5px 10px; + border: black; + border-radius: 5px; + cursor: pointer; + margin-right: 10px; + } + + .search-btn:hover { + background-color: #6686b6; + color: white; + } + + .hamburger-menu { + display: none; + position: relative; + } + + .hamburger { + display: flex; + flex-direction: column; + gap: 5px; + cursor: pointer; + padding: 10px; + } + + .hamburger span { + width: 30px; + height: 5px; + background-color: rgb(195, 186, 186); + border-radius: 5px; + } + + .hamburger-menu .dropdown-content { + display: none; + position: absolute; + top: 40px; + right: 0; + background-color: black; + border-radius: 10px; + text-align: center; + min-width: 120px; + z-index: 1000; + } + + .hamburger-menu .dropdown-content a { + padding: 10px; + color: white; + display: block; + border-bottom: 1px solid #ddd; + text-decoration: none; + transition: 0.3s ease; + } + + .hamburger-menu .dropdown-content a:hover { + background-color: grey; + } + + + .hamburger-menu:hover .dropdown-content { + display: block; + } + + .background-section { + margin-top: 80px; + background-size: cover; + background-position: center; + height: 700px; + text-align: center; + padding: 50px; + } + + @media (max-width: 868px) { + + .background-section p { + font-size: 10px; + } + + .nav-links { + position: absolute; + top: 70px; + right: 0; + width: 100%; + height: 100vh; + background-color: #333; + flex-direction: column; + align-items: center; + justify-content: center; + display: none; + transition: all 0.3s ease; + } + + .nav-links li { + margin: 20px 0; + } + + .search-container { + display: none; + } + } \ No newline at end of file diff --git a/Easy/Issue 2-kshitija/nav.html b/Easy/Issue 2-kshitija/nav.html new file mode 100644 index 0000000..0bc1f97 --- /dev/null +++ b/Easy/Issue 2-kshitija/nav.html @@ -0,0 +1,58 @@ + + + + + + + E-commerce website + + +
+
+ +
+
+ + +