diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..72b36ea Binary files /dev/null and b/.DS_Store differ diff --git a/background 1.jpg b/background 1.jpg new file mode 100644 index 0000000..9160e19 Binary files /dev/null and b/background 1.jpg differ diff --git a/github.jpg b/github.jpg new file mode 100644 index 0000000..7f6ddb4 Binary files /dev/null and b/github.jpg differ diff --git a/personal website KM.html b/personal website KM.html new file mode 100644 index 0000000..86d460e --- /dev/null +++ b/personal website KM.html @@ -0,0 +1,67 @@ + + + + + + + + personal web + + + + +
+ + Selfie +
+ Hi there! I'm +

Kate Ma

+
+
+ +
+ +

I look forward to getting to know you.

+
+
+ +
+ + diff --git a/selfie.jpg b/selfie.jpg new file mode 100644 index 0000000..e6abf97 Binary files /dev/null and b/selfie.jpg differ diff --git a/style.css b/style.css new file mode 100644 index 0000000..1e376e7 --- /dev/null +++ b/style.css @@ -0,0 +1,118 @@ +*{ + box-sizing: inherit; +} +body { + + font-family: "Noto Serif JP", sans-serif; + font-size: 1.5em; + min-height: 100vh; + margin-left: 0; + margin-right: 0; + margin-top: 100px; + display: flex; + flex-direction: column; + border: 0; + +} +.selfie{ + margin-bottom: 10px; + margin-top: 10px; + margin-left: 9%; + width: 25%; + border-radius: 70%; +} + +.title{ + display: flex; + justify-content: center; +} + +em{ + font-size: 1.5em; +} + +.content{ + flex-grow: 1; + flex-direction: column; + +} +.content__intro{ + line-height: 2em; + padding: 8%; + padding-top: 3%; + padding-bottom: 5%; + + +} + +.content__body{ + + background-image: url("background 1.jpg"); + background-position: 50% 50%; + background-size: cover; + background-color: transparent; + color: #fff; + padding: 8%; + padding-top: 55%; + padding-bottom: 30%; + + border-top: 10em; +} +.content__contact{ + flex-grow: 1; +} + +.footer{ + font-size: 30px; + padding-left: 8%; + display: flex; +} + +@media(min-width:768px){ + .content{ + display: flex; + } + .content__intro{ + flex-grow: 2; + } + .content__body{ + flex-grow: 3; + } + .footer{ + flex-grow: 1; + } +} + +@media(min-width:960px){ + .content{ + display: flex; + } + .content__intro{ + flex-grow: 2; + padding: 8%; + margin-right: 10% + } + .content__body{ + flex-grow: 3; + } + .footer{ + flex-grow: 1; + } +} + +@media(min-width:1200px){ + .content{ + display: flex; + } + .content__intro{ + flex-grow: 4; + padding: 8%; + margin-right: 10% + } + .content__body{ + flex-grow: 4; + } + .footer{ + flex-grow: 1; + } +}