Skip to content

Camille / Mateen : CSS Positioning Deliverable #4

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

Camille / Mateen : CSS Positioning Deliverable #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5448360
This is what you learned about CSS Grid & Flexbox
Aug 21, 2020
fee4739
This is your deliverable for Airbnb
Aug 21, 2020
8bce489
This is your updated deliverable for Airbnb
Aug 21, 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
199 changes: 198 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,200 @@
body {
background: #ECEFEC;
}

header {
padding-top: 10px;
padding-bottom: 0px;
}


h1 {
color: salmon;
color: #58595E;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-weight: 700;
margin-bottom: 0px;
}

h5 {
color: #58595E;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-weight: 400;
margin-top: 2px;
}

.container {
display: grid;
grid-template-rows: 15px 300px 100px 300px 1fr;
grid-template-columns: 360px repeat(3, 1fr) 325px;
position: relative;
}

img {
width: 204px;
height: 223px;
}

.box1 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
position: relative;

}

.box2 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
position: relative;
}

.box3 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
position: relative;
}

.box4 {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
position: relative;
}

.box5 {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 4;
grid-row-end: 5;
position: relative;
}

.box6 {
grid-column-start: 4;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 5;
position: relative;
}

.city1 {
position: absolute;
top: 35%;
left: 15%;
color: white;
font-family: 'DM Sans', sans-serif;
font-size: 20px;
font-weight: 700;
}

.city2 {
position: absolute;
top: 35%;
left: 24%;
color: white;
font-family: 'DM Sans', sans-serif;
font-size: 20px;
font-weight: 700;
}

.city3 {
position: absolute;
top: 35%;
left: 28%;
color: white;
font-family: 'DM Sans', sans-serif;
font-size: 20px;
font-weight: 700;
}

.city4 {
position: absolute;
top: 35%;
left: 31%;
color: white;
font-family: 'DM Sans', sans-serif;
font-size: 20px;
font-weight: 700;
}

.city5 {
position: absolute;
top: 35%;
left: 28%;
color: white;
font-family: 'DM Sans', sans-serif;
font-size: 20px;
font-weight: 700;
}

.city6 {
position: absolute;
top: 35%;
left: 15%;
color: white;
font-family: 'DM Sans', sans-serif;
font-size: 20px;
font-weight: 700;
}

.middle{
justify-content: space-around;
grid-row-start: 3;
grid-column-start: 2;
grid-column-end: 5;
}

.p1{
border: 1px solid black;
font-size: 14px;
text-align: center;
font-family: 'DM Sans', sans-serif;
background: white;
margin: -40px 283px 35px 240px;
padding: 7px 0px 7px 0;
grid-column-start: 3;
grid-column-end: 4;
font-weight: 500;
}

.p2{
text-align: center;
font-family: 'DM Sans', sans-serif;
position: relative;
color: #58595E;
text-align: center;
font-size: 20px;
font-weight: 700;
margin: 10px 280px 0 240px;
}

.p3{
text-align: center;
position: relative;
color: #58595E;
text-align: center;
font-family: 'DM Sans', sans-serif;
font-weight: 400;
margin: 2px 40px 0 2px;
font-size: 12px;
}

.p4{
border: 1px solid black;
font-size: 14px;
text-align: center;
font-family: 'DM Sans', sans-serif;
background: white;
padding: 7px 0px 7px 0;
font-weight: 500;
width: 15%;
margin: -40px 290px 35px 600px;
}
6 changes: 6 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,6 @@
# Differences between CSS Grid & Flexbox

## CSS Grid vs. Flexbox
### While both Grid and Flexbox are both used to create layouts, I learned that there are a few main differences between CSS Grid & Flexbox.

#### CSS Grid allows developers to control sizing and positioning of elements across two dimensions: columns & rows. This is most useful when alignment of content is desired in both dimensions. Flexbox aligns elements along only one dimension at a time, either columns or rows. This makes CSS Grid a bit more flexible but Flexbox allows fine-tuning of alignments within the single dimension. Finally, CSS Grib works best on a larger scale while Flexbox works on smaller scale dimension.
54 changes: 52 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,59 @@
<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>Vacation Rentals, Homes...</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Hello Front-End</h1>
<header>
<h1>Meet Guidebooks</h1>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<h5>Discover hundreds of local spots recommended by Airbnb hosts</h4>
</header>


<div class="container">
<div class="box1">
<img src= "img/san-francisco.jpg" alt="San Francisco Image 1">
<div class="city1">San Francisco</div>
</div>
<div class="box2">
<img src= "img/new-york.jpg" alt="New Yor Image">
<div class="city2">New York</div>
</div>
<div class="box3">
<img src= "img/london.jpg" alt="Londong Image">
<div class="city3">London</div>
</div>
<div class="box4">
<img src= "img/napa.jpg" alt="Napa Image">
<div class="city4">Napa</div>
</div>
<div class="box5">
<img src= "img/sonoma.jpg" alt="Sonoma Image">
<div class="city5">Sonoma</div>
</div>
<div class="box6">
<img src= "img/san-francisco-2.jpg" alt="San Francisco Image 2">
<div class="city6">San Francisco</div>
</div>
<div class="middle">
<p class="p1">
See All Guidebooks
</p>
<p class="p2">
Just for the weekend
</p>
<p class="p3">
Discover new, inspiring places close to home.
</p>
</div>
</div>

<p class="p4">
See All Destinations
</p>


</body>
</html>