From 6b33490c82f067b4bc033bd8001dd4399ef35930 Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 13:34:47 -0500 Subject: [PATCH 01/14] Created flex vs grid file --- flex-vs-grid.md | 0 1 file changed, 0 insertions(+), 0 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..e69de29 From 850596469c4aa73c47c4358e08c3ec8d7d800e03 Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 13:56:09 -0500 Subject: [PATCH 02/14] Talked about the diff between flexbox and grid --- flex-vs-grid.md | 1 + 1 file changed, 1 insertion(+) diff --git a/flex-vs-grid.md b/flex-vs-grid.md index e69de29..653c013 100644 --- a/flex-vs-grid.md +++ b/flex-vs-grid.md @@ -0,0 +1 @@ +# The difference between Flexbox and grid that I saw is that in flexbox i was able to wrap whatever I am working on to the next row. With grid, I would have to give it a different row for the others to go to the next row. Another difference is that with grid, you are using an actual grid. Flexbox equals no grid. \ No newline at end of file From 29ffaf3f871a243fda1c5939fb1c2c19f3d46a3d Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 14:09:19 -0500 Subject: [PATCH 03/14] Added the similarities into flex vs grid --- flex-vs-grid.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/flex-vs-grid.md b/flex-vs-grid.md index 653c013..da14133 100644 --- a/flex-vs-grid.md +++ b/flex-vs-grid.md @@ -1 +1,3 @@ -# The difference between Flexbox and grid that I saw is that in flexbox i was able to wrap whatever I am working on to the next row. With grid, I would have to give it a different row for the others to go to the next row. Another difference is that with grid, you are using an actual grid. Flexbox equals no grid. \ No newline at end of file +# The difference between Flexbox and grid that I saw is that in flexbox i was able to wrap whatever I am working on to the next row. With grid, I would have to give it a different row for the others to go to the next row. Another difference is that with grid, you are using an actual grid. Flexbox equals no grid. + +## The similarities may be the fact that both move things to different places on the screen. I notice that when using both, you are just telling the computer what position you want the object to go to. \ No newline at end of file From 18ab5db96f174343a761636368b0e7b4beffc9db Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 14:12:11 -0500 Subject: [PATCH 04/14] Seeing if push worked in flex vs grid --- flex-vs-grid.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/flex-vs-grid.md b/flex-vs-grid.md index da14133..698bd65 100644 --- a/flex-vs-grid.md +++ b/flex-vs-grid.md @@ -1,3 +1,5 @@ # The difference between Flexbox and grid that I saw is that in flexbox i was able to wrap whatever I am working on to the next row. With grid, I would have to give it a different row for the others to go to the next row. Another difference is that with grid, you are using an actual grid. Flexbox equals no grid. -## The similarities may be the fact that both move things to different places on the screen. I notice that when using both, you are just telling the computer what position you want the object to go to. \ No newline at end of file +## The similarities may be the fact that both move things to different places on the screen. I notice that when using both, you are just telling the computer what position you want the object to go to. + +### Just Trying to see if I am pushing correctly. \ No newline at end of file From 9221c6d092d9e1e87b5b9729809f182d54b1ba19 Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 14:14:32 -0500 Subject: [PATCH 05/14] This is fun --- flex-vs-grid.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/flex-vs-grid.md b/flex-vs-grid.md index 698bd65..d993bea 100644 --- a/flex-vs-grid.md +++ b/flex-vs-grid.md @@ -2,4 +2,6 @@ ## The similarities may be the fact that both move things to different places on the screen. I notice that when using both, you are just telling the computer what position you want the object to go to. -### Just Trying to see if I am pushing correctly. \ No newline at end of file +### Just Trying to see if I am pushing correctly. + +#### Im sorry! This has nothing to do with the assignment. Im just glad I am finally being able to push. \ No newline at end of file From 9830169619b75d42cc0c42aaf8a64d5890ab84e3 Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 16:12:08 -0500 Subject: [PATCH 06/14] checkpoint 1 --- css/style.css | 13 ++++++++++++- index.html | 15 ++++++++++++++- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 26f119b..25b3909 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,14 @@ +body { + background: lightgray +} + h1 { - color: salmon; + color: rgb(87, 82, 82); + text-align: center; +} + +h2 { + color: rgb(87, 82, 82); + text-align: center; + font-size: 12px; } diff --git a/index.html b/index.html index 8cd37ff..9726193 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,19 @@ Hello Front-End -

Hello Front-End

+

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

+ From 34d70e205998e81d5afb26f9b750c08b5fff304f Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 16:16:48 -0500 Subject: [PATCH 07/14] First rough draft of Airbnb --- index.html | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/index.html b/index.html index 9726193..0e2b852 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,15 @@

Discover hundreds of local spots recommended by Airbnb hosts

Just for the weekend

Discover new, inspiring places close to home

+
+

Napa

+
+
+

Sonoma

+
+
+

San Francisco

