├── images ├── map.png ├── visa.png ├── 04jar.png ├── 05jar.png ├── 06jar.png ├── acjar.png ├── greenbg.png ├── paypal.png ├── rfjar.png ├── slider.png ├── trjar.png ├── bridalbq1.png ├── bridalbq2.png ├── bridalbq3.png ├── customer1.png ├── customer2.png ├── rose-logo.png ├── damaskrose.png ├── mastercard.png ├── tnjarbouquet.png ├── turkishrose.png └── assortedcolors.png ├── .stickler.yml ├── .gitignore ├── stylelint.config.js ├── README.md ├── LICENSE ├── product.html ├── styles ├── catalogue.css ├── reset.css ├── product.css └── main.css ├── catalogue.html └── index.html /images/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/map.png -------------------------------------------------------------------------------- /images/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/visa.png -------------------------------------------------------------------------------- /images/04jar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/04jar.png -------------------------------------------------------------------------------- /images/05jar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/05jar.png -------------------------------------------------------------------------------- /images/06jar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/06jar.png -------------------------------------------------------------------------------- /images/acjar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/acjar.png -------------------------------------------------------------------------------- /images/greenbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/greenbg.png -------------------------------------------------------------------------------- /images/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/paypal.png -------------------------------------------------------------------------------- /images/rfjar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/rfjar.png -------------------------------------------------------------------------------- /images/slider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/slider.png -------------------------------------------------------------------------------- /images/trjar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/trjar.png -------------------------------------------------------------------------------- /images/bridalbq1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/bridalbq1.png -------------------------------------------------------------------------------- /images/bridalbq2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/bridalbq2.png -------------------------------------------------------------------------------- /images/bridalbq3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/bridalbq3.png -------------------------------------------------------------------------------- /images/customer1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/customer1.png -------------------------------------------------------------------------------- /images/customer2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/customer2.png -------------------------------------------------------------------------------- /images/rose-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/rose-logo.png -------------------------------------------------------------------------------- /images/damaskrose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/damaskrose.png -------------------------------------------------------------------------------- /images/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/mastercard.png -------------------------------------------------------------------------------- /images/tnjarbouquet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/tnjarbouquet.png -------------------------------------------------------------------------------- /images/turkishrose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/turkishrose.png -------------------------------------------------------------------------------- /images/assortedcolors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Flakster/Flowers-shop-site/HEAD/images/assortedcolors.png -------------------------------------------------------------------------------- /.stickler.yml: -------------------------------------------------------------------------------- 1 | # add the linters you want stickler to use for this project 2 | linters: 3 | stylelint: 4 | # indicate where is the config file for stylelint 5 | config: 'stylelint.config.js' 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /stylelint.config.js: -------------------------------------------------------------------------------- 1 | "use strict" 2 | 3 | module.exports = { 4 | "extends": "stylelint-config-recommended", 5 | "rules": { 6 | "at-rule-empty-line-before": [ "always", { 7 | except: [ 8 | "blockless-after-same-name-blockless", 9 | "first-nested", 10 | ], 11 | ignore: ["after-comment"], 12 | } ], 13 | "at-rule-name-case": "lower", 14 | "at-rule-name-space-after": "always-single-line", 15 | "at-rule-semicolon-newline-after": "always", 16 | "block-closing-brace-empty-line-before": "never", 17 | "block-closing-brace-newline-after": "always", 18 | "block-closing-brace-newline-before": "always-multi-line", 19 | "block-closing-brace-space-before": "always-single-line", 20 | "block-opening-brace-newline-after": "always-multi-line", 21 | "block-opening-brace-space-after": "always-single-line", 22 | "block-opening-brace-space-before": "always", 23 | "color-hex-case": "lower", 24 | "color-hex-length": "short", 25 | "comment-empty-line-before": [ "always", { 26 | except: ["first-nested"], 27 | ignore: ["stylelint-commands"], 28 | } ], 29 | "comment-whitespace-inside": "always", 30 | "custom-property-empty-line-before": [ "always", { 31 | except: [ 32 | "after-custom-property", 33 | "first-nested", 34 | ], 35 | ignore: [ 36 | "after-comment", 37 | "inside-single-line-block", 38 | ], 39 | } ], 40 | "declaration-bang-space-after": "never", 41 | "declaration-bang-space-before": "always", 42 | "declaration-block-semicolon-newline-after": "always-multi-line", 43 | "declaration-block-semicolon-space-after": "always-single-line", 44 | "declaration-block-semicolon-space-before": "never", 45 | "declaration-block-single-line-max-declarations": 1, 46 | "declaration-block-trailing-semicolon": "always", 47 | "declaration-colon-newline-after": "always-multi-line", 48 | "declaration-colon-space-after": "always-single-line", 49 | "declaration-colon-space-before": "never", 50 | "declaration-empty-line-before": [ "always", { 51 | except: [ 52 | "after-declaration", 53 | "first-nested", 54 | ], 55 | ignore: [ 56 | "after-comment", 57 | "inside-single-line-block", 58 | ], 59 | } ], 60 | "function-comma-newline-after": "always-multi-line", 61 | "function-comma-space-after": "always-single-line", 62 | "function-comma-space-before": "never", 63 | "function-max-empty-lines": 0, 64 | "function-name-case": "lower", 65 | "function-parentheses-newline-inside": "always-multi-line", 66 | "function-parentheses-space-inside": "never-single-line", 67 | "function-whitespace-after": "always", 68 | "indentation": 2, 69 | "length-zero-no-unit": true, 70 | "max-empty-lines": 1, 71 | "media-feature-colon-space-after": "always", 72 | "media-feature-colon-space-before": "never", 73 | "media-feature-name-case": "lower", 74 | "media-feature-parentheses-space-inside": "never", 75 | "media-feature-range-operator-space-after": "always", 76 | "media-feature-range-operator-space-before": "always", 77 | "media-query-list-comma-newline-after": "always-multi-line", 78 | "media-query-list-comma-space-after": "always-single-line", 79 | "media-query-list-comma-space-before": "never", 80 | "no-eol-whitespace": true, 81 | "no-missing-end-of-source-newline": true, 82 | "number-leading-zero": "always", 83 | "number-no-trailing-zeros": true, 84 | "property-case": "lower", 85 | "rule-empty-line-before": [ "always-multi-line", { 86 | except: ["first-nested"], 87 | ignore: ["after-comment"], 88 | } ], 89 | "selector-attribute-brackets-space-inside": "never", 90 | "selector-attribute-operator-space-after": "never", 91 | "selector-attribute-operator-space-before": "never", 92 | "selector-combinator-space-after": "always", 93 | "selector-combinator-space-before": "always", 94 | "selector-descendant-combinator-no-non-space": true, 95 | "selector-list-comma-newline-after": "always", 96 | "selector-list-comma-space-before": "never", 97 | "selector-max-empty-lines": 0, 98 | "selector-pseudo-class-case": "lower", 99 | "selector-pseudo-class-parentheses-space-inside": "never", 100 | "selector-pseudo-element-case": "lower", 101 | "selector-pseudo-element-colon-notation": "double", 102 | "selector-type-case": "lower", 103 | "unit-case": "lower", 104 | "value-list-comma-newline-after": "always-multi-line", 105 | "value-list-comma-space-after": "always-single-line", 106 | "value-list-comma-space-before": "never", 107 | "value-list-max-empty-lines": 0, 108 | }, 109 | } 110 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flowers-shop-site 2 | This is a website project based on the [Flowers Shop design](https://www.behance.net/gallery/69329213/Flower-e-shop) from [Michael D](https://dribbble.com/altezzik). It is intended to be developed using the technics and knowledge acquired through the HTML & CSS module of the main curriculum of the Microverse program. 3 | 4 | ![main](https://user-images.githubusercontent.com/53324035/73347012-e2530880-4254-11ea-8b8d-c9f1e71e0f25.png) 5 | 6 | ## Built with 7 | 8 | * HTML5 9 | * CSS3 10 | * Font Awesome 11 | * Google Fonts 12 | 13 | ## Getting Started: 14 | 15 | To get a local copy up and running follow these simple example steps: 16 | 17 | 1. Under the repository name, click the "Clone or download" green button. 18 | 19 | ![clone](https://user-images.githubusercontent.com/53324035/73660989-4451aa80-4667-11ea-8a89-176f89d6548a.png) 20 | 21 | 2. Copy the URL given by clicking the clipboard button 22 | 23 | 3. Open a terminal window in your local machine and change the current directory to the one you 24 | want the clone directory to be made. 25 | 26 | 4. Type git clone and then paste the URL you previously copied to the clipboard 27 | 28 | 5. Change the current directory to the newly created folder 29 | 30 | 6. Now open the index.html file on your browser. Use the menu to go to the catalogue of products. 31 | By clicking on one product, you will be taken to the product page. You can test these three pages 32 | changing the width of your browser window. The content will fit either to desktop and mobile screen 33 | sizes. 34 | 35 | ## [Homepage of the project](https://github.com/Flakster/Flowers-shop-site/) 36 | 37 | ## See a live demo [here](https://flakster.github.io/Flowers-shop-site/index.html) 38 | 39 | ## Watch a video with the presentation of the project [here](https://www.loom.com/share/1d43cd76d86240d48f5f34a0e5fdcef6) 40 | 41 | ## Website description 42 | 43 | This is an online flower shop that helps the user to find the best flowers to gift by asking him/her 44 | the price he/she wants to spend, the main color of the bouquet, and also the kind of event and who will 45 | go to receive the gift. Once the user finds the product that fits the selected criteria, is asked for 46 | the final order details, like the number of flowers, the type of delivery, to finally place the order. 47 | 48 | ## Homepage 49 | 50 | ![FS-main](https://user-images.githubusercontent.com/53324035/73666558-fe014900-4670-11ea-90e4-2ec7c4b11fa6.png) 51 | 52 | This page shows a beautiful bouquet and describes the type of work they offer to their customers. The big 53 | button at the left lets the user start the buying process or, if preferred, he/she can scroll down to find product samples, 54 | testimonials from other customers, or the map with the physical location of the store. 55 | 56 | ## Catalog 57 | 58 | ![FS-catalogue](https://user-images.githubusercontent.com/53324035/73667241-fee6aa80-4671-11ea-8b57-21d0c713e614.png) 59 | 60 | Once in this place, the user can select the products that best match his/her preferences by choosing the 61 | desired options in the filter on the left side. This action results in a grid of pictures on the right side 62 | to let the user choose between his/her favorite products. 63 | 64 | 65 | ## Product page 66 | 67 | ![FS-Product](https://user-images.githubusercontent.com/53324035/73667938-0d819180-4673-11ea-8d3b-a262518abc9a.png) 68 | 69 | The product page offers the user a big photo of the chosen product, and the final details to place 70 | the order. It also shows to the user, related products that can be of his/her interest 71 | 72 | 73 | ## Pages appearance on mobile devices 74 | 75 | The goal of this site is to let the user buy from anywhere. The responsive behavior makes the pages to fit 76 | any screen size. The following is the appearance of the pages on small screens 77 | 78 | 79 | Homepage Catalogue Product page 80 | ![FS-mobile](https://user-images.githubusercontent.com/53324035/73669537-a0bbc680-4675-11ea-8f15-f4882cc647d0.png) 81 | 82 | ## Potential future features 83 | 84 | * Use of actual form elements instead of placeholders 85 | * Javascript for calculating the order total 86 | 87 | ## Validators: 88 | 89 | * W3C validator for HTML 90 | * Stickler for "Style Matters" stickler 91 | * Stylelint for VSCode 92 | 93 | ## Acknowledgments: 94 | 95 | to [Michael D](https://dribbble.com/altezzik) for his beautiful design 96 | 97 | ## Author 98 | 99 | 👤 Carlos Santamaría 100 | 101 | * Twitter: [@Flakster ](https://twitter.com/Flakster ) 102 | * Github: [@Flakster](https://github.com/Flakster) 103 | * Email: contact@carlossantamaria.co 104 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /product.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flowers shop - Product page 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 44 |
45 | 46 | 47 | 48 |
49 |
50 |
51 |
52 | 58 |
59 | -50% 60 |
61 |
62 |
63 |
64 |   65 | 66 |
67 | h 40cm x w 40cm 68 |
69 |
70 | Turkish Rose 71 |
72 |
73 |
74 |
75 |

