Ada-C11 · aphunk · Apr 4, 2019 · Apr 4, 2019 · Apr 4, 2019 · Apr 5, 2019
diff --git a/images/icons/cute.png b/images/icons/cute.png
diff --git a/images/icons/perfume.png b/images/icons/perfume.png
diff --git a/images/icons/stove.png b/images/icons/stove.png
diff --git a/images/icons/ticket.png b/images/icons/ticket.png
diff --git a/images/icons/towel.png b/images/icons/towel.png
diff --git a/images/logos/67f1e6c564fc2db9e4ea781703d610bf.png b/images/logos/67f1e6c564fc2db9e4ea781703d610bf.png
diff --git a/images/logos/OrleansWinderLogo.jpg b/images/logos/OrleansWinderLogo.jpg
diff --git a/images/logos/df292c7dd9b014ae9c8e0e8813f85fbd.jpg b/images/logos/df292c7dd9b014ae9c8e0e8813f85fbd.jpg
diff --git a/images/logos/h_logos-2 (1).jpg b/images/logos/h_logos-2 (1).jpg
diff --git a/images/logos/h_logos-2 (2).jpg b/images/logos/h_logos-2 (2).jpg
diff --git a/images/logos/h_logos-2 (3).jpg b/images/logos/h_logos-2 (3).jpg
diff --git a/images/logos/h_logos-2 (4).jpg b/images/logos/h_logos-2 (4).jpg
diff --git a/images/logos/h_logos-2 (5).jpg b/images/logos/h_logos-2 (5).jpg
diff --git a/images/logos/h_logos-2.jpg b/images/logos/h_logos-2.jpg
diff --git a/images/logos/images.png b/images/logos/images.png
diff --git a/images/logos/logo-design-fuzzique.jpg b/images/logos/logo-design-fuzzique.jpg
diff --git a/images/logos/logo-rain-city-vodka-thumb-lg1.png b/images/logos/logo-rain-city-vodka-thumb-lg1.png
diff --git a/images/logos/sfco.png b/images/logos/sfco.png
diff --git a/images/logos/wildelogo.png b/images/logos/wildelogo.png
diff --git a/images/team/cristian-newman-458458-unsplash.jpeg b/images/team/cristian-newman-458458-unsplash.jpeg
diff --git a/images/team/daniel-rigdon-597993-unsplash.jpeg b/images/team/daniel-rigdon-597993-unsplash.jpeg
diff --git a/images/team/eunice-lituanas-242757-unsplash.jpeg b/images/team/eunice-lituanas-242757-unsplash.jpeg
diff --git a/images/team/kim-carpenter-307030-unsplash.jpeg b/images/team/kim-carpenter-307030-unsplash.jpeg
diff --git a/images/team/philip-martin-596374-unsplash.jpeg b/images/team/philip-martin-596374-unsplash.jpeg
diff --git a/index.html b/index.html
@@ -3,136 +3,148 @@
   <head>
     <meta charset="utf-8">
     <title>Startrly</title>
+    <link rel="stylesheet" type="text/css" media="screen" href="styles/normalize.css" />
+    <link rel="stylesheet" type="text/css" media="screen" href="styles/main.css" />
+    <link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Serif:400i" rel="stylesheet">
+
   </head>
   <body>
-    <div>
-
+    <div class="container">
 
       <nav>
         <ul>
           <li>
             Startrly
           </li>
-          <li>
-            Try Now!
-          </li>
-          <li>
-            About
-          </li>
+          <div class="wrapper">
+            <li>
+              Try Now!
+            </li>
+            <li>
+              About
+            </li>
+          </div>
         </ul>
       </nav>
 
 
-      <section>
+      <section class="welcome">
         <h1>Startrly</h1>
-        <sub>A catchy tagline for a great solution</sub>
-        <a href="#">Some Call to Action</a>
+        <h3>A catchy tagline for a great solution</h3>
+        <a class="button" href="#">Let's talk</a>
       </section>
 
 
-      <section>
+      <section class="testimonial">
         <blockquote>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          "Startrly Studio helps us to collaborate with our worldwide technical experts so that we can bring their skills and experience to bear on more projects; to deliver a better outcome for our clients."
         </blockquote>
         <p>
