diff --git a/Easy/Task - 4 Pranav/index.html b/Easy/Task - 4 Pranav/index.html new file mode 100644 index 0000000..770e7de --- /dev/null +++ b/Easy/Task - 4 Pranav/index.html @@ -0,0 +1,39 @@ + + + + + + PrydeGPT + + + +
+
+ + PrydeGPT +
+
+

What Can I Do For You?

+
+ + +
+ +
+
+ + \ No newline at end of file diff --git a/Easy/Task - 4 Pranav/menu_9710579.png b/Easy/Task - 4 Pranav/menu_9710579.png new file mode 100644 index 0000000..18d5e55 Binary files /dev/null and b/Easy/Task - 4 Pranav/menu_9710579.png differ diff --git a/Easy/Task - 4 Pranav/styles.css b/Easy/Task - 4 Pranav/styles.css new file mode 100644 index 0000000..5440bbb --- /dev/null +++ b/Easy/Task - 4 Pranav/styles.css @@ -0,0 +1,111 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); + +* { + background-color: rgb(203, 238, 235); + padding: 0; + margin: 0; + box-sizing: border-box; +} + +#initial { + position: relative; + width: 100%; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +/* Name and Button */ +#menu-btn { + position: absolute; + top: 10px; + left: 10px; + background: none; + border: none; + cursor: pointer; + padding: 10px; + width: 40px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; +} + +#name { + position: absolute; + top: 20px; + font-family: Poppins, sans-serif; + font-weight: 500; + display: flex; + justify-content: center; + width: 100%; +} + +/* Centered White Box */ +#container { + background-color: transparent; + width: 50vw; + height: 50vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +#container h1{ + font-family: Poppins; + +} + +input { + margin-top: 6px; + width: 500px; + padding: 10px; + border: 0.5px solid black; + border-radius: 70px; + font-size: 16px; + outline: none; +} + +#send-btn { + background: none; + border: none; + cursor: pointer; +} + +#send-btn svg { + fill: black; + transition: 0.3s; +} + +#send-btn:hover svg { + fill: gray; +} + +.input-container { + display: flex; + align-items: center; + gap: 10px; +} + +#logos{ + display: flex; + flex-direction: row; + margin-top: 10px; +} +.logos{ + display: flex; + justify-content: space-between; + font-family: Poppins; + margin: 7px; + padding: 3px; + border-radius: 50px; + border: 0.5px; +} + +.logos a{ + text-decoration: none; + color: black; +} \ No newline at end of file diff --git a/Easy/Task - 5 Pranav/index.html b/Easy/Task - 5 Pranav/index.html new file mode 100644 index 0000000..f2fbe72 --- /dev/null +++ b/Easy/Task - 5 Pranav/index.html @@ -0,0 +1,52 @@ + + + + + + Features Page + + + +
+ +

Our Features

+
+ +
+
+
+
+

Feature 1

+
+
+

Detail about Feature 1

+
+
+
+ +
+
+
+

Feature 2

+
+
+

Detail about Feature 2

+
+
+
+ +
+
+
+

Feature 3

+
+
+

Detail about Feature 3

+
+
+
+
+ + + + diff --git a/Easy/Task - 5 Pranav/script.js b/Easy/Task - 5 Pranav/script.js new file mode 100644 index 0000000..bf03ed2 --- /dev/null +++ b/Easy/Task - 5 Pranav/script.js @@ -0,0 +1,5 @@ +// Dark Mode Toggle +const darkModeToggle = document.getElementById("darkModeToggle"); +darkModeToggle.addEventListener("click", () => { + document.body.classList.toggle("dark-mode"); +}); diff --git a/Easy/Task - 5 Pranav/styles.css b/Easy/Task - 5 Pranav/styles.css new file mode 100644 index 0000000..7fb9961 --- /dev/null +++ b/Easy/Task - 5 Pranav/styles.css @@ -0,0 +1,82 @@ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +/* General Styles */ +body { + font-family: Poppins, sans-serif; + text-align: center; + background-color: #f5f5f5; + color: #333; + transition: background 0.3s, color 0.3s; +} + +/* Dark Mode */ +.dark-mode { + background-color: #222; + color: #fff; +} + +/* Header */ +header { + margin: 20px; +} + +button { + border-radius: 40px; + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + +/* Features Container */ +.features-container { + display: flex; + justify-content: center; + gap: 20px; + margin-top: 50px; +} + +/* Flip Card Styles */ +.card { + width: 200px; + height: 250px; + perspective: 1000px; +} + +.card-inner { + width: 100%; + height: 100%; + position: relative; + transition: transform 0.6s; + transform-style: preserve-3d; +} + +.card:hover .card-inner { + transform: rotateY(180deg); +} + +.card-front, +.card-back { + width: 100%; + height: 100%; + position: absolute; + backface-visibility: hidden; + display: flex; + align-items: center; + justify-content: center; + border-radius: 10px; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); +} + +/* Card Front */ +.card-front { + background: #b8b8b9; + color: rgb(0, 0, 0); +} + +/* Card Back */ +.card-back { + background: #b8b8b9; + color: rgb(0, 0, 0); + transform: rotateY(180deg); +} diff --git a/Easy/Task - 6 Pranav/image.png b/Easy/Task - 6 Pranav/image.png new file mode 100644 index 0000000..a19b3d9 Binary files /dev/null and b/Easy/Task - 6 Pranav/image.png differ diff --git a/Easy/Task - 6 Pranav/index.html b/Easy/Task - 6 Pranav/index.html new file mode 100644 index 0000000..5dccf36 --- /dev/null +++ b/Easy/Task - 6 Pranav/index.html @@ -0,0 +1,99 @@ + + + + + + To Do List + + + +
+ + +
+

