From bfad362860939e196c2678361791bc28b4d14d48 Mon Sep 17 00:00:00 2001 From: bs98 Date: Wed, 9 Oct 2019 00:05:44 -0400 Subject: [PATCH 1/3] Compliance to the HTML-CSS Final project --- index.css | 239 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 104 +++++++++++++++++++++++ 2 files changed, 343 insertions(+) diff --git a/index.css b/index.css index 402604c..31fc986 100644 --- a/index.css +++ b/index.css @@ -1,4 +1,243 @@ html, body { font-family: Helvetica, sans-serif; font-size: 16px; + background: #f4f4f4; } + + + +*{ + padding: 0; + margin: 0; + box-sizing: border-box; +} + +.header{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 370px; + background: #333333; + color: white; + width: 1365px; + margin: 0 auto; +} + +.header h1{ + font-size: 65px; + font-weight: lighter; + padding: 12px; + position: relative; + left: -1px; + padding-bottom: 15px; + padding-left: 10px; + bottom: 1px; +} + +.header hr{ + width: 199px; + height: 3px;margin-top: 11px; + background: white; + margin-top: 11px; + margin-top: 16px; + margin-top: 11px; +} + + +.header span{ + font-size: 66px; +} + +/* prim */ + +.prim{ + display: flex; + width: 1022px; + background: white; + justify-content: center; + align-items: center; + flex-direction: column; + margin: 0 auto; + margin-top: 65px; + padding-bottom: 63px; +} + +.prim h1{ + padding: 20px; + font-weight: 100; + letter-spacing: 4.8px; + padding-left: 45px; + font-size: 30px; + margin-top: 48px; + padding-right: 46px; +} + +.prim p{ + text-align: center; + width: 480px; + line-height: 26px; + margin-top: 11px; + +} + +.learnmore{ + border: 1px solid #333333; + border-radius: 3px; + padding: 14px; + margin-top: 32px; + padding-left: 37px; + padding-right: 33px; +} + + +.learnmore a{ + font-size: 13px; + letter-spacing: 3.8px; +} + +.learnmore span{ + font-size: 13px; + letter-spacing: 3.8px; +} + +/* Content */ + +.content-container{ + display: flex; + justify-content: center; +} + +.container{ + width: 495px; + background: white; + color: #333333; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: 66px; + margin-left: 18px; + margin-right: 18px; +} + +.context{ + text-align: center; + width: 393px; + line-height: 26px; +} + +.cover{ + width: 495px; + height: 241px; + margin-bottom: 48px; + display: flex; + justify-content: center; + align-items: center; +} + +.more-caption{ + width: 60px; + text-align: center; + text-decoration: none; + border: 1px solid gray; + border-radius: 3px; + padding-left: 27px; + padding-right: 71px; + margin-right: 0px; + padding-top: 12px; + padding-bottom: 11px; + margin-top: 31px; + font-size: 13px; + letter-spacing: 3px; + color: #333333; + margin-bottom: 49px; +} + +.imgcapt{ + font-size: 21.5px; + letter-spacing: 4.9px; + margin-bottom: 2px; + color: white; +} + +.dos{ + margin-top: 32px; +} + +.rigth-adjust{ + margin-left: 0; +} + +.rightcol{ + margin-right: 66px; + margin-left: 14px; + +} + +.leftcol{ + margin-left: 65px; +} + +.imgotwo{ + background: url('./images/pic02.jpg'); +} + + +.imgtres{ + background: url('./images/pic03.jpg'); +} + +.imgquatro{ + background: url('./images/pic04.jpg'); +} + +.imgone{ + background: url('./images/pic01.jpg'); +} + + +/* Footer */ + +.footer{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 100px 50px; + margin-bottom: 47px; +} + +.footer p{ + width: 388px; + text-align: center; + margin-top: 32px; + line-height: 26px; +} + +.fheader{ + font-weight: 100; + letter-spacing: 5px; + font-size: 30px; +} + +.getstarted{ + margin-top: 31px; + padding-top: 15px; + padding-bottom: 16px; + margin-bottom: 98px; + padding-right: 31px; + padding-left: 36px; + text-decoration: none; + text-align: center; + border: 1px solid gray; + border-radius: 3px; + margin-right: 0px; + font-size: 13px; + letter-spacing: 4px; + color: #333333; +} + +.frule{ + width: 1025px; +} \ No newline at end of file diff --git a/index.html b/index.html index e69de29..4683d61 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,104 @@ + + + + + + + + Final + + +
+

Final

+
+
+ +
+

+ LOREM IPSUM DOLOR +

+

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

+ +
+ LEARN MORE +
+
+ +
+ + +
+
+ +
+

FEUGIAT ET FAUCIBUS

+
+ +

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

+ + MORE +
+ +
+ +
+

LOREM MASSA NULLA

+
+ +

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

+ + MORE +
+
+ +
+
+ +
+

FEUGIAT ET FAUCIBUS

+
+ +

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

+ + MORE +
+ +
+ +
+

LOREM MASSA NULLA

+
+ +

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

+ + MORE +
+
+
+ + + +
+

+ LOREM IPSUM DOLOR +

+ +

Phasellus ac augue ac magna auctor tempus proin accumsan lacus a nibh commodo in pellentesque dui in hac habitasse patea dictumst.

+ + GET STARTED + +
+
+ + + + + From 27a388c003dcc3c0f79494ca8dc08b42429558ba Mon Sep 17 00:00:00 2001 From: bs98 Date: Wed, 9 Oct 2019 00:10:10 -0400 Subject: [PATCH 2/3] Compliance to the given task, added information to the json file --- user.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/user.json b/user.json index 4ac80a0..47f4ea9 100644 --- a/user.json +++ b/user.json @@ -1,4 +1,4 @@ { - "name": "", - "email": "" + "name": "Jeffrey Molleno", + "email": "jeffrey.molleno@boom.camp" } From eb829f5138e258f77a6b45563db6bd3ced9297f3 Mon Sep 17 00:00:00 2001 From: bs98 Date: Wed, 9 Oct 2019 00:55:50 -0400 Subject: [PATCH 3/3] Modifications to elemnts --- index.css | 37 +++++++++++++++++++++---------------- index.html | 13 ++++++------- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/index.css b/index.css index 31fc986..8b3dbbc 100644 --- a/index.css +++ b/index.css @@ -78,16 +78,18 @@ html, body { width: 480px; line-height: 26px; margin-top: 11px; + color: #6d6d6d; } .learnmore{ - border: 1px solid #333333; + border: 1.5px solid #333333; border-radius: 3px; padding: 14px; margin-top: 32px; padding-left: 37px; - padding-right: 33px; + padding-bottom: 13px; + padding-right: 31px; } @@ -125,12 +127,13 @@ html, body { text-align: center; width: 393px; line-height: 26px; + color: #6d6d6d; } .cover{ width: 495px; height: 241px; - margin-bottom: 48px; + margin-bottom: 47px; display: flex; justify-content: center; align-items: center; @@ -140,18 +143,18 @@ html, body { width: 60px; text-align: center; text-decoration: none; - border: 1px solid gray; + border: 1.5px solid gray; border-radius: 3px; - padding-left: 27px; - padding-right: 71px; margin-right: 0px; - padding-top: 12px; - padding-bottom: 11px; margin-top: 31px; font-size: 13px; letter-spacing: 3px; color: #333333; margin-bottom: 49px; + padding-top: 11px; + padding-left: 26px; + padding-bottom: 12px; + padding-right: 73px; } .imgcapt{ @@ -180,12 +183,12 @@ html, body { } .imgotwo{ - background: url('./images/pic02.jpg'); + background: url('./images/pic03.jpg'); } .imgtres{ - background: url('./images/pic03.jpg'); + background: url('./images/pic02.jpg'); } .imgquatro{ @@ -210,9 +213,11 @@ html, body { .footer p{ width: 388px; - text-align: center; - margin-top: 32px; - line-height: 26px; + text-align: center; + margin-top: 32px; + line-height: 26px; + color: #6d6d6d; + margin-top: 31px; } .fheader{ @@ -223,15 +228,15 @@ html, body { .getstarted{ margin-top: 31px; - padding-top: 15px; + padding-top: 13px; padding-bottom: 16px; margin-bottom: 98px; padding-right: 31px; padding-left: 36px; text-decoration: none; text-align: center; - border: 1px solid gray; - border-radius: 3px; + border: 1.5px solid gray; + border-radius: 5px; margin-right: 0px; font-size: 13px; letter-spacing: 4px; diff --git a/index.html b/index.html index 4683d61..3e677b9 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@

FEUGIAT ET FAUCIBUS

- Fusce malesuada efficitur venenatis. Pellentesque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapidus lacus non ornare. + Fusce malesuada efficitur venenatis. Pellentesque 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.

MORE @@ -48,7 +48,7 @@

LOREM MASSA NULLA

- Fusce malesuada efficitur venenatis. Pellentesque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapidus lacus non ornare. + Fusce malesuada efficitur venenatis. Pellentesque 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.

MORE @@ -59,11 +59,11 @@

LOREM MASSA NULLA

-

FEUGIAT ET FAUCIBUS

+

BLANDIT ADIPISCING

- Fusce malesuada efficitur venenatis. Pellentesque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapidus lacus non ornare. + Fusce malesuada efficitur venenatis. Pellentesque 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.

MORE @@ -72,11 +72,11 @@

FEUGIAT ET FAUCIBUS

-

LOREM MASSA NULLA

+

IPSUM SED TEMPUS

- Fusce malesuada efficitur venenatis. Pellentesque tempor leo sed massa hendrerit hendrerit. In sed feugiat est, eu congue elit. Ut porta magna vel felis sodales vulputate. Donec faucibus dapidus lacus non ornare. + Fusce malesuada efficitur venenatis. Pellentesque 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.

MORE @@ -90,7 +90,6 @@

LOREM MASSA NULLA

LOREM IPSUM DOLOR

-

Phasellus ac augue ac magna auctor tempus proin accumsan lacus a nibh commodo in pellentesque dui in hac habitasse patea dictumst.

GET STARTED