Turkish Rose

76 | 77 |
78 |
Size:
79 |
80 |
9 unt.
81 |
15 unt.
82 |
21 unt.
83 |
32 unt.
84 |
85 |
86 |
87 | Color: 88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 | Delivery: 97 |
98 |
99 |
100 |
By courier
101 |
102 |
Pick up
103 |
104 |
105 |
106 |
107 |
108 | $89 109 | $49 110 |
Buy
111 |
112 |
113 |
114 | 115 | 116 | 117 |
118 | 126 |
127 |
128 | 129 |
130 | 131 | Turkish Rose 132 | 133 |
134 | Turkish Rose 135 |
136 | 137 | 138 | 139 |
140 | $49 141 |
142 |
143 | 144 |
145 | 146 | Rose Flower 147 | 148 |
149 | Rose Flower 150 |
151 | 152 | 153 | 154 |
155 | $49 156 |
157 |
158 | 159 |
160 | 161 | Assorted Colors 162 | 163 |
164 | Assorted Colors 165 |
166 | 167 | 168 | 169 |
170 | $49 171 |
172 |
173 |
174 |
175 | 176 | -------------------------------------------------------------------------------- /styles/catalogue.css: -------------------------------------------------------------------------------- 1 | /* rules for the body */ 2 | 3 | body { 4 | color: white; 5 | font-family: Arial, Helvetica, sans-serif; 6 | font-size: 20px; 7 | } 8 | 9 | .title { 10 | font-family: 'Times New Roman', Times, serif; 11 | } 12 | 13 | a { 14 | color: white; 15 | text-decoration: none; 16 | transition: 0.3s; 17 | } 18 | 19 | a:hover { 20 | color: mistyrose; 21 | text-shadow: 1px 1px magenta; 22 | } 23 | 24 | h1, 25 | h2, 26 | h3 { 27 | font-weight: 100; 28 | } 29 | 30 | /* rules for the main container */ 31 | 32 | .main-container { 33 | position: relative; 34 | } 35 | 36 | /* rules for the catalogue page header */ 37 | 38 | header { 39 | height: 3rem; 40 | width: 100%; 41 | background-image: url("../images/greenbg.png"); 42 | background-size: auto; 43 | background-position: -20rem -20rem; 44 | padding-top: 0.5rem; 45 | } 46 | 47 | .nav-bar { 48 | display: flex; 49 | width: 85%; 50 | align-items: center; 51 | margin: 0 auto; 52 | } 53 | 54 | .brand-header { 55 | margin-right: auto; 56 | } 57 | 58 | .menu { 59 | display: block; 60 | } 61 | 62 | .menu li { 63 | display: inline-block; 64 | margin: 0 10px; 65 | } 66 | 67 | .icon-btn { 68 | display: inline-block; 69 | font-size: 12px; 70 | padding: 0.7rem; 71 | border-radius: 50%; 72 | margin: 0 10px; 73 | } 74 | 75 | .menu-btn { 76 | display: none; 77 | padding: 0.65rem 0.7rem 0.65rem 0.7rem; 78 | } 79 | 80 | .like-btn, 81 | .menu-btn { 82 | background-color: #8ed456; 83 | } 84 | 85 | .cart-btn { 86 | background-color: #d8055a; 87 | } 88 | 89 | .flowers-catalogue { 90 | position: relative; 91 | color: black; 92 | background-color: white; 93 | width: 100%; 94 | } 95 | 96 | .page-header { 97 | display: block; 98 | position: relative; 99 | top: 1.5rem; 100 | width: 85%; 101 | font-size: 1.8rem; 102 | margin: 0 auto; 103 | } 104 | 105 | .funnel { 106 | display: none; 107 | position: relative; 108 | text-align: center; 109 | top: 2rem; 110 | width: 85%; 111 | font-size: 1.2rem; 112 | padding: 0.7rem 0; 113 | margin: 0 auto; 114 | color: #55bf00; 115 | border: 1px solid #55bf00; 116 | border-radius: 0.3rem; 117 | } 118 | 119 | .main-box { 120 | display: flex; 121 | align-items: start; 122 | position: relative; 123 | top: 3rem; 124 | width: 85%; 125 | margin: 0 auto; 126 | } 127 | 128 | /* rules for the filter box */ 129 | 130 | .filter-box { 131 | flex: 1; 132 | background-color: #fcfcfc; 133 | border: 1px solid whitesmoke; 134 | margin-right: 2rem; 135 | border-radius: 0.3rem; 136 | } 137 | 138 | .filter-box span { 139 | display: block; 140 | font-size: 1.2rem; 141 | font-weight: 600; 142 | margin: 1rem; 143 | } 144 | 145 | .spacer { 146 | visibility: hidden; 147 | height: 0; 148 | } 149 | 150 | .price-slider-frame { 151 | margin: 0 1rem; 152 | cursor: pointer; 153 | } 154 | 155 | .price-slider-frame img { 156 | width: 100%; 157 | height: auto; 158 | } 159 | 160 | .price-limits { 161 | display: flex; 162 | justify-content: space-between; 163 | margin: 0.3rem 1rem; 164 | } 165 | 166 | .limit { 167 | width: 5rem; 168 | font-size: 1rem; 169 | padding: 0.3rem; 170 | margin: 0; 171 | border: 2px solid #55bf00; 172 | border-radius: 0.4rem; 173 | } 174 | 175 | .color-picker { 176 | display: flex; 177 | justify-content: start; 178 | margin: 0.3rem 1rem; 179 | } 180 | 181 | .color-container { 182 | color: white; 183 | width: 2.3rem; 184 | } 185 | 186 | .color { 187 | display: inline-block; 188 | width: 1rem; 189 | font-size: 1rem; 190 | padding: 0.3rem; 191 | border-radius: 1rem; 192 | cursor: pointer; 193 | } 194 | 195 | .color1 { background: #bd4855; } 196 | .color2 { background: #d49315; } 197 | .color3 { background: #a833b9; } 198 | .color4 { background: #df5fa7; } 199 | .color5 { background: #5faddf; } 200 | 201 | .event, 202 | .for-whom { 203 | display: inline-block; 204 | width: 80%; 205 | margin: 0.2rem 1rem; 206 | } 207 | 208 | .event span, 209 | .for-whom span { 210 | display: inline-block; 211 | font-size: 1rem; 212 | font-weight: 100; 213 | margin: 0 0 0 0.8rem; 214 | } 215 | 216 | .checkmark { 217 | display: inline-block; 218 | font-size: 0.7rem; 219 | padding: 0.1rem; 220 | color: white; 221 | border: 1px solid #55bf00; 222 | border-radius: 0.1rem; 223 | cursor: pointer; 224 | } 225 | 226 | .event1 .checkmark, 227 | .for-whom1 .checkmark { 228 | color: black; 229 | } 230 | 231 | .show-btn { 232 | text-align: center; 233 | color: white; 234 | font-size: 1.1rem; 235 | background-color: #d8055a; 236 | padding: 0.6rem; 237 | border: none; 238 | border-radius: 2rem; 239 | margin: 1.5rem 1rem 1rem 1rem; 240 | cursor: pointer; 241 | } 242 | 243 | /* rules for the results box */ 244 | 245 | .results-box { 246 | display: flex; 247 | flex-wrap: wrap; 248 | justify-content: space-between; 249 | flex: 3; 250 | } 251 | 252 | .result { 253 | background-color: #fcfcfc; 254 | border: 1px solid whitesmoke; 255 | width: 31%; 256 | border-radius: 0.3rem; 257 | } 258 | 259 | .result1 { margin: 0 0.25rem 0.5rem 0; } 260 | .result2 { margin: 0 0.25rem 0.5rem 0.25rem; } 261 | .result3 { margin: 0 0 0.5rem 0.25rem; } 262 | .result4 { margin: 0.5rem 0.5rem 0 0; } 263 | .result5 { margin: 0.5rem 0.5rem 0 0.25rem; } 264 | .result6 { margin: 0.5rem 0 0 0.5rem; } 265 | 266 | .result i { 267 | display: inline-block; 268 | margin: 0 1rem; 269 | font-size: 0.9rem; 270 | color: #d8055a; 271 | } 272 | 273 | .img-frame { 274 | position: relative; 275 | width: 55%; 276 | margin: 0 auto; 277 | } 278 | 279 | .result img { 280 | position: relative; 281 | bottom: 0; 282 | width: 100%; 283 | height: auto; 284 | } 285 | 286 | .quantity { 287 | margin: 0.3rem 1rem 0.3rem 1rem; 288 | } 289 | 290 | .result label { 291 | display: inline-block; 292 | font-size: 0.7rem; 293 | font-weight: 600; 294 | padding: 0.3rem 0.7vw 0.3rem 0.5vw; 295 | border: 1px solid lightgray; 296 | border-radius: 1rem; 297 | transition: all 0.3s; 298 | } 299 | 300 | .result input[type="radio"] { 301 | display: none; 302 | } 303 | 304 | .result input[type="radio"]:checked + label { 305 | border: 2px solid #55bf00; 306 | } 307 | 308 | .result span { 309 | display: block; 310 | font-weight: 600; 311 | margin: 0.4rem 1rem 0.6rem 1rem; 312 | } 313 | 314 | .price-span { 315 | margin: 0 1rem 0.5rem 1rem; 316 | } 317 | 318 | .price-span i { 319 | font-size: 1rem; 320 | margin: 0; 321 | } 322 | 323 | .pagination { 324 | display: none; 325 | position: relative; 326 | top: 6rem; 327 | width: 85%; 328 | margin: auto; 329 | } 330 | 331 | .ball { 332 | display: inline-block; 333 | width: 15px; 334 | height: 15px; 335 | background: #dbf2bf; 336 | margin: 0 0.5rem; 337 | border-radius: 50%; 338 | } 339 | 340 | .ball1 { 341 | background: #55bf00; 342 | } 343 | 344 | /* media query for mobile devices screen */ 345 | 346 | @media all and (max-width: 1024px) { 347 | /* rules for the navigation bar */ 348 | 349 | .nav-bar { 350 | width: 95%; 351 | margin: 0 auto; 352 | } 353 | 354 | .menu { 355 | display: none; 356 | } 357 | 358 | .menu-btn { 359 | display: inline; 360 | } 361 | 362 | .icon-btn { 363 | margin: 0 1vw; 364 | } 365 | 366 | /* rules for the header */ 367 | 368 | .page-header { 369 | top: 1.2rem; 370 | } 371 | 372 | .pagination { 373 | display: block; 374 | } 375 | 376 | .flowers-catalogue { 377 | top: 2.3; 378 | height: 50rem; 379 | } 380 | 381 | .funnel { 382 | display: block; 383 | } 384 | 385 | /* rules for filter box */ 386 | 387 | .filter-box { 388 | display: none; 389 | } 390 | 391 | /* rules for results box */ 392 | 393 | .result { 394 | display: block; 395 | width: 100%; 396 | margin-bottom: 2rem; 397 | } 398 | 399 | .img-frame { 400 | position: relative; 401 | width: 50%; 402 | height: 45vw; 403 | margin: 0 auto; 404 | } 405 | } 406 | 407 | /* media query for small screen devices */ 408 | 409 | @media all and (max-width: 450px) { 410 | .brand-header { 411 | font-size: 15px; 412 | } 413 | 414 | .icon-btn { 415 | font-size: 10px; 416 | padding: 8px; 417 | } 418 | 419 | .header { 420 | top: 1vh; 421 | } 422 | 423 | .flowers-catalogue { 424 | top: 2.5; 425 | } 426 | 427 | .page-header { 428 | top: 1.5rem; 429 | font-size: 1.4rem; 430 | } 431 | 432 | .main-box { 433 | top: 2.5rem; 434 | } 435 | } 436 | -------------------------------------------------------------------------------- /styles/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0-modified | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, 7 | body, 8 | div, 9 | span, 10 | applet, 11 | object, 12 | iframe, 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6, 19 | p, 20 | blockquote, 21 | pre, 22 | a, 23 | abbr, 24 | acronym, 25 | address, 26 | big, 27 | cite, 28 | code, 29 | del, 30 | dfn, 31 | em, 32 | img, 33 | ins, 34 | kbd, 35 | q, 36 | s, 37 | samp, 38 | small, 39 | strike, 40 | strong, 41 | sub, 42 | sup, 43 | tt, 44 | var, 45 | b, 46 | u, 47 | i, 48 | center, 49 | dl, 50 | dt, 51 | dd, 52 | ol, 53 | ul, 54 | li, 55 | fieldset, 56 | form, 57 | label, 58 | legend, 59 | table, 60 | caption, 61 | tbody, 62 | tfoot, 63 | thead, 64 | tr, 65 | th, 66 | td, 67 | article, 68 | aside, 69 | canvas, 70 | details, 71 | embed, 72 | figure, 73 | figcaption, 74 | footer, 75 | header, 76 | hgroup, 77 | menu, 78 | nav, 79 | output, 80 | ruby, 81 | section, 82 | summary, 83 | time, 84 | mark, 85 | audio, 86 | video { 87 | margin: 0; 88 | padding: 0; 89 | border: 0; 90 | font-size: 100%; 91 | vertical-align: baseline; 92 | } 93 | 94 | ::-moz-selection { 95 | background: #b3d4fc; 96 | text-shadow: none; 97 | } 98 | 99 | /* make sure to set some focus styles for accessibility */ 100 | :focus { 101 | outline: 0; 102 | } 103 | 104 | /* HTML5 display-role reset for older browsers */ 105 | article, 106 | aside, 107 | details, 108 | figcaption, 109 | figure, 110 | footer, 111 | header, 112 | hgroup, 113 | menu, 114 | nav, 115 | section { 116 | display: block; 117 | } 118 | 119 | body { 120 | line-height: 1; 121 | } 122 | 123 | ol, 124 | ul { 125 | list-style: none; 126 | } 127 | 128 | blockquote, 129 | q { 130 | quotes: none; 131 | } 132 | 133 | blockquote::before, 134 | blockquote::after, 135 | q::before, 136 | q::after { 137 | content: ''; 138 | content: none; 139 | } 140 | 141 | table { 142 | border-collapse: collapse; 143 | border-spacing: 0; 144 | } 145 | 146 | input[type=search] { 147 | -webkit-appearance: none; 148 | -moz-appearance: none; 149 | -webkit-box-sizing: content-box; 150 | -moz-box-sizing: content-box; 151 | box-sizing: content-box; 152 | } 153 | 154 | input[type=search]::-webkit-search-cancel-button, 155 | input[type=search]::-webkit-search-decoration, 156 | input[type=search]::-webkit-search-results-button, 157 | input[type=search]::-webkit-search-results-decoration { 158 | -webkit-appearance: none; 159 | -moz-appearance: none; 160 | } 161 | 162 | textarea { 163 | overflow: auto; 164 | vertical-align: top; 165 | resize: vertical; 166 | } 167 | 168 | /** 169 | * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. 170 | */ 171 | 172 | audio, 173 | canvas, 174 | video { 175 | display: inline-block; 176 | *display: inline; 177 | *zoom: 1; 178 | max-width: 100%; 179 | } 180 | 181 | /** 182 | * Prevent modern browsers from displaying `audio` without controls. 183 | * Remove excess height in iOS 5 devices. 184 | */ 185 | 186 | audio:not([controls]) { 187 | display: none; 188 | height: 0; 189 | } 190 | 191 | /** 192 | * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. 193 | * Known issue: no IE 6 support. 194 | */ 195 | 196 | [hidden] { 197 | display: none; 198 | } 199 | 200 | /** 201 | * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 202 | * `em` units. 203 | * 2. Prevent iOS text size adjust after orientation change, without disabling 204 | * user zoom. 205 | */ 206 | 207 | html { 208 | font-size: 100%; /* 1 */ 209 | -webkit-text-size-adjust: 100%; /* 2 */ 210 | -ms-text-size-adjust: 100%; /* 2 */ 211 | } 212 | 213 | /** 214 | * Address `outline` inconsistency between Chrome and other browsers. 215 | */ 216 | 217 | a:focus { 218 | outline: thin dotted; 219 | } 220 | 221 | /** 222 | * Improve readability when focused and also mouse hovered in all browsers. 223 | */ 224 | 225 | a:active, 226 | a:hover { 227 | outline: 0; 228 | } 229 | 230 | /** 231 | * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. 232 | * 2. Improve image quality when scaled in IE 7. 233 | */ 234 | 235 | img { 236 | border: 0; /* 1 */ 237 | -ms-interpolation-mode: bicubic; /* 2 */ 238 | } 239 | 240 | /** 241 | * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. 242 | */ 243 | 244 | figure { 245 | margin: 0; 246 | } 247 | 248 | /** 249 | * Correct margin displayed oddly in IE 6/7. 250 | */ 251 | 252 | form { 253 | margin: 0; 254 | } 255 | 256 | /** 257 | * Define consistent border, margin, and padding. 258 | */ 259 | 260 | fieldset { 261 | border: 1px solid #c0c0c0; 262 | margin: 0 2px; 263 | padding: 0.35em 0.625em 0.75em; 264 | } 265 | 266 | /** 267 | * 1. Correct color not being inherited in IE 6/7/8/9. 268 | * 2. Correct text not wrapping in Firefox 3. 269 | * 3. Correct alignment displayed oddly in IE 6/7. 270 | */ 271 | 272 | legend { 273 | border: 0; /* 1 */ 274 | padding: 0; 275 | white-space: normal; /* 2 */ 276 | *margin-left: -7px; /* 3 */ 277 | } 278 | 279 | /** 280 | * 1. Correct font size not being inherited in all browsers. 281 | * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, 282 | * and Chrome. 283 | * 3. Improve appearance and consistency in all browsers. 284 | */ 285 | 286 | button, 287 | input, 288 | select, 289 | textarea { 290 | font-size: 100%; /* 1 */ 291 | margin: 0; /* 2 */ 292 | vertical-align: baseline; /* 3 */ 293 | *vertical-align: middle; /* 3 */ 294 | } 295 | 296 | /** 297 | * Address Firefox 3+ setting `line-height` on `input` using `!important` in 298 | * the UA stylesheet. 299 | */ 300 | 301 | button, 302 | input { 303 | line-height: normal; 304 | } 305 | 306 | /** 307 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 308 | * All other form control elements do not inherit `text-transform` values. 309 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. 310 | * Correct `select` style inheritance in Firefox 4+ and Opera. 311 | */ 312 | 313 | button, 314 | select { 315 | text-transform: none; 316 | } 317 | 318 | /** 319 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 320 | * and `video` controls. 321 | * 2. Correct inability to style clickable `input` types in iOS. 322 | * 3. Improve usability and consistency of cursor style between image-type 323 | * `input` and others. 324 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 325 | * Known issue: inner spacing remains in IE 6. 326 | */ 327 | 328 | button, 329 | html input[type="button"], /* 1 */ 330 | input[type="reset"], 331 | input[type="submit"] { 332 | -webkit-appearance: button; /* 2 */ 333 | cursor: pointer; /* 3 */ 334 | *overflow: visible; /* 4 */ 335 | } 336 | 337 | /** 338 | * Re-set default cursor for disabled elements. 339 | */ 340 | 341 | button[disabled], 342 | html input[disabled] { 343 | cursor: default; 344 | } 345 | 346 | /** 347 | * 1. Address box sizing set to content-box in IE 8/9. 348 | * 2. Remove excess padding in IE 8/9. 349 | * 3. Remove excess padding in IE 7. 350 | * Known issue: excess padding remains in IE 6. 351 | */ 352 | 353 | input[type="checkbox"], 354 | input[type="radio"] { 355 | box-sizing: border-box; /* 1 */ 356 | padding: 0; /* 2 */ 357 | *height: 13px; /* 3 */ 358 | *width: 13px; /* 3 */ 359 | } 360 | 361 | /** 362 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 363 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 364 | * (include `-moz` to future-proof). 365 | */ 366 | 367 | input[type="search"] { 368 | -webkit-appearance: textfield; /* 1 */ 369 | -moz-box-sizing: content-box; 370 | -webkit-box-sizing: content-box; /* 2 */ 371 | box-sizing: content-box; 372 | } 373 | 374 | /** 375 | * Remove inner padding and search cancel button in Safari 5 and Chrome 376 | * on OS X. 377 | */ 378 | 379 | input[type="search"]::-webkit-search-cancel-button, 380 | input[type="search"]::-webkit-search-decoration { 381 | -webkit-appearance: none; 382 | } 383 | 384 | /** 385 | * Remove inner padding and border in Firefox 3+. 386 | */ 387 | 388 | html, 389 | button, 390 | input, 391 | select, 392 | textarea { 393 | color: #222; 394 | } 395 | 396 | button::-moz-focus-inner, 397 | input::-moz-focus-inner { 398 | border: 0; 399 | padding: 0; 400 | } 401 | 402 | ::selection { 403 | background: #b3d4fc; 404 | text-shadow: none; 405 | } 406 | 407 | .chromeframe { 408 | margin: 0.2em 0; 409 | background: #ccc; 410 | color: #000; 411 | padding: 0.2em 0; 412 | } 413 | -------------------------------------------------------------------------------- /styles/product.css: -------------------------------------------------------------------------------- 1 | /* rules for the body */ 2 | 3 | body { 4 | color: white; 5 | font-family: Arial, Helvetica, sans-serif; 6 | font-size: 20px; 7 | } 8 | 9 | .title { 10 | font-family: 'Times New Roman', Times, serif; 11 | } 12 | 13 | a { 14 | color: white; 15 | text-decoration: none; 16 | transition: 0.3s; 17 | } 18 | 19 | a:hover { 20 | color: mistyrose; 21 | text-shadow: 1px 1px magenta; 22 | } 23 | 24 | h1, 25 | h2, 26 | h3 { 27 | font-weight: 100; 28 | } 29 | 30 | /* rules for the header */ 31 | 32 | header { 33 | height: 3rem; 34 | background-image: url("../images/greenbg.png"); 35 | background-size: auto; 36 | background-position: -20rem -20rem; 37 | padding-top: 0.5rem; 38 | } 39 | 40 | .nav-bar { 41 | display: flex; 42 | align-items: center; 43 | width: 85%; 44 | margin: 0 auto; 45 | } 46 | 47 | .nav-bar span { 48 | margin-right: auto; 49 | } 50 | 51 | .menu { 52 | display: block; 53 | } 54 | 55 | .menu li { 56 | display: inline-block; 57 | margin: 0 10px; 58 | } 59 | 60 | .icon-btn { 61 | display: inline-block; 62 | font-size: 12px; 63 | padding: 0.7rem; 64 | border-radius: 50%; 65 | margin: 0 10px; 66 | } 67 | 68 | .menu-btn { 69 | display: none; 70 | padding: 0.65rem 0.7rem 0.65rem 0.7rem; 71 | } 72 | 73 | .like-btn, 74 | .menu-btn { 75 | background-color: #8ed456; 76 | } 77 | 78 | .cart-btn { 79 | background-color: #d8055a; 80 | } 81 | 82 | /* rules for the main container */ 83 | 84 | .selected-product { 85 | display: flex; 86 | width: 85%; 87 | margin: 2rem auto 2rem auto; 88 | } 89 | 90 | .product-img { 91 | position: relative; 92 | flex: 1; 93 | background-color: #fcfcfc; 94 | border: 1px solid whitesmoke; 95 | border-top-left-radius: 0.3rem; 96 | border-bottom-left-radius: 0.3rem; 97 | } 98 | 99 | .upper-elements { 100 | display: flex; 101 | justify-content: space-between; 102 | align-items: start; 103 | position: absolute; 104 | top: 1rem; 105 | left: 1rem; 106 | right: 1rem; 107 | } 108 | 109 | .ball { 110 | width: 12px; 111 | height: 12px; 112 | background: #dbf2bf; 113 | border-radius: 50%; 114 | margin: 5px 0; 115 | } 116 | 117 | .ball1 { 118 | background: #55bf00; 119 | } 120 | 121 | .discount { 122 | display: inline-block; 123 | font-size: 1rem; 124 | background: #55bf00; 125 | padding: 0.8rem 0.2rem; 126 | border-radius: 50%; 127 | } 128 | 129 | .lower-elements { 130 | display: flex; 131 | justify-content: space-between; 132 | align-items: start; 133 | position: absolute; 134 | color: gray; 135 | bottom: 1rem; 136 | left: 1rem; 137 | right: 1rem; 138 | } 139 | 140 | .lower-elements span { 141 | font-size: 1rem; 142 | } 143 | 144 | .selected-product img { 145 | width: 100%; 146 | height: auto; 147 | } 148 | 149 | .main-img-frame { 150 | width: 40%; 151 | margin: 1rem auto; 152 | } 153 | 154 | .product-info { 155 | flex: 1; 156 | color: black; 157 | border: 1px solid whitesmoke; 158 | border-top-right-radius: 0.3rem; 159 | border-bottom-right-radius: 0.3rem; 160 | } 161 | 162 | .line { 163 | width: 92%; 164 | font-size: 1rem; 165 | font-weight: 600; 166 | } 167 | 168 | .product-title { 169 | display: flex; 170 | justify-content: space-between; 171 | align-items: center; 172 | margin: 1rem auto; 173 | } 174 | 175 | .product-title h1 { 176 | display: inline-block; 177 | font-size: 1.8rem; 178 | } 179 | 180 | .product-title i { 181 | color: #d8055a; 182 | font-size: 1rem; 183 | } 184 | 185 | .size { 186 | display: block; 187 | margin: 1rem auto; 188 | } 189 | 190 | .size-options { 191 | font-size: 0.8rem; 192 | margin: 0 auto; 193 | } 194 | 195 | .option-size { 196 | display: inline-block; 197 | width: 2.8rem; 198 | font-weight: 600; 199 | padding: 0.2rem 0.8rem; 200 | margin: 0 0.5rem; 201 | border: 1px solid lightgray; 202 | border-radius: 1rem; 203 | } 204 | 205 | .option-size1 { 206 | border: 2px solid #55bf00; 207 | margin-left: 0; 208 | } 209 | 210 | .other-options { 211 | display: flex; 212 | justify-content: flex-start; 213 | margin: 1rem auto; 214 | } 215 | 216 | .color-picker { 217 | display: inline-block; 218 | margin: 1rem 1rem 0.2rem 0; 219 | font-size: 1rem; 220 | } 221 | 222 | .color-ball { 223 | display: inline-block; 224 | width: 1.5rem; 225 | height: 1.5rem; 226 | border-radius: 50%; 227 | margin: 1rem 0.4rem 0.2rem 0.4rem; 228 | } 229 | 230 | .color-ball1 { 231 | margin-left: 0; 232 | background: #9b1844; 233 | } 234 | 235 | .color-ball2 { background: #d8055a; } 236 | .color-ball3 { background: #ffacc7; } 237 | .color-ball4 { background: #ffd6e4; } 238 | 239 | .delivery { 240 | display: inline-block; 241 | margin: 1rem auto 0.2rem auto; 242 | font-size: 1rem; 243 | } 244 | 245 | .delivery-option { 246 | display: inline-block; 247 | height: 1rem; 248 | } 249 | 250 | .checkmark { 251 | display: inline-block; 252 | width: 1rem; 253 | height: 1rem; 254 | border: 1px solid #55bf00; 255 | margin-right: 0.5rem; 256 | } 257 | 258 | .checkmark2 { 259 | margin-left: 1rem; 260 | } 261 | 262 | .options-line { 263 | margin: 0.8rem 0; 264 | } 265 | 266 | .total { 267 | margin: 0 auto; 268 | } 269 | 270 | .total .old-price { 271 | color: gray; 272 | text-decoration-line: line-through; 273 | margin-right: 1rem; 274 | } 275 | 276 | .total .new-price { 277 | font-size: 1.5rem; 278 | } 279 | 280 | .buy-btn { 281 | display: inline-block; 282 | color: white; 283 | background: #d8055a; 284 | padding: 0.7rem 3rem; 285 | cursor: pointer; 286 | border-radius: 2rem; 287 | margin: 0 0 1rem 2rem; 288 | } 289 | 290 | .related-products { 291 | width: 85%; 292 | font-size: 1.7rem; 293 | color: black; 294 | margin: 0 auto; 295 | } 296 | 297 | .related-products-bar { 298 | display: flex; 299 | justify-content: space-between; 300 | align-items: center; 301 | height: 2rem; 302 | } 303 | 304 | .related-arrows { 305 | color: gray; 306 | } 307 | 308 | .related-box { 309 | display: flex; 310 | justify-content: space-between; 311 | width: 100%; 312 | margin: 1 auto 2rem auto; 313 | } 314 | 315 | .related { 316 | background-color: #fcfcfc; 317 | border: 1px solid whitesmoke; 318 | width: 32%; 319 | border-radius: 0.3rem; 320 | } 321 | 322 | .related1 { margin: 0 1rem 1rem 0; } 323 | .related2 { margin: 0 1rem 1rem 1rem; } 324 | .related3 { margin: 0 0 1rem 1rem; } 325 | 326 | .related i { 327 | display: inline-block; 328 | margin: 1rem 0 0 1rem; 329 | font-size: 0.9rem; 330 | color: #d8055a; 331 | } 332 | 333 | .like { 334 | position: absolute; 335 | } 336 | 337 | .img-frame { 338 | position: relative; 339 | width: 32%; 340 | margin: 1rem auto 0 auto; 341 | } 342 | 343 | .related img { 344 | position: relative; 345 | bottom: 0; 346 | width: 100%; 347 | height: auto; 348 | } 349 | 350 | .quantity { 351 | margin: 0.2rem 1rem 0.2rem 1rem; 352 | } 353 | 354 | .related label { 355 | display: inline-block; 356 | font-size: 0.7rem; 357 | font-weight: 600; 358 | padding: 0.3rem 0.7vw 0.5rem 0.5vw; 359 | border: 1px solid lightgray; 360 | border-radius: 1rem; 361 | transition: all 0.3s; 362 | } 363 | 364 | .related input[type="radio"] { 365 | display: none; 366 | } 367 | 368 | .related input[type="radio"]:checked + label { 369 | border: 2px solid #55bf00; 370 | } 371 | 372 | .related span { 373 | display: block; 374 | font-size: 1.2rem; 375 | font-weight: 600; 376 | margin: 0 1rem 0.4rem 1rem; 377 | } 378 | 379 | .price-span { 380 | margin: 0.2rem 1rem 0.5rem 1rem; 381 | } 382 | 383 | .price-span i { 384 | font-size: 1rem; 385 | margin: 0; 386 | } 387 | 388 | /* media querys */ 389 | 390 | @media all and (max-width: 1024px) { 391 | /* rules for the navigation bar */ 392 | 393 | .nav-bar { 394 | width: 95%; 395 | margin: 0 auto; 396 | } 397 | 398 | .menu { 399 | display: none; 400 | } 401 | 402 | .menu-btn { 403 | display: inline; 404 | } 405 | 406 | .icon-btn { 407 | margin: 0 1vw; 408 | } 409 | 410 | /* rules for the header */ 411 | 412 | .page-header { 413 | top: 1.2rem; 414 | } 415 | 416 | /* rules for the main container */ 417 | 418 | .selected-product { 419 | flex-wrap: wrap; 420 | } 421 | 422 | .product-img { 423 | min-width: 500px; 424 | } 425 | 426 | .product-info { 427 | min-width: 500px; 428 | } 429 | 430 | .related-box { 431 | flex-direction: column; 432 | } 433 | 434 | .related { 435 | width: 100%; 436 | margin: 0 0 2rem 0; 437 | } 438 | } 439 | 440 | /* rules for smaller screen sizes */ 441 | 442 | @media all and (max-width: 450px) { 443 | .brand-header { 444 | font-size: 15px; 445 | } 446 | 447 | .icon-btn { 448 | font-size: 10px; 449 | padding: 8px; 450 | } 451 | 452 | .header { 453 | height: 2vh; 454 | } 455 | 456 | .main-box { 457 | top: 2.5rem; 458 | } 459 | 460 | .product-img { 461 | min-width: 250px; 462 | } 463 | 464 | .product-info { 465 | min-width: 250px; 466 | } 467 | } 468 | -------------------------------------------------------------------------------- /catalogue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flowers shop - catalogue 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 43 |
44 |
45 |

Flowers Catalogue

46 |
47 | Filters 48 |
49 |
50 |
51 | Price 52 |
53 | slider 54 |
55 |
56 |
39
57 |
89
58 |
59 |
60 | Color 61 |
62 |
63 |
64 |
65 |
66 |
 
67 |
68 |
69 |
 
70 |
71 |
72 |
 
73 |
74 |
75 |
 
76 |
77 |
78 |
79 | Event 80 |
81 |
82 | Birthday 83 |
84 |
85 |
86 | Anniversary 87 |
88 |
89 |
90 | Congratulations 91 |
92 |
93 |
94 | Valentin's day 95 |
96 |
97 |
98 | Apologize 99 |
100 |
101 | For whom 102 |
103 |
104 | Spouse 105 |
106 |
107 |
108 | Girlfriend 109 |
110 |
111 |
112 | Mother 113 |
114 |
115 |
116 | Daughter 117 |
118 |
119 |
120 | Friend 121 |
122 |
Show results
123 |
124 |
125 |
126 | 127 |
128 | 129 | Turkish Rose 130 | 131 |
132 | Turkish Rose 133 |
134 | 135 | 136 | 137 |
138 | $49 139 |
140 |
141 | 142 |
143 | 144 | Rose Flower 145 | 146 |
147 | Rose Flower 148 |
149 | 150 | 151 | 152 |
153 | $49 154 |
155 |
156 | 157 |
158 | 159 | Assorted Colors 160 | 161 |
162 | Assorted Colors 163 |
164 | 165 | 166 | 167 |
168 | $49 169 |
170 |
171 | 172 |
173 | 174 | Daisy Flowers 175 | 176 |
177 | Daisy Flowers 178 |
179 | 180 | 181 | 182 |
183 | $49 184 |
185 |
186 | 187 |
188 | 189 | Alstroemeria 190 | 191 |
192 | Alstroemeria 193 |
194 | 195 | 196 | 197 |
198 | $49 199 |
200 |
201 | 202 |
203 | 204 | Peonies and Lilies 205 | 206 |
207 | Peonies and Lilies 208 |
209 | 210 | 211 | 212 |
213 | $49 214 |
215 |
216 |
217 | 225 |
226 |
227 | 228 | -------------------------------------------------------------------------------- /styles/main.css: -------------------------------------------------------------------------------- 1 | /* rules for the main page body */ 2 | 3 | body { 4 | color: white; 5 | font-family: Arial, Helvetica, sans-serif; 6 | font-size: 20px; 7 | } 8 | 9 | .title { 10 | font-family: 'Times New Roman', Times, serif; 11 | } 12 | 13 | a { 14 | color: white; 15 | text-decoration: none; 16 | transition: 0.3s; 17 | } 18 | 19 | a:hover { 20 | color: mistyrose; 21 | text-shadow: 1px 1px magenta; 22 | } 23 | 24 | h1, 25 | h2, 26 | h3 { 27 | font-weight: 100; 28 | } 29 | 30 | /* rules for the main container */ 31 | 32 | .main-container { 33 | position: relative; 34 | width: calc(100vw - 15px); 35 | margin: 0 auto; 36 | } 37 | 38 | .page1 { 39 | position: relative; 40 | width: 100%; 41 | height: 100vh; 42 | background: url("../images/greenbg.png") center center/100% 100% no-repeat; 43 | } 44 | 45 | .frame { 46 | position: relative; 47 | width: 85%; 48 | height: 100%; 49 | margin: 0 auto; 50 | } 51 | 52 | /* rules for the main page header */ 53 | 54 | header { 55 | position: absolute; 56 | top: 2vh; 57 | width: 100%; 58 | } 59 | 60 | .nav-bar { 61 | display: flex; 62 | width: 100%; 63 | align-items: center; 64 | } 65 | 66 | .brand-header { 67 | font-family: 'Times New Roman', Times, serif; 68 | margin-right: auto; 69 | } 70 | 71 | .menu { 72 | display: block; 73 | } 74 | 75 | .menu li { 76 | display: inline-block; 77 | margin: 0 10px; 78 | } 79 | 80 | .icon-btn { 81 | display: inline-block; 82 | font-size: 12px; 83 | padding: 0.7rem; 84 | border-radius: 50%; 85 | margin: 0 10px; 86 | } 87 | 88 | .menu-btn { 89 | display: none; 90 | padding: 0.65rem 0.7rem 0.65rem 0.7rem; 91 | } 92 | 93 | .like-btn, 94 | .menu-btn { 95 | background-color: #8ed456; 96 | } 97 | 98 | .cart-btn { 99 | background-color: #d8055a; 100 | } 101 | 102 | /* rules for the main text */ 103 | 104 | .main-text { 105 | display: flex; 106 | flex-direction: column; 107 | position: absolute; 108 | top: 40vh; 109 | bottom: 5vh; 110 | } 111 | 112 | .caption { 113 | font-family: 'Times New Roman', Times, serif; 114 | text-align: center; 115 | font-size: 60px; 116 | } 117 | 118 | .sub-caption { 119 | font-size: 25px; 120 | } 121 | 122 | .order-btn { 123 | width: 60%; 124 | text-align: center; 125 | padding: 10px; 126 | background-color: #d8055a; 127 | margin-top: 25px; 128 | border-radius: 20px; 129 | margin-bottom: auto; 130 | } 131 | 132 | /* rules for the main-img */ 133 | 134 | .main-img-container { 135 | position: absolute; 136 | right: 0; 137 | bottom: 0; 138 | width: 60vw; 139 | height: 80vh; 140 | overflow: hidden; 141 | } 142 | 143 | .main-img { 144 | position: absolute; 145 | bottom: 0; 146 | right: 0; 147 | max-width: 100%; 148 | height: 100%; 149 | } 150 | 151 | /* rules for the Best Offers section */ 152 | 153 | .page2 { 154 | position: relative; 155 | width: 100%; 156 | } 157 | 158 | .best-offers { 159 | width: 100%; 160 | color: black; 161 | } 162 | 163 | .best-offers-bar { 164 | display: flex; 165 | justify-content: space-between; 166 | align-items: center; 167 | position: relative; 168 | width: 100%; 169 | height: 6rem; 170 | font-size: 1.8rem; 171 | } 172 | 173 | .arrows i { 174 | color: lightgray; 175 | } 176 | 177 | .offers { 178 | display: flex; 179 | top: 10vh; 180 | width: 100%; 181 | overflow: hidden; 182 | margin-bottom: 2rem; 183 | } 184 | 185 | .offer { 186 | border: 1px solid whitesmoke; 187 | background-color: #fcfcfc; 188 | } 189 | 190 | .left-offer { 191 | display: flex; 192 | flex-direction: column; 193 | justify-content: space-between; 194 | flex: 1; 195 | margin-right: 1vw; 196 | padding: 1rem 1rem 0 1rem; 197 | } 198 | 199 | .left-offer-info { 200 | position: relative; 201 | } 202 | 203 | .name-price { 204 | display: block; 205 | font-weight: 600; 206 | line-height: 1.5rem; 207 | } 208 | 209 | .purple-cart { 210 | color: #d8055a; 211 | } 212 | 213 | .discount { 214 | position: absolute; 215 | top: 0; 216 | right: 0; 217 | padding: 1rem 0.5rem 1rem 0.5rem; 218 | color: white; 219 | font-size: 16px; 220 | font-weight: 600; 221 | background-color: #55bf00; 222 | border-radius: 50%; 223 | } 224 | 225 | .left-offer-img-frame { 226 | width: 90%; 227 | margin: 0 auto; 228 | } 229 | 230 | .left-offer img { 231 | align-self: center; 232 | width: 100%; 233 | height: auto; 234 | overflow: hidden; 235 | margin: 0 auto; 236 | } 237 | 238 | .offers-right { 239 | display: flex; 240 | flex-direction: column; 241 | flex: 1; 242 | width: 100%; 243 | margin-left: 1rem; 244 | } 245 | 246 | .right-offer { 247 | display: flex; 248 | flex-direction: row; 249 | justify-content: start; 250 | flex: 1; 251 | padding: 1rem 1rem 0 1rem; 252 | } 253 | 254 | .right-offer-img-frame { 255 | width: 60%; 256 | } 257 | 258 | .right-offer img { 259 | width: 100%; 260 | height: auto; 261 | overflow: hidden; 262 | } 263 | 264 | .upper-right-offer { 265 | margin-bottom: 1rem; 266 | } 267 | 268 | .lower-right-offer { 269 | margin-top: 1rem; 270 | } 271 | 272 | /* rules for the crafts section */ 273 | 274 | .crafts-section, 275 | .testimonials { 276 | font-size: 1.8rem; 277 | background-image: url("../images/greenbg.png"); 278 | } 279 | 280 | .gallery-nav-bar, 281 | .testimonials-bar { 282 | display: flex; 283 | justify-content: space-between; 284 | align-items: center; 285 | width: 85%; 286 | height: 6rem; 287 | margin: 0 auto; 288 | } 289 | 290 | .slideshow, 291 | .testimonials-box { 292 | display: flex; 293 | justify-content: space-between; 294 | width: 85%; 295 | margin: 0 auto; 296 | } 297 | 298 | .slideshow img { 299 | width: 100%; 300 | height: auto; 301 | } 302 | 303 | .slide2 { 304 | margin: 0 3px; 305 | } 306 | 307 | .pagination { 308 | width: 85%; 309 | height: 5rem; 310 | margin: 0 auto; 311 | } 312 | 313 | .ball { 314 | display: inline-block; 315 | width: 1rem; 316 | height: 1rem; 317 | background: #92e44f; 318 | border-radius: 1rem; 319 | margin: 2rem 0.5rem 4rem 0.5rem; 320 | cursor: pointer; 321 | } 322 | 323 | .ball1 { 324 | background-color: white; 325 | } 326 | 327 | /* rules for the product samples section */ 328 | 329 | .product-samples-section { 330 | color: black; 331 | } 332 | 333 | .product-samples-header { 334 | width: 85%; 335 | font-size: 1.8rem; 336 | margin: 3rem auto; 337 | } 338 | 339 | .samples-box { 340 | display: flex; 341 | flex-wrap: wrap; 342 | width: 85%; 343 | margin: 0 auto; 344 | } 345 | 346 | .product { 347 | background-color: #fcfcfc; 348 | border: 1px solid whitesmoke; 349 | width: 30%; 350 | border-radius: 0.3rem; 351 | } 352 | 353 | .product1 { margin: 0 1rem 1rem 0; } 354 | .product2 { margin: 0 1rem 1rem 1rem; } 355 | .product3 { margin: 0 0 1rem 1rem; } 356 | .product4 { margin: 1rem 1rem 0 0; } 357 | .product5 { margin: 1rem 1rem 0 1rem; } 358 | .product6 { margin: 1rem 0 0 1rem; } 359 | 360 | .product i { 361 | display: inline-block; 362 | margin: 1rem; 363 | font-size: 0.9rem; 364 | color: #d8055a; 365 | } 366 | 367 | .img-frame { 368 | position: relative; 369 | width: 60%; 370 | margin: 0 auto; 371 | } 372 | 373 | .product img { 374 | position: relative; 375 | bottom: 0; 376 | width: 100%; 377 | height: auto; 378 | } 379 | 380 | .quantity { 381 | margin: 0.3rem 1rem 0.3rem 1rem; 382 | } 383 | 384 | .product label { 385 | display: inline-block; 386 | font-size: 0.7rem; 387 | font-weight: 600; 388 | padding: 0.3rem 0.7vw 0.3rem 0.5vw; 389 | border: 1px solid lightgray; 390 | border-radius: 1rem; 391 | transition: all 0.3s; 392 | } 393 | 394 | .product input[type="radio"] { 395 | display: none; 396 | } 397 | 398 | .product input[type="radio"]:checked + label { 399 | border: 2px solid #55bf00; 400 | } 401 | 402 | .product span { 403 | display: block; 404 | font-weight: 600; 405 | margin: 0.7rem 1rem 0.7rem 1rem; 406 | } 407 | 408 | .price-span { 409 | margin: 0 1rem 0.5rem 1rem; 410 | } 411 | 412 | .price-span i { 413 | font-size: 1rem; 414 | margin: 0; 415 | } 416 | 417 | .show-more-btn { 418 | width: 15rem; 419 | text-align: center; 420 | color: white; 421 | background-color: #d8055a; 422 | border-radius: 2rem; 423 | padding: 0.7rem 0; 424 | margin: 2rem auto; 425 | cursor: pointer; 426 | } 427 | 428 | /* rules for the testimonials section */ 429 | 430 | .customer { 431 | width: 48%; 432 | background-color: #fff; 433 | color: black; 434 | border-radius: 0.3rem; 435 | } 436 | 437 | .inner-box { 438 | width: 80%; 439 | font-size: 1.4rem; 440 | margin: 2rem auto 2rem auto; 441 | } 442 | 443 | .customer-info { 444 | font-weight: 600; 445 | } 446 | 447 | .testimonial-text { 448 | padding-top: 1.5rem; 449 | } 450 | 451 | .customer-info i { 452 | color: #55bf00; 453 | margin-top: 1rem; 454 | cursor: pointer; 455 | } 456 | 457 | .photo-container { 458 | width: 25%; 459 | float: left; 460 | margin-right: 1rem; 461 | } 462 | 463 | .photo-container img { 464 | width: 100%; 465 | height: auto; 466 | } 467 | 468 | .customer-description { 469 | display: block; 470 | line-height: 2rem; 471 | font-style: italic; 472 | color: gray; 473 | } 474 | 475 | /* rules for the footer */ 476 | 477 | .map { 478 | width: 100%; 479 | height: auto; 480 | } 481 | 482 | .footer-bar { 483 | display: flex; 484 | justify-content: space-between; 485 | align-items: start; 486 | width: 85%; 487 | color: black; 488 | margin: 2rem auto; 489 | } 490 | 491 | .subscribe-btn { 492 | display: flex; 493 | justify-content: space-between; 494 | align-items: center; 495 | width: 28%; 496 | color: white; 497 | background-color: #55bf00; 498 | font-size: 1.2rem; 499 | padding: 0.6rem 1.5rem; 500 | text-align: center; 501 | border-radius: 2rem; 502 | cursor: pointer; 503 | } 504 | 505 | .footer-block span { 506 | display: block; 507 | font-size: 0.9rem; 508 | font-weight: 600; 509 | line-height: 2rem; 510 | margin: 0 1rem; 511 | } 512 | 513 | .other-links { 514 | margin: 0 1rem; 515 | } 516 | 517 | .other-links a { 518 | display: block; 519 | line-height: 2rem; 520 | font-size: 0.9rem; 521 | font-weight: 600; 522 | text-decoration-line: underline; 523 | color: black; 524 | } 525 | 526 | .other-links a:hover { 527 | text-decoration-line: none; 528 | text-shadow: none; 529 | } 530 | 531 | .divider { 532 | display: none !important; 533 | margin: 0 2vw; 534 | } 535 | 536 | .card-logo { 537 | display: inline-block; 538 | width: 3rem; 539 | margin: 1rem 2rem 0 0; 540 | } 541 | 542 | .card-logo img { 543 | width: 100%; 544 | height: auto; 545 | } 546 | 547 | .card-logo2 img { 548 | height: 1.5rem; 549 | } 550 | 551 | .card-logo3 img { 552 | width: 180%; 553 | } 554 | 555 | /* media query for mobile devices screen */ 556 | 557 | @media all and (max-width: 1024px) { 558 | /* rules for the main container */ 559 | 560 | .main-container { 561 | width: calc(100vw - 15px); 562 | margin: 0; 563 | } 564 | 565 | .frame { 566 | width: 100%; 567 | } 568 | 569 | /* rules for the navigation bar */ 570 | 571 | .nav-bar { 572 | width: 95%; 573 | margin: 0 auto; 574 | } 575 | 576 | .menu { 577 | display: none; 578 | } 579 | 580 | .menu-btn { 581 | display: inline; 582 | } 583 | 584 | .icon-btn { 585 | margin: 0 1vw; 586 | } 587 | 588 | /* rules for the main text */ 589 | 590 | .main-text { 591 | display: flex; 592 | align-items: center; 593 | width: 100%; 594 | top: 15vh; 595 | } 596 | 597 | .sub-caption { 598 | text-align: center; 599 | } 600 | 601 | .order-btn { 602 | width: 40%; 603 | } 604 | 605 | .phone { 606 | display: none; 607 | } 608 | 609 | /* rules for the main image */ 610 | 611 | .main-img-container { 612 | display: flex; 613 | flex-direction: row; 614 | justify-content: center; 615 | position: absolute; 616 | width: 100vw; 617 | height: 55vh; 618 | overflow: hidden; 619 | } 620 | 621 | .main-img { 622 | top: 0; 623 | right: auto; 624 | width: 150%; 625 | height: auto; 626 | } 627 | 628 | /* rules for the Best Offers section */ 629 | 630 | .best-offers { 631 | width: 100%; 632 | } 633 | 634 | .best-offers-bar { 635 | width: 90%; 636 | margin: 0 auto; 637 | } 638 | 639 | .offers { 640 | width: 90%; 641 | margin: 0 auto; 642 | } 643 | 644 | .offer-left { 645 | margin: 0; 646 | } 647 | 648 | .left-offer-img-frame { 649 | width: 70%; 650 | } 651 | 652 | .offers-right { 653 | display: none; 654 | } 655 | 656 | /* rules for the crafts section */ 657 | 658 | .slide1 { 659 | width: 100%; 660 | } 661 | 662 | .slide2, 663 | .slide3 { 664 | display: none; 665 | } 666 | 667 | /* rules for the product samples section */ 668 | 669 | .samples-box { 670 | display: flex; 671 | flex-wrap: wrap; 672 | width: 85%; 673 | margin: 0 auto; 674 | } 675 | 676 | .product2 { 677 | width: 100%; 678 | } 679 | 680 | .product1, 681 | .product3, 682 | .product4, 683 | .product5, 684 | .product6 { 685 | display: none; 686 | } 687 | 688 | .img-frame { 689 | width: 40%; 690 | } 691 | 692 | .show-more-btn { 693 | width: 20%; 694 | min-width: 150px; 695 | } 696 | 697 | /* rules for the testimonials section */ 698 | 699 | .customer1 { 700 | width: 100%; 701 | } 702 | 703 | .customer2 { 704 | display: none; 705 | } 706 | 707 | .inner-box { 708 | font-size: 1.2rem; 709 | } 710 | 711 | /* rules for the footer */ 712 | .footer-bar { 713 | flex-direction: column; 714 | align-items: center; 715 | } 716 | 717 | .subscribe-btn { 718 | width: 50%; 719 | font-size: 1rem; 720 | margin-bottom: 2rem; 721 | } 722 | 723 | .other-links { 724 | font-size: 0.8rem; 725 | } 726 | 727 | .footer-block span, 728 | .other-links a { 729 | display: inline-block; 730 | font-size: 0.8rem; 731 | margin: 0 0.3rem; 732 | } 733 | 734 | .divider { 735 | display: inline-block !important; 736 | } 737 | } 738 | 739 | /* media query for small screen devices */ 740 | 741 | @media all and (max-width: 450px) { 742 | .brand-header { 743 | font-size: 15px; 744 | } 745 | 746 | .icon-btn { 747 | font-size: 10px; 748 | padding: 8px; 749 | } 750 | 751 | .caption { 752 | font-size: 35px; 753 | } 754 | 755 | .sub-caption { 756 | font-size: 18px; 757 | } 758 | 759 | .order-btn { 760 | width: 50%; 761 | font-size: 15px; 762 | padding: 6px; 763 | margin-top: 15px; 764 | } 765 | 766 | .main-img { 767 | top: 10vh; 768 | } 769 | 770 | .footer-block { 771 | text-align: center; 772 | } 773 | 774 | .footer-block span { 775 | font-size: 0.7rem; 776 | margin: 0 0.2rem; 777 | } 778 | 779 | .subscribe-btn { 780 | width: 50%; 781 | font-size: 0.8rem; 782 | margin-bottom: 1.5rem; 783 | } 784 | } 785 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flowers shop 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |
20 | 21 | 22 | 23 |
24 | 52 |
53 | 54 | 55 | 56 |
57 | 58 |
59 |
60 |

Author Bouquets

61 |

From certified florist designers

62 |
63 | ORDER INQUIRY 64 |
65 |
66 | +1 (876) 534-23-95 67 |
68 |
69 |
70 |
71 | 72 | 73 | 74 |
75 |
76 |
77 |

Best offers

78 |
79 | 80 | 81 | 82 |   83 | 84 | 85 | 86 |
87 |
88 |
89 |
90 |
91 | Turkish Rose 92 | $99 93 | 94 |
-50%
95 |
96 |
97 | Turkish Rose 98 |
99 |
100 |
101 |
102 |
103 |
104 | Damask Rose 105 | $49 106 |
107 |
108 |
109 | Damask Rose 110 |
111 |
112 |
113 |
114 |
115 | Assorted Colors 116 | $39 117 |
118 |
119 |
120 | Assorted Colors 121 |
122 |
123 |
124 |
125 |
126 |
127 | 128 | 129 | 130 | 162 | 163 | 164 | 165 |
166 |
167 |

Product samples

168 |
169 |
170 |
171 | 172 |
173 | 174 | Turkish Rose 175 | 176 |
177 | Turkish Rose 178 |
179 | 180 | 181 | 182 |
183 | $49 184 |
185 |
186 | 187 |
188 | 189 | Rose Flower 190 | 191 |
192 | Rose Flower 193 |
194 | 195 | 196 | 197 |
198 | $49 199 |
200 |
201 | 202 |
203 | 204 | Assorted Colors 205 | 206 |
207 | Assorted Colors 208 |
209 | 210 | 211 | 212 |
213 | $49 214 |
215 |
216 | 217 |
218 | 219 | Turkish Rose 220 | 221 |
222 | Turkish Rose 223 |
224 | 225 | 226 | 227 |
228 | $49 229 |
230 |
231 | 232 |
233 | 234 | Rose Flower 235 | 236 |
237 | Rose Flower 238 |
239 | 240 | 241 | 242 |
243 | $49 244 |
245 |
246 | 247 |
248 | 249 | Assorted Colors 250 | 251 |
252 | Assorted Colors 253 |
254 | 255 | 256 | 257 |
258 | $49 259 |
260 |
261 |
Show more
262 |
263 | 264 | 265 | 266 |
267 |
268 |

Testimonials

269 |
270 | 271 | 272 | 273 |   274 | 275 | 276 | 277 |
278 |
279 |
280 |
281 |
282 |
283 | customer-photo 284 |
285 | Susana 286 | Lorem ipsum dolor sit 287 | 288 |   289 | 290 |
291 |
292 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis enim facere neque pariatur tempora quibusdam, quae porro qui dolore earum dolor. Ab neque magnam quibusdam nobis odio perspiciatis expedita culpa." 293 |
294 |
295 |
296 |
297 |
298 | customer-photo 299 |
300 | Janneth 301 | Lorem ipsum dolor sit 302 | 303 |   304 | 305 |
306 |
307 | "Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis enim facere neque pariatur tempora quibusdam, quae porro qui dolore earum dolor. Ab neque magnam quibusdam nobis odio perspiciatis expedita culpa." 308 |
309 |
310 |
311 | 318 |
319 | 320 | 321 | 322 | 356 |
357 | 358 | --------------------------------------------------------------------------------