From 7461eb9c97dcab3f4a401b377b542cf2f420b620 Mon Sep 17 00:00:00 2001 From: nmuchiri Date: Sat, 22 Aug 2020 09:21:46 -0400 Subject: [PATCH] CSS-positioning-practice --- .vscode/launch.json | 22 ++++++++++++ css/style.css | 85 ++++++++++++++++++++++++++++++++++++++++++++- flex-vs-grid.md | 1 + index.html | 42 ++++++++++++++++++++-- san-francisco.jpg | 0 5 files changed, 147 insertions(+), 3 deletions(-) create mode 100644 .vscode/launch.json create mode 100644 flex-vs-grid.md create mode 100644 san-francisco.jpg diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..34811f1 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,22 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "name": "Launch Chrome", + "request": "launch", + "type": "pwa-chrome", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + }, + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:8080", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 26f119b..3858c07 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,86 @@ h1 { - color: salmon; + color: grey; + text-align: center; } + +h2 { + color:grey; + text-align: center; +} +.row1{ + display: flex; + margin: 10px; +} +.container1{ + position: relative; + text-align: center; + color: white; + font-size: 30px; + flex: 33.33%; + padding: 10px; + +} +.row2{ + display: flex; + margin: 10px; +} +.container2{ + position: relative; + text-align: center; + color: white; + font-size: 30px; + flex: 33.33%; + padding: 10px; +} +.San-Francisco{ + position: absolute; + top: 50%; + left: 50%; +} +.New-York{ + position: absolute; + top: 50%; + left: 50%; +} + +.London{ + position: absolute; + top: 50%; + left: 50%; +} +.Napa{ + position: absolute; + top: 50%; + left: 50%; +} +.sonoma{ + position: absolute; + top: 50%; + left: 50%; +} +.San-Francisco-2{ + position: absolute; + top: 50%; + left: 50%; +} +.box { + width: 320px; + padding: 10px; + border: 5px solid grey; + margin: 0; + text-align: center; + position: relative; + top: 50%; + left: 50%; +} +.box2{ + width: 320px; + padding: 10px; + border: 5px solid grey; + margin: 1; + +} + +body{ + background-color: lightgrey; +} \ No newline at end of file diff --git a/flex-vs-grid.md b/flex-vs-grid.md new file mode 100644 index 0000000..354c2a8 --- /dev/null +++ b/flex-vs-grid.md @@ -0,0 +1 @@ + I generally found flex to be easier to use than grid. However I would have to practice using both to really understand what the commands are doing and how to use them more effectively. I think matching the color of the frogs and the color of the lily pads also helped me visualize the reverse-row or reverse-column commands.I think matching the color of the frogs and the color of the lily pads also helped me visualize the reverse-row or reverse-column commands. diff --git a/index.html b/index.html index 8cd37ff..2080cad 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,47 @@ - Hello Front-End + Airbnb-Mock-Website -

Hello Front-End

+

Meet Guidebooks

+

Discover hundreds of local spots recommended by Airbnb hosts

+
+
+ +
San-Francisco
+
+
+ +
New-York
+ +
+
+ +
London
+
+
+ +
See All Guidebooks
+

Just for the weekend

+

Discover new, exciting places close to home

+ +
+
+ +
Napa
+
+
+ +
Sonoma
+
+
+
+ +
San-Francisco
+
+ +See all destinations
+ diff --git a/san-francisco.jpg b/san-francisco.jpg new file mode 100644 index 0000000..e69de29