From a8f7708592dd4f1f4825b31780a7cfbd7e7de9df Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Mon, 11 Jul 2022 19:48:41 +0300 Subject: Initial commit --- src/index.html | 43 ++++++++++++++++++++++++++++ src/logo.png | Bin 0 -> 7016 bytes src/logo.svg | 9 ++++++ src/styles.css | 87 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/swoosh.svg | 3 ++ 5 files changed, 142 insertions(+) create mode 100644 src/index.html create mode 100644 src/logo.png create mode 100644 src/logo.svg create mode 100644 src/styles.css create mode 100644 src/swoosh.svg (limited to 'src') 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 @@ + + + + Minni Honka + + + + + + + + + +
+

Minni Honka

+

Graphic designer & Illustrator

+ +
+ +

Graphic Design

+ +
+
+ + + + + + +
+
+ + + +
+
+ + + +
+
+ + \ No newline at end of file diff --git a/src/logo.png b/src/logo.png new file mode 100644 index 0000000..42f3f22 Binary files /dev/null and b/src/logo.png differ 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 @@ + + + + + + + + + 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 @@ + + + -- cgit v1.3