carboncheck.com/index.html at main · Tony-devops/carboncheck.com · 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
<!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">
  <title>CarbonCheck.com</title>

  <link rel="stylesheet" href="src/styles.css" />

  <!-- adding Manrope font -->
  <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=Manrope:wght@200;300;400;500;600;700;800&display=swap"
    rel="stylesheet">
  <!-- adding Rubik One font -->
  <link href='https://fonts.googleapis.com/css?family=Rubik One' rel='stylesheet'>

  <!-- adding bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

  <!-- fontawesome for icons -->
  <script src="https://kit.fontawesome.com/e8c9266318.js" crossorigin="anonymous"></script>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-md">
      <div class="container-fluid">
        <a class="navbar-brand logo-group" href="index.html">
          <img src="./media/logo.png" class="logo-image" width="30" height="auto" class="d-inline-block align-top"
            alt="logo-image">
          <p class="logo-text">CarbonCheck.com</p>
        </a>

        <button class="navbar-toggler changed-toggler" type="button" data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
          aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <div class="navbar-nav ms-auto menu">
            <a class="nav-link active" aria-current="page" href="./index.html">Home</a>
            <a class="nav-link" href="./calculator.html">Calculator</a>
            <a class="nav-link" href="./contact.html">Contact</a>
          </div>
        </div>
      </div>
    </nav>
  </header>

  <main class="main-page">
    <div class="container">
      <div class="row">
        <div class="col-lg left-side">
          <h1>Calculate, report on, and reduce your carbon footprint.</h1>
        </div>
        <div class="col-lg right-side">
          <p>Our world is in crisis - from climate change to the pollution in our oceans and devastation of our
            forests. It's up to all of us to fix it. Take your first step with our footprint calculator.
          </p>
          <a class="start-calculator-text" href="./calculator.html">Start the calculator</a>
          <a href="./calculator.html"><i class="fa-solid fa-arrow-right arrow"></i></a>
        </div>
      </div>
    </div>
  </main>

  <footer>
    <hr class="d-sm-block d-md-block d-lg-none  d-xl-none">
    <div class="container">
      <div class="row">
        <div class="col-lg">
          <a class="footer-link" href="#">Methodology</a>
        </div>
        <div class="col-lg">
          <a class="footer-link" href="#">Terms & Conditions</a>
        </div>
        <div class="col-lg">
          <a class="footer-link" href="#">Data Protection</a>
        </div>
        <div class="col-lg logo-in-footer">
          <a class="logo-group" href="./index.html">
            <img src="./media/logo.png" class="logo-image" width="20" height="auto" class="d-inline-block align-top"
              alt="logo-image">
            <p class="logo-text">CarbonCheck.com</p>
          </a>
        </div>
        <div class="col-lg">
          <a class="footer-link" href="#">Contact Us</a>
        </div>
        <div class="col-lg">
          <a class="footer-link" href="#">Cookie Settings</a>
        </div>
        <div class="col-lg">
          <a class="footer-link" href="#">Resources</a>
        </div>
      </div>
    </div>
    <hr>
    <div class="socials">
      <i class="fa-brands fa-facebook"></i>
      <i class="fa-brands fa-square-instagram"></i>
      <i class="fa-brands fa-twitter"></i>
    </div>
    <p class="c-text">© CarbonCheck.com 2023. We love our nature!</p>
    <a class="link-in-footer" target="_blank" href="https://github.com/VitalinaKuzmenko/carboncheck.com">Open-source
      code</a>
  </footer>

  <!-- adding bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
    crossorigin="anonymous"></script>
</body>

</html>