5 files changed, 142 insertions, 0 deletions
diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000..93623bf
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>Minni Honka</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="icon" type="image/png" href="/logo.png">
+        <link rel="stylesheet" href="styles.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Amiri&family=Roboto:wght@300&display=swap" rel="stylesheet">
+    </head>
+    <body>
+        <img id="swoosh" src="swoosh.svg" alt="">
+        <header>
+            <h1>Minni Honka</h1>
+            <h2>Graphic designer & Illustrator</h2>
+            <img id="logo" src="logo.svg" alt="">
+        </header>
+
+        <h3>Graphic Design</h3>
+
+        <div class="gallery">
+            <div class="column">
+                <a target="_blank" href="https://via.placeholder.com/400x400">
+                    <img src="https://via.placeholder.com/200x200">
+                </a>
+                <a target="_blank" href="https://via.placeholder.com/400x400">
+                    <img src="https://via.placeholder.com/300x150">
+                </a>
+            </div>
+            <div class="column">
+                <a target="_blank" href="https://via.placeholder.com/400x400">
+                    <img src="https://via.placeholder.com/400x250">
+                </a>
+            </div>
+            <div class="column">
+                <a target="_blank" href="https://via.placeholder.com/400x400">
+                    <img src="https://via.placeholder.com/400x250">
+                </a>
+            </div>
+        </div>
+    </body>
+</html>
+\ No newline at end of file
diff --git a/src/logo.png b/src/logo.png
new file mode 100644
index 0000000..42f3f22
--- /dev/null
+++ b/src/logo.png
diff --git a/src/logo.svg b/src/logo.svg
new file mode 100644
index 0000000..719bcea
--- /dev/null
+++ b/src/logo.svg
@@ -0,0 +1,9 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<rect width="192" height="192" fill="url(#pattern0)"/>
+<defs>
+<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
+<use xlink:href="#image0_41_20" transform="scale(0.00520833)"/>
+</pattern>
+<image id="image0_41_20" width="192" height="192" xlink:href="data:image/png;base64,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"/>
+</defs>
+</svg>
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..2fbdda2
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,87 @@
+:root {
+    --purple: #683863;
+    --grid-gap: 10px;
+}
+
+html {
+    font-family: 'Roboto', sans-serif;
+    color: var(--purple);
+    width: 100%;
+}
+
+body {
+    max-width: 1440px;
+    margin: 78px auto;
+    padding: 10px;
+
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+}
+
+header {
+    position: relative;
+    margin-bottom: 200px; 
+}
+
+h1 {
+    font-family: 'Amiri', serif;
+    font-size: 128px;
+    font-weight: 400;
+    line-height: 109px;
+    margin: 5px 0;
+    padding: 0;
+    white-space: nowrap;
+}
+
+h2 {
+    font-family: 'Roboto', sans-serif;
+    font-size: 30px;
+    font-weight: 400;
+    color: var(--purple);
+    margin: 0;
+}
+
+h3 {
+    font-family: 'Amiri', serif;
+    font-size: 48px;
+    font-weight: 400;
+}
+
+#swoosh {
+    position: absolute;
+    top: 0;
+    right: 0;
+    max-width: 85%;
+}
+
+#logo {
+    position: absolute;
+    top: 62px;
+    left: 612px;
+}
+
+.gallery {
+    display: flex;
+    flex-flow: row wrap-reverse;
+    justify-content: space-evenly;
+    width: calc(100% + var(--grid-gap));
+    margin: 0 calc(-0.5 * var(--grid-gap));
+}
+
+.gallery .column {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: flex-start;
+    flex: 1;
+    margin: 0 calc(0.5 * var(--grid-gap));
+}
+
+.gallery .column a {
+    margin-bottom: var(--grid-gap);
+    min-width: 400px;
+}
+
+.gallery .column img {
+    width: 100%;
+}
diff --git a/src/swoosh.svg b/src/swoosh.svg
new file mode 100644
index 0000000..d1f1ba2
--- /dev/null
+++ b/src/swoosh.svg
@@ -0,0 +1,3 @@
+<svg width="1388" height="337" viewBox="0 0 1388 337" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1388 337C1388 225 1110.4 1 0 1H1388V337Z" fill="#683863" stroke="black"/>
+</svg>