├── plantie ├── res │ ├── five.jpg │ ├── one.jpg │ ├── two.jpg │ ├── four_3.jpg │ └── one_2.jpg ├── sample 2.png ├── icons │ ├── facebook-fill.svg │ ├── facebook-fill-black.svg │ ├── arrow-right-alt-rounded.svg │ ├── instagram-logo.svg │ ├── instagram-black.svg │ ├── leaf-outline.svg │ ├── twitter.svg │ └── twitter-black.svg ├── app.js ├── index.html └── style.css └── README.md /plantie/res/five.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ungaaaabungaaa/Plantie/HEAD/plantie/res/five.jpg -------------------------------------------------------------------------------- /plantie/res/one.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ungaaaabungaaa/Plantie/HEAD/plantie/res/one.jpg -------------------------------------------------------------------------------- /plantie/res/two.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ungaaaabungaaa/Plantie/HEAD/plantie/res/two.jpg -------------------------------------------------------------------------------- /plantie/sample 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ungaaaabungaaa/Plantie/HEAD/plantie/sample 2.png -------------------------------------------------------------------------------- /plantie/res/four_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ungaaaabungaaa/Plantie/HEAD/plantie/res/four_3.jpg -------------------------------------------------------------------------------- /plantie/res/one_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ungaaaabungaaa/Plantie/HEAD/plantie/res/one_2.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Plantie 2 | simple demo website showcasing grid usage 3 | ### inspried from pintrest 4 | ![pintrest image](https://i.imgur.com/orLFNSD.png) 5 | -------------------------------------------------------------------------------- /plantie/icons/facebook-fill.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /plantie/icons/facebook-fill-black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /plantie/icons/arrow-right-alt-rounded.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /plantie/icons/instagram-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /plantie/icons/instagram-black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /plantie/icons/leaf-outline.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /plantie/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /plantie/icons/twitter-black.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /plantie/app.js: -------------------------------------------------------------------------------- 1 | let map; 2 | 3 | function initMap() { 4 | map = new google.maps.Map(document.getElementById("map"), { 5 | center: { lat: 37.419857, lng: -122.078827 }, 6 | zoom: 8, 7 | styles:[ 8 | { 9 | "featureType": "all", 10 | "elementType": "geometry.fill", 11 | "stylers": [ 12 | { 13 | "visibility": "on" 14 | } 15 | ] 16 | }, 17 | { 18 | "featureType": "all", 19 | "elementType": "labels.text", 20 | "stylers": [ 21 | { 22 | "visibility": "off" 23 | } 24 | ] 25 | }, 26 | { 27 | "featureType": "administrative", 28 | "elementType": "all", 29 | "stylers": [ 30 | { 31 | "visibility": "off" 32 | } 33 | ] 34 | }, 35 | { 36 | "featureType": "landscape", 37 | "elementType": "all", 38 | "stylers": [ 39 | { 40 | "color": "#e9e0da" 41 | }, 42 | { 43 | "visibility": "off" 44 | } 45 | ] 46 | }, 47 | { 48 | "featureType": "landscape.man_made", 49 | "elementType": "geometry.fill", 50 | "stylers": [ 51 | { 52 | "color": "#e9e0da" 53 | }, 54 | { 55 | "visibility": "on" 56 | } 57 | ] 58 | }, 59 | { 60 | "featureType": "landscape.natural", 61 | "elementType": "geometry.fill", 62 | "stylers": [ 63 | { 64 | "color": "#e9e0da" 65 | }, 66 | { 67 | "visibility": "on" 68 | } 69 | ] 70 | }, 71 | { 72 | "featureType": "poi", 73 | "elementType": "labels.icon", 74 | "stylers": [ 75 | { 76 | "visibility": "off" 77 | } 78 | ] 79 | }, 80 | { 81 | "featureType": "poi.attraction", 82 | "elementType": "all", 83 | "stylers": [ 84 | { 85 | "visibility": "off" 86 | } 87 | ] 88 | }, 89 | { 90 | "featureType": "poi.business", 91 | "elementType": "all", 92 | "stylers": [ 93 | { 94 | "visibility": "off" 95 | } 96 | ] 97 | }, 98 | { 99 | "featureType": "poi.government", 100 | "elementType": "geometry", 101 | "stylers": [ 102 | { 103 | "visibility": "off" 104 | } 105 | ] 106 | }, 107 | { 108 | "featureType": "poi.medical", 109 | "elementType": "all", 110 | "stylers": [ 111 | { 112 | "visibility": "off" 113 | } 114 | ] 115 | }, 116 | { 117 | "featureType": "poi.park", 118 | "elementType": "all", 119 | "stylers": [ 120 | { 121 | "color": "#b8cf78" 122 | }, 123 | { 124 | "saturation": "19" 125 | }, 126 | { 127 | "lightness": "-16" 128 | } 129 | ] 130 | }, 131 | { 132 | "featureType": "poi.park", 133 | "elementType": "labels.icon", 134 | "stylers": [ 135 | { 136 | "visibility": "off" 137 | } 138 | ] 139 | }, 140 | { 141 | "featureType": "poi.place_of_worship", 142 | "elementType": "all", 143 | "stylers": [ 144 | { 145 | "visibility": "off" 146 | } 147 | ] 148 | }, 149 | { 150 | "featureType": "poi.school", 151 | "elementType": "all", 152 | "stylers": [ 153 | { 154 | "visibility": "off" 155 | } 156 | ] 157 | }, 158 | { 159 | "featureType": "poi.sports_complex", 160 | "elementType": "all", 161 | "stylers": [ 162 | { 163 | "visibility": "off" 164 | } 165 | ] 166 | }, 167 | { 168 | "featureType": "poi.sports_complex", 169 | "elementType": "geometry", 170 | "stylers": [ 171 | { 172 | "color": "#c7c7c7" 173 | }, 174 | { 175 | "visibility": "off" 176 | } 177 | ] 178 | }, 179 | { 180 | "featureType": "road", 181 | "elementType": "all", 182 | "stylers": [ 183 | { 184 | "color": "#ffffff" 185 | } 186 | ] 187 | }, 188 | { 189 | "featureType": "road", 190 | "elementType": "labels", 191 | "stylers": [ 192 | { 193 | "visibility": "off" 194 | } 195 | ] 196 | }, 197 | { 198 | "featureType": "road.highway", 199 | "elementType": "geometry", 200 | "stylers": [ 201 | { 202 | "color": "#ffffff" 203 | }, 204 | { 205 | "visibility": "simplified" 206 | } 207 | ] 208 | }, 209 | { 210 | "featureType": "road.highway", 211 | "elementType": "labels.icon", 212 | "stylers": [ 213 | { 214 | "color": "#ffffff" 215 | }, 216 | { 217 | "visibility": "off" 218 | } 219 | ] 220 | }, 221 | { 222 | "featureType": "road.arterial", 223 | "elementType": "all", 224 | "stylers": [ 225 | { 226 | "visibility": "simplified" 227 | }, 228 | { 229 | "color": "#ffffff" 230 | } 231 | ] 232 | }, 233 | { 234 | "featureType": "road.arterial", 235 | "elementType": "geometry", 236 | "stylers": [ 237 | { 238 | "visibility": "simplified" 239 | } 240 | ] 241 | }, 242 | { 243 | "featureType": "road.local", 244 | "elementType": "all", 245 | "stylers": [ 246 | { 247 | "color": "#ffffff" 248 | }, 249 | { 250 | "visibility": "simplified" 251 | } 252 | ] 253 | }, 254 | { 255 | "featureType": "road.local", 256 | "elementType": "geometry", 257 | "stylers": [ 258 | { 259 | "visibility": "on" 260 | } 261 | ] 262 | }, 263 | { 264 | "featureType": "transit", 265 | "elementType": "all", 266 | "stylers": [ 267 | { 268 | "visibility": "off" 269 | } 270 | ] 271 | }, 272 | { 273 | "featureType": "water", 274 | "elementType": "all", 275 | "stylers": [ 276 | { 277 | "color": "#84bde9" 278 | } 279 | ] 280 | } 281 | ] 282 | }); 283 | } 284 | 285 | window.initMap = initMap; -------------------------------------------------------------------------------- /plantie/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | plantie 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 |

