first commit -- I'm new to CSS!

sh-mug · Sep 23, 2024 · ec753f3 · ec753f3
commit ec753f3
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git a/index.html b/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>How about some coffee?</title>
+        <link rel="stylesheet" href="styles.css" />
+    </head>
+
+    <body>
+        <header>
+            <h1>How about some coffee?</h1>
+        </header>
+
+        <a href="https://github.com/sh-mug">GitHub</a>
+
+        <div class="mug">
+            <div class="coffee" id="coffee"></div>
+            <div class="handle"></div>
+        </div>
+
+        <button onclick="pourCoffee()">Pour Coffee</button>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,10 @@
+function pourCoffee() {
+    const coffee = document.getElementById("coffee");
+    let currentHeight = parseFloat(window.getComputedStyle(coffee).height);
+    let mugHeight = parseFloat(
+        window.getComputedStyle(coffee.parentElement).height
+    );
+
+    let newHeight = currentHeight + mugHeight * 0.1;
+    coffee.style.height = `${newHeight}px`;
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,70 @@
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #d6bcaa;
+}
+
+a {
+    color: #d6bcaa;
+}
+
+.mug {
+    position: relative;
+    width: 150px;
+    height: 200px;
+    background-color: #f2e3d8;
+    border-radius: 50% / 40px;
+    z-index: -2;
+}
+
+.mug::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: #f2e3d8f0;
+    border-radius: inherit;
+    mask: radial-gradient(
+        ellipse 136px 66px at 50% 40px,
+        transparent 50%,
+        #000 50%
+    );
+    clip-path: polygon(0 40px, 100% 40px, 100% 100%, 0 100%);
+    z-index: -2;
+}
+
+.coffee {
+    position: absolute;
+    width: 136px;
+    height: 66px;
+    background-color: #584036;
+    border-radius: 50% / 33px;
+    left: 7px;
+    bottom: 10px;
+    z-index: -3;
+    transition: height 0.5s ease;
+}
+
+.handle {
+    position: absolute;
+    width: 50px;
+    height: 100px;
+    border: 10px solid #f2e3d8;
+    border-radius: 50%;
+    top: 30px;
+    right: -40px;
+    z-index: -4;
+}
+
+button {
+    margin-top: 30px;
+    padding: 10px 20px;
+    background-color: #584036;
+    border: none;
+    cursor: pointer;
+    font-size: 16px;
+    color: #f2e3d8;
+}