KatyYouthHack/index.html at main · Ankit-Rattan/KatyYouthHack · 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-Garbage</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">

</head>
<body>
    <!-- Demo Comment -->


        <nav>
            <div class="navbar">

                <div class="sec-1">
                    <img src="img/logo (1).png" alt="">
                    <h3>Side-Garbage</h3>
                </div>
                <div class="sec-2">
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about-us">Mission</a></li>
                        <li><a href="#panel">Panel</a></li>
                        <li><a href="#ambd">Ambassador</a></li>
                        <li><a href="#contact">Contact with us</a></li>

                    </ul>
                </div>
        </div>
    </nav>
    <br>
    <section id="home" class="home">
        <h3>We Believe in you,
            <br>
            And your Cooperation.
        </h3>
    </section>
    <section id="about-us" class="about-us">
        <h3>Our Mission</h3>
        <section class="img-txt-abt">

            <div class="about-img">
                <img src="img/about us.png" alt="">

            </div>
            <div class="about-text">
                Our mission is clear, to bridge the gap between individuals and organizations that generate waste textiles and those that can give these materials a second life. We firmly believe that every piece of fabric has the potential to be repurposed, reducing the strain on our environment and contributing to a circular economy.


        </div>
    </section>
</section>
<br><br>
<div id="panel" class="main-panel">

    <section class="panel">
        <div class="s-1">

            <div class="c-1">
                    <div class="card" style= height:25rem;width:25rem;>
                        <img src="https://i.ytimg.com/vi/xu3KysCUqEo/maxresdefault.jpg" class="card-img-top" alt="...">
                        <br> <br><br> <br>
                        <div class="card-body">
                            <h5 class="card-title">GoodWill</h5>
                            <p class="card-text">GoodWill is one of the famous organiztion which help in giving the fabircs the second life.</p>
                            <a href="#" class="btn btn-primary">Click to Connect</a>
                        </div>
                    </div>
                </div>
                <div class="c-2">
                    <div class="card" style="height:25rem;width: 25rem;">
                        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRfMdDmhLcuDyBTarIySGQikGw1J8zp5ZkeW-u95HbC7P2de54S" class="card-img-top" alt="...">
                        <br><br><br><br>
                        <div class="card-body">
                            <h5 class="card-title">Infinited Fiber</h5>
                            <p class="card-text">Infinitef Fibre is one among the organizations who use their precise method to recylce the fiber.</p>
                            <a href="#" class="btn btn-primary">Click to Connect</a>
                        </div>
                    </div>
                </div>

            </div>
            <div class="s-2">
                <div class="c-1">
                    <div class="card" style="height:25rem;width: 25rem;">
                        <img src="https://t0.gstatic.com/images?q=tbn:ANd9GcSsGS6WXFCxNBCa_mbfFx_rMEpILp7VNsK8uyU5DLdvejsx4_77" class="card-img-top" alt="...">
                        <br><br><br>
                        <div class="card-body">
                            <h5 class="card-title">Patagonia</h5>
                            <p class="card-text">Patagonia is famous for their methods and services toward textiles regeneration.</p>
                            <a href="#" class="btn btn-primary">Click to Connect</a>
                        </div>
                    </div>
                </div>

                <div class="c-2">
                    <div class="card" style="height:25rem;width: 25rem;">
                        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRcrzVhSaBHWEAAQ6ia1rDEwaI4AoWA2tagcsnb0cIhLpuuwXX2" class="card-img-top" alt="...">
                        <br><br><br><br><br>
                        <div class="card-body">
                            <h5 class="card-title">Lenzing</h5>
                            <p class="card-text">Lenzing use different methodologies for the recycle of the fabrics.</p>
                            <a href="#" class="btn btn-primary">Click to Connect</a>
                        </div>
                </div>
            </div>
        </div>

    </section>
</div>
<br><br>
<div id="ambd" class="amb-prg">

    <h3>Spread - Connect - Grow</h3>
    <section class="ambassador">
        <div class="img-amb">
            <img src="img/amb.png" alt="">

        </div>
        <div class="amb-text">
            We invite you to join our growing community of changemakers who are taking steps towards a more sustainable future. Whether you're an individual looking to declutter your closet responsibly or a business aiming to embed eco-friendliness into your operations, <i>Side-Garbage</i> is here to guide and support you every step of the way.
            <br>
            <br>
            <a href="#" class="btn btn-primary">Want to Apply!</a>


        </div>

    </section>
</div>
<br><br>

    <section id="contact" class="contact">
        <div class="logo">
            <img src="img/logo (1).png" alt="">

        </div>
        <div class="mid">
            <h5>Side Garbage</h5>
            <p>Email us at - <i> [email protected] </i></p>
        </div>
        <div class="social">
            <div id="col-trs" class="twi"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
                <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
              </svg></div>
            <div id="col-trs" class="yt"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
                <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
              </svg></div>
            <div id="col-trs" class="insta"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
              </svg></div>

            <div id="col-trs" class="fb"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
                <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
              </svg></div>
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

</body>
</html>