+
From 37edef9a5cdf595def77a134faba1f343df3eccd Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 17:43:37 -0500 Subject: [PATCH 08/14] Added all the pictures to the page --- css/style.css | 15 +++++++++++++++ index.html | 20 ++++++++++++++++++-- 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 25b3909..bc896c2 100644 --- a/css/style.css +++ b/css/style.css @@ -5,6 +5,7 @@ body { h1 { color: rgb(87, 82, 82); text-align: center; + font-size: 30px } h2 { @@ -12,3 +13,17 @@ h2 { text-align: center; font-size: 12px; } + +p { + color: white; + font-size: 30px; + +} + +div { + display: flex; + flex-direction: column; +} +.San1 { + border-radius: 200px; +} diff --git a/index.html b/index.html index 0e2b852..7e3a7a5 100644 --- a/index.html +++ b/index.html @@ -4,30 +4,46 @@ - Hello Front-End + AirBnb +

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

+

Napa

+
+

Sonoma

+
+

San Francisco

+
From 63fe7770bd4aeb6b2d15db3f44323f206fec14cf Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 18:06:10 -0500 Subject: [PATCH 09/14] I made the the first set of pics to go side by side --- css/style.css | 9 +++------ index.html | 30 ++++++++++++++++-------------- 2 files changed, 19 insertions(+), 20 deletions(-) diff --git a/css/style.css b/css/style.css index bc896c2..98f3c03 100644 --- a/css/style.css +++ b/css/style.css @@ -20,10 +20,7 @@ p { } -div { - display: flex; - flex-direction: column; +.first { + display: flex; + flex-direction: space-around; } -.San1 { - border-radius: 200px; -} diff --git a/index.html b/index.html index 7e3a7a5..235d06f 100644 --- a/index.html +++ b/index.html @@ -12,19 +12,21 @@

Meet Guidebooks

Discover hundreds of local spots recommended by Airbnb hosts

-
-

San Francisco

- -
- -
-

New York

- -
- -
-

London

- +
+
+

San Francisco

+ +
+ +
+

New York

+ +
+ +
+

London

+ +

Just for the weekend

@@ -41,7 +43,7 @@

Discover new, inspiring places close to home

-
+

San Francisco

From 60cfcfe48ca02f2424cd2e3462318390b07a0b78 Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 18:09:31 -0500 Subject: [PATCH 10/14] The second set of pics are now side by side --- css/style.css | 5 +++++ index.html | 29 ++++++++++++++++------------- 2 files changed, 21 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 98f3c03..f3207ad 100644 --- a/css/style.css +++ b/css/style.css @@ -24,3 +24,8 @@ p { display: flex; flex-direction: space-around; } + +.second { + display: flex; + flex-direction: space-around; +} diff --git a/index.html b/index.html index 235d06f..f3f20e9 100644 --- a/index.html +++ b/index.html @@ -33,19 +33,22 @@

Just for the weekend

Discover new, inspiring places close to home

-
-

Napa

- -
- -
-

Sonoma

- -
- -
-

San Francisco

- +
+ +
+

Napa

+ +
+ +
+

Sonoma

+ +
+ +
+

San Francisco

+ +
From 4e514c7edf57cf65757e23f0b9cc0a9d597c9596 Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 18:34:36 -0500 Subject: [PATCH 11/14] Spaced the pictures apart --- css/style.css | 9 +++++---- index.html | 16 ++++++++-------- 2 files changed, 13 insertions(+), 12 deletions(-) diff --git a/css/style.css b/css/style.css index f3207ad..c0a727b 100644 --- a/css/style.css +++ b/css/style.css @@ -20,12 +20,13 @@ p { } -.first { +.places { display: flex; - flex-direction: space-around; + justify-content: center; + padding: 5%; } -.second { +.row { display: flex; - flex-direction: space-around; + justify-content: space-around; } diff --git a/index.html b/index.html index f3f20e9..2e689f2 100644 --- a/index.html +++ b/index.html @@ -12,18 +12,18 @@

Meet Guidebooks

Discover hundreds of local spots recommended by Airbnb hosts

-
-
+
+

San Francisco

-
+

New York

-
+

London

@@ -33,19 +33,19 @@

Just for the weekend

Discover new, inspiring places close to home

-
+
-
+

Napa

-
+

Sonoma

-
+

San Francisco

From 5551179b24eaa2c6d463dc36c87fe561f80cc516 Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 19:17:46 -0500 Subject: [PATCH 12/14] Placed pictures so they arent touching --- css/style.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index c0a727b..d0354b3 100644 --- a/css/style.css +++ b/css/style.css @@ -17,12 +17,19 @@ h2 { p { color: white; font-size: 30px; +} +img { + max-width: 75%; + max-height: 100%; + border-radius: 25px; + display: flex; + justify-content: space-around; } .places { display: flex; - justify-content: center; + justify-content: space-around; padding: 5%; } From 40cde910a4cbb541fd9d4daf22f669e3034e94f6 Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 19:24:43 -0500 Subject: [PATCH 13/14] Put the places inside of the images --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index d0354b3..68033b3 100644 --- a/css/style.css +++ b/css/style.css @@ -17,6 +17,7 @@ h2 { p { color: white; font-size: 30px; + position: absolute; } img { From 203e3334f0f7ee8143897c7d815ee2ded5d692ff Mon Sep 17 00:00:00 2001 From: NatrezC Date: Fri, 21 Aug 2020 20:48:00 -0500 Subject: [PATCH 14/14] Final product --- css/style.css | 14 +++++++++++++- index.html | 3 +++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 68033b3..26bd6bd 100644 --- a/css/style.css +++ b/css/style.css @@ -14,7 +14,19 @@ h2 { font-size: 12px; } +h3 { + text-align: center; + color: rgb(87, 82, 82); + font-size: 25px; + margin: 5 auto; + border: solid black; + background-size: cover; + background-position: center; + background-color: white; + margin: auto 20px; +} p { + font-weight: bold; color: white; font-size: 30px; position: absolute; @@ -23,7 +35,7 @@ p { img { max-width: 75%; max-height: 100%; - border-radius: 25px; + border-radius: 10px; display: flex; justify-content: space-around; } diff --git a/index.html b/index.html index 2e689f2..e6195f9 100644 --- a/index.html +++ b/index.html @@ -28,6 +28,8 @@

Discover hundreds of local spots recommended by Airbnb hosts

+ +

See all Guidebooks

Just for the weekend

@@ -51,5 +53,6 @@

Discover new, inspiring places close to home

+

See all Destinations