Skip to content

finished deliverable, could not get the text on top of image before d… #482

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

finished deliverable, could not get the text on top of image before d… #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"livePreview.defaultPreviewPath": "/index.html"
}
102 changes: 101 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,103 @@
*{
background: lightgrey;
}

h1 {
color: salmon;
color: grey;
text-align: center;
}

h2{
color: grey;
text-align: center;
}

#top-photos{
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

#bottom-photos{
display: flex;
flex-direction: row;
justify-content: space-evenly;


}

#guidebooks-button{
text-align: center;


}

#destination-button{
text-align: center;
}

#top-button{
background-color: white;
}

#bottom-button{
background-color: white;
}

.photos{
margin: 15px 15px;
}

#san-francisco{
position: absolute;
top: 40%;
color: white;
background-color: rgba(255, 255, 255, 0);
margin: 0 auto;

}

#new-york{
position:absolute;
top: 50%;
color: white;
background-color: rgba(255, 255, 255, 0);
margin: 0 auto;

}

#london{
position: absolute;
top: 50%;
color: white;
background-color: rgba(255, 255, 255, 0);
margin: 0 auto;

}

#napa{
position: absolute;
top: 50%;
color: white;
background-color: rgba(255, 255, 255, 0);
margin: 0 auto;

}

#sonoma{
position: absolute;
top: 50%;
color: white;
background-color: rgba(255, 255, 255, 0);
margin: 0 auto;

}

#san-francisco-2{
position: absolute;
top: 50%;
color: white;
background-color: rgba(255, 255, 255, 0);
margin: 0 auto;

}
29 changes: 27 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,34 @@
<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><strong>Meet GuideBooks</strong></h1>
<h2>Discover hundreds of local spots recommended by Airbnb hosts</h2>
<div id = "top-photos">
<h1 id ="san-francisco">San Francisco</h1>
<img class ="photos" src ="/img/san-francisco.jpg" alt = "picture of San Francisco">
<h1 id = "new-york">New York</h1>
<img class = "photos" src ="img/new-york.jpg" alt = "photo of New York">
<h1 id = "london">London</h1>
<img class ="photos" src = "img/london.jpg" alt ="Photo of London">
</div>
<div id ="guidebooks-button">
<button id ="top-button">See All Guidebooks</button>
</div>
<h1><strong>Just for the Weekend</strong></h1>
<h2>Discover new, inspiring places close to home.</h2>
<div id ="bottom-photos">
<h1 id = "napa">Napa</h1>
<img class = "photos" src = "img/napa.jpg" alt ="pic of Napa">
<h1 id = "sonoma">Sonoma</h1>
<img class ="photos"src ="img/sonoma.jpg" alt = "pic of Sonoma">
<h1 id = "san-francisco-2">San Francisco</h1>
<img class ="photos"src = "img/san-francisco-2.jpg" alt ="second pic of San Francisco">
</div>
<div id ="destination-button">
<button id="bottom-button">See All Destinations</button>
</div>
</body>
</html>
Empty file added styles.css
View file
Open in desktop
Empty file.