Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@falvarado7
falvarado7 committed Dec 29, 2023
1 parent b77f4be commit 35cb697
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 60 deletions.
66 changes: 35 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,22 @@
<h2>Find the perfect vacation rental</h2>
<!-- Create a form here -->
<form>
<div class="form-row">
<div class="item form-row">
<label for="location">Location</label>
<input type="type" id="location" name="location" placeholder="Search Destination"/>
</div>

<div class="form-row">
<div class="item form-row">
<label for="arrive">Arrive</label>
<input type="date" id="arrive" name="arrive"/>
</div>

<div class="form-row">
<div class="item form-row">
<label for="depart">Depart</label>
<input type="date" id="depart" name="depart"/>
</div>

<div class="form-row">
<div class="item form-row">
<label for="type">Type</label>
<select name="type" id="type">
<option value="apartment">Apartment</option>
Expand All @@ -64,36 +64,40 @@ <h2>Find the perfect vacation rental</h2>
<option value="hotel">Yurt</option>
</select>
</div>

<button>Search</button>

<div class="item">
<button type="submit">Search</button>
</div>
</form>

</section>

<!-- About -->
<section id="about" class="alternate-background">
<h2>About</h2>
<div class="about-section">

<img
src="images/vacation-rental-pool.png"
alt="Thinkfulbnb - Vacation rental pool"
/>


<img
src="images/vacation-rental-inside-stone.png"
alt="Thinkfulbnb - Vacation rental inside stone"
/>

<p>
Fusce porta odio nunc, eget pretium massa rutrum sit amet. Etiam
fringilla aliquam dapibus. Maecenas quis nisi sed turpis aliquam
porttitor eget ut quam. Sed vel scelerisque ex. Duis in pharetra
neque, at tempus lorem. Aenean mi magna, posuere at quam sed, euismod
gravida neque.
</p>
<div class="group">
<div class="item">
<img
class="about-img"
src="images/vacation-rental-pool.png"
alt="Thinkfulbnb - Vacation rental pool"
/>
</div>
<div class="item">
<img
class="about-img"
src="images/vacation-rental-inside-stone.png"
alt="Thinkfulbnb - Vacation rental inside stone"
/>
</div>
<div class="item-double">
<p>
Fusce porta odio nunc, eget pretium massa rutrum sit amet. Etiam
fringilla aliquam dapibus. Maecenas quis nisi sed turpis aliquam
porttitor eget ut quam. Sed vel scelerisque ex. Duis in pharetra
neque, at tempus lorem. Aenean mi magna, posuere at quam sed, euismod
gravida neque.
</p>
</div>
</div>

</section>
Expand All @@ -102,24 +106,24 @@ <h2>About</h2>
<section id="ideas">
<h2>Ideas</h2>
<div class="group">
<div class="item item-double">
<div class="item">
<h3>Forest retreats</h3>
<img
src="images/forest-retreat.png"
alt="Thinkfulbnb - Forest retreat"
/>
</div>
<div class="item item-double">
<div class="item">
<h3>Beaches</h3>
<img src="images/beach-house.png" alt="Thinkfulbnb - Beach house" />
</div>
</div>
<div class="group">
<div class="item item-double">
<div class="item">
<h3>Rustic cabins</h3>
<img src="images/cabin.png" alt="Thinkfulbnb - Cabin" />
</div>
<div class="item item-double">
<div class="item">
<h3>Pet-friendly</h3>
<img src="images/pet-friendly.png" alt="Thinkfulbnb - Pet-friendly" />
</div>
Expand Down
67 changes: 38 additions & 29 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ section.alternate-background {
}

main img {
width: 450px;
padding-bottom: 20px;
width: 100%;
}

/* --- Groups & Items ---*/
Expand All @@ -49,6 +48,7 @@ main img {

.item-double {
flex: 2;
margin: 10px;
}

/* ------- Navigation -------*/
Expand Down Expand Up @@ -87,32 +87,28 @@ header nav ul li a:hover {
/* ------- Search Form -------*/
form {
border: 2px solid #ff385c;
padding: 12px;

padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

form label {
font-weight: bold;
}

form select,
form input {
margin-bottom: 20px;
width: 220px;
padding-right: 10px;
}

.form-row {
display: flex;
justify-content: space-between;
padding-bottom: 10px;
}

form button {
background-color: #ff385c;
border: none;
color: #fff;
font-size: 24px;
padding: 25px;
padding: 15px;
width: 100%;

}
Expand All @@ -131,7 +127,7 @@ footer p {

/* ------- Media Query -------*/

@media all and (min-width: 768px) {
@media all and (min-width: 1000px) {
header {
display: flex;
justify-content: space-between;
Expand All @@ -140,39 +136,52 @@ footer p {

form {
display: flex;
align-items: center;
align-items: center;
flex-direction: row;
justify-content: center;
padding: 10px 10px 10px 10px;
}

form button {
width: 20%;
margin-left: 70px;
justify-content: center;
}

form label,
form input,
form button {
margin-right: 20px;
form div {
display: flex;
flex-direction: column;
}

.about-section {
display: flex;
align-items: center;

.form-row {
padding-right: 25px;
justify-content: center;
}

form label {
padding-bottom: 15px;
font-weight: bold;
}

.group {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
flex-direction: row;
}

.item {
display: flex;
flex-direction: column;
justify-content: center;

flex: 1;
margin: 15px;
}

.item-double {
flex: 2;
margin: 15px;
}

p {
padding-left: 10px;
padding-right: 10px;
}

}

0 comments on commit 35cb697

Please sign in to comment.