From 945f9de63648c9116e6d375fe3656db2c6e1be62 Mon Sep 17 00:00:00 2001 From: Gabbytam Date: Fri, 21 Aug 2020 17:57:05 -0400 Subject: [PATCH 1/5] Testing out pushing initial change to github --- flex-vs-grid.md | 1 + index.html | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) create mode 100644 flex-vs-grid.md diff --git a/flex-vs-grid.md b/flex-vs-grid.md new file mode 100644 index 0000000..05392b3 --- /dev/null +++ b/flex-vs-grid.md @@ -0,0 +1 @@ +Flexbox and grid are both a type of CSS styling that work with display. Grid allows for my specific value inputs while flexbox seems that its more determined by loose concepts such as left/right/top/bottom/center. With grid tyling you can establish different sizing for the template and from there the ordering and placement of items are more determined by number placement within rows and columns. Another big difference between the two is that flexbox is single-axis oriented and grid optimizes 2-dimensional layouts(cells can take up multiple rows and columns). diff --git a/index.html b/index.html index 8cd37ff..d9a231c 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,10 @@ - Hello Front-End + Airbnb -

Hello Front-End

+

Meet Guidebooks

+

Discover hundreds of local spots recommended by Airbnb hosts

From 68c2397e39b423eb966287bfeeeb864ef8c5afc2 Mon Sep 17 00:00:00 2001 From: Gabbytam Date: Fri, 21 Aug 2020 19:18:23 -0400 Subject: [PATCH 2/5] added all html elements --- index.html | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d9a231c..c53eb4a 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,34 @@ Airbnb -

Meet Guidebooks

-

Discover hundreds of local spots recommended by Airbnb hosts

+
+

Meet Guidebooks

+

Discover hundreds of local spots recommended by Airbnb hosts

+
+ +
+ + + +
+ +
+ +
+ +
+

Just for the weekend

+

Discover new, inspiring places close to home.

