Project Updated

Keshabkjha · Aug 20, 2024 · cee91b5 · cee91b5
1 parent 50cd3e9
commit cee91b5
Show file tree

Hide file tree

Showing 7 changed files with 236 additions and 0 deletions.
diff --git a/Projects/SamvadHub/Profie1.jpg b/Projects/SamvadHub/Profie1.jpg
diff --git a/Projects/SamvadHub/index.html b/Projects/SamvadHub/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SamvadHub</title>
+    <!--STYLESHEET-->
+    <link rel="stylesheet" href="style.css">
+    <!--ICONSCOUT CDN-->
+    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
+</head>
+<body>
+    <nav>
+        <div class="container">
+            <h2 class="logo">
+                <img src="logo.jpg" alt="SamvadHub Logo" style="height: 50px;">
+            </h2>
+            <div class="search-bar">
+                <i class="uil uil-search"></i>
+                <input type="search" placeholder="Search for friends, creators, celebrity, inspirations, Hashtags">
+            </div>
+            <div class="create">
+                <label class="btn btn-primary" for="create-post">Create</label>
+                <div class="profile-picture">
+                    <img src="Profie1.jpg" alt="my profile-picture">
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!--=========MAIN=========-->
+    <main>
+        <div class="container">
+            <!--===========LEFT===========-->
+            <div class="left">
+
+            </div>
+            <!--==========MIDDLE==========-->
+            <div class="middle">
+
+            </div>
+            <!--==========RIGHT==========-->
+            <div class="right">
+
+            </div>
+
+        </div>
+    </main>
+</body>
+</html>
diff --git a/Projects/SamvadHub/logo.jpg b/Projects/SamvadHub/logo.jpg
diff --git a/Projects/SamvadHub/style.css b/Projects/SamvadHub/style.css
@@ -0,0 +1,116 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
+
+:root{
+    --color-dark: hsl(252,30%,17%);
+    --color-white: hsl(252,30%, 100%);
+    -color-light: hsl(252,30%,95%);
+    -color-gray: hsl(252,15%,65%);
+    --color-primary: hsl(252,75%,60%);
+    -color-secondary: hsl(252,100%,90%);
+    --color-success: hsl(120,95%,65%);
+    -color-danger: hsl(0,95%,65%);
+    -color-black: hsl(252,30%,10%);
+
+    --border-radius: 2rem;
+    --card-border-radius: 1rem;
+    --btn-padding: 0.6rem 2rem;
+    --search-padding: 0.6rem 1rem;
+    --card-padding: 1rem;
+}
+*,
+*::before,
+*::after{
+    margin: 0;
+    padding: 0;
+    outline: 0;
+    box-sizing: border-box;
+    text-decoration: none;
+    list-style: none;
+    border: none;
+}
+body{
+    font-family: "Poppins", sans-serif;
+    color: var(--color-dark);
+    background: var(--color-light);
+    overflow-x: hidden;
+}
+/*General Styles*/
+.container{
+    width: 80%;
+    margin: 0 auto;
+}
+.profile-picture{
+    width: 2.7rem;
+    aspect-ratio: 1/1;
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+img{
+    display: block;
+    width: 100%;
+}
+
+.btn {
+    display: inline-block;
+    padding: var(--btn-padding);
+    font-weight: 500;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    transition: all 300ms ease;
+    font-size: 0.9rem;
+}
+
+.btn:hover{
+    opacity: 0.8;
+}
+.btn-primary{
+    background: var(--color-primary);
+    color: white;
+}
+
+.text-bold{
+    font-weight: 500;
+}
+
+.text-muted{
+    color: var(--color-gray);
+}
+/*==============NAVBAR===========*/
+nav{
+    width: 100%;
+    background: var(--color-white);
+    padding: 0.7rem 0;
+    position: fixed;
+    top: 0;
+    z-index: 10;
+}
+nav .container{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+nav .search-bar{
+    background: var(--color-light);
+    border-radius: var(--border-radius);
+    padding: var(--search-padding);
+}
+
+nav .search-bar input[type="search"]{
+    background: transparent;
+    width: 30vw;
+    margin-left: 1rem;
+    font-size: 0.9rem;
+    color: var(--color-dark);
+}
+
+nav .search-bar input[type="search"]::placeholder{
+    color: var(--color-gray);
+}
+
+nav .create{
+    display: flex;
+    align-items: center;
+    gap: 2rem;
+}
diff --git a/Projects/Weather/index.html b/Projects/Weather/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Weather App</h1>
+        <input type="text" id="locationInput" placeholder="Enter a city">
+        <button id="searchButton">Search</button>
+        <div class="weather-info">
+            <h2 id="location"></h2>
+            <p id="temperature"></p>
+            <p id="description"></p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Projects/Weather/styles.css b/Projects/Weather/styles.css
@@ -0,0 +1,49 @@
+body {
+    font-family: Arial, sans-serif;
+      /* background-color: #f0f0f0; */
+
+    background-image: url('weather.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh; /* Set the height to fill the viewport */
+    margin: 0; /* Remove default margin */
+    padding: 0; 
+  }
+.container {
+    max-width: 400px;
+    margin: 0 auto;
+    text-align: center;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.5); /* Set the background color to be transparent */
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Adjust the alpha value here for the box shadow transparency */
+    margin-top: 105px;
+}
+
+h1 {
+    font-size: 24px;
+}
+
+input[type="text"] {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.weather-info {
+    margin-top: 20px;
+}
+
+/* Add more styles as needed */
diff --git a/Projects/Weather/weather.jpg b/Projects/Weather/weather.jpg