Skip to content
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

Update index.html #4

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update index.html #4

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
146 changes: 95 additions & 51 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,33 +22,62 @@
<div class="logo">ThinkfulCupid</div>
<nav>
<ul id="menu">
<li><a>Join</a></li>
<li><a>About</a></li>
<li><a>Download</a></li>
<li><a>Blog</a></li>
<li><a href="#join">Join</a></li>
<li><a href="#about">About</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#blog">Blog</a></li>
</ul>
</nav>
</header>

<main>
<!-- Join -->
<section id="join">
<img src="images/love.png" alt="ThinkfulCupid - love" />
<div class="form-group">
<div class="item">
<img src="images/love.png" alt="ThinkfulCupid - love" />
</div>
<!-- Add join form here -->
<div class="item">
<form>
<div class="form-row">
<label for="email">Email</label>
<input id="email" type="text" name="email" placeholder="[email protected]" class="input-box"/>
</div>
<div class="form-row">
<label for="password">Create a password</label>
<input id="password" type="password" name="password" minlength="8" class="input-box"/>
</div>
<div class="form-row">
<label for="username">Username</label>
<input id="username" type="text" name="username" class="input-box"/>
</div>
<div class="form-row">
<label for="gender">I am a...</label>
<select name="gender" id="gender" size="1">
<option value="female">Female</option>
<option value="male">Male</option>
<option value="other">Other</option>
</select>
</div>
<button type="submit">Join</button>
</form>
</div>
</div>
</section>

<!-- About -->
<section id="about" class="alternate-background">
<h2>About</h2>
<img
src="images/sunset-with-heart.png"
alt="ThinkfulCupid - Sunset with heart"
/>
<img
src="images/two-people-sunset-candles.png"
alt="ThinkfulCupid - Two people with sunset and candles"
/>
<p>
<h2 class="item">About</h2>
<div class="group">
<div class="item">
<img src="images/sunset-with-heart.png" alt="ThinkfulCupid - Sunset with heart" />
</div>
<div class="item">
<img src="images/two-people-sunset-candles.png" alt="ThinkfulCupid - Two people with sunset and candles"/>
</div>
<div class="item 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
Expand All @@ -57,74 +86,89 @@ <h2>About</h2>
malesuada turpis. Nam dictum dapibus neque, sed vehicula neque
tristique vestibulum. In hac habitasse platea dictumst. Vestibulum sit
amet pretium quam.
</p>
</p>
</div>
</div>
</section>

<!-- Download -->
<section id="download">
<h2>Download the App</h2>
<p>
<div class="group">
<div class="item">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
molestie in est id efficitur. Sed hendrerit ut turpis quis dapibus.
Nam sit amet iaculis lectus. Aliquam erat volutpat. Praesent rhoncus
pellentesque eros in aliquet. Sed accumsan elit lacus, id ultrices
libero rutrum vitae.
</p>
<ul>
<li>Mauris in pellentesque ligula.</li>
<li>Sed accumsan elit lacus, id ultrices libero rutrum vitae.</li>
<li>Nunc vitae ex eget neque pellentesque porttitor.</li>
<li>Cras mollis lorem sagittis sapien imperdiet blandit. Vivamus.</li>
<li>
</p>
<ul>
<li>Mauris in pellentesque ligula.</li>
<li>Sed accumsan elit lacus, id ultrices libero rutrum vitae.</li>
<li>Nunc vitae ex eget neque pellentesque porttitor.</li>
<li>Cras mollis lorem sagittis sapien imperdiet blandit. Vivamus.</li>
<li>
Donec vehicula ipsum nisi, eu consectetur leo feugiat et. Fusce eget
hendrerit mauris.
</li>
</ul>

<img src="images/download.png" alt="Thinkfulbnb - download" />
</li>
</ul>
</div>
<div class="item">
<img src="images/download.png" alt="Thinkfulbnb - download" />
</div>
</div>
</section>

<!-- Blog -->
<section id="blog" class="alternate-background">
<section id="blog" class="alternate-background ">
<h2>Blog</h2>

<img src="images/blog-post-1.png" alt="Thinkfulbnb - blog post 1" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<p>
<div class="group">
<div class="item">
<img src="images/blog-post-1.png" alt="Thinkfulbnb - blog post 1" />
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<p>
Sed vel scelerisque ex. Duis in pharetra neque, at tempus lorem.
Aenean mi magna, posuere at quam sed, euismod gravida neque. Phasellus
dolor quam, mattis at nibh sed, tincidunt malesuada turpis. Nam dictum
dapibus neque, sed vehicula neque tristique vestibulum.
</p>

<img src="images/blog-post-2.png" alt="Thinkfulbnb - blog post 2" />
<h3>Mauris eget nisl quis metus ultrices venenatis</h3>
<p>
</p>
</div>
<div class="item">
<img src="images/blog-post-2.png" alt="Thinkfulbnb - blog post 2" />
<h3>Mauris eget nisl quis metus ultrices venenatis</h3>
<p>
Sed vel scelerisque ex. Duis in pharetra neque, at tempus lorem.
Aenean mi magna, posuere at quam sed, euismod gravida neque. Phasellus
dolor quam, mattis at nibh sed, tincidunt malesuada turpis. Nam dictum
dapibus neque, sed vehicula neque tristique vestibulum.
</p>

<img src="images/blog-post-3.png" alt="Thinkfulbnb - blog post 3" />
<h3>
</p>
</div>
</div>
<div class="group">
<div class="item">
<img src="images/blog-post-3.png" alt="Thinkfulbnb - blog post 3" />
<h3>
Fusce augue diam, sollicitudin at metus id, congue placerat neque
</h3>
<p>
</h3>
<p>
Sed vel scelerisque ex. Duis in pharetra neque, at tempus lorem.
Aenean mi magna, posuere at quam sed, euismod gravida neque. Phasellus
dolor quam, mattis at nibh sed, tincidunt malesuada turpis. Nam dictum
dapibus neque, sed vehicula neque tristique vestibulum.
</p>

<img src="images/blog-post-4.png" alt="Thinkfulbnb - blog post 4" />
<h3>Aenean purus dui, aliquam vitae auctor vel</h3>
<p>
</p>
</div>
<div class="item">
<img src="images/blog-post-4.png" alt="Thinkfulbnb - blog post 4" />
<h3>Aenean purus dui, aliquam vitae auctor vel</h3>
<p>
Sed vel scelerisque ex. Duis in pharetra neque, at tempus lorem.
Aenean mi magna, posuere at quam sed, euismod gravida neque. Phasellus
dolor quam, mattis at nibh sed, tincidunt malesuada turpis. Nam dictum
dapibus neque, sed vehicula neque tristique vestibulum.
</p>
</p>
</div>
</div>
</section>
</main>

Expand Down