portfolio-website/portfolio-item.html at master · prototowb/portfolio-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
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
<!DOCTYPE html>
<html lang="en">
<head>

  <!--  Meta  -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tobias Rauer - Portfolio</title>
  <!--  Styles  -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,900|Source+Sans+Pro:300,900&display=swap">
  <link rel="stylesheet" href="styles/main.css">
</head>
  <!--  body  -->
<body>
  <header>
    <div class="logo">
      <img src="prototowb_logo.png" alt=".prototowb">
    </div>
    <button class="nav-toggle" aria-label="toggle navigation">
      <span class="hamburger"></span>
    </button>
    <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item"><a href="index.html" class="nav__link">Home</a></li>
          <li class="nav__item"><a href="index.html#services" class="nav__link">My Services</a></li>
          <li class="nav__item"><a href="index.html#about" class="nav__link">About me</a></li>
          <li class="nav__item"><a href="index.html#work" class="nav__link">My Work</a></li>
        </ul>
    </nav>
  </header>

  <!-- Intro -->
  <section class="intro" id="home">
    <h1 class="section__title section__title--intro">
      The title of <strong>My Project</strong>
    </h1>
    <p class="section__subtitle section__subtitle--intro">A short subtitle</p>
    <img src="https://tobiasrauer.de/images/portfolio/portfolio-02.jpg" alt="" class="intro__img">
  </section>

  <div class="portfolio-item-individual">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
    <img src="https://tobiasrauer.de/images/portfolio/portfolio-02.jpg" alt="">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  </div>

  <!-- Footer -->
  <footer class="footer">
    <a href="mailto:hi@tobiasrauer.de" class="footer__link">hi@tobiasrauer.de</a>
    <ul class="social-list">
      <li class="social-list__item">
        <a class="social-list__link" href="https://github.com/prototowb">
          <i class="fab fa-github"></i>
        </a>

      </li>
      <li class="social-list__item">
        <a class="social-list__link" href="https://codepen.io/">
          <i class="fab fa-codepen"></i>
        </a>

      </li>
      <li class="social-list__item">
        <a class="social-list__link" href="https://linkedin.com/in/tobias-rauer">
          <i class="fab fa-linkedin"></i>
        </a>

      </li>
      <li class="social-list__item">
        <a class="social-list__link" href="https://twitter.com/prototowb">
          <i class="fab fa-twitter"></i>
        </a>

      </li>
    </ul>
  </footer>

  <!-- Scripts -->
  <script src="scripts/main.js"></script>
</body>
</html>