-          Mx. Lorem
+          --Ming Lin
         </p>
       </section>
 
 
-      <section>
+      <section class="why">
         <h2>Why?</h2>
         <ul>
           <li>
-            <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>
+            <img src="images/icons/towel.png" alt="towl illustration" />
+            <div class="wrapper">
+              <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" />
+            <img src="images/icons/perfume.png" alt="perfume illustration" />
+            <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>
-            <img src="http://via.placeholder.com/100x100" />
+            <img src="images/icons/cute.png" alt="toilet paper illustration"/>
+            <div>
             <strong>Convenient</strong>
             <p>
               Itaque earum rerum hic tenetur a sapiente delectus.
             </p>
+            </div>
           </li>
         </ul>
       </section>
 
 
-      <section>
+      <section class="testimonial">
         <blockquote>
-          Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+          "It saves a lot of time and makes it very easy to mark a questionable spot in the plan with an arrow and to add a supporting photo. This provides the site manager with clear and understandable information. Trying to explain the same thing on the phone takes more time and is less accurate."
         </blockquote>
         <p>
-          Mx. Ipsum
+          --Angela Banangela
         </p>
       </section>
 
 
-      <section>
+      <section class="team">
         <h2>Meet the team</h2>
         <ul>
           <li>
-            <img src="https://placebear.com/150/150" alt="profile for kari kiwi" />
-            <span>Kari Kiwi</span>
-            <span>CFO</span>
+            <img src="images/team/philip-martin-596374-unsplash.jpeg" alt="profile for dee dugong" /><br>
+            <span>Dee Dugong</span><br>
+            <span>Startup Enthusiast</span>
           </li>
           <li>
-            <img src="https://placebear.com/150/150" alt="profile for dan dragon" />
-            <span>Dan Dragon</span>
+            <img src="images/team/daniel-rigdon-597993-unsplash.jpeg" alt="profile for dan dragon" /><br>
+            <span>Dan Dragon</span><br>
             <span>CMO</span>
           </li>
           <li>
-            <img src="https://placebear.com/150/150" alt="profile for chris caribou" />
-            <span>Chris Caribou</span>
+            <img src="images/team/eunice-lituanas-242757-unsplash.jpeg" alt="profile for chris caribou" /><br>
+            <span>Chris Caribou</span><br>
             <span>CIO</span>
           </li>
           <li>
-            <img src="https://placebear.com/150/150" alt="profile for charles cheetah" />
-            <span>Charles Cheetah</span>
+            <img src="images/team/kim-carpenter-307030-unsplash.jpeg" alt="profile for charles cheetah" /><br>
+            <span>Charles Cheetah</span><br>
             <span>Board Member, CTO</span>
           </li>
           <li>
-            <img src="https://placebear.com/150/150" alt="profile for dee dugong" />
-            <span>Dee Dugong</span>
-            <span>Startup Enthusiast</span>
+            <img src="images/team/cristian-newman-458458-unsplash.jpeg" alt="profile for kari kiwi" /><br>
+            <span>Kari Kiwi</span><br>
+            <span>CFO</span>
           </li>
         </ul>
       </section>
 
 
-      <section>
+      <section class="sponsors">
         <h2>Sponsors</h2>
         <ul>
           <li>
-            <img src="http://via.placeholder.com/300x100" />
+            <img src="images/logos/images.png" alt="sponsor logo - chanel" />
           </li>
           <li>
-            <img src="http://via.placeholder.com/250x125" />
+            <img src="images/logos/OrleansWinderLogo.jpg" alt="sponsor logo - orleans winder"/>
           </li>
           <li>
-            <img src="http://via.placeholder.com/275x70" />
+            <img src="images/logos/logo-design-fuzzique.jpg" alt="sponsor logo - fuzzique" />
           </li>
           <li>
-            <img src="http://via.placeholder.com/250x120" />
+            <img src="images/logos/sfco.png" alt="sponsor logo - sfco" />
           </li>
           <li>
-            <img src="http://via.placeholder.com/220x100" />
+            <img src="images/logos/wildelogo.png" alt="sponsor logo - wilde" />
           </li>
         </ul>
       </section>
