basic-static-website/index.html at main · shrameet37/basic-static-website · 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
<!DOCTYPE html>
<html lang="en">
<title>Basic Static Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4.9.1/css/tachyons.min.css" />

<body class="pa3 pa5-ns sans-serif lh-copy bt bw2 b--gold black-80">
    <main>
        <div class="mw7 center">
            <header class="flex flex-column flex-row-ns items-center tc tl-ns">
                <div class="w-100 w-70-ns">
                    <h1 class="f2">Hello</h1>
                    <p class="f4">This is a simple one-page website.</p>
                </div>
                <div class="w-100 w-30-ns tr">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="76" height="76" style="fill: rgba(0,0,0,.8)">
                        <path class="heroicon-ui" d="M20.59 12l-3.3-3.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4l3.3-3.3zM3.4 12l3.3 3.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 0 1 1.42 1.4L3.4 12zm7.56 8.24a1 1 0 0 1-1.94-.48l4-16a1 1 0 1 1 1.94.48l-4 16z"
                        />
                    </svg>
                </div>
            </header>
            <article>
                <p class="tj bl bw1 b--gold pl2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium non turpis et scelerisque. Vestibulum
                    condimentum sem vitae efficitur auctor. Quisque a enim id augue iaculis laoreet. Vivamus tincidunt erat
                    ut orci aliquet, in scelerisque ante semper. Aenean ac porta lectus. Nullam rutrum purus et risus sagittis,
                    id elementum arcu maximus. Donec at lectus at augue blandit mollis sit amet hendrerit orci. Morbi a porttitor
                    arcu, vel volutpat enim.</p>
            </article>
        </div>
    </main>
</body>

</html>