# Workshop 1

index.html

<html>

<head>
    <link href="https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="header">
        <div class="bar">
            <a href="#">link</a>
            <a href="#">link</a>
            <a href="#">link</a>
        </div>
        <h1 class="title">How to use mindfullness<br> in everyday life</h1>
    </div>
    <div class="main">
        <p class="mainP">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit quam turpis. Proin at hendrerit velit. Fusce fermentum justo orci, non placerat metus ornare non. Quisque convallis semper finibus. Vivamus vel vestibulum nisl, ac pulvinar elit.
            Phasellus scelerisque, diam dapibus convallis pharetra, odio libero semper mi, id elementum nulla risus sagittis tortor. Nam urna dui, rutrum malesuada nisl a, placerat tincidunt ipsum. Etiam faucibus, tellus non tincidunt dignissim, justo
            urna fringilla enim, sed egestas felis velit quis odio. Vestibulum et sem varius leo faucibus auctor. Suspendisse feugiat, elit eget egestas luctus, libero nulla fringilla felis, tincidunt ultricies ante diam id mi. Praesent a sollicitudin
            elit. Aenean mi risus, ultrices in ante vitae, gravida fermentum diam. Pellentesque vel porttitor lacus. Aliquam vitae pretium leo, quis bibendum est. Nulla facilisi. Sed vel velit maximus, tincidunt neque nec, fermentum mauris. Cras ac libero
            urna. Nulla lacus felis, luctus sed vulputate sed, facilisis eu diam. Sed in porta orci. Maecenas scelerisque et urna quis efficitur. Curabitur lorem metus, eleifend quis iaculis vel, scelerisque at sapien. Morbi sed sagittis sapien, sit amet
            imperdiet nisl. Nunc vehicula urna lacus, eget fringilla arcu rutrum pharetra. Integer porta, enim sed fringilla fringilla, est sem pellentesque leo, id sagittis nibh purus sed sem. Fusce a luctus est. Ut convallis finibus felis. Ut eget orci
            suscipit, varius ex ac, elementum nisl. Nam mollis est et dolor tincidunt gravida. Donec dolor velit, consequat ac orci a, fermentum placerat leo. Nam ac ipsum neque. Sed erat dui, feugiat sit amet nulla porta, egestas varius lacus. Pellentesque
            quis mi ullamcorper, aliquam odio quis, hendrerit nibh. Nunc dignissim congue imperdiet. Aenean egestas neque non nisi eleifend sodales. Curabitur iaculis, ligula vitae suscipit tincidunt, quam neque laoreet neque, quis pulvinar nunc nunc
            et ipsum. Vivamus at nibh suscipit, iaculis libero a, vulputate mi. Fusce arcu orci, pretium sed dictum sed, eleifend vitae dolor. Nullam odio velit, rutrum venenatis tincidunt ac, tincidunt at nisi. Vestibulum ante ipsum primis in faucibus
            orci luctus et ultrices posuere cubilia Curae; Donec non purus in elit mattis porta in vitae ipsum.
        </p>
    </div>
</body>

</html>

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

style.css

* {
    box-sizing: border-box;
}

body {
    background-color: #98a79c;
    margin: 0;
    font-family: 'Red Hat Display', sans-serif;
}

.header {
    background-image: url("https://images.unsplash.com/photo-1421790500381-fc9b5996f343?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2134&q=80");
    background-size: cover;
    background-position: center;
    box-shadow: 0px 3px 11px -2px rgba(0, 0, 0, 0.46);
    height: 50vh;
}

.bar {
    text-align: end;
    padding: 3rem;
    padding-bottom: 1rem;
}

.title {
    margin-top: 0.5rem;
    text-align: center;
    font-size: 5rem;
    color: whitesmoke;
}

a {
    margin: 1rem;
    color: whitesmoke;
    text-decoration: none;
    padding: 1rem;
    border: 1px solid whitesmoke;
}

.main {
    background-color: whitesmoke;
    width: 50%;
    margin: 5rem 25%;
    padding: 1rem;
    box-shadow: 0px 3px 11px -2px rgba(0, 0, 0, 0.46);
}

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