Revert "First attempt"

DiegoJunior0 · DiegoJunior0 · commit dbb181b79908 · 2021-11-14T14:45:33.000Z
This reverts commit 7eeaaf7.
diff --git a/css/style.css b/css/style.css
@@ -1,18 +1,9 @@
 
  /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
- :root {
-    --grey-dark: #1D1E21;
-    --grey-med: #53565C;
-    --grey-light: #8A8F98;
-    --orange-dark: #c05326;
-  }
-
-body, h1, h2, h3, h4 {
+body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
-    color: var(--grey-dark);
-    font-weight: lighter;
 }
 
 /**
@@ -25,143 +16,4 @@ body, h1, h2, h3, h4 {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
-/* headings */
-
-h1 {
-    margin: 0;
-    font-size: 4rem;
-    color: white;
-}
-
-h2 {
-    font-size: 3rem;
-}
-
-h3 {
-    font-size: 2rem;
-    color: white;
-}
-
-h4 {
-    font-size: 2em;
-}
-
-/* main / re-used */
-.container {
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-
-.flex-col {
-    display: flex;
-    flex-direction: column;
-}
-
-.flex-row {
-    display: flex;
-    flex-direction: row;
-}
-
-.bold {
-    font-weight: bold;
-}
-
-/* header */
-
-.header {
-    margin-left: auto;
-    margin-right: auto;
-    height: 60px;
-    justify-content: space-between;
-    align-items: center;
-    padding-left: 7rem;
-    padding-right: 7rem;
-}
-
-.logo img {
-    height: 40px;
-    width: auto;
-}
-
-.splash {
-    align-items: center;
-    justify-content: center;
-    background-image:  url("../img/first-background.jpg");
-    background-repeat: no-repeat;
-    background-position: center;
-    min-height: 70vh;
-}
-
-/* navigation */
-
-.navigation {
-    list-style: none;
-}
-
-.nav-item {
-    margin: 0rem 1rem;
-    color: var(--grey-light);
-}
-
-.nav-current {
-    color: var(--grey-med);    
-}
-
-.nav-link {    
-    color: inherit;
-    text-decoration: none;
-}
-
-.nav-item :hover {
-    color: var(--orange-dark);
-}
-
-/* buttons */
-
-button {
-    background-color: var(--orange-dark);
-    padding: 1rem 2rem;
-    color: white;
-    border: none;
-    border-radius: 5px;
-}
-
-/* selling points */
-.sellingpoints {
-    align-items: center;
-    justify-content: center;
-    margin-top: 5rem;
-    margin-bottom: 5rem;
-}
-
-.features {
-    justify-content: space-evenly;
-    width: 100%;
-}
-
-.feature-item {
-
-}
-
-.features img {
-    height: 150px;
-    width: auto;
-}
-
-/* footer */
-
-.footer {
-    min-height: 200px;
-    align-items: center;
-    justify-content: space-evenly;
-}
-
-.socials {
-    align-items: center;
-}
 
-.socials img {
-    max-height: 16px;
-    width: auto;
-    padding: 0 1rem;
-}
diff --git a/index.html b/index.html
@@ -11,69 +11,9 @@
 </head>
 <body>
 
-    <header class="header container flex-row">
-        <logo class="logo">
-            <img src="img/karma-logo.svg" />
-        </logo>
-        <nav>            
-            <ul class="navigation flex-row">
-                <li class="nav-item nav-current bold">
-                    <a class="nav-link" href="">Meet Karma</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="">How it Works</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="">Store</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="">Blog</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="">Help</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="">Login</a>
-                </li>
-            </ul>
-        </nav>
-    </header>
-
-    <main class="main container">
-        <section class="splash flex-col">
-            <h1>Introducing Karma</h1>
-            <h3>Bring WiFi with you, everywhere you go.</h3>
-            <button>Learn More</button>
-        </section>
-        <section class="sellingpoints flex-col">
-            <h2>Everyone needs a little Karma</h2>
-            <features class="features flex-row">
-                <featureitem class="feature-item flex-col">
-                    <img src="img/icon-devices.svg"/>
-                    <h4>Internet for all devices</h4>
-                </featureitem>
-                <featureitem class="feature-item flex-col">
-                    <img src="img/icon-coffee.svg"/>
-                    <h4>Boost your productivity</h4>
-                </featureitem>
-                <featureitem class="feature-item flex-col">
-                    <img src="img/icon-refill.svg"/>
-                    <h4>Pay as You Go</h4>
-                </featureitem>
-            </features>
-        </section>        
-
-    </main>
-
-    <footer class="footer container flex-col">
-        <p class="bold">Join us on</p>
-        <socials class="socials flex-row">
-            <img src="img/twitter-icon.svg" />
-            <img src="img/facebook-icon.svg" />
-            <img src="img/instagram-icon.svg" />
-        </socials>
-        <p>&copy; Karma Mobility Inc</p>
-    </footer>
+    <!-- Add your HTML markup here -->
+    <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
+    <!-- All the images you need are in the 'img' folder -->
 
 </body>
 </html>
