Doing Minor Changes

acf-sack · Jun 26, 2024 · 0b96fa7 · 0b96fa7
1 parent 366dc8a
commit 0b96fa7
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 13 deletions.
diff --git a/assets/img/Untitled-2-copy.png b/assets/img/Untitled-2-copy.png
diff --git a/assets/placeholders/nav.html b/assets/placeholders/nav.html
@@ -1,10 +1,10 @@
 
 <div class="nav">
-  <nav class="navbar navbar-expand-lg ">
-    <div class="container-fluid">
+  <nav class="navbar navbar-expand-lg">
+    <div class="container-fluid ">
       <a class="navbar-brand" href="index.html"><img src="./assets/img/nav-logo.png" alt="" class="nav-img"></a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" >
-        <span class="navbar-toggler-icon"></span>
+        <i class="fa-solid fa-bars"></i>
       </button>
       <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
 

diff --git a/assets/style/style.css b/assets/style/style.css
@@ -5,7 +5,7 @@
 
 
   #particles-js, #particles-js-contact, #particles-js-comp {
-    opacity: 20%;
+    opacity: 40%;
     position: absolute;
     top: 0;
     left: 0;
@@ -35,7 +35,7 @@ background-size:cover;
 
     -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(12px);
-    width: 80%;
+    width: 90%;
     position: fixed;
     z-index: 3;
     margin-top: 20px;
@@ -62,10 +62,23 @@ background-size:cover;
     font-size: 20px;
     animation: li-load 5s ;
 }
+.nav-item{
+    padding-right: 20px;
+}
 .nav-img{
     width: 120px;
     height:55px;
 }
+.navbar-toggler{
+    color: #ffffff;
+}
+.fa-solid{
+    color: #ffffff;
+}
+
+#navbarNavDropdown{
+    max-height: 100% !important;
+}
 .header{
     position: relative;
     color: white;
@@ -107,7 +120,7 @@ background-size:cover;
     color: #09051e;
 }
 .main-text{
-    width: 90%;
+    width: 60%;
     position: relative;
     top: -30px;
 }
@@ -170,6 +183,10 @@ height: auto;
     font-size: 20px;
     font-optical-sizing: auto;
     font-style: normal;
+    padding: 20px;
+}
+.card-heading{
+    font-weight: 600;
 }
 .social-media{
     display: flex;
@@ -297,9 +314,20 @@ scale: 1.0;
     margin-bottom: 50px;
     font-size: 18px;
 }
+@media (max-width:800px){
+    .contact-card{
+        width: 100%;
+    }
+    .contact-card .row{
+        width: 100%;
+        margin: 0px !important;
+        padding: 0px !important;
+    }
+
+}
 @media (max-width:700px) {
     #home , #about , #contact , #competitions , #Competition-sub{
-        padding: 20px;
+        padding: 10px;
         padding-top: 80px;
     }
     .about-header , .contact-heading , .competition-title{
@@ -308,4 +336,33 @@ scale: 1.0;
     .about-text{
         padding: 10px;
     }
+    .button-main{
+        font-size: 15px;
+        width: 150px;
+    }
+    .main-text{
+        width: 100%;
+        position: relative;
+        top: -30px;
+    }
+    .contact-card{
+        width: 100%;
+    }
+    .contact-card .row{
+        width: 100%;
+        margin: 0px !important;
+        padding: 0px !important;
+    }
+}
+@media (max-width:500px){
+    .button-main{
+        font-size: 10px;
+        width: 100px;
+    }
+    .card-heading{
+        font-size:15px;
+    }
+    .card-details{
+        font-size: 10px;
+    }
 }
diff --git a/index.html b/index.html
@@ -24,7 +24,7 @@
   <div class="header">
     <center>
 
-        <img src="./assets/img/Untitled-2.png" alt="" class="main-text"data-aos="zoom-in" data-aos-once="true">
+        <img src="./assets/img/Untitled-2-copy.png" alt="" class="main-text"data-aos="zoom-in" data-aos-once="true">
 
       <div class="buttons-header" data-aos="zoom-in" data-aos-once="true">
 
@@ -85,31 +85,31 @@ <h1 class="contact-heading"  data-aos="zoom-in" data-aos-once="true">
 
     <div class="contact-cards"  data-aos="zoom-in" data-aos-once="true">
       <div class="row justify-content-center">
-        <div class="col-9 col-md-6">
+        <div class="col-9 col-lg-6">
           <div class="contact-card card">
             <div class="card-heading">Aquinas Silva(President)</div>
             <div class="card-details">+94 77 112 8140</div>
           </div>
         </div>
-        <div class="col-9 col-md-6">
+        <div class="col-9 col-lg-6">
           <div class="contact-card card">
             <div class="card-heading">Tharuka Wijekoon(Vice-President)</div>
             <div class="card-details">+94 71 272 7445</div>
           </div>
         </div>
-        <div class="col-9 col-md-6">
+        <div class="col-9 col-lg-6">
           <div class="contact-card card">
             <div class="card-heading">Maleesha Piyathissa(Vice-President)</div>
             <div class="card-details">+94 70 184 5595</div>
           </div>
         </div>
-        <div class="col-9 col-md-6">
+        <div class="col-9 col-lg-6">
           <div class="contact-card card">
             <div class="card-heading">Dan Dhanushyan(Secretary)</div>
             <div class="card-details">+94 76 317 8056</div>
           </div>
         </div>
-        <div class="col-9 col-md-6">
+        <div class="col-9 col-lg-6">
           <div class="contact-card card">
             <div class="card-heading">Sudas Nimnath(Vice-Secretary)</div>
             <div class="card-details">+94 71 839 8089</div>