diff --git a/1.html b/1.html new file mode 100644 index 000000000..8e786ba56 --- /dev/null +++ b/1.html @@ -0,0 +1,9 @@ + + + + + + + + Hello World + \ No newline at end of file diff --git a/2.html b/2.html new file mode 100644 index 000000000..8e786ba56 --- /dev/null +++ b/2.html @@ -0,0 +1,9 @@ + + + + + + + + Hello World + \ No newline at end of file diff --git a/3.html b/3.html new file mode 100644 index 000000000..8e786ba56 --- /dev/null +++ b/3.html @@ -0,0 +1,9 @@ + + + + + + + + Hello World + \ No newline at end of file diff --git a/index.html b/index.html index d01f779ff..76963d7a2 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,154 @@ + + Document + + + + + - +
+
+

Marie Kirton-Daike

+

大家 マリー

+
+
+ +
+
+ +
+ +
+
+
+ a picture of myself +
+

Marie

+ My Project
+ プロジェクト + +

Hi! My name is Marie and I love to solve problems and be creative. That's why I love programming! With
programming I was able to show my kawaii (cute in Japanese) side by making this pretty website. At
the same time I was able to solve problems in my code like in the NASA App. That one was hard to
make and I found bugs in my code, but with a lot of help from my teachers and trying to solve the
problems on my own, I was able to make the app! Cool, right? On this website you can see that I
display some other projects I’ve worked on that have nothing to do with coding, but this shows my
diversity. I love writing and wrote some books. I also like music and made a song. Hope you enjoy
the variety. Thank you for visiting my website!

+

私の可愛いポートフォリオへようこそ
(Welcome to My Cute Portfolio)

+
+
+ +
+
+
+ +
+ city night +
+ +
A Book I've Written
+ +
+
+ +
+ two girls walking with kawaii accessories +
+ +
A Book I've Co-Authored
+ +
+
+ +
+ nighttime in kyoto +
+ +
Music I've Made
+ +
+
+ +
+ moon in the sky with hearts +
+
MY NASA APP
 +
+
+ +
+
+ + +
+
+ +
+ kaonashi from sen to chihiro walking through japan town +
+
TEXT HERE IN CENTER
 +
+
+ +
+ cute straps with illustrated smily faces on carrots +
+
TEXT HERE IN CENTER
 +
+
+ +
+ illustrated girl with cute backpack in the night with the moon over her +
+
TEXT HERE IN CENTER
 +
+
+ +
+ moonlight in the night illustrated +
+
TEXT HERE IN CENTER
 +
+
+ +
+ + +
+ + + + \ No newline at end of file diff --git a/nature-restores-full.wav b/nature-restores-full.wav new file mode 100644 index 000000000..024167943 Binary files /dev/null and b/nature-restores-full.wav differ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 000000000..df435dd99 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "web-module-challenge-css-layouts", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/style/index.css b/style/index.css index 440e53514..ecaded647 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,250 @@ -/* Add CSS styling here */ \ No newline at end of file +/* Add CSS styling here */ +html,body +{ + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; + overflow-x: hidden; +} + +*{ + font-family: 'Dosis', sans-serif; + padding: 0; + margin: 0; + +} +header{ + background-color: black; + padding: 15px; + display: flex; + justify-content: space-between ; +} + +h1{ + font-size: 2rem ; + color: white; + margin-bottom: 5px; +} +h2{ + color: white; + margin-bottom: 5px; + +} + +nav { + font-size: 2rem; + padding: 15px 0px; + display: flex; + + +} + +nav a{ + color: white; + border-radius: 10%; + padding: 3%; + margin-left: 2%; +} + +.pink{ +background-color: rgba(169, 91, 129, 0.4); + +} + +.purple{ +background-color: rgba(128, 0, 128, 0.4); + +} + +.blue{ +background-color: rgba(17, 103, 103, 0.4); + +} + +.green{ +background-color: rgba(76, 119, 11, 0.4); + +} + +.profilepic{ + border-radius: 5%; + height: 45rem; + width: 30rem; + margin: 5%; +} + +.intro{ + display: flex; + +} +.myname { +text-align: center; +margin: 100px 10px 10px 10px; +font-size: x-large; +} + +p{ + padding: 20px; +} + +.thestuff{ + display: flex; + margin-left: 20%; + margin-right: 5%; + +} +.thestuff2{ + display: flex; + margin-left: 5%; + margin-right: 25%; +} + + +footer{ + text-align: center; +} +.ending{ + font-size: 3rem; +} + +#contact{ + font-size: 2rem; + color: white; + background-color: black; + padding: 2%; +} + + + + +.container { + position: relative; + width: 50%; + } + .image{ + height: 30rem; + width: 20rem; + border-radius: 5%; + margin: 5px; + } + .overlay { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + height: 30rem; + width:20rem; + opacity: 0; + transition: .5s ease; + background-color: rgba(0, 140, 186, 0.4); + border-radius: 5%; + } + + .container:hover .overlay { + opacity: 1; + } + + .text { + color: white; + font-size: 20px; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + } + +/* tablet */ + @media (max-width: 900px){ + + nav{ + display: flex; + flex-direction: column; + } + .profilepic{ + border-radius: 5%; + height: 20rem; + width: 30rem; + margin: 20%; + } + + .intro{ + display: flex; + flex-direction: column; + margin-bottom: 20%; + } + .myname { + text-align: center; + margin: 5px 10px 10px 10px; + + } + + .thestuff{ + display: flex; + flex-direction: column; + margin-left: 27%; + + } + .thestuff2{ + display: flex; + flex-direction: column; + margin-left: 27%; + } + } + + + + + + +/* mobile */ + @media (max-width: 360px) { + nav{ + display: flex; + flex-direction: column; + } + .profilepic{ + border-radius: 5%; + height: 10rem; + width: 15rem; + margin: 15%; + } + + .intro{ + display: flex; + flex-direction: column; + margin-bottom: 20%; + } + .myname { + text-align: center; + margin: 5px 10px 10px 10px; + + } + + .thestuff{ + display: flex; + flex-direction: column; + margin-left: 5%; + margin-right: 5%; + + } + .thestuff2{ + display: flex; + flex-direction: column; + margin-left: 5%; + margin-right: 5%; + } + + + + + + + + + } + \ No newline at end of file