made header responsive and made first page responsive

README.md

@@ -20,7 +20,7 @@ ## Tasks :-
 - [X] Create an simple layout page
 - [X] Create an simple Dashboard page
 - [X] Create an simple explore skills page
-
+- [ ] Make it mobile responsive
 
 ## Steps to run :-
 

public/css/home.css

@@ -1,43 +1,103 @@
-#info_container,#topdown_container,#bottomup_container{
-    min-height:500px;
-    padding:2rem 4rem;
+#info_container,
+#topdown_container,
+#bottomup_container {
+    min-height: 500px;
+    padding: 2rem 4rem;
 }
 
-#info_container{
+#info_container {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-evenly;
 }
 
-#info_container>p{
-    width:25ch;
+#info_container>p {
+    width: 25ch;
+    margin: 9px;
     font-size: 1.5em;
 }
 
-#topdown_container{
-    background-color: #fedfdf;
+#info_container>img {
+    max-width: 550px;
+    width: 50%;
 }
 
-#topdown_container>.heading,#bottomup_container>.heading{
+#topdown_container {
+    background-image:linear-gradient(-45deg, white, pink, purple);
+}
+
+#topdown_container>.heading,
+#bottomup_container>.heading {
     /* text-align: right; */
 
 }
-#bottomup_container>.heading{
+
+#bottomup_container>.heading {
     text-align: right;
 }
 
-#topdown_container>.main_section,#bottomup_container>.main_section{
-    width:100%;
-    margin:2rem;
+#topdown_container>.main_section,
+#bottomup_container>.main_section {
+    width: 100%;
+    margin: 2rem;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-evenly;
 }
 
-.main_section>p{
-    font-size:1.5rem;
-    width:50ch;
-    margin-inline:2rem;
+.main_section>p {
+    font-size: 1.5rem;
+    width: 50ch;
+    max-width: 100%;
+    margin-inline: 2rem;
 }
+
+
+@media screen and (max-width: 768px) {
+
+    #info_container,
+    #topdown_container,
+    #bottomup_container {
+        padding: 2rem 1rem;
+    }
+
+    #info_container {
+        flex-direction: column-reverse;
+
+        >p {
+            width: 100%;
+            margin: 20px;
+            font-size: 1.5em;
+        }
+
+        >img {
+            width: 80%;
+        }
+    }
+
+    #topdown_container>.main_section{
+        margin-inline:0;
+        flex-direction: column-reverse;
+
+    }
+
+    #bottomup_container>.main_section{
+        margin-inline:0;
+        flex-direction: column;
+    }
+
+    .main_section>p{
+        margin-top:20px;
+        font-size:1rem;
+
+    }
+
+    #topdown_container>.heading,#bottomup_container>.heading{
+        text-align: center;
+    }
+
+}
+
+

public/css/layouts/main.css

@@ -1,55 +1,119 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Roboto:wght@300&display=swap');
 
-*{
-    margin:0;
-    padding:0;
+* {
+    margin: 0;
+    padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 }
 
-a{
-    color:#000;
+a {
+    color: #000;
     /* border:none; */
     text-decoration: none;
 }
 
-header{
-    height:80px;
+
+header {
+    height: 80px;
     background-color: #FFC3C3;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
-    padding:0.7rem 2rem;
+    padding: 0.7rem 2rem;
+}
+header>.left{
+    position: relative;
+}
+
+header .menu_btn {
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: none;
 }
 
-header>.title{
-    font-size:2rem;
+header .title {
+    font-size: 2rem;
     cursor: pointer;
 }
 
-header>.sub_header{
+header>.sub_header {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
 }
 
-header>.sub_header a{
-    margin-inline:10px;
+header>.sub_header a {
+    margin-inline: 10px;
     cursor: pointer;
+    text-align: center;
 }
-header>.sub_header a:hover{
-    border-bottom:2px solid #000;
+
+header>.sub_header a:hover {
+    border-bottom: 2px solid #000;
 }
-header #user_badge{
-    border-radius:50%;
+
+header #user_badge {
+    border-radius: 50%;
     background-color: #0000004c;
     aspect-ratio: 1;
-    color:#fff;
-    padding:1rem;
+    color: #fff;
+    padding: 1rem;
 
-    display:flex;
+    display: flex;
     align-items: center;
     justify-content: center;
 }
+
+
+@media screen and (max-width:550px) {
+
+    header {
+        height: unset;
+        flex-direction: column;
+        padding-inline: 0;
+    }
+
+    header .menu_btn {
+        display: inherit;
+
+    }
+
+    header>.left{
+        width:100%;
+        text-align: center;
+        /* margin-bottom: 10px; */
+
+    }
+
+    .sub_header.hidden{
+        display:none;
+    }
+
+    header>.sub_header {
+        width: 100%;
+        flex-direction: column;
+        background-color: inherit;
+        margin-top: 10px;
+    }
+
+    header>.sub_header>div {
+        display: flex;
+        flex-direction: column;
+
+    }
+
+    header>.sub_header a {
+        margin-bottom: 10px;
+        padding: 10px;
+        border: 2px solid black;
+        border-radius: 50px;
+        background-color: black;
+        color: white;
+
+    }
+}

public/js/layouts/main.js

@@ -0,0 +1,6 @@
+document.querySelector('.menu_btn').addEventListener('click',toggleMenu);
+
+function toggleMenu(e){
+    subheader = document.querySelector(".sub_header");
+    subheader.classList.toggle("hidden");
+}

resources/views/layouts/main.blade.php

@@ -4,14 +4,20 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="{{ asset('css/layouts/main.css') }}">
     @yield('head')
 </head>
 
 <body>
     <header>
-        <a class='title' href="{{ route('home') }}">LearnGuide</a>
-        <div class="sub_header">
+        <div class="left">
+            <i class='fa-solid fa-bars menu_btn'></i>
+            <a class='title' href="{{ route('home') }}">LearnGuide</a>
+        </div>
+        <div class="sub_header hidden">
             <div>
                 <a href="{{ route('dashboard') }}">Dashboard</a>
                 <a href="{{ route('dashboard.myskills') }}">My Skills</a>
@@ -31,6 +37,7 @@
         </div>
     </header>
     @yield('main')
+    <script src="{{ asset('js/layouts/main.js') }}"></script>
 
 </body>