+
+ +
+ + + +
+
+ +
+ From ab45dd99fd642b33242da3429659c28df07926bc Mon Sep 17 00:00:00 2001 From: Gabbytam Date: Fri, 21 Aug 2020 22:10:31 -0400 Subject: [PATCH 3/5] taking waaaay too long messing around with grid styling, I dont get it --- css/style.css | 71 +++++++++++++++++++++++++++++++++++++++++++++++++-- index.html | 60 +++++++++++++++++++++++++++---------------- 2 files changed, 107 insertions(+), 24 deletions(-) diff --git a/css/style.css b/css/style.css index 26f119b..5abc813 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,70 @@ -h1 { - color: salmon; +body { + max-height: 600px; + max-width: 800px; + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr 2fr; + grid-template-rows: 1fr 2fr 1fr 1fr 2fr 1fr; + grid-gap: 15px; + text-align: center; + background-color: #edefec; + color: #414344; + /* font-family taken from current Airbnb website */ + font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important; } + +.photo { + width: 100%; + height: 100%; + object-fit: cover; +} + + +#item1 { + grid-column: 2 / 5; + grid-row: 1 / 2; +} + +#item2 { + grid-column: 2 / 3; + grid-row: 2 / 3; +} + +#item3 { + grid-column: 3 / 4; + grid-row: 2 / 3; +} + +#item4 { + grid-column: 4 / 5; + grid-row: 2 / 3; +} + +#item5 { + grid-column: 3 / 4; + grid-row: 3 / 4; +} + +#item6 { + grid-column: 2 / 5; + grid-row: 4 / 5; +} + +#item7 { + grid-column: 2 / 3; + grid-row: 5 / 6; +} + +#item8 { + grid-column: 3 / 4; + grid-row: 5 / 6; +} + +#item9 { + grid-column: 4 / 5; + grid-row: 5 / 6; +} + +#item10 { + grid-column: 3 / 4; + grid-row: 7 / 8; +} \ No newline at end of file diff --git a/index.html b/index.html index c53eb4a..3408baa 100644 --- a/index.html +++ b/index.html @@ -6,35 +6,51 @@ Airbnb + -
-

Meet Guidebooks

-

Discover hundreds of local spots recommended by Airbnb hosts

-
+
+
Meet Guidebooks
+
Discover hundreds of local spots recommended by Airbnb hosts
+
-
- - - -
+
+ +

San Francisco

+
+
+ +

New York

+
+
+ +

London

+
-
+
-
-

Just for the weekend

-

Discover new, inspiring places close to home.

-
- -
- - - -
-
+
+
Just for the weekend
+
Discover new, inspiring places close to home.
+
+ +
+ +

Napa

+
+
+ +

Sonoma

+
+
+ +

San Francisco

+
+ +
- + From a70118599b20e980e0558a05b68cab264731ab9a Mon Sep 17 00:00:00 2001 From: Gabbytam Date: Fri, 21 Aug 2020 23:24:12 -0400 Subject: [PATCH 4/5] final changes, lots more messing around. Looks pretty similar --- css/style.css | 40 +++++++++++++++++++++++++++++++++++----- index.html | 24 ++++++++++++------------ 2 files changed, 47 insertions(+), 17 deletions(-) diff --git a/css/style.css b/css/style.css index 5abc813..37ee2b0 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,8 @@ body { - max-height: 600px; - max-width: 800px; + display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr 2fr; - grid-template-rows: 1fr 2fr 1fr 1fr 2fr 1fr; + grid-template-columns: 1fr 200px 200px 200px 1fr; + grid-template-rows: 60px 220px 60px 60px 220px 100px; grid-gap: 15px; text-align: center; background-color: #edefec; @@ -12,12 +11,43 @@ body { font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important; } +h5 { + font-weight: 500; + font-size: 18px; + margin-top: 2px; + margin-bottom: 2px; +} + +.imgtxt { + color: white; + font-weight: 500; + font-size: 20px; + margin-top: -120px; +} + +p.subtxt { + font-size: 10px; + margin-bottom: 10px; +} + + .photo { width: 100%; height: 100%; object-fit: cover; } +button { + height: 30px; + width: 200px; + margin-top: 15px; + background-color: white; + border: none; + color: #414344; + font-size: 8px; + font-family: Circular,-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif !important; +} + #item1 { grid-column: 2 / 5; @@ -66,5 +96,5 @@ body { #item10 { grid-column: 3 / 4; - grid-row: 7 / 8; + grid-row: 6 / 7; } \ No newline at end of file diff --git a/index.html b/index.html index 3408baa..3ae42a1 100644 --- a/index.html +++ b/index.html @@ -9,43 +9,43 @@
-
Meet Guidebooks
-
Discover hundreds of local spots recommended by Airbnb hosts
+
Meet Guidebooks
+

Discover hundreds of local spots recommended by Airbnb hosts

-

San Francisco

+

San Francisco

-

New York

+

New York

-

London

+

London

- +
-
Just for the weekend
-
Discover new, inspiring places close to home.
-
+
Just for the weekend
+

Discover new, inspiring places close to home.

+
-

Napa

+

Napa

-

Sonoma

+

Sonoma

-

San Francisco

+

San Francisco

From 974caf4195954ca704aac00202571dc8415b856c Mon Sep 17 00:00:00 2001 From: Gabbytam Date: Sat, 22 Aug 2020 00:01:57 -0400 Subject: [PATCH 5/5] final words/my testimony --- finished.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 finished.txt diff --git a/finished.txt b/finished.txt new file mode 100644 index 0000000..fed6a25 --- /dev/null +++ b/finished.txt @@ -0,0 +1 @@ +"I'm pretty happy with the way my final product looks on my own full-screen. That being said, it is not a responsive design and would not do well on a browser that isnt full screen and a laptop. I honestly spent a lot of time on this and I'm not even sure I did it right I just found ways that made it work...sorta. Games were fun but putting the concepts into use was a lot harder. Did a good amount of googling but I do still have questions and would love feedback and suggestions because, again, I feel like I did it wrong. Visually they are very similar but I just couldn't figure out how to get that slim border around my button. Better luck next time!" \ No newline at end of file