diff --git a/css/style.css b/css/style.css index 26f119b..1314514 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,61 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); + +body { + font-family: 'Roboto', sans-serif; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + background-color: lightgray; +} + h1 { - color: salmon; + color:dimgray; + margin-bottom: 0.5px; + font-size: 48px; +} + +p { + color: dimgray; + font-size: 22px; + margin-top: 5px; +} + +button { + margin: 40px; + width: 500px; + height: 40px; + font-size: 20px; + color: dimgray; + font-weight: bold; +} + +.row { + display: flex; + align-items: center; +} + +.column { + position: relative; + flex: 33.3%; + padding: 20px; +} + +img { + height: 600px; + width: 500px; +} + +h2 { + position: absolute; + top: 250px; + left: 175px; + width: 100%; + color: white; + font-size: 48px; } + +#long { + left: 100px; +} \ No newline at end of file diff --git a/flex-vs-grid.md b/flex-vs-grid.md new file mode 100644 index 0000000..b267596 --- /dev/null +++ b/flex-vs-grid.md @@ -0,0 +1 @@ +# I learned that in grid, there are columns and rows that are specified to different length values set in percentages, fr or pixels. You can specify where to start and end in each row and column. Grid uses negative values to count from opposite direction while flexbox uses negative values to rearrange items. Span value can be used in grid. Both grid and flexbox use a vertical and horizontal axis however in flexbox you can reverse the rows and columns. In flexbox you can make the columns and rows wide apart or close together based on the spacing in between or the space around. There is also text wrap in flexbox. Both grid and flexbox use justify-items and align-items. \ No newline at end of file diff --git a/index.html b/index.html index 8cd37ff..b8b78a9 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,42 @@ -
Discover hundreds of local spots recommended by Airbnb hosts
+
+
+
+ Discover new, inspiring places close to home.
+
+
+
+