search bar html and css done

static/base.css

@@ -5,6 +5,9 @@
   --main-text-color: #ffffff;
   --secondary-text-color: #aaaaaa;
   --red: #ff0000;
+  --search-color: #121212;
+  --search-color-2: #313131;
+  --search-color-3: #585858;
   --transition-speed: 600ms;
   font-size: 16px;
   font-family: Roboto, Arial, sans-serif;
@@ -26,6 +29,7 @@ main {
   position: fixed;
   background-color: var(--secondary-bg-color);
   transition: width 600ms ease;
+  overflow: scroll;
 }
 
 .navbar-nav {
@@ -62,12 +66,6 @@ main {
   color: var(--main-text-color);
 }
 
-.link-text {
-  transition: opacity 200ms ease-out;
-  opacity: 0;
-  margin-left: 1rem;
-}
-
 .nav-link svg {
   width: 2rem;
   min-width: 2rem;
@@ -82,41 +80,18 @@ main {
   transition: var(--transition-speed);
 }
 
-.logo {
-  width: 100%;
-}
-
-.logo .nav-link{
-  font-weight: bold;
-  text-transform: uppercase;
-  margin-bottom: 1rem;
-  text-align: center;
-  color: var(--main-text-color);
-  background: var(--red);
-  font-size: 1.5rem;
-  letter-spacing: 0.3ch;
-  filter: grayscale(0%) opacity(1);
-}
-
-.logo svg {
-  position: absolute;
-  transform: rotate(0deg);
-  transition: transform 200ms;
-}
-
-.navbar:hover .logo svg {
-  position: static;
-  transform: rotate(-360deg)
-}
-
 @media only screen and (max-width: 600px) {
  .navbar {
    bottom: 0;
    width: 100vw;
    height: 5rem;
  }
 
- .logo .nav-link {
+ .logo .nav-link{
+   display: none;
+ }
+
+ .link-text {
    display: none;
  }
 
@@ -137,6 +112,8 @@ main {
   .navbar {
     width: 5rem;
     height: 100vh;
+    overflow-y: hidden;
+    overflow-x: hidden;
   }
 
   .navbar:hover {
@@ -146,4 +123,38 @@ main {
   .navbar:hover .link-text {
     opacity: 1;
   }
+
+  .navbar:hover .logo svg {
+    position: static;
+    transform: rotate(-360deg)
+  }
+
+  .logo svg {
+    position: absolute;
+    transform: rotate(0deg);
+    transition: transform 200ms;
+  }
+
+  .logo .nav-link{
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+    text-align: center;
+    color: var(--main-text-color);
+    background: var(--red);
+    font-size: 1.5rem;
+    letter-spacing: 0.3ch;
+    filter: grayscale(0%) opacity(1);
+  }
+
+  .logo {
+    width: 100%;
+  }
+
+  .link-text {
+    transition: opacity 200ms ease-out;
+    opacity: 0;
+    margin-left: 1rem;
+  }
+
 }

static/index.css

@@ -0,0 +1,59 @@
+.center-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 70vh;
+}
+
+.title {
+    color: var(--main-text-color);
+    margin-bottom: 1rem;
+}
+
+.subtitle {
+    color: var(--secondary-text-color);
+}
+
+.center-container form {
+    margin-top: 2rem;
+    background-color: var(--secondary-bg-color);
+    padding: 1.5rem 2rem;
+    border-radius: 25px;
+    width: 90%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.center-container form input[type=search] {
+    padding: 1.5rem 2rem;
+    box-sizing: border-box;
+    border: 1px solid var(--main-bg-color);
+    background-color: var(--search-color);
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+    margin-right: 1.5rem;
+    flex: 3;
+    font-size: 1.1rem;
+    color: var(--main-text-color);
+}
+
+.center-container form input[type=search]::placeholder {
+    color: var(--secondary-text-color);
+}
+
+.center-container form button {
+    padding: 1.5rem 2rem;
+    flex: 1;
+    background-color: var(--search-color-2);
+    border: 1px solid var(--main-bg-color);
+    color: var(--search-color-3);
+    font-size: 1.1rem;
+}
+
+.center-container form button:hover {
+    color: var(--main-text-color)
+}

templates/index.html

@@ -4,4 +4,12 @@
 <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='index.css')}}">
 {% endblock %}
 {% block content %}
+<div class="center-container">
+    <h1 class="title">YT Buddy</h1>
+    <p class="subtitle">Convert and download YouTube video and audio online, for <b>free</b>.</p>
+    <form class="form" action="#" method="POST">
+        <input type="search" placeholder="paste youtube link here" required>
+        <button type="submit">Convert</button>
+    </form>
+</div>
 {% endblock %}