London-10/Anu Thapaliya/HTML-CSS-Module Project

.vscode/launch.json

@@ -0,0 +1,31 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+
+        {
+            "name": "Launch Chrome",
+            "request": "launch",
+            "type": "chrome",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "name": "Launch Chrome",
+            "request": "launch",
+            "type": "chrome",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        },
+
+
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Open index.html",
+            "file": "/home/cyf/Desktop/Cyberpunk/HTML-CSS-Module-Project/index.html"
+        }
+    ]
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

css/style.css

@@ -1,19 +1,126 @@
 
  /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
-body {
-    font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
+
+
+body{
+    margin: 0;
+    padding: 0;
+
+}
+.header{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    align-items: flex-end;
+    padding-right: 4rem;
+    height: 5rem;
+}
+.header-logo{
+    height: 50px;
+    width: 50px;
+    padding-left: 4rem;
+}
+logo-img{
+    margin-bottom: -10rem;
+}
+ul{
+    width: 100%;
+    margin: 0 0 0 250px;
+    list-style: none;
+}
+nav{
+    width: 100%;
+    overflow: auto;
+
+}
+li{
+    float: left;
+}
+li a{
+    width: 100%;
+    display: block;
+    padding: 20px 15px;
+    text-decoration: none;
+    font-family: sans-serif;
+    color: black;
+    text-align: center;
+}
+.main{
+    background-image: url(../img/first-background.jpg);
+    height: 100vh;
+    width: 100%;
+    color: white;
+    text-align: center;
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+}
+.main h1{
+    font-family: 'Times New Roman', Times, serif;
+    margin-bottom: 1rem;
+    font-size: 1.8rem;
+    text-align: center;
+    margin-top: 5rem;
 }
 
-/**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
- */
+.main p{
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+.main button{
+    color: black;
+    background-color: orangered;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 1rem;
+    padding: 0.8rem;
+    margin-bottom: 6rem;
+background-size: cover;
+}
 
 
+.main2{
+margin-top: 5rem;
+margin-bottom: 1rem;
+text-align: center;
+}
+h1{
+    font-weight: lighter;
+    text-align: center;
+    font-size: 2rem;
+}
+.icons{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    column-gap: 7rem;
+}
+.footer{
+   border-top: 1px solid grey;
+   margin: 1rem 4rem;
+}
+p{
+    font-weight: normal;
+    text-align: center;
+    font-size: medium;
+}
+.join us logo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    column-gap: 1.3em;
+    width: auto;
+    height: 0.5rem;
+     border-radius: 50%;
+     padding: 0.5rem;
+}
+
+.footer-end{
+    text-align: center;
+    color: black;
+    font-size: small;
+}

index.html

@@ -5,11 +5,88 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Karma</title>
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
-    <link rel="stylesheet" href="css/normalize.css">
-    <link rel="stylesheet" href="css/style.css">
+    <!-- <link rel="stylesheet" href="./css/normalize.css"> -->
+    <link rel="stylesheet" href="./css/style.css">
     <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
 </head>
+
 <body>
+
+    <header>
+        <section class="header">
+                <div class="header-logo">
+             <a href="#"><img src="./img/karma-logo.svg" alt="Karma logo"></a>
+            </div>
+            <nav>
+        <ul>
+        <li><a href="#">Meet karma</a></li>
+        <li><a href="#">how it works</a></li>
+        <li><a href="#">store</a></li>
+        <li><a href="#">Blog</a></li>
+        <li><a href="#">Help</a></li>
+        <li><a href="#">Login</a></li>
+         </ul>
+
+        </nav>
+    </section>
+
+           </header>
+
+    <section class="main">
+
+       <h1>Introducing Karma</h1>
+        <p>Bring WiFi with you, everywhere you go</p>
+
+         <button>learn more</button>
+
+    </section>
+
+
+
+
+
+ <section class="Main2">
+    <h1>Everyone needs a little karma</h1>
+ </section>
+
+
+    <section class="icons">
+
+    <div class="icon1">
+    <img src="./img/icon-devices.svg" alt="device icon" class="icon" width="100"/>
+        <p>Internet for all devices</p>
+    </div>
+
+<div class="icon2">
+<img src="./img/icon-coffee.svg" alt="coffee icon" class="icon" width="100"/>
+<p>Boost your productivity</p>
+</div>
+
+    <div class="icon3">
+    <img src="./img/icon-refill.svg" alt="refill icon" class="icon" width="100"/>
+        <p>Pay as you Go</p>
+    </div>
+
+    </section>
+
+
+    <section class="footer">
+        <p>Join us on</p>
+        <img class="Join us logo">  
+
+        <img src="./img/twitter-icon.svg" alt="twitter icon" width="20"/> 
+        <img src="./img/facebook-icon.svg" alt="Facebook icon" width="20"/>
+        <img src="./img/instagram-icon.svg" alt="Instagram icon" width="20"/>
+
+    </img>
+
+    <div class="footer-end">
+        <p> @ Karma Mobility, Inc.</p>
+    </div>
+
+    </section>
+
+
 
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->