From d33d3d912e5a8d67b0e304c833469adc805f2823 Mon Sep 17 00:00:00 2001 From: vincegludovice Date: Wed, 9 Oct 2019 15:33:58 +0800 Subject: [PATCH 1/4] HTML CSS Final Submission --- index.css | 228 ++++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 94 ++++++++++++++++++++++ user.json | 4 +- 3 files changed, 323 insertions(+), 3 deletions(-) diff --git a/index.css b/index.css index 402604c..0c90fc0 100644 --- a/index.css +++ b/index.css @@ -1,4 +1,230 @@ -html, body { +*, +*:before, +*:after{ + box-sizing: border-box; +} +*{ + margin: 0; + padding: 0; +} +html, +body{ font-family: Helvetica, sans-serif; font-size: 16px; } +body { + height: 100vh; + width: 100%; + margin: 0; + padding: 0; +} +section:first-of-type{ + height: 48%; + width: 100%; + background-color: #313131; + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: column; + padding: 110px +} +section:first-of-type h1{ + color: white; + text-transform: capitalize; + font-weight: 100; + font-size: 60px; + line-height: 96px; + letter-spacing: 1px; +} +section:first-of-type hr{ + background-color: white; + height: 2px; + width: 12.25rem; +} +section:nth-of-type(2){ + width: 100%; + height: auto; + background-color: #f4f4f4; + margin: 0; +} +section:nth-of-type(2) article{ + width: 76%; + margin: 0 auto; + padding: 68px 0; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +section:nth-of-type(2) > article > div:first-of-type, +section:nth-of-type(2) > article > div:last-of-type{ + width: 100%; + height: 22rem; +} +section:nth-of-type(2) > article > div:first-of-type{ + background-color: white; + color: #888888; +} +section:nth-of-type(2) > article > div:first-of-type > div, +section:nth-of-type(2) > article > div:last-of-type > div{ + display: flex; + flex-direction: column; + justify-items: center; + align-items: center; + text-align: center; + width: 50%; + margin: auto; + height: 100%; + padding: 82px 1px; +} +section:nth-of-type(2) > article > div:last-of-type > div{ + padding: 48px 1px; + width: 40%; +} +section:nth-of-type(2) > article > div:first-of-type > div > h3, +section:nth-of-type(2) > article > div:last-of-type > div > h3{ + font-size: 28px; + font-weight: 100; + text-transform: uppercase; + letter-spacing: 6px; + line-height: 0; +} +section:nth-of-type(2) > article > div:first-of-type > div > p, +section:nth-of-type(2) > article > div:last-of-type > div > p{ + padding: 48.5px 6px 33px 9.25px; + line-height: 26px; + letter-spacing: 0.085px; +} +section:nth-of-type(2) > article > div:first-of-type > div > p{ + line-height: 27px; + padding: 48.5px 6px 31px 9.25px; +} +section:nth-of-type(2) > article > div:last-of-type > div > p{ + padding: 48.5px 7px 33px 8px; + letter-spacing: 0.11px; + color: #666666; +} +section:nth-of-type(2) > article > div:first-of-type > div > button, +section:nth-of-type(2) > article > div:last-of-type > div > button{ + text-transform: uppercase; + border: 1px solid black; + border-radius: 5px; + margin-left: 3px; + padding: 14px 30px 15px 36px; + letter-spacing: 3.75px; +} +section:nth-of-type(2) > article > div:last-of-type > div > button{ + background-color: transparent; +} +section:nth-of-type(2) > article button{ + background-color: white; +} +section:nth-of-type(2) > article > div:last-of-type{ + margin-top: 70px; + border-bottom: 1px solid #d3d3d3; +} +section:nth-of-type(2) > article > div:nth-of-type(2), +section:nth-of-type(2) > article > div:nth-of-type(3), +section:nth-of-type(2) > article > div:nth-of-type(4), +section:nth-of-type(2) > article > div:nth-of-type(5){ + width: 48.25%; + background-color: white; + height: 538px; +} +section:nth-of-type(2) > article > div:nth-of-type(2), +section:nth-of-type(2) > article > div:nth-of-type(3){ + margin-top: 65px; +} +section:nth-of-type(2) > article > div:nth-of-type(4), +section:nth-of-type(2) > article > div:nth-of-type(5){ + margin-top: 33px; +} +section:nth-of-type(2) > article > div:nth-of-type(2), +section:nth-of-type(2) > article > div:nth-of-type(3), +section:nth-of-type(2) > article > div:nth-of-type(4) +section:nth-of-type(2) > article > div:nth-of-type(5){ + margin-left: 2px; +} +section:nth-of-type(2) > article > div:nth-of-type(2) > div:first-of-type, +section:nth-of-type(2) > article > div:nth-of-type(3) > div:first-of-type, +section:nth-of-type(2) > article > div:nth-of-type(4) > div:first-of-type, +section:nth-of-type(2) > article > div:nth-of-type(5) > div:first-of-type{ + height: 44.5%; + /* opacity: 0.3; */ + color: white; + text-transform: uppercase; + padding: 107px 0px 0 80px; + letter-spacing: 6px; + font-size: 17px; +} +section:nth-of-type(2) > article > div:nth-of-type(2) > div:last-of-type, +section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type, +section:nth-of-type(2) > article > div:nth-of-type(4) > div:last-of-type, +section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type{ + padding: 47px 0px 0 0; + text-align: center; + font-size: 16.5px; + line-height: 26px; + letter-spacing: -0.2px; +} +section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type, +section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type{ + padding: 47px 0px 0 0; + margin-left: -4px; +} +section:nth-of-type(2) > article > div > div:last-of-type > p{ + color: #888888; +} + +section:nth-of-type(2) > article > div:nth-of-type(2) > div:last-of-type span:nth-of-type(3), +section:nth-of-type(2) > article > div:nth-of-type(2) > div:last-of-type span:nth-of-type(4), +section:nth-of-type(2) > article > div:nth-of-type(2) > div:last-of-type span:nth-of-type(5), +section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type span:nth-of-type(3), +section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type span:nth-of-type(4), +section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type span:nth-of-type(5), +section:nth-of-type(2) > article > div:nth-of-type(4) > div:last-of-type span:nth-of-type(3), +section:nth-of-type(2) > article > div:nth-of-type(4) > div:last-of-type span:nth-of-type(4), +section:nth-of-type(2) > article > div:nth-of-type(4) > div:last-of-type span:nth-of-type(5), +section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type span:nth-of-type(3), +section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type span:nth-of-type(4), +section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type span:nth-of-type(5){ + letter-spacing: -0.125px; +} +section:nth-of-type(2) > article > div:nth-of-type(2) > div:last-of-type button, +section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type button, +section:nth-of-type(2) > article > div:nth-of-type(4) > div:last-of-type button, +section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type button{ + margin-top: 32px; + padding: 12px 23px; + border-radius: 5px; + text-transform: uppercase; + letter-spacing: 2.5px; + background-color: white; + border: 2px solid black; +} +section:nth-of-type(2) > article > div:nth-of-type(2) > div:first-of-type{ + background: linear-gradient( + rgba(0, 0, 0, 0.3), + rgba(0, 0, 0, 0.3) + ), url('images/pic01.jpg'); +} +section:nth-of-type(2) > article > div:nth-of-type(3) > div:first-of-type{ + background: linear-gradient( + rgba(0, 0, 0, 0.3), + rgba(0, 0, 0, 0.3) + ),url('images/pic02.jpg'); + padding: 107px 0px 0 89px; +} +section:nth-of-type(2) > article > div:nth-of-type(4) > div:first-of-type{ + background: linear-gradient( + rgba(0, 0, 0, 0.3), + rgba(0, 0, 0, 0.3) + ),url('images/pic03.jpg'); + padding: 107px 0px 0 90px; +} +section:nth-of-type(2) > article > div:nth-of-type(5) > div:first-of-type{ + background: linear-gradient( + rgba(0, 0, 0, 0.3), + rgba(0, 0, 0, 0.3) + ),url('images/pic04.jpg'); + padding: 107px 0px 0 100px; +} \ No newline at end of file diff --git a/index.html b/index.html index e69de29..60ae36b 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,94 @@ + + + + + + + HTML CSS Final + + + +
+

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 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. +

+ +
+
+
+
+

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 dapibus lacus non
+ ornare. +

+ +
+
+
+
+

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 dapibus lacus non
+ ornare. +

+ +
+
+
+
+

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 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.

+ +
+
+
+
+ + \ No newline at end of file diff --git a/user.json b/user.json index 4ac80a0..f463234 100644 --- a/user.json +++ b/user.json @@ -1,4 +1,4 @@ { - "name": "", - "email": "" + "name": "Vince Gerard F. Ludovice", + "email": "vince.ludovice@boom.camp" } From 8ae78975aa7a2c1bddcabeb370034e323fe4c3b7 Mon Sep 17 00:00:00 2001 From: vincegludovice Date: Wed, 9 Oct 2019 17:36:49 +0800 Subject: [PATCH 2/4] HTML CSS Final Submission --- index.css | 21 ++++++++++++++++++--- index.html | 3 ++- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/index.css b/index.css index 0c90fc0..7fd1037 100644 --- a/index.css +++ b/index.css @@ -95,23 +95,38 @@ section:nth-of-type(2) > article > div:last-of-type > div > p{ letter-spacing: 0.085px; } section:nth-of-type(2) > article > div:first-of-type > div > p{ - line-height: 27px; + line-height: 26px; padding: 48.5px 6px 31px 9.25px; + letter-spacing: 0.01px; } section:nth-of-type(2) > article > div:last-of-type > div > p{ padding: 48.5px 7px 33px 8px; letter-spacing: 0.11px; color: #666666; } +section:nth-of-type(2) > article > div:first-of-type > div > h3{ + padding-left: 1px; + margin-top: 1px; +} +section:nth-of-type(2) > article > div:first-of-type > div > p{ + padding-left: 7px; +} +section:nth-of-type(2) > article > div:first-of-type > div > p > span{ + margin-left: 0; + letter-spacing: 0.09px; +} section:nth-of-type(2) > article > div:first-of-type > div > button, section:nth-of-type(2) > article > div:last-of-type > div > button{ text-transform: uppercase; - border: 1px solid black; - border-radius: 5px; + border: 2px solid #666; + border-radius: 2px; margin-left: 3px; padding: 14px 30px 15px 36px; letter-spacing: 3.75px; } +section:nth-of-type(2) > article > div:first-of-type > div > button{ + margin-top: 1px; +} section:nth-of-type(2) > article > div:last-of-type > div > button{ background-color: transparent; } diff --git a/index.html b/index.html index 60ae36b..ee123b1 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,8 @@

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.

+

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.

From 69ff7aa8e72c4d3fe06db80eade8eef4fef3fe43 Mon Sep 17 00:00:00 2001 From: vincegludovice <56061835+vincegludovice@users.noreply.github.com> Date: Thu, 10 Oct 2019 02:05:49 +0800 Subject: [PATCH 3/4] Update index.html --- index.html | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index ee123b1..5f72b25 100644 --- a/index.html +++ b/index.html @@ -17,13 +17,15 @@

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.

+

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

@@ -39,6 +41,7 @@

feugiat et faucibus

+

blandit adipiscing

@@ -54,6 +57,7 @@

blandit adipiscing

+

lorem massa nulla

@@ -69,6 +73,7 @@

lorem massa nulla

+

ipsum sed tempus

@@ -92,4 +97,4 @@

Lorem ipsum dolor

- \ No newline at end of file + From 22f63a59fe0cf9282ca8e439d99da2b6421456f2 Mon Sep 17 00:00:00 2001 From: vincegludovice <56061835+vincegludovice@users.noreply.github.com> Date: Thu, 10 Oct 2019 02:06:14 +0800 Subject: [PATCH 4/4] Update index.css --- index.css | 186 ++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 147 insertions(+), 39 deletions(-) diff --git a/index.css b/index.css index 7fd1037..2f62f38 100644 --- a/index.css +++ b/index.css @@ -11,6 +11,8 @@ html, body{ font-family: Helvetica, sans-serif; font-size: 16px; + font-size: 12pt; + line-height: 1.65; } body { height: 100vh; @@ -33,13 +35,13 @@ section:first-of-type h1{ text-transform: capitalize; font-weight: 100; font-size: 60px; - line-height: 96px; + line-height: 95px; letter-spacing: 1px; } section:first-of-type hr{ background-color: white; height: 2px; - width: 12.25rem; + width: 12.3rem; } section:nth-of-type(2){ width: 100%; @@ -106,7 +108,6 @@ section:nth-of-type(2) > article > div:last-of-type > div > p{ } section:nth-of-type(2) > article > div:first-of-type > div > h3{ padding-left: 1px; - margin-top: 1px; } section:nth-of-type(2) > article > div:first-of-type > div > p{ padding-left: 7px; @@ -126,6 +127,14 @@ section:nth-of-type(2) > article > div:last-of-type > div > button{ } section:nth-of-type(2) > article > div:first-of-type > div > button{ margin-top: 1px; + text-transform: uppercase; + border: 2px solid #666; + border-radius: 5px; + margin-left: 3px; + width: 38.5%; + padding: 15px 0; + letter-spacing: 3.75px; + text-align: center; } section:nth-of-type(2) > article > div:last-of-type > div > button{ background-color: transparent; @@ -134,8 +143,8 @@ section:nth-of-type(2) > article button{ background-color: white; } section:nth-of-type(2) > article > div:last-of-type{ - margin-top: 70px; - border-bottom: 1px solid #d3d3d3; + margin-top: 71px; + border-bottom: 2px solid #d3d3d3; } section:nth-of-type(2) > article > div:nth-of-type(2), section:nth-of-type(2) > article > div:nth-of-type(3), @@ -158,6 +167,7 @@ section:nth-of-type(2) > article > div:nth-of-type(3), section:nth-of-type(2) > article > div:nth-of-type(4) section:nth-of-type(2) > article > div:nth-of-type(5){ margin-left: 2px; + border-radius: 4px; } section:nth-of-type(2) > article > div:nth-of-type(2) > div:first-of-type, section:nth-of-type(2) > article > div:nth-of-type(3) > div:first-of-type, @@ -171,20 +181,38 @@ section:nth-of-type(2) > article > div:nth-of-type(5) > div:first-of-type{ letter-spacing: 6px; font-size: 17px; } +section:nth-of-type(2) > article > div:nth-of-type(2) > div:first-of-type > *, +section:nth-of-type(2) > article > div:nth-of-type(3) > div:first-of-type > *, +section:nth-of-type(2) > article > div:nth-of-type(4) > div:first-of-type > *, +section:nth-of-type(2) > article > div:nth-of-type(5) > div:first-of-type > *{ + position: relative; +} + section:nth-of-type(2) > article > div:nth-of-type(2) > div:last-of-type, section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type, section:nth-of-type(2) > article > div:nth-of-type(4) > div:last-of-type, section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type{ - padding: 47px 0px 0 0; text-align: center; - font-size: 16.5px; - line-height: 26px; - letter-spacing: -0.2px; + font-size: 16.5px; + line-height: 27px; + margin-left: -4px; + letter-spacing: -0.19px; } -section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type, -section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type{ +section:nth-of-type(2) > article > div:nth-of-type(2) > div:last-of-type{ padding: 47px 0px 0 0; - margin-left: -4px; + margin-left: -1px; +} +section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type{ + padding: 47px 0px 0 0; + margin-left: -4px; +} +section:nth-of-type(2) > article > div:nth-of-type(4) > div:last-of-type{ + padding: 47px 0px 0 0; + margin-left: 3px; +} +section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type{ + padding: 47px 0px 0 0; + margin-left: -3px; } section:nth-of-type(2) > article > div > div:last-of-type > p{ color: #888888; @@ -208,38 +236,118 @@ section:nth-of-type(2) > article > div:nth-of-type(2) > div:last-of-type button, section:nth-of-type(2) > article > div:nth-of-type(3) > div:last-of-type button, section:nth-of-type(2) > article > div:nth-of-type(4) > div:last-of-type button, section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type button{ - margin-top: 32px; - padding: 12px 23px; - border-radius: 5px; - text-transform: uppercase; - letter-spacing: 2.5px; - background-color: white; - border: 2px solid black; + margin-top: 30px; + width: 100px; + height: 44px; + padding-left: 4px; + /* padding: 12px 23px 12px 27px; */ + border-radius: 5px; + text-transform: uppercase; + letter-spacing: 2.5px; + background-color: white; + border: 2px solid #666; +} +section:nth-of-type(2) > article > div:nth-of-type(4) > div:last-of-type button, +section:nth-of-type(2) > article > div:nth-of-type(5) > div:last-of-type button{ + height: 42px; + margin-top: 32px; +} +section:nth-of-type(2) > article > div:nth-of-type(2) > div, +section:nth-of-type(2) > article > div:nth-of-type(3) > div, +section:nth-of-type(2) > article > div:nth-of-type(4) > div, +section:nth-of-type(2) > article > div:nth-of-type(5) > div{ + position: relative; + overflow: hidden; } +/* +section:nth-of-type(2) > article > div:nth-of-type(2) > div:first-of-type{ + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.25); + background-image: url('images/pic01.jpg'); +} +*/ + + section:nth-of-type(2) > article > div:nth-of-type(2) > div:first-of-type{ - background: linear-gradient( - rgba(0, 0, 0, 0.3), - rgba(0, 0, 0, 0.3) - ), url('images/pic01.jpg'); + padding: 107px 0px 0 79px; } section:nth-of-type(2) > article > div:nth-of-type(3) > div:first-of-type{ - background: linear-gradient( - rgba(0, 0, 0, 0.3), - rgba(0, 0, 0, 0.3) - ),url('images/pic02.jpg'); - padding: 107px 0px 0 89px; + padding: 107px 0px 0 90px; } section:nth-of-type(2) > article > div:nth-of-type(4) > div:first-of-type{ - background: linear-gradient( - rgba(0, 0, 0, 0.3), - rgba(0, 0, 0, 0.3) - ),url('images/pic03.jpg'); - padding: 107px 0px 0 90px; + padding: 107px 0px 0 89px; } section:nth-of-type(2) > article > div:nth-of-type(5) > div:first-of-type{ - background: linear-gradient( - rgba(0, 0, 0, 0.3), - rgba(0, 0, 0, 0.3) - ),url('images/pic04.jpg'); - padding: 107px 0px 0 100px; -} \ No newline at end of file + padding: 107px 0px 0 98px; +} + + +section:nth-of-type(2) > article > div:nth-of-type(2) > div:first-of-type a, +section:nth-of-type(2) > article > div:nth-of-type(3) > div:first-of-type a, +section:nth-of-type(2) > article > div:nth-of-type(4) > div:first-of-type a, +section:nth-of-type(2) > article > div:nth-of-type(5) > div:first-of-type a{ + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + } +section:nth-of-type(2) > article > div:nth-of-type(2) > div:first-of-type a:before, +section:nth-of-type(2) > article > div:nth-of-type(3) > div:first-of-type a:before, +section:nth-of-type(2) > article > div:nth-of-type(4) > div:first-of-type a:before, +section:nth-of-type(2) > article > div:nth-of-type(5) > div:first-of-type a:before{ + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.25); +} +h3{ + color: white; + font-weight: 400; + line-height: 1.5; + text-transform: uppercase; + letter-spacing: 0.33rem; + margin-top: -2px; + font-size: 1.25em; +} +section:nth-of-type(2) > article > div:first-of-type > div > p{ + line-height: 26px; + letter-spacing: 0.085px; + padding-top: 21.5px; + margin-left: -1px; +} +section:nth-of-type(2) > article > div > div > p{ + color: #666666; +} +section:nth-of-type(2) > article > div:last-of-type > div > p{ + line-height: 27px; + letter-spacing: 0.14px; + padding-top: 48.5px; + margin-left: -1px; +} +section:nth-of-type(2) > article > div:first-of-type > div > h3{ + margin: 0 0 1em 0; + color: #444444; +} +section:nth-of-type(2) > article > div:last-of-type > div > h3{ + color: #444444; +} +section:nth-of-type(2) > article > div:last-of-type > div > button{ + width: 202px; + height: 48px; + padding: 0; +}