grid_19042021/index.html at main · htmlcsscourse/grid_19042021 · 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
95
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="header">
        <div class="header__inner container">
            <div class="header__burger">
                <span></span>
                <span></span>
                <span></span>
            </div>

            <img class="header__logo-mobile" src="img/logo-mobile.svg" alt="logo-mobile">

            <a class="header__logo" href="#"><img class="header__logo-img" src="img/logo.svg" alt=""></a>
            <ul class="header__menu">
                <li class="header__menu-item"><a href="#" class="header__menu-link">How it works</a></li>
                <li class="header__menu-item"><a href="#" class="header__menu-link">Who we are</a></li>
                <li class="header__menu-item"><a href="#" class="header__menu-link">What we do</a></li>
                <li class="header__menu-item"><a href="#" class="header__menu-link">Contact us</a></li>
            </ul>
            <button class="header__sign-in">Sign In</button>
        </div>
    </div>


    <div class="delivery">
        <div class="container">
            <div class="delivery__inner">
                <p class="delivery__title">
                    Delivering good designs <span class="delivery__title-year">since 1954</span> <span
                        class="delivery__title-car">🚚💨</span>
                </p>
                <p class="delivery__text">
                    We’re the first multi-purpose design kit solutions for businesses. We help you bridge gaps between
                    your layouts, templatehgs and developers to empower all involved.
                </p>
                <ul class="delivery__list">
                    <li class="delivery__item">
                        <div>
                            <img class="delivery__item-img" src="img/delivery/support.svg" alt="support">
                            <p class="delivery__item-title">Support</p>
                            <p class="delivery__item-text">Delivering faster and more personalized support with shared
                                screens and cool design systems for Figma</p>
                        </div>
                        <a href="#" class="delivery__item-link">Learn more</a>
                    </li>
                    <li class="delivery__item">
                        <div>
                            <img class="delivery__item-img" src="img/delivery/sales.svg" alt="sales">
                            <p class="delivery__item-title">Sales growth</p>
                            <p class="delivery__item-text">Identify qualified customers with easy-to-use live chat
                                messaging and AI-based Sales Bot</p>
                        </div>
                        <a href="#" class="delivery__item-link">Learn more</a>
                    </li>
                    <li class="delivery__item">
                        <div>
                            <img class="delivery__item-img" src="img/delivery/components.svg" alt="components">
                            <p class="delivery__item-title">Components</p>
                            <p class="delivery__item-text">Delivering faster and more personalized support with shared
                                screens and cool design systems for Figma</p>
                        </div>
                        <a href="#" class="delivery__item-link">Learn more</a>
                    </li>
                    <li class="delivery__item">
                        <div>
                            <img class="delivery__item-img" src="img/delivery/support.svg" alt="support">
                            <p class="delivery__item-title">Swap the icon</p>
                            <p class="delivery__item-text">You can toggle to any icon within Instances and customize
                                outlined stroke to more bolder or lighter</p>
                        </div>
                        <a href="#" class="delivery__item-link">Learn more</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</body>

</html>