Skip to content

Natrez Crawford - Mateen CSS-positioning-practice deliverable #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NatrezC wants to merge 14 commits into
base: master
Choose a base branch
from
Open

Natrez Crawford - Mateen CSS-positioning-practice deliverable #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6b33490
Created flex vs grid file
NatrezC Aug 21, 2020
8505964
Talked about the diff between flexbox and grid
NatrezC Aug 21, 2020
29ffaf3
Added the similarities into flex vs grid
NatrezC Aug 21, 2020
18ab5db
Seeing if push worked in flex vs grid
NatrezC Aug 21, 2020
9221c6d
This is fun
NatrezC Aug 21, 2020
9830169
checkpoint 1
NatrezC Aug 21, 2020
34d70e2
First rough draft of Airbnb
NatrezC Aug 21, 2020
37edef9
Added all the pictures to the page
NatrezC Aug 21, 2020
63fe777
I made the the first set of pics to go side by side
NatrezC Aug 21, 2020
60cfcfe
The second set of pics are now side by side
NatrezC Aug 21, 2020
4e514c7
Spaced the pictures apart
NatrezC Aug 21, 2020
5551179
Placed pictures so they arent touching
NatrezC Aug 22, 2020
40cde91
Put the places inside of the images
NatrezC Aug 22, 2020
203e333
Final product
NatrezC Aug 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 50 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,52 @@
body {
background: lightgray
}

h1 {
color: salmon;
color: rgb(87, 82, 82);
text-align: center;
font-size: 30px
}

h2 {
color: rgb(87, 82, 82);
text-align: center;
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;
}

img {
max-width: 75%;
max-height: 100%;
border-radius: 10px;
display: flex;
justify-content: space-around;
}

.places {
display: flex;
justify-content: space-around;
padding: 5%;
}

.row {
display: flex;
justify-content: space-around;
}
7 changes: 7 additions & 0 deletions flex-vs-grid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# 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.

### 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.
50 changes: 48 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,55 @@
<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>
<title>AirBnb</title>
</head>
<body>
<h1>Hello Front-End</h1>

<h1>Meet Guidebooks</h1>

<h2>Discover hundreds of local spots recommended by Airbnb hosts</h2>

<div class= "places">
<div class= "row">
<p>San Francisco</p>
<img src= "img/san-francisco.jpg">
</div>

<div class= "row">
<p>New York</p>
<img src= "img/new-york.jpg">
</div>

<div class= "row">
<p>London</p>
<img src = "img/london.jpg">
</div>
</div>

<h3>See all Guidebooks</h3>

<h1>Just for the weekend</h1>

<h2>Discover new, inspiring places close to home</h2>

<div class= "places">

<div class= "row">
<p>Napa</p>
<img src= "img/napa.jpg">
</div>

<div class="row">
<p>Sonoma</p>
<img src= "img/sonoma.jpg">
</div>

<div class= "row">
<p>San Francisco</p>
<img src= "img/san-francisco-2.jpg">
</div>
</div>

<h3>See all Destinations</h3>
</body>
</html>