├── style.js
├── images
    ├── hs1.jpg
    ├── hs2.jpg
    ├── hs3.jpg
    ├── hs4.jpg
    ├── hs5.jpg
    ├── hs6.jpg
    ├── hs7.jpg
    ├── hs8.jpg
    ├── leaf.jpg
    ├── cover.jpg
    ├── bambooPly.jpg
    ├── briefcase.png
    ├── building.png
    ├── furniture.jpg
    ├── logo-big2.png
    ├── LatestNews.jpg
    ├── bg-big-sky.jpg
    ├── handicraft.jpg
    ├── Flooring Tiles.jpg
    └── pencil.svg
├── style.css
└── index.html


/style.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/images/hs1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/hs1.jpg


--------------------------------------------------------------------------------
/images/hs2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/hs2.jpg


--------------------------------------------------------------------------------
/images/hs3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/hs3.jpg


--------------------------------------------------------------------------------
/images/hs4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/hs4.jpg


--------------------------------------------------------------------------------
/images/hs5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/hs5.jpg


--------------------------------------------------------------------------------
/images/hs6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/hs6.jpg


--------------------------------------------------------------------------------
/images/hs7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/hs7.jpg


--------------------------------------------------------------------------------
/images/hs8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/hs8.jpg


--------------------------------------------------------------------------------
/images/leaf.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/leaf.jpg


--------------------------------------------------------------------------------
/images/cover.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/cover.jpg


--------------------------------------------------------------------------------
/images/bambooPly.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/bambooPly.jpg


--------------------------------------------------------------------------------
/images/briefcase.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/briefcase.png


--------------------------------------------------------------------------------
/images/building.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/building.png


--------------------------------------------------------------------------------
/images/furniture.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/furniture.jpg


--------------------------------------------------------------------------------
/images/logo-big2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/logo-big2.png


--------------------------------------------------------------------------------
/images/LatestNews.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/LatestNews.jpg


--------------------------------------------------------------------------------
/images/bg-big-sky.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/bg-big-sky.jpg


--------------------------------------------------------------------------------
/images/handicraft.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/handicraft.jpg


--------------------------------------------------------------------------------
/images/Flooring Tiles.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ARUN-M-S/kerala-bambooboard/HEAD/images/Flooring Tiles.jpg


