add additional styling

zzelga · Sep 6, 2021 · c62d0b6 · c62d0b6
1 parent f6bd198
commit c62d0b6
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -1,43 +1,35 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="h-100">
   <head>
     <!-- Required meta tags -->
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
-
+    <link href="styles.css" rel="stylesheet">
     <title>Zbigniew Zelga - Software Engineer</title>
   </head>
   <body class="d-flex h-100 text-center text-white bg-dark">
       <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
           <header class="mb-auto">
               <div>
-                  <h3 class="flat-md-start md-0">Zbigniew Zelga</h3>
-                  <nav class="nav nav-masthead justify-content-center-float-md-end">
+                  <h3 class="float-md-start mb-0">Zbigniew Zelga</h3>
+                  <nav class="nav nav-masthead justify-content-center float-md-end">
                       <a href="#" aria-current="page" class="nav-link active">Home</a>
+                      <a href="https://www.linkedin.com/in/zbigniewzelga/" class="nav-link">LinkedIn</a>
                   </nav>
               </div>
           </header>
           <main class="px-3">
-              <h1>I'm a senior software engineer at <a href="">Stavvy</a>.</h1>
-              <p class="lead">In a past life, I was a musician.</p>
+              <h1>I work at <a class="text-white-50" href="https://www.stavvy.com/">Stavvy</a> as a Senior Software Engineer.</h1>
+              <p class="lead">I'm primarily focused on designing and building scalable back-end services, with experience in the fintech space.</p>
           </main>
           <footer class="mt-auto text-white-50">
               <p>Thanks for stopping by!</p>
           </footer>
       </div>
 
-    <!-- Optional JavaScript; choose one of the two! -->
-
-    <!-- Option 1: Bootstrap Bundle with Popper -->
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
-
-    <!-- Option 2: Separate Popper and Bootstrap JS -->
-    <!--
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-    -->
   </body>
 </html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,53 @@
+/*
+ * Globals
+ */
+
+
+/* Custom default button */
+.btn-secondary,
+.btn-secondary:hover,
+.btn-secondary:focus {
+  color: #333;
+  text-shadow: none; /* Prevent inheritance from `body` */
+}
+
+
+/*
+ * Base structure
+ */
+
+body {
+  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
+  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
+}
+
+.cover-container {
+  max-width: 42em;
+}
+
+
+/*
+ * Header
+ */
+
+.nav-masthead .nav-link {
+  padding: .25rem 0;
+  font-weight: 700;
+  color: rgba(255, 255, 255, .5);
+  background-color: transparent;
+  border-bottom: .25rem solid transparent;
+}
+
+.nav-masthead .nav-link:hover,
+.nav-masthead .nav-link:focus {
+  border-bottom-color: rgba(255, 255, 255, .25);
+}
+
+.nav-masthead .nav-link + .nav-link {
+  margin-left: 1rem;
+}
+
+.nav-masthead .active {
+  color: #fff;
+  border-bottom-color: #fff;
+}