From 903ae7035100d76bd6d7f1ca792699ad88d420e8 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 9 Oct 2019 02:31:43 -0400 Subject: [PATCH 1/5] final html-css --- index.css | 138 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 76 +++++++++++++++++++++++++++++ 2 files changed, 214 insertions(+) diff --git a/index.css b/index.css index 402604c..a9bfe1b 100644 --- a/index.css +++ b/index.css @@ -2,3 +2,141 @@ html, body { font-family: Helvetica, sans-serif; font-size: 16px; } +body{ + background: #dcdcdc; + margin: 0px 243px; +} +header{ + background-color: black; + text-align: center; + height: 370px; + position: relative; +} +header h4{ + position: absolute; + width: 145px; + padding: 27px; + top: 7%; + left: 42.7%; + border-bottom: 2px solid white; + font-weight: 100; + font-size: 4em; + color: white; +} +.center{ + text-align: center; + margin: auto; +} +button{ + border: 2px solid black; + padding: 15px; + text-transform: uppercase; + border-radius: 5px; + background: transparent; + letter-spacing: 4px; + font-weight: 3px; +} + +.intro{ + background-color: white; + width: 75%; + height: 260px; + margin-top: 60px; + padding-top: 50px; + padding-bottom: 50px; + border-radius: 5px; +} +.intro .title{ + text-transform: uppercase; + font-weight: 100; + letter-spacing: 3.5px; +} +.intro .intro-content{ + margin-top: 30px; + width: 48%; + line-height: 25px; +} +.intro .intro-btn{ + width: 200px; + margin: 35px; +} + +.images{ + display: flex; + width: 81%; + margin-top: 30px; +} +.left{ + margin-left: 30px; +} +.img-card{ + margin-top: 31px; + width: 93%; + background-color: white; + border-radius: 5px; +} +.img-card-content{ + position: relative; + background-color: #dcdcdc; +} +.content-img-1{ + background-image: url("./images/pic01.jpg"); +} +.content-img-2{ + background-image: url("./images/pic03.jpg"); +} +.content-img-3{ + background-image: url("./images/pic02.jpg"); +} +.content-img-4{ + background-image: url("./images/pic04.jpg"); +} +.content-design{ + width: 495px; + height: 245px; + opacity: 0.9; + border-radius: 5px 5px 0px 0px; +} +.img-inner-content{ + text-transform: uppercase; + top: 37%; + left: 20%; + position: absolute; + color: white; + letter-spacing: 5px; + font-size: 20px; + font-weight: bold; +} +.img-content{ + line-height: 25px; + padding: 31px; + width: 80%; +} +.img-btn{ + margin: 20px; + padding: 10px; + width: 100px; +} + +footer{ + padding: 70px; +} +.footer-title{ + text-transform: uppercase; + letter-spacing: 3.5px; + font-weight: 100; +} +.footer-inner-content{ + margin-top: 35px; + width: 400px; + line-height: 25px; +} +.footer-btn{ + width: 200px; + margin-top: 33px; +} +footer hr{ + margin-top: 100px; + width: 84.5%; + border: .5px solid black; +} \ No newline at end of file diff --git a/index.html b/index.html index e69de29..1ed999b 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,76 @@ + + + + + + + HTML-CSS Final + + + +
+

Final

+
+
+

lorem ipsum dolor

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae malesuada turpis. Nam pellentesque in ac aliquam. Aliquam tempor mi porta egestas maximus lorem ipsum dolor.

+ +
+
+
+
+
+
+

feugiat et faucibus

+
+
+
+

Fusce malesuada efficitur venenatis. Pellentisque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.

+ +
+
+
+
+
+

lorem massa nulla

+
+
+
+

Fusce malesuada efficitur venenatis. Pellentisque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.

+ +
+
+
+
+
+
+
+

blandit adipiscing

+
+
+
+

Fusce malesuada efficitur venenatis. Pellentisque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.

+ +
+
+
+
+
+

ipsum sed tempus

+
+
+
+

Fusce malesuada efficitur venenatis. Pellentisque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapibus lacus non ornare.

+ +
+
+
+
+ + + \ No newline at end of file From d291902a3d9a8cda5dfed3ed0b9339b99b20dc1a Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 9 Oct 2019 02:38:43 -0400 Subject: [PATCH 2/5] user info --- user.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/user.json b/user.json index 4ac80a0..987ce8f 100644 --- a/user.json +++ b/user.json @@ -1,4 +1,4 @@ { - "name": "", - "email": "" + "name": "Francisco R. Ifurung", + "email": "francisco.ifurung@boom.camp" } From 0754089457cd4d8cba45f9b61a3e7cf2bf3b97d3 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 9 Oct 2019 02:41:59 -0400 Subject: [PATCH 3/5] user info --- user.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/user.json b/user.json index 987ce8f..554b16c 100644 --- a/user.json +++ b/user.json @@ -1,4 +1,4 @@ { - "name": "Francisco R. Ifurung", + "name": "Francisco Ifurung", "email": "francisco.ifurung@boom.camp" } From 19ccfdeeb09018b7e396f28deabb74c35cfab9a5 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 9 Oct 2019 02:42:55 -0400 Subject: [PATCH 4/5] user info --- user.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/user.json b/user.json index 554b16c..987ce8f 100644 --- a/user.json +++ b/user.json @@ -1,4 +1,4 @@ { - "name": "Francisco Ifurung", + "name": "Francisco R. Ifurung", "email": "francisco.ifurung@boom.camp" } From f7bff7e82f3fc92f85ff4a3e6957d7f01ef95c27 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 9 Oct 2019 03:47:56 -0400 Subject: [PATCH 5/5] final html-css --- index.css | 20 +++++++++++--------- index.html | 6 +++--- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/index.css b/index.css index a9bfe1b..f56dc0e 100644 --- a/index.css +++ b/index.css @@ -4,7 +4,7 @@ html, body { } body{ background: #dcdcdc; - margin: 0px 243px; + margin: 0px; } header{ background-color: black; @@ -53,7 +53,7 @@ button{ } .intro .intro-content{ margin-top: 30px; - width: 48%; + width: 500px; line-height: 25px; } .intro .intro-btn{ @@ -63,11 +63,11 @@ button{ .images{ display: flex; - width: 81%; + width: 1100px; margin-top: 30px; } .left{ - margin-left: 30px; + margin-left: 40px; } .img-card{ margin-top: 31px; @@ -109,8 +109,10 @@ button{ } .img-content{ line-height: 25px; - padding: 31px; - width: 80%; + padding-top: 32px; + padding-bottom: 32px; + padding-left: 50px; + padding-right: 50px; } .img-btn{ margin: 20px; @@ -127,16 +129,16 @@ footer{ font-weight: 100; } .footer-inner-content{ - margin-top: 35px; + margin-top: 30px; width: 400px; line-height: 25px; } .footer-btn{ width: 200px; - margin-top: 33px; + margin-top: 30px; } footer hr{ margin-top: 100px; - width: 84.5%; + width: 83.5%; border: .5px solid black; } \ No newline at end of file diff --git a/index.html b/index.html index 1ed999b..4deb57b 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@

lorem ipsum dolor

-

feugiat et faucibus

+

feugiat et faucibus

@@ -32,7 +32,7 @@

lorem ipsum dolor

-

lorem massa nulla

+

lorem massa nulla

@@ -45,7 +45,7 @@

lorem ipsum dolor

-

blandit adipiscing

+

blandit adipiscing