Merge pull request #2868 from annenuno/annenuno

added my css work
zero-to-mastery · Nov 1, 2024 · 7a9ca99 · 7a9ca99
2 parents 64a0eea + f0c1b46
commit 7a9ca99
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 0 deletions.
diff --git a/Art/annenuno-HeaderDesign/index.html b/Art/annenuno-HeaderDesign/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Halloween Hacktoberfest</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <div class="container w-container">
+    <h1 class="font-class">Happy Hacktoberfest!</h1>
+    <p>I made this minimalistic yet sophisticated button</p>
+    <a href="https://github.com/annenuno"  target="_blank" class="cta">
+      <span>Check my GitHub!</span>
+      <svg width="15px" height="10px" viewBox="0 0 13 10">
+        <path d="M1,5 L11,5"></path>
+        <polyline points="8 1 12 5 8 9"></polyline>
+      </svg>
+    </a>
+
+  </div>
+</body>
+
+</html>
diff --git a/Art/annenuno-HeaderDesign/meta.json b/Art/annenuno-HeaderDesign/meta.json
@@ -0,0 +1,4 @@
+{
+    "artName": "HeaderDesign",
+    "githubHandle": "annenuno"
+}
diff --git a/Art/annenuno-HeaderDesign/styles.css b/Art/annenuno-HeaderDesign/styles.css
@@ -0,0 +1,87 @@
+.container {
+    position: relative;
+    height: auto;
+    max-width: 790px;
+    padding-right: 0px;
+    margin-top: auto;
+    margin-bottom: auto;
+    padding-top: 200px;
+}
+.w-container {
+    margin-left: auto;
+    margin-right: auto;
+}
+.font-class {
+    font-family: "Ubuntu", sans-serif;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    color: #234567;
+}
+p {
+    font-family: "Ubuntu", sans-serif; 
+    /* padding-top: 10px; */
+    padding-bottom: 50px;
+}
+.cta {
+    position: relative;
+    margin: auto;
+    /* margin: 20px 20px; */
+    padding: 12px 18px;
+    padding-top: 15px;
+    transition: all 0.2s ease;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-decoration-line: none;
+    /* margin-top: 10px; */
+    /* display: flex; */
+    /* width: fit; */
+  }
+
+  .cta:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    border-radius: 50px;
+    background: #b1dae7;
+    width: 45px;
+    height: 45px;
+    transition: all 0.3s ease;
+  }
+
+  .cta span {
+    position: relative;
+    font-family: "Ubuntu", sans-serif;
+    font-size: 18px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    color: #234567;
+  }
+
+  .cta svg {
+    position: relative;
+    top: 0;
+    margin-left: 10px;
+    fill: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke: #234567;
+    stroke-width: 2;
+    transform: translateX(-5px);
+    transition: all 0.3s ease;
+  }
+
+  .cta:hover:before {
+    width: 100%;
+    background: #b1dae7;
+  }
+
+  .cta:hover svg {
+    transform: translateX(0);
+  }
+
+  .cta:active {
+    transform: scale(0.95);
+  }