From d6e841a5e5842951b18b8ca1c21e884018cd5616 Mon Sep 17 00:00:00 2001 From: lyzamaemirabete Date: Thu, 10 Oct 2019 09:22:21 +0800 Subject: [PATCH] Final Assessment --- index.css | 235 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 94 +++++++++++++++++++++ user.json | 4 +- 3 files changed, 331 insertions(+), 2 deletions(-) diff --git a/index.css b/index.css index 402604c..6ac58cb 100644 --- a/index.css +++ b/index.css @@ -2,3 +2,238 @@ html, body { font-family: Helvetica, sans-serif; font-size: 16px; } +html, body { + font-family: Helvetica, sans-serif; + font-size: 16px; + height: 100%; + width: 100%; +} +*{ + margin: 0 auto; +} +.header{ + background-color: #313131; + width: 100%; + height: 48%; + color: white; + font-size: 4.1rem; + font-weight: 300; + letter-spacing: -1px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.header-text{ + line-height: 130px; + margin-top: -15px; +} +.border{ + height: 0.2px; + width: 195px; + background-color: white; +} +.main-con{ + height: auto; + width: 100%; + background-color: #f4f4f4; + padding: 65px 0 67px; +} +.con1{ + height: 28%; + width: 65%; + margin-left: 170px; + margin-right: 150px; + background-color: white; + text-align: center; + padding: 69px; + padding-bottom: 60px; +} +.title{ + width: 60%; + font-size: 30px; + letter-spacing: 5px; + color: #444444; + text-transform: uppercase; + text-align: center; +} +.text1{ + width: 58.5%; + margin-top: 32px; + text-align: center; + line-height: 26px; + font-weight: 100; + color: #666666; + letter-spacing: 0.02px; + padding-left: 2px; + margin-left: 183px; +} +.span1{ + margin-left: -2px; + letter-spacing: 0.07px; +} +.title1{ + width: 60%; + font-size: 30px; + letter-spacing: 4.8px; + color: #444444; + text-transform: uppercase; + text-align: center; + padding-right: 9px; + padding-top: 2px; +} +.learn{ + height: 50px; + width: 195px; + margin-top: 30px; + margin-left: 2px; + border: 1px solid #666; + color: #666; + text-decoration: none; + font-weight: 300; + background-color: white; + border-radius: 4px; + text-transform: uppercase; + letter-spacing: 3.9px; +} + +/* main{ + margin: 170px 150px; + width: 100%; + background-color: #f4f4f4; +} */ + +.body-con-row{ + /* width: 65%; + background-color: #f4f4f4; + display: flex; + flex-wrap: wrap; */ + background-color: #f4f4f4; + height: auto; + width: 100%; + margin: 0; + padding-bottom: 70px; +} +.body-con-r{ + width: 77.5%; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.body-con1, +.body-con2, +.body-con3, +.body-con4{ + width: 47%; + height: 539px; + /* background-color: green; */ + margin-bottom: 31px; + +} +/* .body-con-row{ + width: 80%; +} */ +/* .body-con1,.body-con2{ + flex-direction: column; + margin-top: 65px; + height: 100%; + width: 45%; + background-color: #ffffff; +} */ + +.body-con-img1, +.body-con-img2, +.body-con-img3, +.body-con-img4{ + height: 44.5%; + width: 100%; +} +.body-con-img1{ + background-image: url("./images/pic01.jpg"); +} +.body-con-img2{ + background-image: url("./images/pic02.jpg"); +} +.body-con-img3{ + background-image: url("./images/pic03.jpg"); +} +.body-con-img4{ + background-image: url("./images/pic04.jpg"); +} +.body-content{ + /* width: 80%; */ + text-align: center; + padding-top: 50px; + padding-left: 65px; + padding-right: 75px; + line-height: 26px; + background-color: white; + padding-bottom: 47px; +} +.body-con-text{ + padding-bottom: 31px; + color: #666; +} +.more{ + border-radius: 5px; + border: 2px solid #666; + color: #666; + font-size: 15px; + text-transform: uppercase; + background-color: transparent; + font-weight: bold; + text-align: center; + padding: 10px 27px; + margin-bottom: 1px; + margin-left: 9px; + margin-right: -2px; + letter-spacing: 0.4px; +} +.body-text1, +.body-text2, +.body-text3, +.body-text4{ + color: white; + text-transform: uppercase; + font-size: 22px; + text-align: center; + padding-top: 106px; + letter-spacing: 5px; +} +.con2{ + height: 28%; + width: 67.5%; + padding-left: 159px; + padding-right: 150px; + /* background-color: white; */ + text-align: center; + padding-top: 69px; + padding-bottom: 97px; + border-bottom: 1px solid #808080; +} +.getstarted{ + height: 50px; + width: 200px; + margin-top: 31px; + margin-left: -22px; + margin-right: -16px; + border: 1px solid #666; + text-decoration: none; + font-weight: 300; + background-color: white; + border-radius: 4px; + text-transform: uppercase; + letter-spacing: 3.5px; +} +.text{ + width: 58.5%; + margin-top: 31px; + text-align: center; + line-height: 26px; + font-weight: 100; + color: #666666; + letter-spacing: 0.02px; + padding-left: 2px; + margin-left: 141px; +} \ No newline at end of file diff --git a/index.html b/index.html index e69de29..041c8b2 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,94 @@ + + + + + + + + Document + + +
+

Final

+
+
+ +
+
+

Lorem ipsum dolor

+

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

+ +
+
+
+
+
+
+

feugiat et faucibus

+
+
+

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

+ +
+
+
+
+

blandit adipiscing

+
+
+

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

+ +
+
+
+
+

lorem massa nulla

+
+
+

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

+ +
+
+
+
+

ipsum sed tempus

+
+
+

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

+ +
+
+ +
+

Lorem ipsum dolor

+

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

+ +
+
+
+ + diff --git a/user.json b/user.json index 4ac80a0..c1982a8 100644 --- a/user.json +++ b/user.json @@ -1,4 +1,4 @@ { - "name": "", - "email": "" + "name": "Lyza Mae B. Mirabete", + "email": "lyza.mirabete@boom.camp" }