Skip to content
This repository was archived by the owner on Oct 26, 2020. It is now read-only.

Html css/week2/osman #69

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Html css/week2/osman #69

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
612a815
Update index.html
Osman-Hajr May 23, 2020
9e7edc4
Update style.css
Osman-Hajr May 23, 2020
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
Next Next commit
Update index.html 
This is my HTML code to recreate the Karam website.
  • Loading branch information
@Osman-Hajr
Osman-Hajr authored May 23, 2020
commit 612a815cd37c0c45e9330c389e48be473ec0352a
116 changes: 111 additions & 5 deletions week2/2-website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,116 @@
<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 -->

<!-- The Navigation Section-->
<nav class="nav-bar">
<!-- The Contents of the Navigation section-->
<div class="nav-content">
<img id="logo" src="img/karma-logo.svg" alt="Krarm Logo">
<!-- The Navigation List -->
<ul class="nav-list">
<li class="active">
<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>

</div>
</nav>
<!-- The Introduction area -->
<section class="introduction">
<!-- The introduction contents -->
<div class="intro-content">
<!-- Intro header -->
<h1>
Introducing Karma
</h1>
<!-- Discription text to the heading -->
<p>
Bring WiFi with you, everywhere you go
</p>
<!-- Button to show more details-->
<button>
Learn More
</button>
</div>
</section>
<!-- Icons of the website -->
<section class="icons">
<!-- Icons contents -->
<div class="icons-content">
<!-- Subheading for the icons -->
<h2>
Everyone needs a little Karma
</h2>
<!-- List of the icons -->
<ul class="icons-list">
<li>
<!-- First icon image-->
<img class="img-icon" src="img/icon-devices.svg" alt="Icon Devices Image">
<!-- Icon text-->
<h4 class="icons-h4">
Internet for all devices
</h4>
</li>
<li>
<!-- Second icon image-->
<img class="img-icon" src="img/icon-coffee.svg" alt="Icon Coffee">
<!-- Icon text-->
<h4 class="icons-h4">
Boost your productivity.
</h4>

</li>
<li>
<!-- Third icon image-->
<img class="img-icon" src="img/icon-refill.svg" alt="Icon Refill">
<!-- Icon text-->
<h4 class="icons-h4">
Pay as you go.
</h4>
</li>
</ul>
</div>
</section>
<!-- Footer Section -->
<footer>
<!-- Horizontal line to seprate the footer section -->
<hr>
<!-- Header for the Footer -->
<h5>
Join us on
</h5>
<!-- List for the social media links of the website -->
<ul class="sm-icons">
<li>
<!-- Twitter icon-->
<a href="#" id="twitter" class="fa fa-twitter"></a>
</li>
<li>
<!-- Facebook icon-->
<a href="#" id="facebook" class=" fa fa-facebook"></a>
</li>
<li>
<!-- Instagram icon-->
<a href="#" id="instagram" class="fa fa-instagram"></a>
</li>
</ul>
<!-- The copyright area -->
<p> © Karma Mobility, Inc. </p>
</footer>
</body>
</html>