responsive-project/about.html at main · SofiiCode/responsive-project · 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
<!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" />
    <meta name="description" content="Eco Friendly And Sustainable Products for Your Zero Waste Life.About us">
    <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=Playfair+Display:wght@700&family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/52378f052a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/styles/main.css">
    <title>About us- Company name</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-md bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="/" title="Homepage"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfGigsV1IfnpSQJhlOY9cYKIgwVc0UmBdlIA&usqp=CAU" alt="Logo" width="50" height="40" class="d-inline-block align-text-top"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                <a class="nav-link " aria-current="page" title="Homepage" href="/index.html">Home</a>
                </li>
                <li class="nav-item">
                <a class="nav-link active" href="/about.html" title="About us page">About us</a>
                </li>
                <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="/shop.html" title="Our shop page" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Shop
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/shop.html">Products</a></li>
                </ul>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="/contacts.html" title="Contact">Contacts</a>
                </li>
            </ul>
            </div>
        </div>
    </nav>
    <div class="container about-wrapper">
        <div class="row">
            <div class="col-6">
                <h1>Our story</h1>
                 <div class="line"></div>
            </div>
            <div class="col-sm-7">
                 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic delectus praesentium suscipit eligendi mollitia nisi corrupti facilis perferendis? Quae itaque, voluptate molestias animi veniam culpa dolorum distinctio aperiam consequuntur atque!
                 Odio debitis officia, labore atque veniam iusto sint reiciendis? Provident enim obcaecati dolorem laudantium. Odio, quod in. Minima corporis sunt odit. Quisquam officia delectus amet, placeat fuga deserunt et ea?
                 Vero perspiciatis reiciendis quis dolores nostrum placeat ipsam totam molestias, quas, ex fugiat dolorem non repellendus tenetur excepturi ipsum sed hic laboriosam doloribus impedit modi unde. </p>
            </div>
            <div class="col-sm-5 text-end">
                <img class="img-fluid" src="/images/Recycling_Monochromatic.svg" alt="Recycling illustration">
            </div>
        </div>
        <div class="row mt-4 form-box">
            <h2>Community requests</h3>
            <div class="col-sm-8 mt-2">
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nostrum a minima sequi deleniti natus, nemo tempore aliquid corporis! Voluptas laudantium ratione deserunt ullam temporibus quaerat nobis mollitia nesciunt in. Molestias?</p>
            </div>
            <div class="col-sm-4  btn-box text-center">
                <a href="#" class="btn btn-second">See more</a>
            </div>
        </div>
    </div>
    <footer>
    <a href="mailto:sofi.andand06@gmail.com">sofi.andand06@gmail.com</a>
    <div class="social-links mt-3">
        <a href="#"><i class="fa-brands fa-instagram"></i></a>
        <a href="#"><i class="fa-brands fa-facebook"></i></a>
        <a href="#"><i class="fa-brands fa-telegram"></i></a>
    </div>
</footer>
  </body>
</html>