Skip to content

Cameron Moreno - CSS Pos Prac #7

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

Cameron Moreno - CSS Pos Prac #7

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
0286786
Added flex-vs-grid.md file
cam-em Aug 21, 2020
7af5b27
Uploading CSS positioning practice deliverable
cam-em Aug 21, 2020
0d19269
small visual updates
cam-em 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
82 changes: 81 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,83 @@
body {
font-family: sans-serif;
display: grid;
justify-items: center;
background-color: #e8e6e3;
}

h1, p{
color: #5c6467;
}

h1 {
color: salmon;
margin: 20px 0px 2px 0px;
}

p {
margin: 2px 0px 16px 0px;
}

.images {
display: flex;
flex-wrap: nowrap;
grid-gap: 20px;
}

.centered {
height: 250px;
width: 250px;
background-size: cover;
background-repeat: no-repeat;
border-radius: 30px;
border: 1px solid rgb(133, 133, 133);
}

.centered > p{
color: white;
text-align: center;
vertical-align: center;
line-height: 250px;
}

.centered > p, h1 {
font-size: 25px;
font-weight: bold;
}

.see-all-button {
border-radius: 10px;
margin: 30px 30px 10px 30px;
border: 1px solid #798285;
background-color: white;
width: 300px;
height: 30px;
text-align: center;
vertical-align: center;
line-height: 30px;
font-size: 14px;
font-weight: bold;
}

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

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

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

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

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

#san-fran-2 {
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 and grid are both used to position elements. They both can achieve a plethora of the same results while also having separating characteristics that may lead you to using either in different ways.

Flexbox mainly positions elements by only moving them in a one-dimensional direction. This means it's mainly used for a position change in either a row or a column, not typically both at the same time. Flexbox also has a larger compatibility than grid currently for most browsers. You can wrap elements to make them look two dimensional, but bear the consequence of less "customization."

CSS Grid positions elements by moving them in a two-dimensional direction. You can move elements either by a row or column. The grid is great for overall page structure and positioning elements. Grid offers a little more flexibility in this case vs. Flexbox.
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>Main Home Page</title>
</head>
<body>
<h1>Hello Front-End</h1>
<h1>Meet GuideBooks</h1>
<p>Discover hunders of local spots recommended by Airbnb hosts</p>

<div class='images'>
<div class='centered' id='san-fran-1'><p>San Fransisco</p></div>
<div class='centered' id='new-york'><p>New York</p></div>
<div class='centered' id='london'><p>London</p></div>
</div>

<p class ='see-all-button'>See All Guidebooks</p>


<h1>Just for the weekend</h1>
<p>Discover new, inspiring places close to home.</p>

<div class='images'>
<div class='centered' id='napa'><p>Napa</p></div>
<div class='centered' id='sonoma'><p>Sonoma</p></div>
<div class='centered' id='san-fran-2'><p>San Francisco</p></div>
</div>

<p class='see-all-button'>See All Destinations</p>

</body>
</html>