Codingthynk/index.html at main · Cramouchegit/Codingthynk · 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web With Sass</title>
    <script
      src="https://kit.fontawesome.com/2400e03b89.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="css-output.css" />
  </head>
  <body>
    <!-- Navbar -->
    <section class="navbar">
      <a href="#"><img src="images/codingthinkpng.png" class="" alt="" /></a>
      <div class="right">
        <a href="#about">About</a>
        <a href="#product">Our Product</a>
        <a href="contact">Contact</a>
      </div>
    </section>

    <!-- Header -->
    <section class="header">
      <div class="text-header">
        <h1 class="judul-header">Belajar Coding From Zero to Hero</h1>
        <hr />
        <p>
          Bergabung bersama kami untuk belajar coding dengan mudah dan
          terstruktur
        </p>
        <a href="#" class="button-primary">Gabung sekarang!</a>
        <a href="#" class="button-secondary">Pelajari dulu</a>
      </div>
    </section>

    <!-- About -->
    <section class="about">
      <div class="grid-container">
        <div class="item-sepertiga">
          <img
            src="images/Purple Pink Retro Y2K Fashion Logo.png"
            alt=""
            class=""
          />
        </div>
        <div class="item-duapertiga">
          <h1>About us</h1>
          <h2>Berkenalan dengan Codingthynk</h2>
          <p>
            Belajar Coding bersama kami dan cari tahu hal hal baru bersama
            mentor dan member kami.
          </p>
        </div>
      </div>
    </section>

    <!-- Product -->
    <section class="product">
      <div class="text-header">
        <h1 class="judul-product">Our Product</h1>
        <hr />
      </div>
      <div class="product-body">
        <div class="product-item">
          <div class="product-header">
            <img src="images/img1.jpg" alt="" />
          </div>
          <div class="product-content">
            <h2>Product Pertama</h2>
            <p>
              Ini merupakan product unggulan dari Codingthynk. Silahkan
              bergabung untuk mendapatkan manfaat dari product ini.
            </p>
          </div>
          <div class="product-footer">
            <a href="#" class="button-primary">Detail</a>
          </div>
        </div>
        <div class="product-item">
          <div class="product-header">
            <img src="images/img1.jpg" alt="" />
          </div>
          <div class="product-content">
            <h2>Product Pertama</h2>
            <p>
              Ini merupakan product unggulan dari Codingthynk. Silahkan
              bergabung untuk mendapatkan manfaat dari product ini.
            </p>
          </div>
          <div class="product-footer">
            <a href="#" class="button-primary">Detail</a>
          </div>
        </div>
        <div class="product-item">
          <div class="product-header">
            <img src="images/img1.jpg" alt="" />
          </div>
          <div class="product-content">
            <h2>Product Pertama</h2>
            <p>
              Ini merupakan product unggulan dari Codingthynk. Silahkan
              bergabung untuk mendapatkan manfaat dari product ini.
            </p>
          </div>
          <div class="product-footer">
            <a href="#" class="button-primary">Detail</a>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact -->
    <section class="contact">
      <div class="info">
        <h1>Contact Us</h1>
        <p>
          Jika Anda mempunyai pertanyaan, jangan ragu untuk menghubungi kami.
        </p>
        <i class="fa fa-map-marker"></i>Bandung, Jawa Barat<br />
        <i class="fa fa-phone"></i>+62 823717237<br />
        <i class="fa fa-envelope"></i>Codingthynk@yahoo.com<br />
      </div>
    </section>

    <!-- Footer -->
    <section class="footer">
      <a href="#"><i class="fab fa-facebook"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <p>Powered by Codingthynk</p>
    </section>
  </body>
</html>