Skip to content
Open
69 changes: 38 additions & 31 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,36 @@
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/normalize.css" >
<link rel="stylesheet" href="styles/styles.css">
<title>Startrly</title>
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<div>


<nav>
<nav class="nav-container">
<ul>
<li>
<li id="navA">
Startrly
</li>
<li>
<li id="navB">
Try Now!
</li>
<li>
<li id=navC>
About
</li>
</ul>
</nav>


<section>
<section class="website-intro-container">
<h1>Startrly</h1>
<sub>A catchy tagline for a great solution</sub>
<a href="#">Some Call to Action</a>
</section>


<section>
<section class = "quote">
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</blockquote>
Expand All @@ -40,35 +41,41 @@ <h1>Startrly</h1>
</section>


<section>
<section class = reasons-container>
<h2>Why?</h2>
<ul>
<li>
<img src="http://via.placeholder.com/100x100" />
<ul class=reasons-content>
<li id=reason-1>
<img src="http://via.placeholder.com/100x100" />

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could save yourself some work by doing this fewer sub-elements. It is possible to get this layout with just a container and one child class ...

<div >
<strong>Comfortable</strong>
<p>
Et quas molestias excepturi sint occaecati cupiditate non providents, ut aut reiciendis voluptatibus maiores.
</p>
</div>
</li>
<li>
<img src="http://via.placeholder.com/100x100" />
<li id=reason-2>
<img src="http://via.placeholder.com/100x100"/>
<div>
<strong>Robust</strong>
<p>
At vero eos et accusamus et iusto odio dignissimos ducimus qui. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam.
</p>
</div>
</li>
<li>
<li id=reason-3>
<img src="http://via.placeholder.com/100x100" />
<div>
<strong>Convenient</strong>
<p>
Itaque earum rerum hic tenetur a sapiente delectus.
</p>
</div>
</li>
</ul>
</section>


<section>
<section class = quote>
<blockquote>
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
</blockquote>
Expand All @@ -78,30 +85,30 @@ <h2>Why?</h2>
</section>


<section>
<section class=team-container>
<h2>Meet the team</h2>
<ul>
<li>
<li id=person-k>
<img src="https://placebear.com/150/150" alt="profile for kari kiwi" />
<span>Kari Kiwi</span>
<span>CFO</span>
</li>
<li>
<li id=person-d>
<img src="https://placebear.com/150/150" alt="profile for dan dragon" />
<span>Dan Dragon</span>
<span>CMO</span>
</li>
<li>
<li id=person-c>
<img src="https://placebear.com/150/150" alt="profile for chris caribou" />
<span>Chris Caribou</span>
<span>CIO</span>
</li>
<li>
<li id=person-h>
<img src="https://placebear.com/150/150" alt="profile for charles cheetah" />
<span>Charles Cheetah</span>
<span>Board Member, CTO</span>
</li>
<li>
<li id=person-e>
<img src="https://placebear.com/150/150" alt="profile for dee dugong" />
<span>Dee Dugong</span>
<span>Startup Enthusiast</span>
Expand All @@ -110,30 +117,30 @@ <h2>Meet the team</h2>
</section>


<section>
<section class=sponsors>
<h2>Sponsors</h2>
<ul>
<li>
<img src="http://via.placeholder.com/300x100" />
<img id=sponsor-1 src="http://via.placeholder.com/300x100" />
</li>
<li>
<img src="http://via.placeholder.com/250x125" />
<img id=sponsor-2 src="http://via.placeholder.com/250x125" />
</li>
<li>
<img src="http://via.placeholder.com/275x70" />
<img id=sponsor-3 src="http://via.placeholder.com/275x70" />
</li>
<li>
<img src="http://via.placeholder.com/250x120" />
<img id=sponsor-4 src="http://via.placeholder.com/250x120" />
</li>
<li>
<img src="http://via.placeholder.com/220x100" />
<img id=sponsor-5 src="http://via.placeholder.com/220x100" />
</li>
</ul>
</section>


<section>
<div>
<section class=additional-links>
<div id=support>
<h3>Support</h3>
<ul>
<li>
Expand All @@ -150,7 +157,7 @@ <h3>Support</h3>
</li>
</ul>
</div>
<div>
<div id=about>
<h3>About</h3>
<ul>
<li>
Expand Down
Loading