CS50x/index.html at main · omid-slhnia/CS50x · 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
<!DOCTYPE html>

<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  <link href="css/style.css" rel="stylesheet">
  <title>Maycon Paqui</title>
</head>

<body>

  <header>
    <div class="container">
      <div class="row">
        <div class="col mr-auto">
          <a href="index.html" class="header-logo col"> Maycon Paqui</a>
        </div>
        <nav class="header-menu">
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="projects.html">Projects</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <main>
    <section class="home-about animation">
      <div class="container justify-content-center">
        <div class="row animation">
          <div class="col-6 mr-auto">
            <p>Hi, I am</p>
            <h1>Maycon Paqui</h1>
            <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at elit tempor, fringilla dolor porta, mattis nunc. Ut sapien elit, dapibus nec magna id, pretium blandit urna </p>
            <div class="text-center">
              <a href="about.html" class="btn">About Me</a>
            </div>
          </div>
          <div class="col-6">
            <img src="img/Eu-home.svg" alt="Me">
          </div>
        </div>

      </div>
    </section>

    <section class="home-projects animation-2">
      <div class="container ">
        <h2>Recent Projects</h2>
        <div class="row justify-content-center">
          <div class="col-4"><img src="img/project.svg" alt="project"></div>
          <div class="col-6">
            <h3>Project 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus viverra, mauris at semper placerat, eros libero maximus enim, sit amet iaculis neque tortor id lectus. In luctus felis sed velit aliquet, sed convallis nisi congue. Sed malesuada, nibh nec rutrum elementum, lacus nisl volutpat urna, sed pellentesque ex arcu a diam. Cras non tellus vel sapien porttitor viverra. </p>
          </div>
        </div>
      </div>
    </section>

  </main>

  <footer>
    <div class=" container">
      <div class="row">
        <div class="col-3 mr-auto">
          <p>&copy; Maycon Paqui</p>
        </div>
        <div class="social-networks">
          <a href="https://github.com/Mayconpm" target="_blank"><img src="img/github.svg" alt=""></a>
          <a href="" target="_blank"><img src="img/linkendin.svg" alt=""></a>
          <a href="https://www.facebook.com/maycon.marciano" target="_blank"><img src="img/facebook.svg" alt=""></a>
        </div>
      </div>
    </div>
  </footer>
  <script>
    $(".animation").delay(100).animate({ opacity: 1 }, 700);
    $(".animation-2").delay(1000).animate({ opacity: 1 }, 700);
  </script>
</body>

</html>