Skip to content

CSS Airbnb Deliverable #16

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
ecguerra wants to merge 2 commits into
base: master
Choose a base branch
from
Open

CSS Airbnb Deliverable #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
906b547
flexbox vs grid write-up
ecguerra Aug 20, 2020
3d48565
Updated Airbnb mockup deliverable and flex-vs-grid paragraph
ecguerra 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
123 changes: 122 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,124 @@
/* Airbnb font "Cereal" is proprietary - ended up using "Poppins" from a Reddit thread of suggestions */

body{
background-color: RGB(237,239,236);
font-family: 'Poppins', sans-serif;
max-width: 768px;
display: grid;
grid-template-columns: 100px 1fr 1fr 1fr 100px;
grid-template-rows: 1fr 4fr 1fr 1fr 4fr 1fr;
}

h1 {
color: salmon;
color:RGB(87,90,93);
font-size: 25px;
font-weight: 600;
text-align: center;
margin: 0 auto;
padding: 5px auto;
}

h2 {
color:RGB(87,90,93);
font-size: 13px;
font-weight: 400;
text-align: center;
margin: 0 auto;
padding: 5px auto;
}

img{
width: 236px;
height: 250px;
object-fit: cover;
margin: 20px 10px;
}

button{
background-color: RBG(255,255,255);
border: 1px solid RGB(195,195,195);
text-align: center;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 12px;
width: 236px;
padding: 5px;
margin: 0 10px;
}

.meet {
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 1;
}

div.meet{
margin: 0;
padding: 0;
}

#sfo{
grid-column-start: 2;
grid-row-start: 2;
}
#nyc{
grid-column-start: 3;
grid-row-start: 2;
}
#lon{
grid-column-start: 4;
grid-row-start: 2;
}

#guide{
grid-column-start: 3;
grid-row-start: 3;
}

.weekend{
grid-column-start: 2;
grid-column-end: 5;
grid-row-start: 4;
}

div.weekend{
margin: 0;
padding: 0;
}


#napa{
grid-column-start: 2;
grid-row-start: 5;
}
#son{
grid-column-start: 3;
grid-row-start: 5;
}
#sfo2{
grid-column-start: 4;
grid-row-start: 5;
}

#dest{
grid-column-start: 3;
grid-row-start: 6;
}

/* Text overlay method found on w3schools */

.over {
position: relative;
text-align: center;
color: white;
font-size: 17px;
font-weight: 400px;
}

.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}
8 changes: 8 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,8 @@
# Flexbox vs Grid
## Flexbox
### Flexbox seems to align objects relative to each other on the page. It also uses the actual page itself (start, end, center, etc) to align and order objects
## Grid
### Grid establishes a grid and then aligns and positions objects along it. It doesn't matter where the other objects are on the page. There is no "center" or other relative terms either
## Similarities and Differences
### Both systems allow for precise positioning of objects. The order that things were written in the source code is overwritten by these positioning systems.
### Flexbox feels more "organic" and flexible than Grid. It seems like it would be good when a responsive design is needed, such as for mobile. Grid seems more fixed. It seems like it would be best for layouts where the page needs to have a set "look," like a news site, or a desktop social media webpage.
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>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
<title>Airbnb Clone</title>
</head>
<body>
<h1>Hello Front-End</h1>
<div class="meet">
<h1>Meet Guidebooks</h1>
<h2>Discover hundreds of local spots recommended by Airbnb hosts</h2>
</div>

<div class="over" id="sfo">
<p class="overlay">San Francisco</p>
<img src="img/san-francisco.jpg"/>
</div>

<div class="over" id="nyc">
<p class="overlay">New York</p>
<img src="img/new-york.jpg"/>
</div>

<div class="over" id="lon">
<p class="overlay">London</p>
<img src="img/london.jpg"/>
</div>

<div id="guide">
<button>See All Guidebooks</button>
</div>

<div class="weekend">
<h1>Just for the weekend</h1>
<h2>Discover new, inspiring places close to home</h2>
</div>

<div class="over" id="napa">
<p class="overlay">Napa</p>
<img src="img/napa.jpg"/>
</div>

<div class="over" id="son">
<p class="overlay">Sonoma</p>
<img src="img/sonoma.jpg"/>
</div>

<div class="over" id="sfo2">
<p class="overlay">San Francisco</p>
<img src="img/san-francisco-2.jpg"/>
</div>

<div id="dest"><button>See All Destinations</button></div>

</body>
</html>