19 | 24 |

25 | 26 |

27 | 28 |

29 | 30 |

31 |

32 | 33 | 34 | 35 |

36 |

37 | 38 |

39 | 44 |

45 | 46 |

47 | 48 |

Healthy Plants
Happy Homes

49 |

The history of the black roes fascinating flower was used during the Victoria Era.
50 | fascinating flower was used as a symbol.
51 | during the Victoria Era. the black rose. 52 |

53 | 54 | 55 |

56 | 57 |

58 | 59 |

60 |

61 |

62 |

The Europa Report
Mysteries Under the Ice

63 |

The history of the black roes fascinating flower was used during the Victoria Era.
64 | fascinating flower was used as a symbol.
65 | during the Victoria Era. the black rose. 66 |

67 |
68 |

69 |

70 |

71 | 72 |

73 |

74 |

75 |

contacts

76 |

Let's get
acquainted

77 |

Visit us

78 |

79 | 4501 Sarah Drive,Lafayette
Louisiana 70501
United States 80 |

81 |

E-mail.

82 |

83 | lomag98352@rubeshi.com 84 |

85 |

Phone

86 |

87 | 337-502-9726 88 |

89 |

90 |
91 |
92 | 93 |

94 |

95 |

96 |

97 |

98 | 99 |

100 |

