HTML-CSS-Module-Project/index.html at 1466f2023b8780932bbac8b235c99b5f063c0fcf · CodeYourFuture/HTML-CSS-Module-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!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</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="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 part -->
    <header>
        <img class="karmaIcon" src="./img/karma-logo.svg" alt="karma's icon">
        <nav>
            <ul>
                <li>
                    Meet Karma
                </li>
                <li>
                    How it Works
                </li>
                <li>
                    Store
                </li>
                <li>
                    Blog
                </li>
                <li>
                    Help
                </li>
                <li>
                    Login
                </li>
            </ul>
        </nav>
    </header>

    <main>

        <!-- first section part -->
        <section class="main-area" style="background-image: url(./img/first-background.jpg);" role="img"
            aria-label="half of a man in the frame, mam is sitting at a table and working, tablet and karma device on the table">
            <h3>Introducing Karma</h3>
            <h4>Bring WiFi with you, everywhere you go.</h4>
            <button>Learn More</button>
        </section>


        <!-- second section part -->
        <section class="article-area">
            <h3>Everyone needs a little Karma.</h3>
            <div class="article-grid">
                <img class="article-icon" src="./img/icon-devices.svg" alt="icon of pc, tablet and mobile phone">
                <img class="article-icon" src="./img/icon-coffee.svg" alt="icon of a coffee mug with steam coming out">
                <img class="article-icon" src="./img/icon-refill.svg" alt="icon of a gas pump from a refill station">
                <h4>Internet for all devices</h4>
                <h4>Boost your productivity</h4>
                <h4>Pay as You Go</h4>
            </div>
        </section>

    </main>
    <!-- footer part -->
    <footer>
        <hr>
        <h5>Join us on</h5>
        <div>
            <img class="media-logo" src="./img/twitter-icon.svg" alt="twitter icon">
            <img class="media-logo" src="./img/facebook-icon.svg" alt="facebook icon">
            <img class="media-logo" src="./img/instagram-icon.svg" alt="instagram icon">
        </div>
        <h6>@ Karma Mobility, Inc.</h6>
    </footer>


</body>

</html>