HTML-CSS-Module-Project/index.html at 12041dfdb13fedbf5a5b1c504ee9aba4e24f4461 · 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
92
93
94
<!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="shortcuticon" 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>
     <div class="nav-menu">
          <img class="top-logo" src="img/karma-logo.svg" alt="karma-logo" />
        <nav >
         <ul class="nav-menu">
            <li class="nav-list">
                <a href="#" class="nav-item">Meet Karma</a>
            </li>
            <li class="nav-list">
                <a href="#" class="nav-item">How it works</a>
            </li>
            <li class="nav-list">
                <a href="store.html" class="nav-item">Store</a>
            </li>
            <li class="nav-list">
                <a href="#" class="nav-item">Blog</a>
            </li>
            <li class="nav-list">
                <a href="#" class="nav-item">Help</a>
            </li>
            <li class="nav-list">
                <a href="#" class="nav-item">Login</a>
            </li>
         </ul>
       </nav>
     </div>
     </header>
    <main>
        <section class="home">
            <div class="home-content">
                <h2>Introducing Karma</h2>
                <h3>Bring WiFI with you, everywhere you go.</h3>
                <button class="learn">Learn More</button>
            </div>
        </section>

        <section class="about">
            <h2 class="h2-everyone">Everyone needs a little Karma.</h2>
                <div class="about-divs">
                    <article class="middle-article">
                        <img class="middle-logo" src="img/icon-devices.svg" alt="icon-devices" />
                        <p>Internet for all devices</p>
                    </article>
                    <article class="middle-article">
                        <img class="middle-logo" src="img\icon-coffee.svg" alt="icon-coffee" />
                        <p>Boost your productivity</p>
                    </article>
                    <article class="middle-article">
                        <img class="middle-logo" src="img\icon-refill.svg" alt="icon-refill" />
                        <p>Pay as You go</p>
                    </article>
                </div>
            </h2>
        </section>
        <selection class="homepage-feature">
            <div class="feature-image">
                <img   src="img\homepage-feature.png" alt="Homepage feature">
            </div>
            <div class="feature-content">
                <p class="feature-text"><span>&ldquo;</span>Wherever I am, I just don't worry about my connection anymore!<span>&rdquo;</span> </p>
                <button class="get-karma">Get Karma today</button>
            </div>
        </selection>
    </main>


    <footer class="footer-content">
        <hr>
        <p>Join Us On</p>
        <div>
            <a href="https://twitter.com/" target="_blank"><img class="footer-icon" src="img\twitter-icon.svg" alt="twitter-icon" /></a>
            <a href="https://facebook.com/" target="_blank"><img class="footer-icon" src="img\facebook-icon.svg" alt="facebook-icon" /></a>
            <a href="https://instagram.com/" target="_blank"><img class="footer-icon" src="img\instagram-icon.svg" alt="instagram-icon" /></a>
        </div>
        <p class="copyright"><i>NazaninSaedi_2023</i> <hr>KarmaMobility, Inc.</p>
    </footer>
</body>
</html>