basic-web/index.html at main · davadaviar/basic-web · 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
<!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">
    <link rel="stylesheet" href="css/style.css">
    <link rel="favicon" href="favicon.ico">

    <title>Basic Web</title>

</head>


<body>
        <div class="top-container">
            <img src="images/cloud.png" class="top-cloud" alt="cloud-img">

            <h1>Hello, I'm Daviar</h1>
            <p>I'm a Web Designer & Product Designer</p>

            <img src="images/cloud.png" class="bottom-cloud" alt="cloud-img">
            <img src="images/mountain.png" alt="mountain-img">
        </div>

        <div class="middle-container">
            <div class="profile">
              <img src="images/angela.png" alt="profile-img">
              <h2>Hello.</h2>
              <p class="profile-id">Lorem ipsum dolor sit amet, vitae volutpat, dui conubia, dolor urna. Non auctor, montes nulla distinctio.</p>
            </div>
            <hr>
            <div class="skills">
              <h2>My Skills.</h2>
              <div class="skill-row">
                <img class="img-computer" src="images/computer.png" alt="skill-img">
                <h3>Lorem & Ipsum</h3>
                <p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros. Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
              </div>
              <div class="skill-row">
                <img class="img-chilli" src="images/chillies.png" alt="skill-img">
                <h3>Lorem Ipsum Dolor</h3>
                <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam. Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
              </div>
            </div>
            <hr>
            <div class="contact-me">
              <h2>Get In Touch</h2>
              <h3>Lorem ipsum dolor sit amet, non elit.</h3>
              <p class="contact-desc">Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat. </p>
              <a class="btn" href="mailto:name@email.com">CONTACT ME</a>
            </div>
          </div>


          <div class="bottom-container">
            <a class="footer-link" href="https://www.linkedin.com/">LinkedIn</a>
            <a class="footer-link" href="https://twitter.com/">Twitter</a>
            <a class="footer-link" href="https://www.appbrewery.co/">Website</a>
            <p>© Name Surname.</p>
          </div>

</body>


</html>