diff --git a/Easy/Bhagyashree_Task1/Login and Signup/bg.jpg.jpg b/Easy/Bhagyashree_Task1/Login and Signup/bg.jpg.jpg new file mode 100644 index 0000000..b536d61 Binary files /dev/null and b/Easy/Bhagyashree_Task1/Login and Signup/bg.jpg.jpg differ diff --git a/Easy/Bhagyashree_Task1/Login and Signup/login.html b/Easy/Bhagyashree_Task1/Login and Signup/login.html new file mode 100644 index 0000000..11d7962 --- /dev/null +++ b/Easy/Bhagyashree_Task1/Login and Signup/login.html @@ -0,0 +1,26 @@ + + + + + + Login + + + +
+
+

Login

+
+
+ +
+
+ +
+ +

Don't have an account? Sign Up

+
+
+
+ + diff --git a/Easy/Bhagyashree_Task1/Login and Signup/signup.html b/Easy/Bhagyashree_Task1/Login and Signup/signup.html new file mode 100644 index 0000000..7f8ef33 --- /dev/null +++ b/Easy/Bhagyashree_Task1/Login and Signup/signup.html @@ -0,0 +1,31 @@ + + + + + + Sign Up + + + + + +
+
+

Sign Up

+
+
+ +
+
+ +
+
+ +
+ +

Already have an account? Login