--------------------------------------------------------------------------------
/images/pencil.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
2 |   <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
3 | </svg>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 |   
 4 |   /* Clear floats after image containers */
 5 |   .row::after {
 6 |     content: "";
 7 |     clear: both;
 8 |     display: table;
 9 |     background: rgba(88, 207, 144, 1);
10 |   }
11 |   #section3{
12 |     background-image: url("images/bg-big-sky.jpg");
13 |     width: 100%;
14 |     min-height: 100vh;
15 | 
16 |   }
17 |    
18 |   .box img{
19 |     display: block;
20 |     width: 100%;
21 |     border-radius: 5px;
22 |     transition: .5s;
23 |       
24 |   }
25 |   .box:hover{
26 |     transform: scale(1.1);
27 |     z-index: 2;
28 |     overflow: hidden;
29 |   }
30 |   .imgs{
31 |     max-width: 80%;
32 |     max-height: fit-content;
33 |     
34 |   }
35 |   .btn1:hover{
36 |     background-color:rgb(79,225,188);
37 |   }
38 |   #section4{
39 |     background-image: url("images/bg-big-sky.jpg");
40 |     width: 100%;
41 |     min-height: 50vh;
42 |     padding-top: 100PX;
43 |     justify-content: space-around;
44 | 
45 |   }
46 |    


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |   <title>Bamboo-Board</title>
  9 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
 10 |     integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 11 |   <link rel="stylesheet" href="style.css">
 12 |   <sscript src="style.js">
 13 |     </script>
 14 | 
 15 | </head>
 16 | 
 17 | <body>
 18 |   <header>
 19 |     <nav class="navbar navbar-expand-lg  bg-light">
 20 |       <div class="container-fluid ">
 21 |         <button class="navbar-toggler" style="margin-left: 50%;" type="button" data-bs-toggle="collapse"
 22 |           data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
 23 |           aria-label="Toggle navigation">
 24 |           <span class="fa-solid fa-angle-down "> </span>
 25 |         </button>
 26 |         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
 27 |           <div class="navbar-nav">
 28 |             <a class="nav-link active ms-5" aria-current="page" href="#">Angamaly South, 683573, Kerala </a>
 29 |             <a class="nav-link active ms-5" aria-current="page" href="#">(91-484) 2452275, 2452248, 2456575
 30 |             </a>
 31 |             <a class="nav-link ps-5" href="#" style="color:aquamarine;"> bamboocorp71@gmail.com</a>
 32 | 
 33 |           </div>
 34 |         </div>
 35 | 
 36 |       </div>
 37 | 
 38 | 
 39 |     </nav>
 40 |     <div style="text-align: center;width: 100%;">
 41 | 
 42 |       <img class="img-fluid" src="http://www.bambooworldindia.com/img/logo-big2.png" alt="KERALA GOVT">
 43 |     </div>
 44 |   </header>
 45 | 
 46 |   <nav class="navbar navbar-expand-lg navbar-light bg-light">
 47 |     <div class="container-fluid">
 48 | 
 49 |       <button class="navbar-toggler" style="margin-left: 50%; background-color: rgb(88,207,144); opacity: 50%;"
 50 |         type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
 51 |         aria-expanded="false" aria-label="Toggle navigation">
 52 |         <span class="navbar-toggler-icon"></span>
 53 |       </button>
 54 |       <div class="collapse navbar-collapse " style="justify-content: center;" id="navbarNav">
 55 |         <ul class="navbar-nav">
 56 |           <li class="nav-item">
 57 |             <a class="nav-link active ps-4 pe-4" aria-current="page" b href="#"
 58 |               style="border: 1px solid rgb(233, 216, 216);">Home</a>
 59 |           </li>
 60 |           <li class="nav-item">
 61 |             <a class="nav-link active ps-4 pe-4" aria-current="page" href="#"
 62 |               style="border: 1px solid rgb(233, 216, 216);">About</a>
 63 |           </li>
 64 |           <li class="nav-item">
 65 |             <a class="nav-link active ps-4 pe-4" aria-current="page" href="#"
 66 |               style="border: 1px solid rgb(233, 216, 216)">Company</a>
 67 |           </li>
 68 |           <li class="nav-item">
 69 |             <a class="nav-link active ps-4 pe-4" aria-current="page" href="#"
 70 |               style="border: 1px solid rgb(233, 216, 216);">Bamboo in Kerala</a>
 71 |           </li>
 72 |           <li class="nav-item">
 73 |             <a class="nav-link active ps-4 pe-4" aria-current="page" href="#"
 74 |               style="border: 1px solid rgb(233, 216, 216);">Products</a>
 75 |           </li>
 76 |           <li class="nav-item">
 77 |             <a class="nav-link active ps-4 pe-4" aria-current="page" href="#"
 78 |               style="border: 1px solid rgb(233, 216, 216);">Contact</a>
 79 |           </li>
 80 |           <li class="nav-item">
 81 |             <a class="nav-link active ps-4 pe-4" aria-current="page" href="#"
 82 |               style="border: 1px solid rgb(233, 216, 216);">careers</a>
 83 |           </li>
 84 | 
 85 |         </ul>
 86 |       </div>
 87 |     </div>
 88 |   </nav>
 89 |   <section>
 90 |     <div class="row">
 91 |       <img src="images/cover.jpg" alt="">
 92 |     </div>
 93 |   </section>
 94 |   <section>
 95 | 
 96 |     <div class="row " style="justify-content: center;">
 97 |       <div class="column  col-lg-2 col-md-6">
 98 |         <img src="images/bambooPly.jpg" alt="bambooart" style=" width:100%; padding-top: 15%;">
 99 |       </div>
