diff --git a/1.html b/1.html new file mode 100644 index 0000000000..8e786ba560 --- /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 0000000000..8e786ba560 --- /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 0000000000..8e786ba560 --- /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 d01f779ffe..769a689a12 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,157 @@ + + Document + + + + + - +
+
+

Marie Kirton-Daike

+

大家 マリー

+
+
+ +
+
+ +
+ +
+
+
+ welcome image +
+

Marie

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

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat pariatur quos ab magnam
iusto + ad + facere quae, molestiae, laboriosam corrupti asperiores sit similique provident accusantium unde + praesentium
consequatur hic suscipit?

+

私の可愛いポートフォリオへようこそ

+
+
+ +
+
+
+ +
+ 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 +
+
TEXT HERE IN CENTER
 +
+
+ +
+
+ + +
+
+ +
+ 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 0000000000..024167943d Binary files /dev/null and b/nature-restores-full.wav differ diff --git a/style/index.css b/style/index.css index 440e535149..196b1b4be1 100644 --- a/style/index.css +++ b/style/index.css @@ -1 +1,159 @@ -/* 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: 30rem; + width: 30rem; + margin: 5%; +} + +.intro{ + display: flex; + +} +.myname { +text-align: center; +margin: 100px 10px 10px 10px; +font-size: x-large; +} + + +.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; + }