101 |

Beautifully Scented
Plants for Home.

102 |

The history of the black roes fascinating flower was used during the Victoria Era.
103 | fascinating flower was used as a symbol.
104 | during the Victoria Era. the black rose. 105 |

106 |
107 |
108 |

More Details

109 |

110 |

111 |

112 | 113 |

114 |

115 |

116 |

117 |

118 |

How To Create A Plant
Loving Home.

119 |

The history of the black roes fascinating flower was used during the Victoria Era.

120 | The history of the black roes fascinating flower was used during the Victoria Era.

121 | The history of the black roes fascinating flower was used during the Victoria Era. 122 |

123 |

124 |

125 |

The history of the black roes fascinating flower was used during the Victoria Era.

126 | The history of the black roes fascinating flower was used during the Victoria Era.

127 | The history of the black roes fascinating flower was used during the Victoria Era. 128 |

129 |

130 |

131 | 132 | 133 |

134 |

135 |

Get Emails you'll love.

136 |

137 | 138 | 139 |

140 |

141 |

142 |

Links

143 |

about us

144 |

F&Q

145 |

Our Services

146 |

Contact

147 |

Conditions

148 |

149 |

150 |

Featured

151 |

partnership

152 |

Gift ideas

153 |

press

154 |

Blog

155 |

156 |

157 |

158 |

159 |

160 |

161 | 162 |

