Added solutions for the LC problems from 2880-2882

dsa-solutions/lc-solutions/2500 - 3000/2880 - Select Data

@@ -0,0 +1,54 @@
+---
+id : 2880-select-data
+title : Select Data from a DataFrame
+sidebar_label: 2880 Select Data Leetcode
+tags:
+  - LeetCode
+  - Python
+  - Data Science
+description: "This is a solution to the Select Data question from the Leetcode 2880 question"
+---
+
+## Problem Description
+
+Write a solution to select the name and age of the student with student_id = 101.
+
+##Examples
+
+Example 1:
+
+Input:
++------------+---------+-----+
+| student_id | name    | age |
++------------+---------+-----+
+| 101        | Ulysses | 13  |
+| 53         | William | 10  |
+| 128        | Henry   | 6   |
+| 3          | Henry   | 11  |
++------------+---------+-----+
+
+Output:
++---------+-----+
+| name    | age | 
++---------+-----+
+| Ulysses | 13  |
++---------+-----+
+
+##Intuition
+I will say as this is a Data Science Problem the solution is also straightforward . Hope it helps :)
+.
+
+### Solution Code 
+<Tabs>
+  <TabItem value="Python" label="" default>
+  <SolutionAuthor name="@Abhay:)"/>
+    ```Python
+    import pandas as pd
+
+    def selectData(students: pd.DataFrame) -> pd.DataFrame:
+            return students.loc[students['student_id'] == 101, ["name", "age"]]
+    ```
+  </TabItem>
+</Tabs>
+## References
+- **Leetcode Problem :** [Select Data](https://leetcode.com/problems/select-data/)

dsa-solutions/lc-solutions/2500 - 3000/2881 - Create a New Column

@@ -0,0 +1,63 @@
+---
+id : Create-a-New-Column
+title : Create a New column 
+sidebar_label: 2881 Create a new column Leetcode
+tags:
+  - LeetCode
+  - Python
+  - Data Science
+description: "This is a solution for the leetcode 2881 problem which is to create a new column.This problem uses pandas which is a python library for solving"
+---
+
+## Problem Description
+
+A company plans to provide its employees with a bonus.
+Write a solution to create a new column name bonus that contains the doubled values of the salary column.
+
+##Examples
+
+Input:
+DataFrame employees
++---------+--------+
+| name    | salary |
++---------+--------+
+| Piper   | 4548   |
+| Grace   | 28150  |
+| Georgia | 1103   |
+| Willow  | 6593   |
+| Finn    | 74576  |
+| Thomas  | 24433  |
++---------+--------+
+Output:
++---------+--------+--------+
+| name    | salary | bonus  |
++---------+--------+--------+
+| Piper   | 4548   | 9096   |
+| Grace   | 28150  | 56300  |
+| Georgia | 1103   | 2206   |
+| Willow  | 6593   | 13186  |
+| Finn    | 74576  | 149152 |
+| Thomas  | 24433  | 48866  |
++---------+--------+--------+
+Explanation: 
+A new column bonus is created by doubling the value in the column salary.
+
+##Intuition
+I will say as this is a Data Science Problem the solution is also straightforward . Hope it helps :)
+.
+
+### Solution Code 
+<Tabs>
+  <TabItem value="Python" label="" default>
+  <SolutionAuthor name="@Abhay:)"/>
+    ```Python
+  import pandas as pd
+
+  def createBonusColumn(employees: pd.DataFrame) -> pd.DataFrame:
+      employees['bonus'] = employees['salary']*2
+      return employees
+    ```
+  </TabItem>
+</Tabs>
+## References
+- **Leetcode Problem :** [Create a new column](https://leetcode.com/problems/create-a-new-column/)

dsa-solutions/lc-solutions/2500 - 3000/2882 - Drop Duplicate Rows

@@ -0,0 +1,65 @@
+---
+id : Drop-Duplicate-Rows
+title : Drop Duplicate Rows
+sidebar_label: 2882 Drop Duplicate Rows
+tags:
+  - LeetCode
+  - Python
+  - Data Science
+description: "This is a solution for the Leetcode problem 2882 which asks to drop duplicate rows and keep only the first occurence.
+This Problem is solved with the help of python library Pandas. "
+---
+
+## Problem Description
+
+There are some duplicate rows in the DataFrame based on the email column.
+Write a solution to remove these duplicate rows and keep only the first occurrence.
+The result format is in the following example.
+
+##Examples
+
+Example 1:
+Input:
++-------------+---------+---------------------+
+| customer_id | name    | email               |
++-------------+---------+---------------------+
+| 1           | Ella    | emily@example.com   |
+| 2           | David   | michael@example.com |
+| 3           | Zachary | sarah@example.com   |
+| 4           | Alice   | john@example.com    |
+| 5           | Finn    | john@example.com    |
+| 6           | Violet  | alice@example.com   |
++-------------+---------+---------------------+
+Output:  
++-------------+---------+---------------------+
+| customer_id | name    | email               |
++-------------+---------+---------------------+
+| 1           | Ella    | emily@example.com   |
+| 2           | David   | michael@example.com |
+| 3           | Zachary | sarah@example.com   |
+| 4           | Alice   | john@example.com    |
+| 6           | Violet  | alice@example.com   |
++-------------+---------+---------------------+
+Explanation:
+Alic (customer_id = 4) and Finn (customer_id = 5) both use john@example.com, so only the first occurrence of this email is retained.
+
+##Intuition
+I will say as this is a Data Science Problem the solution is also straightforward . Hope it helps :)
+.
+
+### Solution Code 
+<Tabs>
+  <TabItem value="Python" label="" default>
+  <SolutionAuthor name="@Abhay:)"/>
+    ```Python
+    import pandas as pd
+
+    def dropDuplicateEmails(customers: pd.DataFrame) -> pd.DataFrame:
+          customers.drop_duplicates(subset='email',keep='first',inplace = True)
+          return  customers
+    ```
+  </TabItem>
+</Tabs>
+
+## References
+- **Leetcode Problem :** [Drop Duplicate Rows](https://leetcode.com/problems/drop-duplicate-rows/description/)

web-dev/html/Flex-Box/Flex-Box Properties

@@ -0,0 +1,93 @@
+---
+id: Flexbox
+title: Flexbox
+sidebar_label: Flexbox
+sidebar_position: 2
+tags: [html, CSS, Flexbox]
+---
+
+# Flexbox Layout in CSS
+
+Flexbox, short for Flexible Box, is a layout model in CSS that allows you to design complex layouts more efficiently and with less code compared
+to traditional methods like floats or positioning.
+
+## Introduction to Flexbox
+
+Flexbox introduces a new way to layout, align, and distribute space among items in a container, even when their size is unknown or dynamic.
+It's particularly useful for creating responsive designs and aligning elements within a container in numerous ways.
+
+## Basic Concepts
+
+Flexbox revolves around two main components: the flex container and flex items.
+
+### Flex Container
+
+The parent element that holds flex items is called the flex container. To create a flex container, you set the CSS `display` property to `flex` or `inline-flex`.
+
+```css
+.container {
+  display: flex;
+}
+```
+---
+## Flex Items
+The children of a flex container are called flex items. These items can dynamically adjust their width, height, and orderto fill theavailable space within the
+flex container.
+
+```html
+<div class="container">
+  <div class="item">Item 1</div>
+  <div class="item">Item 2</div>
+  <div class="item">Item 3</div>
+</div>
+```
+## Main Axis and Cross Axis
+Flexbox operates along two axes: the main axis and the cross axis. The main axis is defined by the flex-direction property and determines the
+direction in which flex items are laid out, while the cross axis is perpendicular to it.
+
+## Properties
+Flexbox provides several properties to control the layout and behavior of flex containers and items.
+
+## Common Flex Container Properties
+'display': Specifies the type of box used for a flex container.
+'flex-direction': Establishes the main axis direction.
+'justify-content': Aligns flex items along the main axis.
+'align-items': Aligns flex items along the cross axis.
+'flex-wrap': Specifies whether flex items should wrap or not.
+
+## Common Flex Item Properties
+'order': Specifies the order of a flex item relative to other flex items.
+'flex-grow': Specifies how a flex item grows relative to other flex items.
+'flex-shrink': Specifies how a flex item shrinks relative to other flex items.
+'flex-basis': Specifies the initial size of a flex item.
+'align-self': Allows the default alignment to be overridden for individual flex items.
+---
+```html
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Flexbox Example</title>
+    <style>
+        .container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .item {
+            flex: 1;
+            padding: 10px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="item" style="background-color: #FF5733;">Item 1</div>
+        <div class="item" style="background-color: #33FF99;">Item 2</div>
+        <div class="item" style="background-color: #3366FF;">Item 3</div>
+    </div>
+</body>
+</html>
+```
+## Conclusion
+Flexbox simplifies the process of creating layouts that adapt to different screen sizes and devices. By mastering Flexbox, you can create more responsive and dynamic web designs with less effort.