Responsive cactus website

├── README.md ├── Text Responsive cactus website.txt ├── assets ├── css │ └── styles.css ├── img │ ├── care-cactus.png │ ├── contact-cactus.png │ ├── favicon.png │ ├── home-cactus.png │ ├── new-cactus-1.png │ ├── new-cactus-2.png │ ├── new-cactus-3.png │ ├── shop-cactus-1.png │ ├── shop-cactus-2.png │ ├── shop-cactus-3.png │ ├── shop-cactus-4.png │ └── shop-cactus-5.png └── js │ ├── main.js │ └── scrollreveal.min.js ├── index.html └── preview.png /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Cactus Website 2 | ## [Watch it on youtube](https://youtu.be/x9pm31GVduo) 3 | ### Responsive Cactus Website 4 | 5 | - Responsive Cactus Website Design Using HTML CSS And JavaScript 6 | - Contains animations when scrolling. 7 | - Smooth scrolling in each section. 8 | - Contains an elegant dark theme. 9 | - Developed first with the Mobile First methodology, then for desktop. 10 | - Compatible with all mobile devices and with a beautiful and pleasant user interface. 11 | 12 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode) 13 | 14 | ![preview img](/preview.png) 15 | -------------------------------------------------------------------------------- /Text Responsive cactus website.txt: -------------------------------------------------------------------------------- 1 | ========== HEADER ========== 2 | .nav__logo 3 | Cactus 4 | 5 | .nav__link 6 | Home - News - Shop - Care - Contact 7 | 8 | 9 | ========== HOME ========== 10 | .home__title 11 | ORNAMENTAL
12 | PLANTS FOR
13 | YOUR HOME
14 | 15 | .home__description 16 | We design ornamental plants for your 17 | home in-house for an original style and 18 | quality you won't find anywhere else. 19 | 20 | .button 21 | GO TO SHOP 22 | 23 | .button__link 24 | MORE DETAILS 25 | 26 | .home__location span 27 | AV. The Sun #321
Lima Peru 28 | 29 | 30 | ========== NEWS ========== 31 | .section__title 32 | NEW PLANTS FOR
YOUR HOME 33 | 34 | .new__description 35 | Select new ornamental plants for home 36 | decoration and obtain an atmosphere of 37 | harmony and freshness. 38 | 39 | .new__title 40 | Gymnocalycium Cactus 41 | Lily Pad Succulent 42 | Rebutia Cactus 43 | 44 | 45 | ========== SHOP ========== 46 | .section__title 47 | THE BEST PLANTS 48 | 49 | .shop__title .shop__price 50 | Gymnocalycium
Cactus 51 | $15 52 | 53 | Echeveria
Succulent 54 | $10 55 | 56 | Ferocactus
Cactus 57 | $15 58 | 59 | Key Lime Pie
Succulent 60 | $10 61 | 62 | Melocactus
Cactus 63 | $15 64 | 65 | 66 | ========== CARE ========== 67 | .section__title 68 | CARE AND HEALTH FOR
YOUR CACTUS 69 | 70 | .care__item p 71 | In cold times, add water once a month 72 | and during the summer do it when the 73 | soil is very dry. 74 | 75 | Have good drainage so that the cactus 76 | does not accumulate water. 77 | 78 | Place your cactus or succulent in a 79 | location with indirect light. 80 | 81 | Do not water more than necessary, as 82 | it can accumulate too much water and 83 | the plant will rot. 84 | 85 | Do not expose to high temperatures, as 86 | succulent plants are not fans of 87 | extremes. 88 | 89 | 90 | ========== CONTACT ========== 91 | .section__title 92 | YOU WANT A CACTUS
CONTACT US 93 | 94 | .contact__title 95 | Write to us 96 | Call us at the numbers 97 | Find us here 98 | 99 | .contact__social 100 | https://api.whatsapp.com/send?phone=51123456789&text=Hello, more information! 101 | https://m.me/bedimcode 102 | mailto:examplemail@correo.com 103 | 104 | .contact__info 105 | +00-987-7654-321
106 | +11-012345 107 | 108 | Lima - Sun City - Peru
109 | Av. Moon #4321 110 | 111 | 112 | ========== FOOTER ========== 113 | .footer__logo 114 | Cactus 115 | 116 | .footer__description 117 | Choose the best
plants for your home. 118 | 119 | footer__title .footer__info 120 | COMPANY 121 | About Us 122 | Products 123 | Features 124 | 125 | INFORMATION 126 | Blogs & News 127 | Contacts Us 128 | FAQs 129 | 130 | SOCIAL MEDIA 131 | https://www.facebook.com/ 132 | https://www.instagram.com/ 133 | https://twitter.com/ 134 | 135 | .footer__copy 136 | © All Rights Reserved By Bedimcode 137 | -------------------------------------------------------------------------------- /assets/css/styles.css: -------------------------------------------------------------------------------- 1 | /*=============== GOOGLE FONTS ===============*/ 2 | @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap"); 3 | 4 | /*=============== VARIABLES CSS ===============*/ 5 | :root { 6 | --header-height: 3.5rem; 7 | /*========== Colors ==========*/ 8 | /*Color mode HSL(hue, saturation, lightness)*/ 9 | --first-color: hsl(93, 54%, 54%); 10 | --first-color-alt: hsl(93, 50%, 48%); 11 | --first-color-light: hsl(93, 58%, 66%); 12 | --title-color: hsl(228, 8%, 98%); 13 | --text-color: hsl(228, 8%, 70%); 14 | --white-color: hsl(228, 8%, 98%); 15 | --black-color: hsl(228, 6%, 4%); 16 | --body-color: hsl(228, 6%, 8%); 17 | --container-color: hsl(228, 6%, 12%); 18 | --shadow-img: 0 0 48px hsla(93, 54%, 54%, .4); 19 | --gradient-card: linear-gradient(180deg, 20 | hsla(93, 8%, 8%), 21 | hsla(93, 40%, 30%)); 22 | 23 | /*========== Font and typography ==========*/ 24 | /*.5rem = 8px | 1rem = 16px ...*/ 25 | --body-font: "Montserrat", sans-serif; 26 | --biggest-font-size: 2.25rem; 27 | --h1-font-size: 1.5rem; 28 | --h2-font-size: 1.25rem; 29 | --h3-font-size: 1rem; 30 | --normal-font-size: .938rem; 31 | --small-font-size: .813rem; 32 | 33 | /*========== Font weight ==========*/ 34 | --font-regular: 400; 35 | --font-semi-bold: 600; 36 | --font-bold: 700; 37 | 38 | /*========== z index ==========*/ 39 | --z-tooltip: 10; 40 | --z-fixed: 100; 41 | } 42 | 43 | /*========== Responsive typography ==========*/ 44 | @media screen and (min-width: 1150px) { 45 | :root { 46 | --biggest-font-size: 4.25rem; 47 | --h1-font-size: 2.25rem; 48 | --h2-font-size: 1.5rem; 49 | --h3-font-size: 1.25rem; 50 | --normal-font-size: 1rem; 51 | --small-font-size: .875rem; 52 | } 53 | } 54 | 55 | /*=============== BASE ===============*/ 56 | * { 57 | box-sizing: border-box; 58 | padding: 0; 59 | margin: 0; 60 | } 61 | 62 | html { 63 | scroll-behavior: smooth; 64 | } 65 | 66 | body { 67 | font-family: var(--body-font); 68 | font-size: var(--normal-font-size); 69 | background-color: var(--body-color); 70 | color: var(--text-color); 71 | } 72 | 73 | h1, h2, h3, h4 { 74 | color: var(--title-color); 75 | font-weight: var(--font-semi-bold); 76 | } 77 | 78 | ul { 79 | list-style: none; 80 | } 81 | 82 | a { 83 | text-decoration: none; 84 | } 85 | 86 | img { 87 | display: block; 88 | max-width: 100%; 89 | height: auto; 90 | } 91 | 92 | /*=============== REUSABLE CSS CLASSES ===============*/ 93 | .container { 94 | max-width: 1120px; 95 | margin-inline: 1.5rem; 96 | } 97 | 98 | .grid { 99 | display: grid; 100 | gap: 1.5rem; 101 | } 102 | 103 | .section { 104 | padding-block: 5rem 1rem; 105 | } 106 | 107 | .section__title { 108 | font-size: var(--h1-font-size); 109 | font-weight: var(--font-bold); 110 | text-align: center; 111 | margin-bottom: 1rem; 112 | } 113 | 114 | .main { 115 | overflow: hidden; 116 | } 117 | 118 | /*=============== HEADER & NAV ===============*/ 119 | 120 | 121 | /* Navigation for mobile devices */ 122 | 123 | 124 | /* Show menu */ 125 | 126 | 127 | /* Add blur header */ 128 | 129 | 130 | /* Active link */ 131 | 132 | 133 | /*=============== HOME ===============*/ 134 | 135 | 136 | /*=============== BUTTON ===============*/ 137 | 138 | 139 | /*=============== NEWS ===============*/ 140 | 141 | 142 | /*=============== SHOP ===============*/ 143 | 144 | 145 | /*=============== CARE ===============*/ 146 | 147 | 148 | /*=============== CONTACT ===============*/ 149 | 150 | 151 | /*=============== FOOTER ===============*/ 152 | 153 | 154 | /*=============== SCROLL BAR ===============*/ 155 | 156 | 157 | /*=============== SCROLL UP ===============*/ 158 | 159 | 160 | /* Show Scroll Up */ 161 | 162 | 163 | /*=============== BREAKPOINTS ===============*/ 164 | /* For small devices */ 165 | 166 | 167 | /* For medium devices */ 168 | 169 | 170 | /* For large devices */ 171 | -------------------------------------------------------------------------------- /assets/img/care-cactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/care-cactus.png -------------------------------------------------------------------------------- /assets/img/contact-cactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/contact-cactus.png -------------------------------------------------------------------------------- /assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/favicon.png -------------------------------------------------------------------------------- /assets/img/home-cactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/home-cactus.png -------------------------------------------------------------------------------- /assets/img/new-cactus-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/new-cactus-1.png -------------------------------------------------------------------------------- /assets/img/new-cactus-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/new-cactus-2.png -------------------------------------------------------------------------------- /assets/img/new-cactus-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/new-cactus-3.png -------------------------------------------------------------------------------- /assets/img/shop-cactus-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/shop-cactus-1.png -------------------------------------------------------------------------------- /assets/img/shop-cactus-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/shop-cactus-2.png -------------------------------------------------------------------------------- /assets/img/shop-cactus-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/shop-cactus-3.png -------------------------------------------------------------------------------- /assets/img/shop-cactus-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/shop-cactus-4.png -------------------------------------------------------------------------------- /assets/img/shop-cactus-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/assets/img/shop-cactus-5.png -------------------------------------------------------------------------------- /assets/js/main.js: -------------------------------------------------------------------------------- 1 | /*=============== SHOW MENU ===============*/ 2 | 3 | 4 | /*=============== REMOVE MENU MOBILE ===============*/ 5 | 6 | 7 | /*=============== ADD BLUR HEADER ===============*/ 8 | 9 | 10 | /*=============== SHOW SCROLL UP ===============*/ 11 | 12 | 13 | /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/ 14 | 15 | 16 | /*=============== SCROLL REVEAL ANIMATION ===============*/ 17 | 18 | -------------------------------------------------------------------------------- /assets/js/scrollreveal.min.js: -------------------------------------------------------------------------------- 1 | /*! @license ScrollReveal v4.0.9 2 | 3 | Copyright 2021 Fisssion LLC. 4 | 5 | Licensed under the GNU General Public License 3.0 for 6 | compatible open source projects and non-commercial use. 7 | 8 | For commercial sites, themes, projects, and applications, 9 | keep your source code private/proprietary by purchasing 10 | a commercial license from https://scrollrevealjs.org/ 11 | */ 12 | var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | Responsive cactus website - Bedimcode 17 | 18 | 19 | 20 | 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 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bedimcode/responsive-cactus-website/b9573ea3a79aa5d4019d88f811f48770ac7f9611/preview.png --------------------------------------------------------------------------------