home

composer.lock

@@ -7278,5 +7278,5 @@
         "php": "^7.2.5|^8.0"
     },
     "platform-dev": [],
-    "plugin-api-version": "2.3.0"
+    "plugin-api-version": "2.0.0"
 }

resources/views/home.blade.php

@@ -30,10 +30,10 @@
                                     <div class="row" style="display:flex;">
                                         <div class="mb-1">
                                             <div class="form-icon position-relative" style="display:flex;">
-                                                <input type="text" class="form-control" placeholder="Please type your Supervisor's ARN here" name="" required="" style="font-size:13px; border-radius: 6px 17px 17px 6px;">
-                                                <button type="submit" style="margin-left: -5.7rem; border: 2px solid #ccc; width: 13%; border-radius: 18px 18px 18px 18px; background-color: #141639c4 !important; color: white; font-weight: 700;">Search</button>
+                                                <input type="text" class="form-control search-box" placeholder="Please type your Supervisor's ARN here" name="" required="">
+                                                <button type="submit" class="search-btn">Search</button>
                                             </div>
-                                            <div class="alert mt-3 mb-3" style="border: 2px solid #e9f0f3 !important; width: 100%; display: -webkit-inline-box;  font-size: 12px !important; font-weight:bold !important; color: black; border-radius: 6px;">
+                                            <div class="alert mt-3 mb-3">
                                                 <div class="col-md-12">
                                                     <div class="row">
                                                         <div class="col-md-10">
@@ -44,7 +44,23 @@
                                                             <span class="text-muted" style="font-weight: 500;">University Name</span>
                                                         </div>
                                                         <div class="col-md-2 mt-3">
-                                                            <button class="btn btn3" style="margin-left: 1.1rem;">Apply</button>  
+                                                            <button onclick="document.getElementById('id01').style.display='block'" class="btn btn3" style="margin-left: 1.1rem;">Apply</button>
+                                                            <div id="id01" class="apply-modal mt-5">
+                                                                <div class="apply-modal-content apply-animate-top apply-card-4">
+                                                                    <header class="container apply-teal"> 
+                                                                    <span onclick="document.getElementById('id01').style.display='none'" 
+                                                                    class="w3-button w3-display-topright">&times;</span>
+                                                                    <h5 class="mt-3" style="font-weight: bold;">Submit your Proposal</h5>
+                                                                    </header>
+                                                                    <div class="w3-container">
+                                                                    <p>Some text..</p>
+                                                                    <p>Some text..</p>
+                                                                    </div>
+                                                                    <footer class="w3-container apply-teal">
+                                                                    <p>Modal Footer</p>
+                                                                    </footer>
+                                                                </div>
+                                                            </div>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -135,6 +151,11 @@
                             </div>                                                           
                         </div>
                     </div>
+                    <div class="w3-container mt-5">
+                        
+
+                            
+                        </div>
                 </div><!--end container-->
             </div>
         </section>

resources/views/web/layouts/top.blade.php

@@ -43,6 +43,7 @@
         <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="{{asset('web/css/datepicker.min.css')}}">
         <link rel="stylesheet" href="{{asset('web/css/sweetalert/sweetalert.css')}}">
+        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
         <!-- fonts -->
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -599,7 +600,62 @@ element.style {
 .ed:active{
     background-color: #dedbf1;
 }
-
+.search-box{
+    font-size: 14px !important; 
+    width: 95.3%; 
+    margin-left: 16px; 
+    font-size:13px; 
+    border-radius: 6px 17px 17px 6px;
+}
+.search-btn{
+    margin-left: -5.7rem; 
+    border: 2px solid #ccc; 
+    width: 13%; 
+    border-radius: 18px 18px 18px 18px; 
+    background-color: #141639c4 !important; 
+    color: white; 
+    font-weight: 700;
+}
+.alert{
+    border: 2px solid #e9f0f3 !important; 
+    width: 100%; 
+    display: -webkit-inline-box;  
+    font-size: 12px !important; 
+    font-weight:bold !important; 
+    color: black; 
+    border-radius: 6px;
+}
+.apply-modal{
+    z-index: 3;
+    display: none;
+    padding-top: 100px;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+.apply-modal-content {
+    margin: auto;
+    background-color: #fff;
+    padding: 0;
+    outline: 0;
+    width: 50%;
+}
+.apply-animate-top {
+    position: relative;
+    animation: animatetop 0.4s;
+}
+.apply-card-4, .apply-hover-shadow:hover {
+    box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
+}
+.apply-teal, .apply-hover-teal:hover {
+    color: #fff!important;
+    background-color: #141639c4!important;
+    height: 57px;
+}
 </style>
 @stack('css')
     </head>