Skip to content

Dan Linden Deliverable #15

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

Dan Linden Deliverable #15

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
49e1394
created flex-vs-grid.md
lind1125 Aug 21, 2020
b738f2e
updated index.html and style.css to match solution.jpg
lind1125 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
75 changes: 73 additions & 2 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,74 @@
h1 {
color: salmon;
body {
text-align: center;
margin-right: 25%;
margin-left: 25%;
background-color: #efefef;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
/* background color and font values sourced from http://web.archive.org/web/20140301054800/https://www.airbnb.com/?cdn_locale_redirect=1
*/
}
h3, h6, button {
color: rgb(83, 83, 83);
/* border: 2px solid; */
}

h3 {
margin-bottom: 0;
}
h6{
margin-top: 2px;
font-weight: normal;
}

.locations {
display: flex;
justify-content: space-evenly;
}

button {
background-color: white;
margin-top: 25px;
border-radius: 0;
border: 1px solid lightgray;
font-size: .75em;
width: 200px;
padding: .5em ;
}

.locations div {
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
width: 200px;
background-size: cover;
}

p {
color: #efefef;
font-size: 1.5em;
}

#san-francisco-guidebook {
background-image: url("../img/san-francisco.jpg")
}

#new-york-guidebook {
background-image: url("../img/new-york.jpg")
}

#london-guidebook {
background-image: url("../img/london.jpg")
}

#napa-destination {
background-image: url("../img/napa.jpg")
}

#sonoma-destination {
background-image: url("../img/sonoma.jpg")
}

#san-francisco-destination {
background-image: url("../img/san-francisco-2.jpg")
}
5 changes: 5 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,5 @@
# Flexbox vs Grid

Both the flexbox and grid are tools used to position HTML elements on a page. Both appear to be attempts to optimize placement of elements in relation to each other without the need to account for the relationships between individual elements as meticulously as may be needed when using CSS positioning properties.

While both do a lot of the work for you in optimizing the placement of elements within a space, flexbox and grid seem optimized for different approaches. Flexbox seems to be more useful for manipulating a group of elements in a uniform way within a space, whereas grid allows for more specification in how space is divided, giving you more versatility in the exact placement of individual elements relative to each other.
26 changes: 24 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,31 @@
<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>CSS Positioning Practice</title>
</head>
<body>
<h1>Hello Front-End</h1>
<section>
<h3>Meet Guidebooks</h3>
<!-- Noticed the h1 displays differently when enclosed in <section>. Possibly defaults to h2? -->
<h6>Discover hundreds of local spots recommended by Airbnb hosts</h6>
<div class="locations">
<div id="san-francisco-guidebook"><p>San Francisco</p></div>
<div id="new-york-guidebook"><p>New York</p></div>
<div id="london-guidebook"><p>London</p></div>
</div>
<button>See All Guidebooks</button>
</section>
<section>
<h3>Just for the weekend</h3>
<h6>Discover new, inspiring places close to home</h6>
<div class="locations">
<div id="napa-destination"><p>Napa</p></div>
<div id="sonoma-destination"><p>Sonoma</p></div>
<div id="san-francisco-destination"><p>San Francisco</p></div>
</div>
<button>See All Destinations</button>
</section>


</body>
</html>