From b91e64f13d893cd9323404f2d363130d6413a98f Mon Sep 17 00:00:00 2001 From: dxk0ta Date: Wed, 8 Mar 2023 09:12:43 -0800 Subject: [PATCH 1/2] code . --- css/style.css | 42 +++++++++++++++++++++++++++++++++++++++++- index.html | 13 ++++++++++++- 2 files changed, 53 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 26f119bf..97fccc1c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,43 @@ +* { + background-color: #d3d3d3; +} h1 { - color: salmon; + color: rgb(74, 68, 68); + text-align: center; + font-size: large; +} + +h2 { + color: rgb(74, 68, 68); + text-align: center; + font-size: small; + font-weight: 100; +} + +.img { + display: flex; + flex-direction: row; + justify-content: center; + height: 150px; + width: 150px; + margin: 0 auto; + padding-left: 10px; + padding-right: 10px; + padding-bottom: 10px; + position: relative; + text: absolute; +} +.img1 { + padding-right: 5px; +} +.img2 { + padding-left: 5px; + padding-right: 5px; +} +.img3 { + padding-left: 5px; } +.button1 { + display: block; + margin: 0 auto; +} \ No newline at end of file diff --git a/index.html b/index.html index 8cd37ffb..c170aa4e 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,17 @@ Hello Front-End -

Hello Front-End

+

Meet Guidebooks

+

Discover hundreds of local spots recommended by Airbnb hosts

+
+ +

San Fransisco

+ +

New York

+ +

London

+
+ + From bfc772cae2ee818a677cc3875743b7f664fa0c70 Mon Sep 17 00:00:00 2001 From: dxk0ta Date: Wed, 8 Mar 2023 10:00:29 -0800 Subject: [PATCH 2/2] solve homework with flexbox --- css/style.css | 66 +++++++++++++++++++++++++-------------------------- index.html | 41 ++++++++++++++++++++++---------- 2 files changed, 62 insertions(+), 45 deletions(-) diff --git a/css/style.css b/css/style.css index 97fccc1c..aa913534 100644 --- a/css/style.css +++ b/css/style.css @@ -1,43 +1,43 @@ * { - background-color: #d3d3d3; + /* browser css reset */ + margin: 0; + box-sizing: border-box; + /* set some basic font styling */ + font-family: "Raleway", sans-serif; + /* use digital color picker to get hex values */ + color: #4b4c4e; } -h1 { - color: rgb(74, 68, 68); - text-align: center; - font-size: large; +body { + background-color: #E9EBE7; } -h2 { - color: rgb(74, 68, 68); - text-align: center; - font-size: small; - font-weight: 100; +button { + padding: 1rem 7rem; } -.img { - display: flex; - flex-direction: row; - justify-content: center; - height: 150px; - width: 150px; - margin: 0 auto; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 10px; - position: relative; - text: absolute; -} -.img1 { - padding-right: 5px; +.card { + display:flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; } -.img2 { - padding-left: 5px; - padding-right: 5px; + +.images { + display: flex; } -.img3 { - padding-left: 5px; + +.images section { + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + text-align: center; } -.button1 { - display: block; - margin: 0 auto; + +.images p { + /* border: yellow 2px solid; */ + position: absolute; + color: white; + font-weight: 600; + font-size: 36px; } \ No newline at end of file diff --git a/index.html b/index.html index c170aa4e..676ff004 100644 --- a/index.html +++ b/index.html @@ -7,17 +7,34 @@ Hello Front-End -

Meet Guidebooks

-

Discover hundreds of local spots recommended by Airbnb hosts

-
- -

San Fransisco

- -

New York

- -

London

+ +
+ +
+

Meet Guidebooks

+

Discover hundreds of local spots recommended by Airbnbn hosts

+
+ +
+ +
+ san francisco +

San Francisco

+
+ +
+ new york +

New York

+
+ +
+ london +

London

+
+
+ +
- - + - + \ No newline at end of file