Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
73 changes: 40 additions & 33 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,37 @@
<head>
<meta charset="utf-8">
<title>Startrly</title>
<link href="style/styles.css" rel="stylesheet">
<link href="normalization.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cantarell:400i|IM+Fell+Double+Pica:400i|Lato:100i|Playfair+Display+SC:900&display=swap" rel="stylesheet">
</head>
<body>
<div>


<nav>
<ul>
<li>
<li class="b">

Choose a reason for hiding this comment

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

I like how you label classes with letters - this makes it easy to follow vs descriptive class names, which could mean one thing to you vs the reader.

Startrly
</li>
<li>
<li class="e">
Try Now!
</li>
<li>
<li class="f">
About
</li>
</ul>
</nav>


<section>
<h1>Startrly</h1>
<sub>A catchy tagline for a great solution</sub>
<a href="#">Some Call to Action</a>
<section class="header">
<div class="logo">Startrly</div>
<sub> A catchy tagline for a great solution</sub>
<a class="button" 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,25 +43,25 @@ <h1>Startrly</h1>
</section>


<section>
<h2>Why?</h2>
<ul>
<li>
<img src="http://via.placeholder.com/100x100" />
<section class="why-section">
<h2 class="header2">Why?</h2>
<ul class="reasons">
<li class="A">
<img class="img" src="http://via.placeholder.com/100x100" />
<strong>Comfortable</strong>
<p>
Et quas molestias excepturi sint occaecati cupiditate non providents, ut aut reiciendis voluptatibus maiores.
</p>
</li>
<li>
<img src="http://via.placeholder.com/100x100" />
<li class="B">
<img class="img" src="http://via.placeholder.com/100x100" />
<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>
</li>
<li>
<img src="http://via.placeholder.com/100x100" />
<li class="C">
<img class="img" src="http://via.placeholder.com/100x100" />
<strong>Convenient</strong>
<p>
Itaque earum rerum hic tenetur a sapiente delectus.
Expand All @@ -68,7 +71,7 @@ <h2>Why?</h2>
</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,41 +81,43 @@ <h2>Why?</h2>
</section>


<section>
<h2>Meet the team</h2>
<ul>
<section class="bear-sec">
<h2 class="header2 meet-team">Meet the team</h2>
<ul class="dabears">
<li>
<img src="https://placebear.com/150/150" alt="profile for kari kiwi" />
<img class="bear-img" src="https://placebear.com/150/150" alt="profile for kari kiwi" />
<span>Kari Kiwi</span>
<span>CFO</span>
</li>
<li>
<img src="https://placebear.com/150/150" alt="profile for dan dragon" />
<img class="bear-img" src="https://placebear.com/150/150" alt="profile for dan dragon" />
<span>Dan Dragon</span>

Choose a reason for hiding this comment

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

Nice usage of span

<span>CMO</span>
</li>
<li>
<img src="https://placebear.com/150/150" alt="profile for chris caribou" />
<img class="bear-img" src="https://placebear.com/150/150" alt="profile for chris caribou" />
<span>Chris Caribou</span>
<span>CIO</span>
</li>
<li>
<img src="https://placebear.com/150/150" alt="profile for charles cheetah" />
<img class="bear-img" src="https://placebear.com/150/150" alt="profile for charles cheetah" />
<span>Charles Cheetah</span>
<span>Board Member, CTO</span>
</li>
<li>
<img src="https://placebear.com/150/150" alt="profile for dee dugong" />
<img class="bear-img" src="https://placebear.com/150/150" alt="profile for dee dugong" />
<span>Dee Dugong</span>
<span>Startup Enthusiast</span>
</li>
</ul>
<div class="header2 meet-team"> </div>
</section>



<section>
<h2>Sponsors</h2>
<ul>
<h2 class="header2">Sponsors</h2>
<ul class="sponsors">
<li>
<img src="http://via.placeholder.com/300x100" />
</li>
Expand All @@ -132,10 +137,11 @@ <h2>Sponsors</h2>
</section>


<section>
<section class="footer">
<div>
<h3>Support</h3>
<ul>

<ul class="Z">
<h3>Support</h3>
<li>
Demo
</li>
Expand All @@ -151,8 +157,9 @@ <h3>Support</h3>
</ul>
</div>
<div>
<h3>About</h3>
<ul>

<ul class="Y">
<h3>About</h3>
<li>
Our Mission
</li>
Expand Down
191 changes: 191 additions & 0 deletions style/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
html {
padding: 0;
margin: 0;
}

body {
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
}

div {
margin: 0;
padding: 0;
}

ul {
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
}

li {
padding: 0;
margin: 0;
list-style-type: none;
}

nav ul {
background-color: #5e85a4;
color: white;
padding: 1em;
display: grid;
grid-template-columns: repeat(6 1fr);

Choose a reason for hiding this comment

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

ooh I haven't seen this
'repeat(6 1fr);

grid-template-rows: 1;
grid-template-areas:
"a b c d e f";
}

.b{
grid-area: b;
}

.e{
grid-area: e;
justify-content: flex-end;
}

.f {
grid-area: f;
}

.header {
display: flex;
flex-direction: column;
align-items: center;
border-top: solid black 1px;
padding: 2em;
background-color: floralwhite;
}

.logo {
font-family: 'Playfair Display SC', serif;
font-size: 3em;
margin: .5em;
}

section sub {
display: block;
}

.button {
border: .25px black solid;
background-color: #354d60;
/* papayawhip */
/* floralwhite */
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 1em;
display: inline-block;
border-radius: 1em;
margin-top: 2em;
margin-bottom: 1em;
}

.quote {
font-family: 'Lato', cursive;

Choose a reason for hiding this comment

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

Nice usage of multiple fonts!

font-weight: 600;
padding: 2em;
margin: 0;
background-color: white;
padding: 3.5em 15% 3.5em;
border-top: black solid .05em;
border-bottom: black solid .05em;
}

.quote p {
text-align: right;
}

.header2 {
font-family: 'Playfair Display SC', serif;
font-size: 2em;
margin: 0;
text-align: center;
}

.reasons {
display: grid;
grid-template-columns: repeat (3 fr);
grid-template-rows: 1;
justify-content: space-around;
flex-direction: row;
grid-template-areas:
"A B C";
}

.A{
grid-area: A;
}

.B{
grid-area: B;
justify-content: flex-end;
}

.C {
grid-area: C;
}

.img {
float: left;
padding: 0 .5em 0;
}

.why-section {
background-color: floralwhite;
padding: 8em 0;
}

.bear-img {
border-radius: 50%;
}

span {
display: block;
}

.header2 {
}

.meet-team {
background-color: #5e85a4;
height: 1.6em;
}

.dabears {
display: flex;
flex-flow: wrap;
flex-direction: row;
justify-content: center;
background-color: floralwhite;
padding: 1em;
}

.dabears li {
width: 30%;
text-align: center;
}

.sponsors {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
padding: 1.2em;
}

.footer {
display: grid;
grid-template-columns: repeat(5 fr);
grid-template-rows: 1;
grid-template-areas:
"Z Y X X X";
justify-items: center;
border-top: solid black .25px;
background-color: #354d60;
color: white;
padding-bottom: 1
}

Choose a reason for hiding this comment

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

add 1 new line at the end of each file you create ( I think this is a design thing)