Tasks

+ Upcoming
+ Today
+ Calender
+ Sticky Walls
+
+
+

Lists

+ Personal
+ Work
+ List 1
+ + Add Your List
+
+ +
+
+

Today

+
+ Add New Task
+
+
+ + Complete the UI/UX assignment +
+
+ + Water The plants +
+
+ + Watch Invincible +
+
+ + Complete Web Genesis Task 6 +
+
+
+ + +
+
+
+

Task:


+
Create Today's Youtube Video
+ + +
+
+ + +
+ +
+ + +
+ +
+ + Tag 1 + +
+ +

Subtasks:

+ +
+ +
+ +
+ + +
+
+
+ + \ No newline at end of file diff --git a/Easy/Task - 6 Pranav/script.js b/Easy/Task - 6 Pranav/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Easy/Task - 6 Pranav/styles.css b/Easy/Task - 6 Pranav/styles.css new file mode 100644 index 0000000..5458cae --- /dev/null +++ b/Easy/Task - 6 Pranav/styles.css @@ -0,0 +1,306 @@ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + + +body { + display: flex; + justify-content: space-evenly; /* Centers horizontally */ + align-items: center; /* Centers vertically */ + height: 100vh; /* Ensures full viewport height */ + background-color: rgb(240, 232, 221); + margin: 0; /* Remove default margin */ + gap: 20px; +} + +#front { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; /* Reduce space between elements */ + border-radius: 15px; + width: 50%; + height: 80vh; + background-color: whitesmoke; + font-family: Poppins, sans-serif; + font-size: larger; + padding-top: 20px; /* Add padding for spacing */ +} + +#h1{ + margin: 40px; + margin-bottom: 0%; +} + +#button_div { + display: flex; + flex-direction: column; /* Search bar below menu */ + background-color: rgb(179, 178, 178); + height: 90%; + width: 30%; + border-radius: 15px; + padding: 15px; + gap: 15px; + align-items: flex-start; /* Align content to the left */ +} + +#menu-container { + display: flex; + align-items: center; + justify-content: space-between; /* Push Menu text and button apart */ + width: 100%; +} + +#click { + background: none; + border: none; + cursor: pointer; + padding: 5px; + display: flex; + justify-content: flex-end; + align-items: flex-end; + left: 100% +} + +#div_task{ + font-family: Poppins; + background-color: rgb(179, 178, 178); + height: 90%; + width: 30%; + padding-left: 20px; + border-radius: 15px; +} + +#search { + width: 90%; + padding: 10px; + border: none; + border-radius: 15px; + background: transparent; + border: 1px solid grey; + outline: none; + color: black; +} + +#menu { + font-family: Poppins; + font-size: 20px; + font-weight: bold; + margin-bottom: 5px; +} + +#div-task{ + position: relative; + width: 90%; + height: 33%; + font-family: Poppins; + border-radius: 10px; + border: 1px solid grey; + +} + +#div-task h3{ + padding-left: 20px; + margin-bottom: 0%; +} + +.span a{ + text-decoration: none; + color: black; + padding-left: 10%; +} + +#div-list{ + position: relative; + width: 90%; + height: 33%; + font-family: Poppins; + border-radius: 10px; + border: 1px solid grey; +} + +#div-list h3{ + padding-left: 20px; + margin-bottom: 0%; +} + +.nav{ + text-decoration: none; + display: flex; + justify-content: space-around; + + +} + +.nav ul{ + text-decoration: none; + font-family: Poppins; +} + +.nav ul a{ + text-decoration: none; + color:black; +} + +#add { + position: relative; + border: 1px solid grey; + border-radius: 10px; + width: 80%; /* Make it 90% of the white box */ + padding: 10px; /* Add some padding for better look */ + text-align: left; /* Center text inside */ + margin-left: 5%; /* Center within the parent div */ + cursor: pointer; /* Make it clickable */ + background-color: #f5f5f5; /* Light background */ +} + +#task-list{ + position: relative; + border: 1px solid grey; + border-radius: 10px; + width: 80%; /* Make it 90% of the white box */ + padding: 10px; /* Add some padding for better look */ + text-align: left; /* Center text inside */ + margin-left: 5%; /* Center within the parent div */ + cursor: pointer; /* Make it clickable */ + background-color: #f5f5f5; +} + +.task{ + font-weight: 500; + font-size: medium; + color: black; + border: 1px solid grey; + border-radius: 10px; + margin: 2%; + padding: 1%; +} + +.create1 { + position: relative; + border: 1px solid grey; + border-radius: 10px; + width: 80%; /* Make it 90% of the white box */ + padding: 10px; /* Add some padding for better look */ + text-align: left; /* Center text inside */ + margin-left: 5%; /* Center within the parent div */ + cursor: pointer; /* Make it clickable */ + gap : 10px; +} + +#create1{ + background: transparent; /* Removes background */ + border: 1px solid grey; /* Keeps a border if needed */ + height: 20%; /* Adjust height */ + width: 80%; /* Makes input fill the container */ + padding:10px; /* Adds padding for better look */ + outline: none; + text-align: left; /* Center text inside */ + margin-left: 5%; + margin-top: 3%; + font-size: 16px; + border-radius: 5px; /* Optional: Round corners */ +} + +.task-section { + position: relative; + background: transparent; + border: 1px solid gray; + padding:10px; /* Adds padding for better look */ + outline: none; + text-align: left; /* Center text inside */ + margin-left: 5%; + margin-top: 3%; + border-radius: 8px; + height: 19%; + width: 80%; + font-family: Arial, sans-serif; +} + +.task-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 10px; + outline: none; +} + +label { + font-weight: bold; +} + +.dropdown, .date-input { + background: none; + padding: 5px; + border: 1px solid #ccc; + border-radius: 4px; + +} + +.tag { + background: #d3e4e4; + padding: 5px 10px; + border-radius: 5px; + font-size: 14px; +} + +.add-tag { + background: transparent; + border: 1px solid #ccc; + padding: 5px; + cursor: pointer; +} + +.subtasks-title { + margin-top: 15px; + font-size: medium; +} + +.subtask-row { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.add-subtask { + background: transparent; + border: none; + font-size: small; + font-weight: bold; + cursor: pointer; +} + +.subtask-item { + font-size: small; + display: flex; + align-items: center; + gap: 5px; +} + +.save-box { + display: flex; + justify-content: flex-end; /* Aligns items to the right */ + position: relative; /* Positioning it inside the white box */ + bottom: 10px; /* Adjusts distance from bottom */ + right: 10px; /* Adjusts distance from right */ + gap: 10px; /* Adds space between buttons */ + width: 100%; /* Ensures it takes full width */ + margin-top: 10%; +} + +.delete-btn, .save-btn { + padding: 10px 15px; + border-radius: 10px; + cursor: pointer; + border : none; +} + +.save-btn { + background-color: gold; + font-weight: bold; +} + + + + + + diff --git a/Easy/Task - 7 Pranav/form.css b/Easy/Task - 7 Pranav/form.css new file mode 100644 index 0000000..7302f38 --- /dev/null +++ b/Easy/Task - 7 Pranav/form.css @@ -0,0 +1,145 @@ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +body{ + font-family: 'Poppins', sans-serif; + margin: 0%; + padding: 0%; + /* background-color: #4f7c82; */ + align-items: center; +} + + +#progress{ + position: absolute; + display: flex; + justify-content: space-evenly; + align-items:center; + border: 1px solid #0b2e33; + width: 40%; + height: 5%; + top: 20px; + left: 30%; + border-radius: 140px; + +} +#patch1{ + position: relative; + width: 20%; + height: auto; + background-color: #0b2e33; + + +} +/* Main container */ +#div-container { + display: flex; + flex-direction: column; + justify-content: flex-start; /* Pushes form below progress bar */ + align-items: center; + height: 100vh; + padding-top: 80px; /* Creates space below progress bar */ + padding-bottom: 5%; +} + +/* Each form section */ +.form-group { + width: 90%; /* Consistent width */ + max-width: 400px; /* Limits the max width for better design */ + height: auto; /* Adjusts height dynamically */ + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin-bottom: 15px; /* Adds space between questions */ + border: 1px solid #0b2e33; + padding: 10px 30px; + margin-bottom: 30px; + border-radius: 10px; +} + +/* Label styling */ +.form-group label { + color: #0b2e33; + font-size: 20px; + font-weight: 500; + margin-bottom: 8px; /* Space between label and input */ +} + +/* Input fields */ +.form-group input[type="text"], +.form-group select{ + width: 90%; + padding: 8px; + border: 1px solid #0b2e33; + border-radius: 5px; + background: transparent; + font-size: 16px; + outline: none; + padding-bottom: 10px; +} + + +/* Checkbox container */ +.checkbox-group { + display: flex; + flex-direction: column; + gap: 5px; /* Spacing between checkboxes */ +} + +/* Checkbox inputs */ +.checkbox-group label { + display: flex; + align-items: center; + gap: 5px; /* Space between checkbox and text */ +} + +.checkbox-group input[type="checkbox"] { + width: 16px; + height: 16px; + margin: 0; + +} + +input[type="checkbox"]:checked { + background-color: #0b2e33; /* Background blue hoga jab tick hoga */ + border: 2px solid #0b2e33; /* Border bhi same blue rahega */ +} + +.form-group ::placeholder{ + color: #0b2e33; +} + +.button{ + display: flex; + flex-direction: row; + gap: 30px; +} + +#save{ + font-family: Poppins; + padding: 10px; + border: none; + color: #4f7c82; + background-color: #0b2e33; + border-radius: 10px ; +} + +#goback{ + font-family: Poppins; + padding: 10px; + border: 1px solid #0b2e33; + background-color: #4f7c82; + color: #0b2e33; + border-radius: 10px ; +} + +#save a{ + text-decoration: none; + color: #4f7c82; +} + +#goback a{ + text-decoration: none; + color: #0b2e33; +} diff --git a/Easy/Task - 7 Pranav/form.html b/Easy/Task - 7 Pranav/form.html new file mode 100644 index 0000000..5cdced3 --- /dev/null +++ b/Easy/Task - 7 Pranav/form.html @@ -0,0 +1,61 @@ + + + + + + Form Page + + + +
+
+
+
+
+
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ + + + + + +
+
+ +
+ + +
+
+ + +
+
+ + + \ No newline at end of file diff --git a/Easy/Task - 7 Pranav/index.html b/Easy/Task - 7 Pranav/index.html new file mode 100644 index 0000000..922a6fc --- /dev/null +++ b/Easy/Task - 7 Pranav/index.html @@ -0,0 +1,15 @@ + + + + + + Multi-Step Progress Bar + + + +
+