163 | 164 | 165 | 166 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /plantie/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | width: 100%; 4 | height: 100%; 5 | margin: 0; 6 | padding: 0; 7 | font-family: system-ui; 8 | } 9 | 10 | ::-webkit-scrollbar { 11 | width: 0px; 12 | /* Remove scrollbar space */ 13 | background: transparent; 14 | /* Optional: just make scrollbar invisible */ 15 | } 16 | 17 | 18 | .bigg 19 | { 20 | font-size: clamp(3.5rem, 4.2vw, 6.5rem); 21 | margin-bottom: 0; 22 | } 23 | 24 | 25 | .highlight_bold { 26 | font-size: clamp(1.5rem, 1.2vw, 2.5rem); 27 | } 28 | 29 | .highlight { 30 | font-size: x-large; 31 | } 32 | 33 | .text { 34 | font-size: large; 35 | font-weight: normal; 36 | color: lightslategray; 37 | } 38 | 39 | .icons { 40 | min-width: 16px; 41 | max-width: 28px; 42 | margin-right: 2%; 43 | } 44 | 45 | .xicons { 46 | min-width: 16px; 47 | max-width: 42px; 48 | margin-right: 2%; 49 | } 50 | 51 | 52 | 53 | .center { 54 | display: flex; 55 | align-items: center; 56 | justify-content: center; 57 | flex-direction: column; 58 | } 59 | 60 | .center_start { 61 | display: flex; 62 | align-items: flex-start; 63 | flex-direction: column; 64 | } 65 | 66 | 67 | .horizontal { 68 | display: flex; 69 | flex-direction: row; 70 | } 71 | 72 | .white { 73 | color: white; 74 | } 75 | 76 | .black { 77 | color: black; 78 | margin: 2px; 79 | } 80 | 81 | .grey { 82 | color: gray; 83 | margin: 2px; 84 | } 85 | 86 | .padding_right { 87 | padding-right: 5rem; 88 | } 89 | 90 | .underline { 91 | text-decoration-line: underline; 92 | } 93 | 94 | .change_my_color{ 95 | fill: black; 96 | } 97 | 98 | 99 | .black_button { 100 | border: 2px solid black; 101 | background-color: black; 102 | color: white; 103 | padding: 16px 32px; 104 | font-size: 16px; 105 | cursor: pointer; 106 | border-radius: 0.5em; 107 | } 108 | 109 | /*section one*/ 110 | 111 | .one 112 | { 113 | width: 100%; 114 | height: 765px; 115 | display: grid; 116 | grid-template-columns: 10% 70% 20%; 117 | grid-template-rows: 10% 80% 10%; 118 | background-image: url(res/one_2.jpg); 119 | background-repeat: no-repeat; 120 | background-position: right; 121 | background-size: contain; 122 | 123 | } 124 | 125 | .one_div1 126 | { 127 | grid-column-start: 2; 128 | grid-row-start: 1; 129 | } 130 | 131 | .one_div2 132 | { 133 | grid-column-start: 3; 134 | grid-row-start: 2; 135 | } 136 | 137 | .one_div3 138 | { 139 | grid-column-start: 2; 140 | grid-row-start: 3; 141 | } 142 | 143 | 144 | .one_div4 145 | { 146 | transform: rotate(-90deg); 147 | grid-column-start: 1; 148 | grid-row-start: 2; 149 | } 150 | 151 | .one_div5 152 | { 153 | grid-row-start: 2; 154 | grid-column-start: 2; 155 | } 156 | 157 | 158 | /*section one*/ 159 | 160 | 161 | /*two*/ 162 | 163 | .two { 164 | width: 100%; 165 | min-height: 650px; 166 | background-image: url(res/two.jpg); 167 | background-position: left; 168 | background-size: contain; 169 | background-repeat: no-repeat; 170 | display: grid; 171 | grid-template-columns: 20% 80%; 172 | grid-template-rows: 20% 60% 20%; 173 | gap: 0px 0px; 174 | } 175 | 176 | 177 | .two_div2 { 178 | 179 | grid-column-start: 2; 180 | grid-row-start: 2; 181 | width: 60%; 182 | height: 100%; 183 | background-color: #ffffff; 184 | padding-left: 10%; 185 | } 186 | 187 | 188 | /*two*/ 189 | 190 | 191 | /* three section*/ 192 | .three { 193 | 194 | min-width: 100%; 195 | min-height: 650px; 196 | display: grid; 197 | grid-template-columns: 35% 65%; 198 | grid-template-rows: 100%; 199 | gap: 0; 200 | padding-top: 12%; 201 | padding-bottom: 12%; 202 | } 203 | 204 | .three_div1 { 205 | width: 100%; 206 | height: 100%; 207 | grid-column-start: 1; 208 | } 209 | 210 | 211 | .three_div2 { 212 | width: 100%; 213 | height: 100%; 214 | grid-column-start: 2; 215 | } 216 | 217 | #map 218 | { 219 | height: 100%; 220 | } 221 | 222 | 223 | #btn_Message_us { 224 | 225 | border: 2px solid black; 226 | border-radius: 3px; 227 | background-color: white; 228 | padding: 14px 28px; 229 | cursor: pointer; 230 | color: black; 231 | 232 | } 233 | 234 | /* three section*/ 235 | 236 | /* four section */ 237 | 238 | .four { 239 | 240 | padding-top: 12%; 241 | width: 100%; 242 | height: 650px; 243 | background-image: url(Res/four_3.jpg); 244 | background-repeat: no-repeat; 245 | display: grid; 246 | grid-template-columns: 15% 35% 35% 15%; 247 | grid-template-rows: 55% 35% 10%; 248 | gap: 0; 249 | background-repeat: no-repeat; 250 | background-size: contain; 251 | background-position: right; 252 | 253 | } 254 | 255 | .four_div1 { 256 | 257 | width: 100%; 258 | height: 100%; 259 | grid-column-start: 2; 260 | grid-row-start: 1; 261 | background-color: #ffffff; 262 | margin-left: 5%; 263 | padding-left: 5%; 264 | } 265 | 266 | 267 | .four_div2 { 268 | width: 100%; 269 | height: 100%; 270 | grid-column-start: 4; 271 | grid-row-start: 3; 272 | } 273 | 274 | 275 | 276 | 277 | /*four section */ 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | /* five section*/ 286 | 287 | .five { 288 | width: 100%; 289 | display: grid; 290 | grid-template-columns: 30% 20% 5% 20% 25%; 291 | grid-template-rows: 100%; 292 | padding-bottom: 8%; 293 | padding-top: 8%; 294 | } 295 | 296 | 297 | .five_div1 { 298 | margin-left: 20%; 299 | margin-right: 20%; 300 | margin-top: 2%; 301 | margin-bottom: 2%; 302 | grid-column-start: 1; 303 | 304 | } 305 | 306 | .five_div2 { 307 | grid-column-start: 2; 308 | margin: 0; 309 | display: flex; 310 | flex-direction: column; 311 | align-items: flex-start; 312 | justify-content: center; 313 | } 314 | 315 | .five_div3 { 316 | 317 | grid-column-start: 4; 318 | display: flex; 319 | margin: 0; 320 | flex-direction: column; 321 | align-items: center; 322 | justify-content: center; 323 | 324 | } 325 | 326 | 327 | .blank_img { 328 | width: 100%; 329 | object-fit: cover; 330 | aspect-ratio: 2/3; 331 | background-color: #0f0f0f; 332 | } 333 | 334 | /* five section*/ 335 | 336 | 337 | 338 | 339 | 340 | 341 | /* footer navigation*/ 342 | 343 | #search { 344 | border: 1px solid gray; 345 | background-color: transparent; 346 | width: 24rem; 347 | height: 2.5rem; 348 | text-indent: 0.5rem; 349 | margin-left: 2%; 350 | color: white; 351 | font-weight: lighter; 352 | font-size: large; 353 | } 354 | 355 | #btn { 356 | 357 | cursor: pointer; 358 | height: 100%; 359 | width: 8rem; 360 | margin-left: 0.8%; 361 | color: black; 362 | border: 1px solid white; 363 | font-size: large; 364 | } 365 | 366 | .navbar { 367 | width: 100%; 368 | background-color: transparent; 369 | display: flex; 370 | flex-direction: row; 371 | align-items: center; 372 | justify-content: center; 373 | } 374 | 375 | .footer { 376 | background-color: #0f0f0f; 377 | min-width: 100%; 378 | min-height: 350px; 379 | max-height: 450px; 380 | display: grid; 381 | grid-template-columns: 55% 10% 10% 25%; 382 | grid-template-rows: 100%; 383 | gap: 0; 384 | } 385 | 386 | .form { 387 | grid-column-start: 1; 388 | } 389 | 390 | .links { 391 | grid-column-start: 2; 392 | } 393 | 394 | .features { 395 | grid-column-start: 3; 396 | } 397 | 398 | .icon_tray { 399 | grid-column-start: 4; 400 | } 401 | 402 | /* footer navigation*/ --------------------------------------------------------------------------------

Healthy Plants Happy Homes

The Europa Report Mysteries Under the Ice

Read More

Let's get acquainted