Skip to content
Open
Show file tree
Hide file tree
Changes from 5 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
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
19 changes: 0 additions & 19 deletions css/style.css

This file was deleted.

96 changes: 95 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,108 @@
<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="style.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

<!-- 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 -->
<header>
<img class="logoclass" src="favicon.ico" alt="Logo" style="float:left">
<nav class="Karmanav">
<ul class="ulnav">
<li>
<a href="index.html">Meet Karma</a>
</li>
<li>
<a href="#">How it works</a>
</li>
<li>
<a href="store.html">store</a>
</li>
<li>
<a href="#">Blog</a>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Login</a>
</li>
</ul>
</nav>
</header>

<section class="Bkgimg">
<div class="bkgtext">
<h1 class="h1class">Introducing Karma</h1>
<p class="pclass">Bring WiFi with you, everywhere you go.</p>
<button class="karmabtn">Learn More</button>
</div>
</section>
<div class="kmain">
<h2 class="h2class">Everyone needs a little Karma</h2>

<div class="brandDescription">
<div class="imgsclass">
<img src="/img/icon-devices.svg" alt="Device">
<h4>Internet for all Devices</h4>

</div>
<div class="imgsclass">
<img src="/img/icon-coffee.svg" alt="Coffee">
<h4>Boost your productivity</h4>

</div>
<div class="imgsclass">
<img src="/img/icon-refill.svg" alt="Refill">
<h4>Pay As You go</h4>
</div>

</div>


</div>

<div class="bodybottom">

<div class="bodybottomimg">
<img src="/level-2/homepage-feature.png" alt="Karma Store">
</div>




<div class="bodybottomtxt">
<div class="bbtstyle">
<h1>"When Ever I am, I Just don't worry about my connection anymore"</h1>
</div>
<div>
<button class="karmabtn2" onclick="window.location.href='store.html';">Get Karma Today</button>
</div>
</div>

</div>


</body>
<footer>
<div class="allfooter">
<div class="karmafooter">
<h5>Join us On:</h5>
</div>

<div class="footericons">
<img class="twit" src="img/twitter-icon.svg" alt="Twitter">
<img class="face" src="img/facebook-icon.svg" alt="Facebook">
<img class="inst" src="img/instagram-icon.svg" alt="Instgram">

</div>
<div class="ftr">
<h6>@ Karma Mobility Inc.</h6>
</div>
</div>
</footer>
</html>
118 changes: 118 additions & 0 deletions store.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Karma Store</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="style.css">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<header>
<img class="logoclass" src="favicon.ico" alt="Logo" style="float:left">
<nav class="Karmanav">
<ul class="ulnav">
<li>
<a href="index.html">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>
</header>

<div class="storemain">

Choose a reason for hiding this comment

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

don't forget semantic html!

Copy link
Author

Choose a reason for hiding this comment

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

Ok, I will use semantic HTML in my coming projects.

<div class="storeleft">
<div class="formtop">
<h1>Order your Karma WiFi device today!</h1>
</div>
<div>
<form action="#">
<div class="frmlable">
<Label>First Name *</Label>
<label for="#">Last Name *</label>
</div>
<div class="frminput">
<input type="text">
<input type="text">
</div>
<div class="frmaddress">
<label for="#">Address1 *</label>
<input type="text">
<label for="#">Address2</label>
<input type="text">
</div>
<div class="frmlable2">
<label for="#">City *</label>
<label for="#">Post Code *</label>
</div>
<div class="frminput2">
<select id="city">
<option value="lon">London</option>
<option value="man">Manchester</option>
<option value="bel">Belfast</option>
<option value="liv">Liverpool</option>
</select>
<input type="text">
</div>

<div class="ordercolor">
<h5>Select a color:</h5>

</div>

</form>
<input type="radio" id="color1" name="color" value="color1">
<label for="color1">Karma Orange</label>
<input type="radio" id="color2" name="color" value="color2">
<label for="color22"> Space Grey</label><br>
<br>
<br>
<br>
<input type="checkbox" id="" name="" value="">
<label class="terms1" for="">By placing your order you agree to karma's <a class="terms2" href="#">Terms and Conditions.</a> </label><br>
<br>
<br>
<button class="orderbtn">Place my Order</button>


</div>
</div>
<div>
<img class="storeimg" src="level-2/store-image_by-andrew-neel-unsplash.jpg" alt="Store Image">
</div>
</div>
</body>
<footer>
<div class="allfooter">
<div class="karmafooter">
<h5>Join us On:</h5>
</div>

<div class="footericons">
<img class="twit" src="img/twitter-icon.svg" alt="Twitter">
<img class="face" src="img/facebook-icon.svg" alt="Facebook">
<img class="inst" src="img/instagram-icon.svg" alt="Instgram">

</div>
<div class="ftr">
<h6>@ Karma Mobility Inc.</h6>
</div>
</div>
</footer>
</html>
Loading