Welcome to the Form

+ +
+ + \ No newline at end of file diff --git a/Easy/Task - 7 Pranav/script.js b/Easy/Task - 7 Pranav/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Easy/Task - 7 Pranav/style1.css b/Easy/Task - 7 Pranav/style1.css new file mode 100644 index 0000000..380e750 --- /dev/null +++ b/Easy/Task - 7 Pranav/style1.css @@ -0,0 +1,75 @@ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +body{ + font-family: 'Poppins', sans-serif; + margin: 0%; + padding: 0%; + background-color: #4f7c82; + align-items: center; +} + +#welcome{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + text-align: center; +} + +#welcome p{ + color: #0b2e33; + font-size: 60px; + font-weight: bolder; + margin: 0%; +} + +#click{ + align-items: center; + width: 10%; + height: 10%; + background-color: #4f7c82; + color: #0b2e33; + border: 1.5px solid #0b2e33; + border-radius: 30px; + background: transparent; + cursor: pointer; +} + +#click a{ + text-decoration: none; + color: #0b2e33; + +} + +@media (max-width: 732px){ + #welcome{ + display: flex; + flex-direction: column; + overflow: auto; + } + + #welcome p{ + position: relative; + width: auto; + color: #0b2e33; + font-size: 50px; + font-weight: bolder; + margin: 0%; + overflow: auto; + } + + #click{ + position: relative; + align-items: center; + width: 20%; + height: 10%; + background-color: #4f7c82; + color: #0b2e33; + border: 1.5px solid #0b2e33; + border-radius: 30px; + background: transparent; + cursor: pointer; + } +} \ No newline at end of file