Dark style

MBCharaf · Jul 22, 2024 · 267f60f · 267f60f
1 parent 5fcab08
commit 267f60f
Show file tree

Hide file tree

Showing 3 changed files with 290 additions and 254 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -1,49 +1,129 @@
-html {
-    min-height: 100%;
-    position: relative;
-  }
-
-  .container-fluid {
-    padding-top: 70px;
-    padding-bottom: 70px;
-  }
-  .navbar {
-    padding-top: 15px;
-    padding-bottom: 15px;
-    border: 0;
-    border-radius: 0;
-    margin-bottom: 0;
-    font-size: 12px;
-    letter-spacing: 5px;
-  }
-  .navbar-nav li a:hover {
-    color: #0a46ea !important;
-  }
-  p{
-    word-break: break-word;
-  }
-h3{
-    color:#30475e
+body {
+  font-family: 'Arial', sans-serif;
+  padding-top: 70px;
+  background-color: #121212;
+  color: #e0e0e0;
+}
+
+.navbar {
+  margin-bottom: 0;
+  background-color: #1c1c1c;
+  border-color: #333;
+}
+
+.navbar-brand {
+  color: #e0e0e0 !important;
+}
+
+.navbar-nav > li > a {
+  color: #e0e0e0 !important;
+}
+
+.navbar-nav > li > a:hover {
+  color: #ffffff !important;
+}
+
+.home-section, .about-section, .work-section, .publications-section, .skills-section, .education-section, .accomplishments-section, .contact-section {
+  padding: 60px 0;
+  background-color: #1c1c1c;
+}
+
+.profile-pic {
+  max-width: 100%;
+  border-radius: 50%;
 }
-img {
-    border-radius: 100%;
-    width: 30%;
+
+.tagline {
+  font-size: 1.5em;
+  color: #aaaaaa;
 }
-.footer-padding {
-    padding-bottom: 100px;
+
+.timeline {
+  position: relative;
+  padding: 20px 0;
+  list-style: none;
+}
+
+.timeline:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: #555;
+  left: 50%;
+  margin-left: -1px;
+}
+
+.timeline-item {
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.timeline-item:before, .timeline-item:after {
+  content: "";
+  display: table;
+}
+
+.timeline-item:after {
+  clear: both;
+}
+
+.timeline-item .timeline-date {
+  position: absolute;
+  width: 100px;
+  text-align: right;
+  left: 50%;
+  top: 30px;
+  margin-left: -125px;
+  color: #aaaaaa;
+}
+
+.timeline-item .timeline-content {
+  margin-left: 100px;
+  background: #2c2c2c;
+  padding: 20px;
+  position: relative;
+  border-radius: 5px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+
+.timeline-item .timeline-content h3 {
+  margin-top: 0;
+  color: #ffffff;
+}
+
+.timeline-item .timeline-content p {
+  color: #cccccc;
+}
+
+.footer {
+  background: #1c1c1c;
+  padding: 20px 0;
+  text-align: center;
+  color: #aaaaaa;
+  margin-top: 40px;
+}
+
+.footer a {
+  color: #337ab7;
+}
+
+@media (max-width: 768px) {
+  .timeline:before {
+      left: 8%;
   }
 
-  .footer {
-    position: absolute;
-    text-align: center;
-    bottom: 0;
-    width: 100%;
-    height: 100px;
-    background-color: #30475e;
+  .timeline-item .timeline-date {
+      text-align: left;
+      left: 0;
+      margin-left: 0;
+      top: -15px;
   }
 
-  .footer p {
-    margin-top: 25px;
-    font-size: 12px;
-    color: #fff;
+  .timeline-item .timeline-content {
+      margin-left: 0;
+      padding-left: 20px;
+      padding-right: 20px;
   }
+}