diff --git a/first/index.css b/first/index.css index e69de29..820fd38 100644 --- a/first/index.css +++ b/first/index.css @@ -0,0 +1,102 @@ +body { + padding: 0; + font-family: sans-serif; + height: 100%; +} + +.size { + width: 100%; +} + +.container { + overflow: auto; +} + +.center { + margin: 0 auto; +} + +.full-height { + height: 100%; +} + +.container-one { + background-color: red; + width: 350px; + height: 200px; + display: inline-block; + margin: 30px 40px 30px 90px; +} + +.container-two { + background-color: cornflowerblue; + width: 350px; + height: 200px; + display: inline-block; + margin: 30px 40px 30px 0px; +} + +.container-three { + background-color: dimgray; + width: 350px; + height: 200px; + display: inline-block; + margin: 30px 90px 30px 0px; +} + +.container-four { + background-color: cornflowerblue; + width: 700px; + height: 500px; + display: inline-block; + margin: 30px 90px 30px 0px; +} + +.container-five { + background-color: red; + width: 400px; + height: 500px; + float: left; + display: inline-block; + margin: 30px 0px 30px 90px; +} + +.container-six { + background-color: cornflowerblue; + width: 700px; + height: 150px; + display: inline-block; + float: left; + margin: 0px 0px 30px 90px; +} + +.container-seven { + background-color: red; + width: 50px; + height: 150px; + display: inline-block; + float: left; +} + +.container-eight { + background-color: dimgray; + width: 300px; + height: 150px; + display: inline-block; + float: left; +} + +.container-nine { + background-color: red; + width: 50px; + height: 150px; + display: inline-block; + float: left; + margin: 0px 90px 0px 0px; +} + +.text { + margin: 0px 90px; + padding: 20px; + font-size: 25px; +} \ No newline at end of file diff --git a/first/index.html b/first/index.html index e69de29..1b05af9 100644 --- a/first/index.html +++ b/first/index.html @@ -0,0 +1,28 @@ + + + + + First + + +
+
+
+
+
+ +

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod +

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

+ +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/second/index.css b/second/index.css index e69de29..fd80273 100644 --- a/second/index.css +++ b/second/index.css @@ -0,0 +1,73 @@ +body { + margin: 0; + font-family: sans-serif; + background-color: gray; +} + +.box-one { + background-color: white; + width: 1000px; + height: 250px; + margin: 30px 200px; +} + +.box-two { + background-color: white; + width: 1000px; + height: 680px; + margin: 0px 200px; +} + +.red { + background-color: red; + margin: 30px 50px; +} + +.blue { + background-color: blue; +} + +.btn { + width: 150px; + height: 50px; + color: white; + font: bold; + font-size: 24px; + border: none; +} + +.par { + font-size: 25px; + line-height: 28px; + margin: 5px 50px; +} + +.pic img { + width: 90%; + height: 400px; + margin: 0 auto; +} + +.fixed-bottom { + position: fixed; + bottom: 0; + box-sizing: border-box; + width: 100%; + height: 75px; +} + +.footer-link { + text-decoration: none; + color: white; + font-size: 22px; + margin-left: 40px; +} + +footer { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + background-color: #4a4a4a; + padding: 0 20%; +} \ No newline at end of file diff --git a/second/index.html b/second/index.html index e69de29..6c6ec51 100644 --- a/second/index.html +++ b/second/index.html @@ -0,0 +1,27 @@ + + + + + Second + + +
+
+


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ + +
+ +
+



+
+
+


Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+ + + \ No newline at end of file diff --git a/third/index.css b/third/index.css index e69de29..c01c802 100644 --- a/third/index.css +++ b/third/index.css @@ -0,0 +1,70 @@ +body { + font-family: sans-serif; + margin: 0; +} + +main { + box-sizing: border-box; + height: 100%; + padding: 40px; +} + +main h1 { + margin-top: 32px; + margin-bottom: 0; + font-size: 48px; + color: gray; + float: left; +} + +} + .img-one { + box-sizing: border-box; + width: 50%; + margin: 24px 0 0 0; + padding-left: 8px; + display: flex; + align-items: center; + justify-content: center; +} + +.img-one img { + width: 100%; +} + +.header { + background-color: gray; + height: 75px; + padding: 24px 40px; + box-sizing: border-box; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; +} + +.header .nav-link { + color: white; + font-size: 24px; + text-decoration: none; + margin-right: 40px; +} + +.text { + padding: 12px; + box-sizing: border-box; + max-width: 50%; +} + +.text p { + font-size: 18px; +} + +.pull-right { + float: right; + clear: right; +} + +.pull-left { + float: left; + clear: left; \ No newline at end of file diff --git a/third/index.html b/third/index.html index e69de29..38c9da9 100644 --- a/third/index.html +++ b/third/index.html @@ -0,0 +1,39 @@ + + + + + Third + + +
+ Apple + Google +
+ +

Type something

+
+ +
+ +
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

+
+ +
+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. +

+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+ + + \ No newline at end of file diff --git a/user.json b/user.json index 4ac80a0..5b5934d 100644 --- a/user.json +++ b/user.json @@ -1,4 +1,4 @@ { - "name": "", - "email": "" + "name": "Robby Ann Eslava", + "email": "robbyann.eslava@boom.camp" }