Edit home section

acf-sack · Apr 14, 2024 · 021a0ce · 021a0ce
1 parent e70e65d
commit 021a0ce
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 4 deletions.
diff --git a/assets/img/cool-background.png b/assets/img/cool-background.png
diff --git a/assets/style/style.css b/assets/style/style.css
@@ -4,3 +4,38 @@
     scroll-behavior: smooth;
 
 }
+
+#home{
+height: 650px;
+background: url("../img/cool-background.png");
+
+}
+.header{
+    position: relative;
+    color: white;
+    top:200px;
+}
+.header h1{
+    font-size: 100px;
+}
+.buttons-header{
+    margin-top: 30px;
+}
+.button-row .col{
+    padding: 0px !important;
+}
+.button-row {
+    --bs-gutter-x: 0rem;
+}
+.button-main{
+    color: aliceblue;
+    font-size: 20px;
+    padding: 10px;
+    background: none;
+    border: solid white 2px;
+    border-radius: 30px;
+}
+.button-main:hover{
+    background-color: aliceblue;
+    color: #09051e;
+}
diff --git a/index.html b/index.html
@@ -7,24 +7,25 @@
     <!--bootstraps-link-->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
       <!--bootstraps-link-->
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="assets/style/style.css">
     <title>Cyber Pulse</title>
 </head>
 <body>
+  <!--navbar starts here-->
     <nav class="navbar navbar-expand-lg">
         <div class="container-fluid">
           <a class="navbar-brand" href="index.html"><img src=""class="nav-img" alt="">Cyber Pulse</a>
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" >
             <span class="navbar-toggler-icon"></span>
           </button>
-          <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
+          <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
 
             <ul class="navbar-nav">
               <li class="nav-item">
                 <a class="nav-link active" href="index.html">Home</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="">About</a>
+                <a class="nav-link" href="#about">About</a>
               </li>
               <li class="nav-item">
                 <a class="nav-link" href="">Competitions</a>
@@ -39,9 +40,43 @@
           </div>
         </div>
       </nav>
+  <!--navbar ends here-->
+
+<!--Home section starts here-->
+<section id="home">
+  <div class="header">
+    <center>
+      <h1 class="main-text">
+        Cyber Pulse
+      </h1>
+      <h4 class="sub-text">
+        THE ANNUAL ICT DAY OF AT.ANTHONY'S COLLEGE KANDY
+      <div class="buttons-header">
+        <div class="row button-row">
+          <div class="col">
+            <button class="button-main button-1">
+              Competitions
+            </button>
+          </div>
+          <div class="col">
+            <button  class="button-main button-2">
+              About
+            </button>
+          </div>
+        </div>
+      </div>
+    </center>
+  </div>
+</section>
+<!--Home section ends here-->
+<!--About section starts here-->
+<section id="about">
+
+</section>
+<!--About section ends here-->
   <!--bootstraps-link-->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
   <!--bootstraps-link-->
-<script src="script.js"></script>
+<script src="assets/js/script.js"></script>
 </body>
 </html>