making changes to home page

datafestafrica · Nov 24, 2022 · 0fb90ec · 0fb90ec
1 parent cc33222
commit 0fb90ec
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 19 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -643,30 +643,63 @@ input[type='checkbox'] {
 
 .header .countdown #clock .counter-number {
 	display: inline-block;
-	width: 7.25rem;
-	height: 7.25rem;
+	/* width: 7.25rem; */
+	/* height: 7.25rem; */
 	margin-right: 0.5rem;
 	margin-bottom: 1.25rem;
 	margin-left: 0.5rem;
 	padding-top: 2.5rem;
-	border: 2px solid #ffffff;
-	border-radius: 50%;
-	font-weight: 400;
-	font-size: 2.25rem;
+	/* border: 2px solid #ffffff; */
+	border-radius: 5%;
+	font-weight: 800;
+	/* font-size: 2.25rem;
 	line-height: 1.25rem;
-	text-align: center;
+	text-align: center;  */
+    /* background-color: #ffffff;
+    color : #000 */
 }
+.header .countdown #clock .counter-number .date {
+    color: #fff;
+    background-color: #ffffff;
+    color: #000;
+    border: 2px solid #ffffff;
+    font-size: 3.25rem;
+	line-height: 3.25rem;
+	padding: 1.2rem 1.5rem 1.2rem 1.5rem;
+    border-radius: 5%;
+    text-align: center;
+
+}
+.header .countdown #clock .counter-number .date-1 {
+    color: #fff;
+    background-color: #ffffff;
+    color: #000;
+    border: 2px solid #ffffff;
+    font-size: 3.25rem;
+	line-height: 3.25rem;
+    /* margin-left: 0.0rem; */
+	padding: 1.3rem 0.7rem 1.3rem 0.7rem;
+    border-radius: 5%;
+    text-align: center;
+
+}
+.register{
+    color: #000 !important;
+    background-color: #08F5DA  !important;
+
 
+}
 .header .countdown #clock .counter-number .timer-text {
-	font-weight: 400;
-	font-size: 0.75rem;
+	font-weight: 800;
+	font-size: 1.25rem;
 	line-height: 1rem;
 	text-align: center;
 }
 
 .header .h1-large {
 	margin-bottom: 1.125rem;
 	color: #ffffff;
+    font-family: 'Poppins';
 }
 
 .header .p-large {

diff --git a/index.html b/index.html
@@ -35,6 +35,7 @@
     <link href="css/swiper.css" rel="stylesheet">
     <link href="css/magnific-popup.css" rel="stylesheet">
     <link href="css/styles.css" rel="stylesheet">
+    <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
 
     <!-- Favicon  -->
     <link rel="icon" href="images/favicon.png">
@@ -90,8 +91,8 @@
         <div class="container">
 
             <!-- Image Logo -->
-            <a class="navbar-brand" href="index.html"><img src="images/logo/logo-96x96-transparent.png"
-                    alt="DataFestAfrica"></a>
+            <a class="navbar-brand" href="index.html" style="font-family:Poppins; font-size: 26px; text-decoration:None"><img src="images/logo/logo-96x96-transparent.png"
+                    alt="DataFestAfrica"> DataFest Africa</a>
 
             <button class="navbar-toggler p-0 border-0" type="button" data-toggle="offcanvas">
                 <span class="navbar-toggler-icon"></span>
@@ -104,14 +105,11 @@
                                 class="sr-only">(current)</span></a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link page-scroll" href="index.html#registration">REGISTER</a>
+                        <a class="nav-link page-scroll" href="index.html#speakers">SPEAKERS</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link page-scroll" href="index.html#agenda">AGENDA</a>
                     </li>
-                    <li class="nav-item">
-                        <a class="nav-link page-scroll" href="index.html#speakers">SPEAKERS</a>
-                    </li>
                     <li class="nav-item">
                         <a class="nav-link page-scroll" href="datathon.html">DATATHON</a>
                     </li>
@@ -131,6 +129,9 @@
                     <li class="nav-item">
                         <a class="nav-link page-scroll" href="index.html#footer">CONTACT</a>
                     </li>
+                    <li class="nav-item">
+                        <a class="nav-link page-scroll register" href="index.html#registration">REGISTER</a>
+                    </li>
                 </ul>
                 <span class="nav-item social-icons">
                     <span class="fa-stack">
@@ -163,9 +164,9 @@
             <div class="row">
                 <div class="col-lg-12">
                     <div class="countdown">
-                        <span id="clock"></span>
-                    </div>
-                    <h1 class="h1-large">DataFestAfrica</h1>
+                        <span id="clock"></span>   
+                    </div><br>
+                    <h1 class="h1-large">DataFest Africa</h1>
                     <h3 class="p-large">DataFestAfrica 2023 is coming October 13-14, 2023 - Lagos, Nigeria</h3>
                     <p>DataFestAfrica will be the first ever event that showcase all career professions within the data
                         space in Africa.</p>

diff --git a/js/scripts.js b/js/scripts.js
@@ -49,7 +49,7 @@
     /* Countdown Timer - The Final Countdown */
 	$('#clock').countdown('2023/10/13 08:00:00') /* change here your "countdown to" date */
 	.on('update.countdown', function(event) {
-		var format = '<span class="counter-number">%D<br><span class="timer-text">Days</span></span><span class="counter-number">%H<br><span class="timer-text">Hours</span></span><span class="counter-number">%M<br><span class="timer-text">Minutes</span></span><span class="counter-number">%S<br><span class="timer-text">Seconds</span></span>';
+		var format = '<span class="counter-number"><span class="date-1">%D</span><br><br><span class="timer-text">Days</span></span><span class="counter-number"><span class="date">%H</span><br><br><span class="timer-text">Hours</span></span><span class="counter-number"><span class="date">%M</span><br><br><span class="timer-text">Minutes</span></span><span class="counter-number"><span class="date">%S</span><br><br><span class="timer-text">Seconds</span></span>';
 		$(this).html(event.strftime(format));
 	})
 	.on('finish.countdown', function(event) {