TaylorDarneille · epizarro98 · Aug 20, 2020 · Aug 22, 2020 · Aug 22, 2020 · Aug 22, 2020
diff --git a/flex-vs-grid.md b/flex-vs-grid.md
@@ -0,0 +1 @@
+### Flexbox and grid have similarities but differ in their own way. Flexbox is used more for in-line layout and focused more on keeping things in a row, or in a column but cant do both at the same time. Grid has the capabilities to line things up in two directions, using rows and columns. They mainly do the same thing, except one is a bit more complex than the other.
diff --git a/index copy.html b/index copy.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="css/style.css">
+  <title>Hello Front-End</title>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
+</head>
+<body>
+  <h1 class='num1'><b>Meet Guidebooks</b></h1>
+  <h5 class='discover'>Discover hundreds of local spots recommended by Airbnb hosts</h5>
+
+
+    <img src="img/san-francisco.jpg"></img>
+    <div class='sf'>San Francisco</div>
+
+  <img class='ny' src='img/new-york.jpg'></img>
+  <div class='newyork'>New York</div>
+
+  <img class='london' src='img/london.jpg'></img>
+  <div class='uk'>London</div>
+
+    <div class='box'>
+      See All Guidebooks
+    </div>
+    <div>
+    <h1 class='weekend'>
+      <b>Just for the weekend</b>
+    </div>
+
+<div>
+  <h5 class='home'>Discover new, inspiring places close to home.</h5>
+</div>
+
+<img class='napa' src='img/napa.jpg'></img>
+<div class='napatext'>Napa</div>
+
+<img class='sanoma' src='img/sonoma.jpg'></img>
+<div class='sanomatext'>Sanoma</div>
+
+<img class='sanfran2' src='img/san-francisco-2.jpg'></img>
+<div class='sanfran2text'>San Francisco</div>
+
+<div class='box2'>
+  See All Destinations
+</div>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -7,6 +7,6 @@
   <title>Hello Front-End</title>
 </head>
 <body>
-  <h1>Hello Front-End</h1>
+  <h1>Food</h1>
 </body>
 </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,135 @@
+.num1 {
+  color: #595959;
+  text-align: center;
+  text-emphasis: bold;
+}
+
+.discover {
+  color: gray;
+  text-align: center;
+}
+
+img {
+  margin-left: 300px;
+  width: 250px;
+  height: 250px;
+  margin-top: 0px;
+}
+
+.ny{
+  margin-left: 20px;
+  width: 250px;
+  height: 250px;
+  margin-top: 0px;
+}
+
+.london{
+margin-top: -500px;
+height: 274px;
+weight: 230px;
+margin-left: 850px;
+}
+
+.box{
+  color: #595959;
+  width: 300px;
+  height: 40px;
+  border: 1px solid black;
+  margin-top: 50px;
+  margin-left: 550px;
+  text-align: center;
+}
+
+.weekend{
+  text-align: center;
+  padding: 30px 2px 3px 4px;
+  font-size: 25px;
+  color: #595959;
+}
+
+.home{
+  padding: 1px 2px 3px 4px;
+  text-align: center;
+  color: gray;
+}
+
+.napa{
+  margin-left: 300px;
+  width: 250px;
+  height: 250px;
+}
+
+.sanoma{
+  margin-left: 20px;
+  width: 250px;
+  height: 250px;
+}
+
+.sanfran2{
+  margin-left: 20px;
+  margin-top: 20px;
+  width: 250px;
+  height: 250px;
+}
+
+.box2{
+  color: gray;
+  width: 300px;
+  height: 40px;
+  border: 1px solid black;
+  margin-top: 50px;
+  margin-left: 550px;
+  text-align: center;
+}
+
+body{
+ font-family: 'Noto Sans JP', sans-serif;
+}
+
+.sf{
+  position: absolute;
+  top: 32%;
+  left: 24%;
+  color: white;
+  font-size: 30px;
+}
+
+.newyork{
+  position: absolute;
+  top: 32%;
+  left: 45%;
+  color: white;
+  font-size: 30px;
+}
+
+.uk{
+  position: absolute;
+  top: 32%;
+  left: 65%;
+  color: white;
+  font-size: 30px;
+}
+
+.napatext{
+  position: absolute;
+  top: 103%;
+  left: 28%;
+  color: white;
+  font-size: 30px;
+}
+
+.sanomatext{
+  position: absolute;
+  top: 103%;
+  left: 46%;
+  color: white;
+  font-size: 30px;
+}
+
+.sanfran2text{
+  position: absolute;
+  top: 103%;
+  left: 62%;
+  color: white;
+  font-size: 30px;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		### Flexbox and grid have similarities but differ in their own way. Flexbox is used more for in-line layout and focused more on keeping things in a row, or in a column but cant do both at the same time. Grid has the capabilities to line things up in two directions, using rows and columns. They mainly do the same thing, except one is a bit more complex than the other.