API-Blog/index.html at master · ParisArcos/API-Blog · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog with API</title>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
  <!-- Custom JS files -->
  <script type="module" src='assets/js/main.js' defer></script>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;200;300;400;500;600;700&display=swap"
    rel="stylesheet">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"
    defer></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
    integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"
    defer></script>
  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" />
  <!-- Custom Styles -->
  <link rel='stylesheet' type='text/css' media='screen' href='assets/css/styles.css'>
</head>

<body>

  <!-- Main -->
  <main class="main">

    <!-- Header -->
    <header class="header w-100 position-fixed d-flex justify-content-between">
      <h1 class="header__title">Blog</h1>

      <!-- Toggle -->
      <div class="toggle__wrapper hoverable">
        <label class="toggle" id="toggle" htmlFor="toggle">
          <div class="toggle_icons">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M6.995 12C6.995 14.761 9.241 17.007 12.002 17.007C14.763 17.007 17.009 14.761 17.009 12C17.009 9.239 14.763 6.993 12.002 6.993C9.241 6.993 6.995 9.239 6.995 12ZM11 19H13V22H11V19ZM11 2H13V5H11V2ZM2 11H5V13H2V11ZM19 11H22V13H19V11Z" />
              <path d="M5.63702 19.778L4.22302 18.364L6.34402 16.243L7.75802 17.657L5.63702 19.778Z" />
              <path d="M16.242 6.34405L18.364 4.22205L19.778 5.63605L17.656 7.75805L16.242 6.34405Z" />
              <path d="M6.34402 7.75902L4.22302 5.63702L5.63802 4.22302L7.75802 6.34502L6.34402 7.75902Z" />
              <path d="M19.778 18.3639L18.364 19.7779L16.242 17.6559L17.656 16.2419L19.778 18.3639Z" />
            </svg><!-- Sun -->
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M12 11.807C10.7418 10.5483 9.88488 8.94484 9.53762 7.1993C9.19037 5.45375 9.36832 3.64444 10.049 2C8.10826 2.38205 6.3256 3.33431 4.92899 4.735C1.02399 8.64 1.02399 14.972 4.92899 18.877C8.83499 22.783 15.166 22.782 19.072 18.877C20.4723 17.4805 21.4245 15.6983 21.807 13.758C20.1625 14.4385 18.3533 14.6164 16.6077 14.2692C14.8622 13.9219 13.2588 13.0651 12 11.807V11.807Z" />
            </svg><!-- Moon -->
          </div>
          <input class="toggle__input" id="toggle__input" name="toggle" type="checkbox" />
        </label>
      </div><!-- Toggle -->
    </header><!-- Header -->

    <!-- Post main -->
    <section class="section full-page d-flex align-items-center justify-content-center text-center mt-0">
      <article class="post-main" id="post-main">
      </article>
    </section><!-- Post main -->

    <!-- Posts block -->
    <section class="section">
      <div class="posts-block">
        <span class="posts-block__content d-block" id="lines-content">
        </span>
      </div>
    </section><!-- Posts lines -->

    <!-- Posts tinder -->
    <section class="section">
      <div class="posts d-flex justify-content-around align-items-center h-100 position-relative">
        <span class="posts__swipe-label d-md-none">Swipe left</span>
        <div class="post-card-cont row" id="tinder-content">
        </div>
        <span class="posts__swipe-label d-md-none">Swipe right</span>
      </div>
    </section><!-- Posts tinder -->

    <!-- Posts inline -->
    <section class="section mb-0">
      <div class="posts-inline">
        <span class="posts-inline__content d-inline" id="inline-content">
        </span>
      </div>
    </section><!-- Posts inline -->

    <!-- Footer -->
    <footer class="footer">
      <div class="creators">
        <p class="creators__love text-center">Created by</p>
        <p class="creators__list text-center">
          <span class="text-uppercase">Pere Serra</span>
          and
          <span class="text-uppercase">Paris Arcos</span>
        </p>
      </div>
    </footer><!-- Footer -->

  </main><!-- Main -->

  <!-- Modal -->
  <div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="postModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    </div>
  </div><!-- Modal -->

</body>

</html>