100 |       <div class="column  col-lg-2 col-md-6">
101 |         <img src="images/Flooring Tiles.jpg" alt="bambooart" style="width:100%; padding-top: 15%;">
102 |       </div>
103 |       <div class="column  col-lg-2 col-md-6">
104 |         <img src="images/furniture.jpg" alt="bambooart" style="width:100%; padding-top: 15%;">
105 |       </div>
106 |       <div class="column  col-lg-2 col-md-6">
107 |         <img src="images/handicraft.jpg" alt="bambooart" style="width:100%; padding-top: 15%;">
108 |       </div>
109 |     </div>
110 |   </section>
111 |   <section>
112 |     <div class="container">
113 |       <div class="row" style="text-align: center; ">
114 |         <P class="text-center display-6 ps-5 pe-5 pt-4">Bamboo is a woody grass,<br> which occurs naturally on <br>every
115 |           major continent except <br>Europe</P>
116 | 
117 |       </div>
118 |     </div>
119 | 
120 |     <div class="solidbox" style="margin-left: 10%; max-width: 80%; padding-top:3rem; opacity: 70%;">
121 | 
122 |       <h3 style="opacity:50%;text-align:center ; ">World Bamboo Day</h3>
123 |       <div class="row" style="text-align: center;  ">
124 |         <P class="text-center  ps-5 pe-5 "><span style="color: red; font-weight:bold;">P</span>lant a bamboo, <span
125 |             style="color: red; font-weight:bold;">T</span>alk bamboo, <span
126 |             style="color: red; font-weight:bold;">B</span>uild with bamboo, <span
127 |             style="color: red; font-weight:bold;">S</span>ing with bamboo, <span
128 |             style="color: red; font-weight:bold;">W</span>ear with bamboo, <span
129 |             style="color: red; font-weight:bold;">E</span>at with <br>bamboo, <span
130 |             style="color: red; font-weight:bold;">F</span>eed bamboo, <span
131 |             style="color: red; font-weight:bold;">B</span>reathe bamboo, or <span
132 |             style="color: red; font-weight:bold;">S</span>imply walk among the bamboo and feel good</P>
133 |       </div>
134 | 
135 | 
136 | 
137 |     </div>
138 |     <div class="row " id="section3">
139 |       <h2 class="WORLD" style="text-align: center; color: #fff; font-weight: lighter;">Bamboo World!</h2>
140 | 
141 |       <div class="container" style="width: 90%; display: flex;
142 |     flex-direction: row;justify-content: center;">
143 |         <div class="row" style="justify-content: center;">
144 |           <div class="box col-md-6 col-12 col-lg-3">
145 |             <img src="images/hs1.jpg" style="width:100%;margin: 0 10px;padding-top: 20px;" alt="">
146 |           </div>
147 |           <div class="box col-md-6 col-12 col-lg-3">
148 |             <img src="images/hs2.jpg" style="width:100%;margin: 0 10px;padding-top: 20px;" alt="">
149 |           </div>
150 |           <div class="box col-md-6 col-12 col-lg-3">
151 |             <img src="images/hs3.jpg" style="width:100%;margin: 0 10px;padding-top: 20px;" alt="">
152 |           </div>
153 |           <div class="box col-md-6 col-12 col-lg-3">
154 |             <img src="images/hs4.jpg" style="width:100%;margin: 0 10px;padding-top: 20px;" alt="">
155 |           </div>
156 |         </div>
157 |       </div>
158 |       <div class="container" style="width: 90%;display: flex;
159 |       flex-direction: row;justify-content: center;">
160 |         <div class="row" style="justify-content: center;">
161 |           <div class="box col-md-6 col-12 col-lg-3">
162 |             <img src="images/hs5.jpg" style="width:100%;margin: 0 10px; overflow: hidden;" alt="">
163 |           </div>
164 |           <div class="box col-md-6 col-12 col-lg-3">
165 |             <img src="images/hs6.jpg" style="width:100%;margin: 0 10px;  overflow: hidden;" alt="">
166 |           </div>
167 |           <div class="box col-md-6 col-12 col-lg-3">
168 |             <img src="images/hs7.jpg" style="width:100%;margin: 0 10px;  overflow: hidden;" alt="">
169 |           </div>
170 |           <div class="box col-md-6 col-12 col-lg-3">
171 |             <img src="images/hs8.jpg" style="width:100%;margin: 0 10px;  overflow: hidden;" alt="">
172 |           </div>
173 |         </div>
174 |       </div>
175 | 
176 | 
177 | 
178 |     </div>
179 | 
180 | 
181 | 
182 |   </section>
183 |   <section>
184 |     <div class="row d-flex justify-content-center pt-5">
185 | 
186 | 
187 |       <div class="col-md-3 col-10 ">
188 |         <p>KSBC, established in 1971, is fully owned by Govt of Kerala. Its main objectives are, to develop & promote
189 |           industries based on bamboo, reed, cane and rattan, to undertake manufacture and trading of bamboo, reed, cane
190 |           and rattan products, provide financial, technical, marketing or any other assistance and guidance etc.</p>
191 |       </div>
192 |       <div class="col-md-1 col-2"> <button class="btn1" style=" border-radius: 50px; width: 70px; height: 70px; margin: 0;"><img class="imgs"
193 |             src="images/pencil.svg" alt=""></button></div>
194 |       <div class="col-md-1  col-2  justify-content-end"> <button class="btn1"
195 |           style=" border-radius: 50px; width: 70px; height: 70px; margin: 0;"><img class="imgs" src="images/building.png"
196 |             alt=""></button></div>
197 |       <div class="col-md-3 col-10">
198 |         <p>amboo/Reeds industry is one of the age-old traditional industries of our state. Since inception KSBC is
199 |           endeavoring for the upliftment of the socially and economically backward classes of the society by generating
200 |           employment and reasonable income for them. It is an ISO 9001-2000 certified Company now.</p>
201 |       </div>
202 | 
203 | 
204 | 
205 | 
206 |     </div>
207 |     <div class="row d-flex justify-content-center pt-5">
208 | 
209 | 
210 |       <div class="col-md-3 col-10 ">
211 |         <p>KSBC, established in 1971, is fully owned by Govt of Kerala. Its main objectives are, to develop & promote
212 |           industries based on bamboo, reed, cane and rattan, to undertake manufacture and trading of bamboo, reed, cane
213 |           and rattan products, provide financial, technical, marketing or any other assistance and guidance etc.</p>
214 |       </div>
215 |       <div class="col-md-1 col-2"> <button class="btn1" style=" border-radius: 50px; width: 70px; height: 70px; margin: 0;"><img class="imgs"
216 |             src="images/leaf.jpg" alt=""></button></div>
217 |       <div class="col-md-1  col-2  justify-content-end"> <button class="btn1"
218 |           style=" border-radius: 50px; width: 70px; height: 70px; margin: 0;"><img class="imgs" src="images/briefcase.png"
219 |             alt=""></button></div>
220 |       <div class="col-md-3 col-10">
221 |         <p>amboo/Reeds industry is one of the age-old traditional industries of our state. Since inception KSBC is
222 |           endeavoring for the upliftment of the socially and economically backward classes of the society by generating
223 |           employment and reasonable income for them. It is an ISO 9001-2000 certified Company now.</p>
224 |       </div>
225 | 
226 |     </div>
227 |   </section>
228 |   <section>
229 |     <div class="row justify-content-center" id="section4">
230 |       <div class="col-md-4 " style="color: #fff;" >
231 |         <h4>E-Mail Us</h4>
232 |         <ul>
233 |           <li>
234 |             bamboocorp71@gmail.com
235 |           </li>
236 |           <li>
237 |             bamboocorp71@gmail.com
238 |           </li>
239 |         </ul>
240 | 
241 |       </div>
242 |       
243 |       <div class="col-md-4" style="color: #fff;">
244 |         <h4>Contact Us</h4>
245 |         <ul>
246 |           <li>
247 |             0484 2452275
248 |           </li>
249 |           <li>
250 |             0484 2452248
251 |           </li>
252 |         </ul>
253 | 
254 |       </div>
255 | 
256 |     </div>
257 |   </section>
258 |   <!-- Footer -->
259 |   <footer class="page-footer font-small blue" style="opacity: 70%;">
260 | 
261 |     <!-- Copyright -->
262 |     <div class="footer-copyright text-center py-3">© 2019 FINWIN Technologies Pvt Ltd. | 
263 |       <spaN> All Rights Reserved</spaN>
264 |     </div>
265 |     <!-- Copyright -->
266 | 
267 |   </footer>
268 |   <!-- Footer -->
269 | 
270 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
271 |     integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
272 |     crossorigin="anonymous"></script>
273 |     
274 | </body>
275 | 
276 | </html>


--------------------------------------------------------------------------------