+
+
+
+ + diff --git a/Easy/Bhagyashree_Task1/Login and Signup/style.css b/Easy/Bhagyashree_Task1/Login and Signup/style.css new file mode 100644 index 0000000..5736c23 --- /dev/null +++ b/Easy/Bhagyashree_Task1/Login and Signup/style.css @@ -0,0 +1,155 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family:cursive; + background-image:url('bg.jpg.jpg'); + background-size: cover; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + + +.container { + display: flex; + justify-content:center; + align-items:center; + min-height: 100%; + margin-left:-500px; + + +} + +.form-container { + background:transparent ; + padding: 60px; + border-radius: 20px; + box-shadow: 0 10px 100px rgba(251, 251, 251, 0.1); + text-align: center; + width: 350px; + +} + +h2 { + margin-bottom: 20px; + font-size: 30px; + color: #eae1e1; +} + +.input-group { + margin-bottom: 15px; +} + +.input-group input { + width: 100%; + padding: 10px; + border: 2px solid #ccc; + border-radius: 4px; + font-size: 16px; + transition: all 0.3s ease; +} + +.input-group input:focus { + border-color: #0e4657; + outline: none; +} + +.btn { + background-color: #b8aeb0; + border: none; + padding: 12px 20px; + color: rgb(16, 17, 17); + font-size: 18px; + width: 100%; + cursor: pointer; + border-radius: 4px; + transition: transform 0.3s ease, background-color 0.3s ease; +} + +.btn:hover { + transform: scale(1.05); + background-color: #a2e9f1; +} + +.switch-form { + margin-top: 15px; + font-size: 18px; + color:rgb(205, 123, 238); +} + +.switch-form a { + color: #469be0; + text-decoration: none; + transition: color 0.3s ease; +} + +.switch-form a:hover { + color: #928f85; +} + +form { + display: flex; + flex-direction: column; +} +@media (max-width: 768px) { + .container { + margin-left: 0; + justify-content: center; + padding: 20px; + } + + .form-container { + width: 200%; + padding: 50px; + } + + h2 { + font-size: 30px; + } + + .input-group input { + font-size: 18px; + } + + .btn { + font-size: 18px; + } + + .switch-form { + font-size: 14px; + } +} + +@media (max-width: 480px) { + .form-container { + width: 90%; + padding: 30px; + } + + h2 { + font-size: 20px; + } + + .input-group input { + font-size: 12px; + } + + .btn { + font-size: 14px; + } + + .switch-form { + font-size: 10px; + } +} + + + + + + diff --git a/Easy/Bhagyashree_Task2/dropdown/Dropdown.css b/Easy/Bhagyashree_Task2/dropdown/Dropdown.css new file mode 100644 index 0000000..49f1c6c --- /dev/null +++ b/Easy/Bhagyashree_Task2/dropdown/Dropdown.css @@ -0,0 +1,239 @@ +{ + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + margin:0; + } + + .navbar { + background-color: #070d2d; + padding: 20px 20px; + position: fixed; + top: 0; + left: 0; + width: 100%; + + } + + .navbar-container { + display: flex; + justify-content: space-between; + align-items:center; + flex-wrap: wrap; + } + .dropdown { + position: relative; + color:rgba(242, 233, 233, 0.641); + +} + +.dropdown-content { + display: none; + position: absolute; + background-color: black; + box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); + min-width: 150px; + top: 100%; + left: 50%; + transform: translateX(-50%); + border-radius: 5px; + overflow: hidden; + text-align: center; +} + + +.dropdown-content a { + padding: 10px; + text-align: center; + white-space: nowrap; + border-bottom: 1px solid #ddd; + transition: 0.3s ease; + display: block; + background-color:transparent; +} + +.dropdown:hover .dropdown-content { + display: block; +} + +.dropdown-content li:hover { + background-color: lightgray; +} + + .logo a { + color: rgba(231, 234, 237, 0.945); + font-size: 35px; + text-decoration-line:underline; + text-decoration-style:dotted; + } + + .nav-links { + display: flex; + list-style: none; + } + + .nav-links li { + margin-left: 20px; + } + + .nav-links a { + color: rgba(242, 233, 233, 0.641); + text-decoration: none; + padding: 10px; + transition: all 0.3s ease; + } + + .nav-links a:hover { + background-color: #3f3f59; + border-radius: 5px; + } + + .nav-links a:active { + background-color: #f2e8e8; + + } + + .search-container { + display: flex; + align-items: center; + width:300px; + } + + .search-container input { + padding: 10px; + border:#0b0804; + border-radius: 5px; + margin-left:10px; + } + + .search-btn { + background-color: #ace8f4d1; + color: #0b0804; + border:black; + padding: 9px 10px; + margin-left: 5px; + border-radius: 5px; + cursor: pointer; + } + + .search-btn:hover { + background-color: #f7b3f6; + } + + .hamburger-menu { + display: none; /* Hidden by default */ + 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: background 0.3s ease; +} + +.hamburger-menu .dropdown-content a:hover { + background-color: grey; +} + +.hamburger-menu:hover .dropdown-content { + display: block; +} + + .background-section{ + background-image: url('https://i.pinimg.com/736x/ca/09/1d/ca091db27e2af3387d40048ebc0c6a84.jpg'); + background-size:cover; + background-position:center; + margin:0; + height: 650px; + width: 492; + text-align:left; + color: black; + padding: 50px 0; +} + .background-section .content{ + padding:20px; + } + + .background-section p{ + font-size:20px; + } + + .nav-paragraph{ + font-size:14px ; + color:aqua; + font-family:cursive; + padding:15px 5px; + } + + @media (max-width: 768px) { + .nav-paragraph{ + font-size:14px ; + color:aqua; + font-family:cursive; + padding:15px 5px; + } + + .background-section p { + font-size: 16px; + } + + .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; + } + + .hamburger-menu { + display: block; + } + + .search-container { + display: none; + } + } \ No newline at end of file diff --git a/Easy/Bhagyashree_Task2/dropdown/dropdown.html b/Easy/Bhagyashree_Task2/dropdown/dropdown.html new file mode 100644 index 0000000..e2c70b4 --- /dev/null +++ b/Easy/Bhagyashree_Task2/dropdown/dropdown.html @@ -0,0 +1,53 @@ + + + + + + Navigation Bar + + + + +
+
+ +
+
+ + + \ No newline at end of file