+    </div>
 
-
-      <section>
+      <footer>
         <div>
           <h3>Support</h3>
           <ul>
@@ -164,8 +176,7 @@ <h3>About</h3>
             </li>
           </ul>
         </div>
-      </section>
+      </footer>
 
-    </div>
   </body>
 </html>
diff --git a/logos/Greatist_Icon_Small_Black.png b/logos/Greatist_Icon_Small_Black.png
diff --git a/...c_ligature_salla_used_as_koranic_stop_sign_isolated_form_uFDF0_icon_256x256.png b/...c_ligature_salla_used_as_koranic_stop_sign_isolated_form_uFDF0_icon_256x256.png
diff --git a/logos/favicon.ico b/logos/favicon.ico
diff --git a/logos/game-rating-5-884401.png b/logos/game-rating-5-884401.png
diff --git a/logos/ok-png-transparent-images-146136-2601657.png b/logos/ok-png-transparent-images-146136-2601657.png
diff --git a/styles/index.css b/styles/index.css
@@ -0,0 +1,8 @@
+nav li {
+  display: inline-flex;
+  padding: 1rem;
+}
+
+section h1 {
+  align-content: center;
+}
diff --git a/styles/main.css b/styles/main.css
@@ -0,0 +1,178 @@
+* {
+  font-family: 'Space Mono', monospace;
+}
+
+h1 {
+  font-size: 48px;
+}
+
+h2 {
+  font-size: 28px;
+}
+
+p {
+  font-size: 14px;
+  line-height: 1.25em;
+}
+
+li {
+  list-style-type: none; 
+}
+
+ul {
+  padding-inline-start: 0px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-between;
+}
+
+img {
+  width: 200px;
+  height: auto;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-row: minmax(500px, auto);
+  padding: 30px;
+  justify-content: space-around;
+  align-items: center;
+  border: 1.5em solid;
+  border-image: linear-gradient(to top, blue, pink) 1;
+  border-bottom: none;
+}
+
+.container>section {
+  grid-column: 1 / span 3;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 50px 30px;
+}
+
+nav {
+  grid-column: span 3;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 20px;
+}
+
+.wrapper li{
+  display: inline;
+  margin-left: 2em;
+}
+
+.container>section.welcome {
+  margin-top: 5rem;
+}
+
+.why li {
+  display: flex;
+  padding: 1rem;
+  width: 33%;
+}
+
+.why img {
+  width: 20%;
+  height: auto;
+  padding: 5px;
+  align-self: flex-start;
+  padding: 16px;
+  float: left;
+}
+
+.button {
+  /* border: solid 2px pink; */
+  border-radius: 2px;
+  background-color: pink;
+  padding: 1em 1.5em;
+  text-transform: uppercase;
+  text-decoration: none;
+  margin: 2rem;
+}
+
+a:hover {
+  background-color: rgb(255, 174, 187);
+}
+
+.team ul {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center
+}
+
+.team li {
+  width: 30%;
+  margin-bottom: 2rem;
+  text-align: center;
+}
+
+.team img {
+  border-radius: 100%;
+  border: 6px solid pink;
+  margin: 1rem;
+}
+
+.testimonial {
+  padding: 1rem 12rem;
+}
+
+.testimonial p {
+  align-self: flex-end;
+  padding-right: 3em;
+  font-style: italic;
+  font-family: 'Noto Serif', serif;
+  font-size: 1rem;
+  color: rgb(0, 60, 255);
+}
+
+strong {
+  color: rgb(255, 174, 187);
+}
+
+blockquote {
+  font-style: italic;
+  font-family: 'Noto Serif', serif;
+  font-size: 1.25em;
+  line-height: 175%;  
+}
+
+.sponsors {
+  margin: 0 10em;
+}
+
+.sponsors ul {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-around; 
+  align-items: center;
+}
+
+.sponsors img {
+  margin: 0 20px;
+}
+
+footer {
+  background-color: blue;
+  grid-column: 1 / span 3;
+  display: flex;
+  flex-direction: row;
+  color: white;
+}
+
+footer div {
+  margin: 4rem;
+}
+
+footer ul {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+footer ul li {
+  margin-top: 5px;
+}