About page and home page

assets/css/index.css

@@ -1,3 +1,56 @@
+:root {
+  --first-action-dark-background: #353535;
+  --first-action-light-background: var(--black);
+  --second-action-dark-background: #f3f3f3;
+  --second-action-light-background: #ececec;
+}
+
+main h1 {
+  font-size: 4rem;
+  text-transform: capitalize;
+  margin-bottom: 1rem;
+}
+
+main h1 span,
+main h1 a {
+  color: var(--crimson);
+}
+
+main h1 a {
+  text-decoration: none;
+}
+
+main #intro {
+  display: flex;
+  column-gap: 1rem;
+}
+
+main #intro img {
+  width: 19.6875rem;
+  height: 19.6875rem;
+}
+
+main #intro #action-buttons {
+  display: flex;
+  column-gap: 1rem;
+}
+
+main #intro #action-buttons a {
+  text-decoration: none;
+  border-radius: 0.5625rem;
+  padding: 1rem 2rem;
+}
+
+main #intro #action-buttons a:first-of-type {
+  background-color: var(--first-action-background);
+  color: var(--white);
+}
+
+main #intro #action-buttons a:last-of-type {
+  background-color: var(--second-action-background);
+  color: var(--black);
+}
+
 main h2 {
   font-size: 3rem;
   margin-bottom: 1rem;
@@ -11,7 +64,18 @@ section {
   margin-bottom: 5rem;
 }
 
+main #projects > div:first-of-type,
+main #blog > div:first-of-type {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 @media only screen and (max-width: 1024px) {
+  main h1 {
+    font-size: 2rem;
+  }
+
   main h2 {
     font-size: 1.75rem;
   }
@@ -23,4 +87,12 @@ section {
   section {
     margin-bottom: 2rem;
   }
+
+  main #intro #action-buttons {
+    margin-top: 1.5rem;
+  }
+
+  main #intro img {
+    display: none;
+  }
 }