CSS-framework/index.html at main · Anurag-Spec/CSS-framework · 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
<!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>Bueno UI</title>
    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
   <!-- navigation bar -->
    <nav class="navbar">
      <img
      onclick="document.location='index.html'"
        class="logo-image"
        src="././images/logo.png"
        alt="Bueno ui logo"
      />
    </nav>
    <main id="main">
      <section class="section-introduction">
        <h1 class="nav-title">Bueno UI</h1>
        <h2 class="intro-title">
          Create your own beautiful websites easily and fast.
        </h2>
        <p class="intro-text">
          Bueno UI is easy to use, accessible and beautiful CSS framework that
          provides you with a building block to build a fully functional,
          responsive website
        </p>
          <button onclick="document.location='components.html'" class="intro-btn">Get Started</button></a
        >
      </section>
      <section class="section-moreinfo">
       <div class="more-info">
        <img class="img-moreinfo" src="././images/monitor-tablet-and-smartohone.png" alt="icon-1" />
        <p class="info-text">Bueno UI comes with responsive CSS</p>
        </div>
        <div class="more-info">
        <img class="img-moreinfo" src="./images/resize.png" alt="icon-2" />
        <p class="info-text">Bueno UI is scalable and can be used to make big projects</p>
        </div>
        <div class="more-info">
        <img class="img-moreinfo" src="././images/email (1).png" alt="icon-3" />
        <p class="info-text">
          For any queries or help you can email us and we will be more than
          happy to help
        </p>
        </div>
      </section>
      <section class="section-reviews">
       <h2>Our Reviews</h2>
        <div class="reviews-card">
          <img class="reviews-img" src="././images/sagarprofile.jpg" alt="first reviewer" />
          <p class="reviews-text">
            "Bueno UI is very easy to use and helped me with my project. I would
            highly recommend it to beginners"
          </p>
        </div>
        <div class="reviews-card">
          <img class="reviews-img" src="./images/swapnilprofile.jpg" alt="Second reviewer" />
          <p class="reviews-text">
            "It is great to have a full fledged solution to all my CSS problems
            and just focus on functionality."
          </p>
        </div>
      </section>
    </main>
    <footer class="footer">
     <div class="footer-links">
     <a class="footer-link" href="#">Twitter</a>
      <a class="footer-link" href="#"> GitHub</a>
      <a class="footer-link"href="#"> Linkedin</a>
      </div>
      <p>Created in India by Anurag</p>
    </footer>
  </body>
</html>