├── .gitignore
├── README.md
├── css
    ├── common.css
    ├── fonts
    │   ├── dosis.css
    │   ├── lobster.css
    │   └── nunito sans.css
    ├── home
    │   ├── filters.css
    │   ├── footer.css
    │   ├── getOffer.css
    │   ├── home.css
    │   ├── location.css
    │   ├── navBar.css
    │   ├── offer.css
    │   ├── popular.css
    │   └── trending.css
    ├── main
    │   └── main.css
    └── product
    │   ├── product-details.css
    │   └── product.css
├── icons
    ├── arrow-left.svg
    ├── arrow-right.svg
    ├── bookmark.svg
    ├── cart.svg
    ├── heart.svg
    ├── home.svg
    ├── menu.svg
    ├── profile.svg
    ├── search.svg
    └── star.svg
├── images
    ├── 1.jpg
    ├── 2.jpg
    ├── 3.jpg
    ├── 4.jpg
    ├── 5.jpg
    ├── 6.jpg
    ├── loc.jpg
    ├── offer
    │   ├── 1.jpg
    │   └── 2.jpg
    └── startScreen.jpg
├── index.html
├── js
    ├── common.js
    ├── debounce.js
    └── main
    │   ├── main.js
    │   └── offer.js
└── pages
    ├── home.html
    └── product.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /tmp
2 | /.vscode
3 | /screenshot


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | "# cCoffee shop Application UI design with HTML css JS
2 | 
3 | https://codeabinash.github.io/coffee-shop-app-ui/
4 | 


--------------------------------------------------------------------------------
/css/common.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     margin: 0;
 3 |     padding: 0;
 4 |     box-sizing: border-box;
 5 | }
 6 | html{
 7 |     scroll-behavior: smooth;
 8 | }
 9 | body{
10 |     min-height: 100vh;
11 |     color:var(--color2);
12 | }
13 | 
14 | :root{
15 |     --color:#945803;
16 |     --color2:#331e00;
17 | }
18 | .hide{
19 |     display: none;
20 | }
21 | .press, .pressBig{transition: 0.1s linear transform;}
22 | .press:active{transform: scale(0.95);}
23 | 
24 | 
25 | .pressBig:active{transform: scale(0.98);}
26 | a{text-decoration: none;color: dodgerblue;}
27 | a:visited{color: dodgerblue;}
28 | a:active{color: dodgerblue;}
29 | 
30 | 
31 | 
32 | .heading1{
33 |     display: flex;
34 |     justify-content: space-between;
35 |     align-items: center;
36 |     font-size: 0.9em;
37 |     margin: 7px 20px 0 20px;
38 |     margin-bottom: 10px;
39 |     font-family: 'Dosis';
40 |     
41 | }
42 | .heading1 span{
43 |     font-size: 0.9em;
44 |     font-weight: bold;
45 |     color: #945803;
46 | }


--------------------------------------------------------------------------------
/css/fonts/dosis.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 |     font-family: 'Dosis';
3 |     font-style: normal;
4 |     font-weight: 500;
5 |     font-display: swap;
6 |     src: url(https://fonts.gstatic.com/s/dosis/v26/HhyJU5sn9vOmLxNkIwRSjTVNWLEJBbMV3A.ttf) format('truetype');
7 | }
8 | 


--------------------------------------------------------------------------------
/css/fonts/lobster.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 |     font-family: 'Lobster';
3 |     font-style: normal;
4 |     font-weight: 400;
5 |     font-display: swap;
6 |     src: url(https://fonts.gstatic.com/s/lobster/v28/neILzCirqoswsqX9_oU.ttf) format('truetype');
7 | }
8 | 


--------------------------------------------------------------------------------
/css/fonts/nunito sans.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600&display=swap');


--------------------------------------------------------------------------------
/css/home/filters.css:
--------------------------------------------------------------------------------
 1 | .filters{
 2 |     width: 100%;
 3 |     height: auto;
 4 |     min-height: 50px;
 5 |     background-color: brown;
 6 |     margin-top: 15px;    
 7 |     flex-flow: row nowrap;
 8 |     display: flex;
 9 |     scroll-snap-type: x mandatory;
10 |     gap: 15px;
11 |     padding:0 10px;
12 |     overflow: auto;
13 | }
14 | .filters .filter{
15 |     min-width: 100px;
16 |     width: auto;
17 |     height: inherit;
18 |     background-color: aqua;
19 |     border-radius: 100px;
20 |     display: flex;
21 |     justify-content: center;
22 |     align-items: center;
23 |     flex: none;
24 |     scroll-snap-align: center;
25 |     scroll-snap-stop: always;
26 | }
27 | .filters img{
28 |     width: 20px;
29 | }
30 | .filters::-webkit-scrollbar{
31 |     display: none;
32 | }
33 | 
34 | 
35 | 


--------------------------------------------------------------------------------
/css/home/footer.css:
--------------------------------------------------------------------------------
 1 | footer{
 2 |     width: 100%;
 3 |     margin-top: 50px;
 4 |     min-height: 100px;
 5 |     /* background-color: antiquewhite; */
 6 |     flex-flow: column nowrap;
 7 |     justify-content: center;
 8 |     align-items: center;
 9 |     display: flex;
10 | }
11 | footer .from{
12 |     font-size: 0.8em;
13 |     font-weight: bold;
14 |     font-family: Dosis;
15 |     color: #888;
16 | }
17 | footer .dr{
18 |     font-family: lobster;
19 |     font-size: 1.1em;
20 |     /* font-weight: bold; */
21 |     /* color: var(--color); */
22 |     color: #777;
23 | }


--------------------------------------------------------------------------------
/css/home/getOffer.css:
--------------------------------------------------------------------------------
 1 | .getOffer{
 2 |     width: 100%;
 3 |     height: auto;
 4 |     margin-top: 40px;
 5 | }
 6 | .getOffer .heading1{
 7 |     font-family: dosis;
 8 | }
 9 | 
10 | .getOffer .offerDiv{
11 |     width: calc(100% - 2 * 20px);
12 |     display: block;
13 |     margin: 10px auto 0 auto;
14 |     /* margin: 10px 0 0 0; */
15 |     aspect-ratio: 3 / 1;
16 |     border-radius: 15px;
17 |     color: #fff;
18 |     padding: 20px;
19 |     background-color: var(--color2);
20 |     /* background-color: #000; */
21 |     
22 |     /* color: var(--color); */
23 | }
24 | .getOffer .offerDiv h2{
25 |     font-size: 1.3em;
26 |     letter-spacing: 1px;
27 |     font-family: dosis;
28 |     text-transform: capitalize;
29 | }
30 | 
31 | .getOffer .offerDiv p{
32 |     margin-top: 7px;
33 |     font-family: 'Nunito Sans', sans-serif;
34 |     font-size: 0.8em;
35 |     text-align: justify;
36 |     /* font-family: ; */
37 | }


--------------------------------------------------------------------------------
/css/home/home.css:
--------------------------------------------------------------------------------
 1 | @import url("../fonts/dosis.css");
 2 | @import url("../fonts/lobster.css");
 3 | @import url("../fonts/nunito\ sans.css");
 4 | @import url("../common.css");
 5 | @import url("./offer.css");
 6 | @import url("./trending.css");
 7 | @import url("./filters.css");
 8 | @import url("./popular.css");
 9 | @import url("./navBar.css");
10 | @import url("./footer.css");
11 | @import url("./getOffer.css");
12 | @import url("./location.css");
13 | 
14 | :root {
15 |     --header-height: 60px;
16 |     --color:#945803;
17 |     --color2:#331e00;
18 | 
19 | }
20 | 
21 | #main {
22 |     min-height: 100vh;
23 |     width: 100%;
24 |     background-color: #fff;
25 | }
26 | 
27 | #main>header {
28 |     width: 100%;
29 |     height: 60px;
30 |     display: flex;
31 |     justify-content: space-between;
32 |     align-items: center;
33 |     position: fixed;
34 |     top: 0;
35 |     background-color: #ffffffee;
36 |     backdrop-filter: blur(15px);
37 |     z-index: 100;
38 | }
39 | 
40 | #main>header>div {
41 |     height: inherit;
42 |     width: auto;
43 |     display: flex;
44 |     justify-content: center;
45 |     align-items: center;
46 | }
47 | 
48 | #main>header>div>img {
49 |     height: 50%;
50 |     margin: 0 15px;
51 |     /* opacity: 0.8; */
52 | }
53 | 
54 | #main>header>span {
55 |     font-size: 1.4em;
56 |     font-family: Lobster;
57 |     color: var(--color2);
58 | }
59 | 
60 | 
61 | .body {
62 |     padding-top: calc(var(--header-height) + 10px);
63 |     min-height: 50px;
64 |     width: 100%;
65 |     /* height: 400vh; */
66 |     padding-bottom: 100px;
67 | }
68 | 


--------------------------------------------------------------------------------
/css/home/location.css:
--------------------------------------------------------------------------------
 1 | .locationsDiv{
 2 |     margin-top: 40px;
 3 |     font-family: Dosis; 
 4 |     
 5 | }
 6 | .locationsDiv .heading1 h2{
 7 |     font-size: 1.3em;
 8 | }
 9 | 
10 | .locationsDiv .location{
11 |     width: calc(100% - 20px * 2);
12 |     aspect-ratio: 2 / 1;
13 |     display: block;
14 |     margin: 0 auto 0 auto;
15 |     background-color: #9900ff;
16 |     filter: contrast(130%) brightness(120%);
17 |     margin-top: 20px;
18 |     border-radius: 15px;
19 |     display: flex;
20 |     justify-content: center;
21 |     align-items: center;
22 | }
23 | .locationsDiv .soon{
24 |     margin-top: 20px;
25 |     /* text-align: center; */
26 |     justify-content: center;
27 |     display: flex;
28 | }
29 | 
30 | .locationsDiv .location img{
31 |     width: 100%;
32 |     aspect-ratio: 2 / 1;
33 |     object-fit: cover;
34 |     border-radius: 15px;
35 | }


--------------------------------------------------------------------------------
/css/home/navBar.css:
--------------------------------------------------------------------------------
 1 | .navBar{
 2 |     /* width: calc(100% - 2 * 20px); */
 3 |     width: 100%;
 4 |     /* min-height: 50px; */
 5 |     background-color: #ffffffcc;
 6 |     backdrop-filter: blur(15px);
 7 |     /* margin-left: 20px; */
 8 |     /* background-color: #fff; */
 9 |     position: fixed;
10 |     /* bottom: 10px; */
11 |     bottom: 0;
12 |     /* border-radius: 20px; */
13 |     display: flex;
14 |     box-shadow: 0px 0px 15px 0px #00000022;
15 |     justify-content: space-between;
16 |     padding: 17px 30px;
17 |     z-index: 100;
18 | }
19 | .navBar .icon {
20 |     width: 27px;
21 |     display: flex;
22 |     justify-content: center;
23 |     align-items: center;
24 |     /* background-color: antiquewhite; */
25 |     aspect-ratio: 1 / 1;
26 |     opacity: 0.5;
27 |     /* background-color: aqua; */
28 | }
29 | .navBar .icon:first-child{
30 |     opacity: 1;
31 | }
32 | 
33 | 
34 | .navBar .icon img{
35 |     width: 100%;
36 | }
37 | .navBar .icon.profile{
38 |     /* width: 30px; */
39 |     aspect-ratio: 1 / 1;
40 |     background-color: aqua;
41 |     border-radius: 50%;
42 | 
43 | }


--------------------------------------------------------------------------------
/css/home/offer.css:
--------------------------------------------------------------------------------
 1 | .body .mainOffer {
 2 |     display: flex;
 3 |     overflow: auto;
 4 |     width: 100%;
 5 |     flex-flow: row nowrap;
 6 |     scroll-snap-type: x mandatory;
 7 | }
 8 | .body .mainOffer::-webkit-scrollbar{
 9 |     display: none;
10 | }
11 | .body .mainOffer .offerImage{
12 |     width: calc(100% - 20px * 2);
13 |     margin: 0px 20px 0 20px;
14 |     /* width: 100%; */
15 |     aspect-ratio: 2 / 1;
16 |     background-color: transparent;
17 |     border-radius: 17px;
18 |     /* background-image: url("../../images/mainOffer.jpg");
19 |     background-repeat: no-repeat;
20 |     background-size: cover;
21 |     background-position: center; */
22 |     flex: none;
23 |     scroll-snap-align: center;
24 |     scroll-snap-stop: always;
25 | }
26 | .body .mainOffer img {
27 |     aspect-ratio: 2 / 1;
28 |     width: 100%;
29 |     height: auto;
30 |     object-fit: cover;
31 |     object-position: center;
32 |     border-radius: inherit;
33 | }
34 | 
35 | .body .offerTopDiv .slider{
36 |     width: 100%;
37 |     /* background-color: #eee; */
38 |     min-height: 30px;
39 |     display: flex;
40 |     justify-content: center;
41 |     align-items: center;
42 |     gap: 7px;
43 | }
44 | .body .offerTopDiv .slider .dot{
45 |     height: 7px;
46 |     aspect-ratio: 1 / 1;
47 |     border-radius: 7px;
48 |     transition: 0.2s linear aspect-ratio,
49 |                 0.2s linear background-color;
50 |     background-color: #ccc;
51 | }
52 | .body .offerTopDiv .slider .dot.active{    
53 |     background-color: black;
54 |     aspect-ratio: 2 / 1;
55 | }
56 | 


--------------------------------------------------------------------------------
/css/home/popular.css:
--------------------------------------------------------------------------------
 1 | .popular{
 2 |     margin-top: 30px;
 3 |     font-family: Dosis;
 4 | }
 5 | /* .popular .coffees{
 6 |     border-top: 1px solid #00000011; 
 7 |     margin-top: 20px;
 8 | } */
 9 | .popular .coffee{
10 |     width: 100%;
11 |     height: auto;
12 |     display: flex;
13 |     overflow: hidden;
14 |     padding: 12px 15px;
15 |     border-bottom: 1px solid #00000011;
16 | }
17 | .popular .coffee>div{
18 |     flex: none;
19 | }
20 | .popular .coffee .left{
21 |     width: 100px;
22 |     aspect-ratio: 1 / 1;
23 |     /* height: 90px; */
24 |     /* background-color: antiquewhite; */
25 |     /* overflow: hidden; */
26 |     height: inherit;
27 |     display: flex;
28 |     justify-content: center;
29 |     align-items: center;
30 |     border-radius: 15px;
31 | }
32 | 
33 | .popular .coffee .left img{
34 |     width: 95%;
35 |     border-radius: inherit;
36 |     aspect-ratio: 1 / 1;
37 |     object-fit: cover;
38 |     object-position: center;
39 |     box-shadow: 2px 2px 15px 0px #00000044;
40 | }
41 | .popular .coffee .right{
42 |     /* min-width: 100px; */
43 |     padding: 5px;
44 |     width: calc(100% - 100px);
45 |     min-height: 100px;
46 |     display: flex;
47 |     flex-direction: column;
48 |     padding-left: 10px;
49 |     justify-content: space-between
50 | }
51 | .popular .coffee .right .name{
52 |     font-size: 1.1em;
53 |     font-weight: bold;
54 | 
55 | }
56 | .popular .coffee .right .tags{
57 |     display: flex;
58 |     font-family: 'Nunito Sans', sans-serif;
59 |     overflow:auto;
60 |     flex-flow: row nowrap;
61 | }
62 | .popular .coffee .right .tags::-webkit-scrollbar{
63 |     display: none;
64 | }
65 | .popular .coffee .right .tags > span{
66 |     padding: 4px 10px;
67 |     flex-wrap: nowrap;
68 |     width: auto;
69 |     /* background-color: var(--color); */
70 |     color: var(--color);
71 |     border: 1px solid var(--color);
72 |     margin: 0 7px 0 0;
73 |     font-size: 0.7em;
74 |     border-radius: 100px;
75 |     flex: none;
76 |     display: flex;
77 |     justify-content: center;
78 |     align-items: center;
79 | }
80 | .popular .coffee .right .tags > span img{
81 |     height: 1em;
82 |     padding-right:3px;
83 | }
84 | 
85 | .popular .coffee .right .offDiv{
86 |     display: flex;
87 |     width: 100%;
88 |     justify-content: space-between;
89 |     width: 100%;
90 |     font-family: 'Nunito Sans', sans-serif;
91 | }
92 | 
93 | .popular .coffee .right .offDiv .price{
94 |     font-size: 1.1em;
95 | }
96 | .popular .coffee .right .offDiv .off{
97 |     color: var(--color);
98 |     font-size: 0.8em;
99 | }


--------------------------------------------------------------------------------
/css/home/trending.css:
--------------------------------------------------------------------------------
 1 | .trendingDiv{
 2 |     width: 100%;
 3 |     margin-top: 10px;
 4 |     height: auto;
 5 |     font-family: Dosis;
 6 | }
 7 | .trendingDiv .trending{
 8 |     width: 100%;
 9 |     scroll-behavior: smooth;
10 |     min-height: 50px;
11 |     margin-top: 20px;
12 |     display: flex;
13 |     overflow: auto;
14 |     flex-flow: row nowrap;
15 |     scroll-snap-type: x mandatory;
16 |     gap: 12px;
17 |     padding-right: 20px;
18 |     padding-left: 20px;
19 | }
20 | .trendingDiv .trending::-webkit-scrollbar{
21 |     display: none;
22 | }
23 | .trendingDiv .trending .trend{
24 |     width: 100px;
25 |     display: flex;
26 |     justify-content: flex-start;
27 |     flex-direction: column;
28 |     border-radius: 15px;
29 |     overflow: hidden;
30 |     flex: none;
31 |     scroll-snap-align: center;
32 |     scroll-snap-stop: always;
33 | }
34 | /* .trendingDiv .trending .trend:first-child{
35 |     margin-left: 20px;
36 | } */
37 | .trendingDiv .trending img{
38 |     width: 100%;
39 |     aspect-ratio: 1 / 1;
40 |     object-fit: cover;
41 |     border-radius: inherit;
42 | }
43 | .trendingDiv .trending .trend span{
44 |     font-size: 0.85em;
45 |     /* font-weight: 400; */
46 |     text-align: center;
47 |     padding-top: 6px;
48 |     /* color: #444; */
49 |     opacity: 0.8;
50 |     font-weight: 600;
51 |     /* color: var(--color); */
52 | }
53 | 
54 | 


--------------------------------------------------------------------------------
/css/main/main.css:
--------------------------------------------------------------------------------
  1 | @import url("../fonts/dosis.css");
  2 | @import url("../fonts/lobster.css");
  3 | @import url("../fonts/nunito\ sans.css");
  4 | @import url("../common.css");
  5 | #main {
  6 |     min-height: 500px;
  7 |     width: 100%;
  8 |     background-color: black;
  9 |     background-image: url("../../images/startScreen.jpg");
 10 |     background-repeat: no-repeat;
 11 |     background-size: contain;
 12 |     background-position: center bottom;
 13 |     /* color: gold; */
 14 |     color: white;
 15 |     scroll-snap-type: x mandatory;
 16 |     display: flex;
 17 |     overflow: auto;
 18 |     flex: none;
 19 |     height: 100vh;
 20 |     flex-flow: row nowrap;
 21 | }
 22 | 
 23 | #main .s {
 24 |     height: 100vh;
 25 |     width: 100%;
 26 |     flex: none;
 27 | 
 28 |     scroll-snap-align: center;
 29 |     scroll-snap-stop: always;
 30 | }
 31 | 
 32 | #main::-webkit-scrollbar {
 33 |     display: none;
 34 | }
 35 | 
 36 | #main .s1 {
 37 |     height: inherit;
 38 |     display: flex;
 39 |     flex-direction: column;
 40 |     justify-content: space-between;
 41 |     /* background-color: tomato; */
 42 | }
 43 | 
 44 | #main .s1 .heading {
 45 |     text-align: center;
 46 |     font-family: cursive;
 47 |     padding-top: 100px;
 48 |     font-size: 3em;
 49 |     font-family: 'Lobster', cursive;
 50 |     font-weight: normal;
 51 | }
 52 | 
 53 | #main .s1 .tagline {
 54 |     text-align: center;
 55 |     font-family: cursive;
 56 |     padding: 30px 60px;
 57 |     font-size: 1.2em;
 58 |     font-weight: normal;
 59 |     font-weight: 500;
 60 |     font-family: 'Dosis', sans-serif;
 61 | }
 62 | #main .s1 .bottom{
 63 |     width: 100%;
 64 |     height: 100px;
 65 |     display: flex;
 66 |     padding: 0 30px;
 67 |     /* justify-content: flex-end; */
 68 |     justify-content: space-between;
 69 |     align-items: center;
 70 | }
 71 | #main .s1 .bottom button{
 72 |     font-size: 1.2em;
 73 |     /* padding: 15px 60px; */
 74 |     /* width: calc(100% - 80px); */
 75 |     border: none;
 76 |     color: white;
 77 |     outline: none;
 78 |     background-color: transparent;
 79 |     border-radius: 10px;
 80 |     font-family: 'Nunito Sans', sans-serif;
 81 |     
 82 |     padding: 15px;
 83 | }
 84 | #main .s1 .bottom .arrow{
 85 |     background-color: #ffffffaa;
 86 |     height: 45px;
 87 |     aspect-ratio: 1/1;
 88 |     display: flex;
 89 |     justify-content: center;
 90 |     align-items: center;
 91 |     border-radius: 50%;
 92 | }
 93 | #main .s1 .bottom span{
 94 |     color: #ffffff55;
 95 |     margin-right: 10px;
 96 | }
 97 | #main .s1 .bottom img{
 98 |     width: 80%;
 99 |     height: auto;
100 |     padding: 0 0 0 3px;
101 | }


--------------------------------------------------------------------------------
/css/product/product-details.css:
--------------------------------------------------------------------------------
  1 | .productDetails{
  2 |     width: 100%;
  3 |     min-height: 200px;
  4 | 
  5 |     background-color: lemonchiffon;
  6 | }
  7 | .productDetails .imageDiv{
  8 |     position: fixed;
  9 |     top: 0;
 10 |     width: 100%;
 11 |     min-height: 100px;
 12 |     aspect-ratio: 1 / 1;
 13 |     background-color: tomato;
 14 | }
 15 | .productDetails .imageDiv img{
 16 |     width: inherit;
 17 |     aspect-ratio: 1 / 1;
 18 |     object-fit: cover;
 19 |     object-position: bottom;
 20 | }
 21 | .productDetails .detailsDiv{
 22 |     background-color: white;
 23 |     height: 200px;
 24 |     /* margin-top: -30px; */
 25 |     position: absolute;
 26 |     width: 100%;
 27 |     border-radius: 30px;
 28 |     padding: 20px;
 29 |     margin-top: calc(100% - 30px);
 30 |     /* height: 1000%; */
 31 |     min-height: calc(100vh + 30px);
 32 |     font-family: Dosis;
 33 |     z-index: 101;
 34 | }
 35 | .productDetails .detailsDiv .slideBar{
 36 |     display: block;
 37 |     margin: 0 auto 0 auto;
 38 |     width: 50px;
 39 |     height: 4px;
 40 |     background-color: violet;
 41 |     border-radius: 100px;
 42 |     background-color: #ddd;
 43 | 
 44 | }
 45 | .productDetails .detailsDiv .name{
 46 |     font-size: 1.8em;
 47 |     font-family: Dosis;
 48 |     font-weight: bold;
 49 |     margin-top: 15px;
 50 | }
 51 | .productDetails .detailsDiv .priceRating{
 52 |     width: 100%;
 53 |     height: auto;
 54 |     display: flex;
 55 |     flex-flow: nowrap row;
 56 |     justify-content: space-between;
 57 |     align-items: center;
 58 |     margin-top: 15px;
 59 | }
 60 | 
 61 | .productDetails .detailsDiv .priceRating .price{
 62 |     font-family: 'Nunito Sans', sans-serif;
 63 |     font-size: 1.4em;
 64 |     font-weight: bold;
 65 | }
 66 | .productDetails .detailsDiv .priceRating .rating{
 67 |     display: flex;
 68 |     justify-content: center;
 69 |     align-items: center;
 70 | }
 71 | 
 72 | .productDetails .detailsDiv .priceRating .rating span{
 73 |     font-size: 1em;
 74 |     font-weight: bold;
 75 |     color: var(--color);
 76 | 
 77 | }
 78 | .productDetails .detailsDiv .priceRating .rating span span{
 79 |     color: #aaa;
 80 |     /* font-size: 0.8em; */
 81 |     font-weight: normal;
 82 | }
 83 | .productDetails .detailsDiv .priceRating .rating img{
 84 |     height: 0.9em;
 85 |     margin-right: 3px;
 86 | }
 87 | 
 88 | .productDetails .detailsDiv  .text{
 89 |     margin-top: 10px;
 90 |     font-size: 0.95em;
 91 |     /* opacity: 0.7; */
 92 |     /* text-align: justify; */
 93 | }
 94 | .productDetails .tags{
 95 |     width: 100%;
 96 |     display: flex;
 97 |     justify-content: left;
 98 |     /* overflow: auto; */
 99 |     flex-direction: row;
100 |     flex-wrap: wrap;
101 |     /* gap: 5px; */
102 |     /* margin: 0; */
103 |     margin-top: 20px;
104 |     gap: 0 5px;
105 | }
106 | .productDetails .tags::-webkit-scrollbar{
107 |     display: none;
108 | }
109 | 
110 | .productDetails .tags .tag{
111 |     font-family: "Nunito Sans";
112 |     font-size: 1em;
113 |     padding: 7px 25px;
114 |     border-radius: 50px;
115 |     border: 2px solid var(--color);
116 |     color: var(--color);
117 |     margin: -5px;
118 |     flex: none;
119 |     /* font-weight: bold; */
120 |     transform: scale(0.8);
121 |     transition: 0.1s linear color,
122 |                 0.1s linear background-color,
123 |                 0.1s linear transform;
124 | }
125 | .productDetails .tags .tag:hover{
126 |     background-color: var(--color);
127 |     color: white;
128 | 
129 | }
130 | 
131 | 
132 | .productDetails .visit{
133 |     width: 100%;
134 |     margin-top: 20px;
135 | }
136 | 
137 | 
138 | .productDetails .visit button{
139 |     width: calc(100% - 20px * 2);
140 |     /* font-size: 0em; */
141 |     font-family: "Dosis";
142 |     font-size: 1em;
143 |     text-transform: uppercase;
144 |     letter-spacing: 1px;
145 |     border-radius: 4px;
146 |     position: fixed;
147 |     bottom: 10px;
148 |     font-weight: bold;
149 |     border: none;
150 |     outline: none;
151 |     padding: 18px;
152 |     background-color: var(--color2);
153 |     color: white;
154 |     /* box-shadow: 2px 2px 15px 0px #00000066; */
155 | }


--------------------------------------------------------------------------------
/css/product/product.css:
--------------------------------------------------------------------------------
 1 | @import url("../fonts/dosis.css");
 2 | @import url("../fonts/nunito\ sans.css");
 3 | @import url("../common.css");
 4 | @import url("./product-details.css");
 5 | 
 6 | header{
 7 |     height: 70px;
 8 |     width: 100%;
 9 |     display: flex;
10 |     justify-content: space-between;
11 |     align-items: center;
12 |     padding: 0 20px;
13 |     position: fixed;
14 |     top: 0;
15 |     z-index: 100;
16 | }
17 | header .icon{
18 |     width: 43px;
19 |     background-color: #ffffff;
20 |     aspect-ratio: 1 / 1;
21 |     display: flex;
22 |     justify-content: center;
23 |     border-radius: 50%;
24 | 
25 |     align-items: center;
26 | }
27 | header .icon img{
28 |     width: 50%;
29 | }
30 | 
31 | 
32 | 


--------------------------------------------------------------------------------
/icons/arrow-left.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve"><g transform="matrix(1.4,0,0,1.4,-4.824257087707519,-4.799998855590818)"><path xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" d="m15 4.00001c.3905-.39052 1.0237-.39052 1.4142 0 .3905.39053.3905 1.02369 0 1.41422l-5.8787 5.87867c-.3905.3905-.3905 1.0237 0 1.4142l5.8787 5.8787c.3905.3905.3905 1.0237 0 1.4142-.3905.3905-1.0237.3905-1.4142 0l-7.29289-7.2929c-.39053-.3905-.39053-1.0237 0-1.4142z" fill="#331e00" fill-rule="evenodd" data-original="#000000"></path></g></svg>


--------------------------------------------------------------------------------
/icons/arrow-right.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#331e00" d="M15.54,11.29,9.88,5.64a1,1,0,0,0-1.42,0,1,1,0,0,0,0,1.41l4.95,5L8.46,17a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.71-.3l5.66-5.65A1,1,0,0,0,15.54,11.29Z"/></svg>


--------------------------------------------------------------------------------
/icons/bookmark.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g transform="matrix(1.1500000000000001,0,0,1.1500000000000001,-1.7999998927116412,-1.8000000715255755)"><g xmlns="http://www.w3.org/2000/svg" id="Layer_49" data-name="Layer 49"><path d="m17 2.06h-10a3.07 3.07 0 0 0 -3 3.13v14.68a2.08 2.08 0 0 0 1.21 1.9 2 2 0 0 0 2.11-.35l4.68-4.26 4.68 4.26a1.94 1.94 0 0 0 1.31.52 2.05 2.05 0 0 0 .8-.17 2.08 2.08 0 0 0 1.21-1.9v-14.68a3.07 3.07 0 0 0 -3-3.13z" fill="#331e00" data-original="#000000"></path></g></g></svg>


--------------------------------------------------------------------------------
/icons/cart.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 456.029 456.029" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g>
 2 | <g xmlns="http://www.w3.org/2000/svg">
 3 | 	<g>
 4 | 		<path d="M345.6,338.862c-29.184,0-53.248,23.552-53.248,53.248c0,29.184,23.552,53.248,53.248,53.248    c29.184,0,53.248-23.552,53.248-53.248C398.336,362.926,374.784,338.862,345.6,338.862z" fill="#331e00" data-original="#000000" class=""></path>
 5 | 	</g>
 6 | </g>
 7 | <g xmlns="http://www.w3.org/2000/svg">
 8 | 	<g>
 9 | 		<path d="M439.296,84.91c-1.024,0-2.56-0.512-4.096-0.512H112.64l-5.12-34.304C104.448,27.566,84.992,10.67,61.952,10.67H20.48    C9.216,10.67,0,19.886,0,31.15c0,11.264,9.216,20.48,20.48,20.48h41.472c2.56,0,4.608,2.048,5.12,4.608l31.744,216.064    c4.096,27.136,27.648,47.616,55.296,47.616h212.992c26.624,0,49.664-18.944,55.296-45.056l33.28-166.4    C457.728,97.71,450.56,86.958,439.296,84.91z" fill="#331e00" data-original="#000000" class=""></path>
10 | 	</g>
11 | </g>
12 | <g xmlns="http://www.w3.org/2000/svg">
13 | 	<g>
14 | 		<path d="M215.04,389.55c-1.024-28.16-24.576-50.688-52.736-50.688c-29.696,1.536-52.224,26.112-51.2,55.296    c1.024,28.16,24.064,50.688,52.224,50.688h1.024C193.536,443.31,216.576,418.734,215.04,389.55z" fill="#331e00" data-original="#000000" class=""></path>
15 | 	</g>
16 | </g>
17 | <g xmlns="http://www.w3.org/2000/svg">
18 | </g>
19 | <g xmlns="http://www.w3.org/2000/svg">
20 | </g>
21 | <g xmlns="http://www.w3.org/2000/svg">
22 | </g>
23 | <g xmlns="http://www.w3.org/2000/svg">
24 | </g>
25 | <g xmlns="http://www.w3.org/2000/svg">
26 | </g>
27 | <g xmlns="http://www.w3.org/2000/svg">
28 | </g>
29 | <g xmlns="http://www.w3.org/2000/svg">
30 | </g>
31 | <g xmlns="http://www.w3.org/2000/svg">
32 | </g>
33 | <g xmlns="http://www.w3.org/2000/svg">
34 | </g>
35 | <g xmlns="http://www.w3.org/2000/svg">
36 | </g>
37 | <g xmlns="http://www.w3.org/2000/svg">
38 | </g>
39 | <g xmlns="http://www.w3.org/2000/svg">
40 | </g>
41 | <g xmlns="http://www.w3.org/2000/svg">
42 | </g>
43 | <g xmlns="http://www.w3.org/2000/svg">
44 | </g>
45 | <g xmlns="http://www.w3.org/2000/svg">
46 | </g>
47 | </g></svg>


--------------------------------------------------------------------------------
/icons/heart.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><g xmlns="http://www.w3.org/2000/svg" id="_1_Heart" data-name="1 Heart"><path d="m256.1 506a25 25 0 0 1 -17.68-7.35l-.2-.2-197.55-197.45c-54.12-54.13-54.12-142.2 0-196.33s142.2-54.12 196.33 0l19.1 19.1 18.9-18.9a138.83 138.83 0 0 1 196.33 0c54.12 54.13 54.12 142.2 0 196.33l-81.22 81.21a25 25 0 0 1 -35.35-35.41l81.24-81.2a88.82 88.82 0 0 0 -125.64-125.61l-36.58 36.58a25 25 0 0 1 -35.36 0l-36.78-36.77a88.82 88.82 0 0 0 -125.64 125.6l180.1 180.07 19.13-19.13a25 25 0 0 1 35.36 35.35l-36.81 36.82a25 25 0 0 1 -17.68 7.29z" fill="#331e00" data-original="#000000"></path></g></g></svg>


--------------------------------------------------------------------------------
/icons/home.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><path xmlns="http://www.w3.org/2000/svg" d="m498.195312 222.695312c-.011718-.011718-.023437-.023437-.035156-.035156l-208.855468-208.847656c-8.902344-8.90625-20.738282-13.8125-33.328126-13.8125-12.589843 0-24.425781 4.902344-33.332031 13.808594l-208.746093 208.742187c-.070313.070313-.140626.144531-.210938.214844-18.28125 18.386719-18.25 48.21875.089844 66.558594 8.378906 8.382812 19.445312 13.238281 31.277344 13.746093.480468.046876.964843.070313 1.453124.070313h8.324219v153.699219c0 30.414062 24.746094 55.160156 55.167969 55.160156h81.710938c8.28125 0 15-6.714844 15-15v-120.5c0-13.878906 11.289062-25.167969 25.167968-25.167969h48.195313c13.878906 0 25.167969 11.289063 25.167969 25.167969v120.5c0 8.285156 6.714843 15 15 15h81.710937c30.421875 0 55.167969-24.746094 55.167969-55.160156v-153.699219h7.71875c12.585937 0 24.421875-4.902344 33.332031-13.808594 18.359375-18.371093 18.367187-48.253906.023437-66.636719zm0 0" fill="#331e00" data-original="#000000"></path></g></svg>


--------------------------------------------------------------------------------
/icons/menu.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 20 20" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><path xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" d="m3 5c0-.26522.10536-.51957.29289-.70711.18754-.18753.44189-.29289.70711-.29289h12c.2652 0 .5196.10536.7071.29289.1875.18754.2929.44189.2929.70711s-.1054.51957-.2929.70711c-.1875.18753-.4419.29289-.7071.29289h-12c-.26522 0-.51957-.10536-.70711-.29289-.18753-.18754-.29289-.44189-.29289-.70711zm0 5c0-.26522.10536-.51957.29289-.70711.18754-.18753.44189-.29289.70711-.29289h12c.2652 0 .5196.10536.7071.29289.1875.18754.2929.44189.2929.70711 0 .2652-.1054.5196-.2929.7071s-.4419.2929-.7071.2929h-12c-.26522 0-.51957-.1054-.70711-.2929-.18753-.1875-.29289-.4419-.29289-.7071zm0 5c0-.2652.10536-.5196.29289-.7071.18754-.1875.44189-.2929.70711-.2929h6c.2652 0 .5196.1054.7071.2929s.2929.4419.2929.7071-.1054.5196-.2929.7071-.4419.2929-.7071.2929h-6c-.26522 0-.51957-.1054-.70711-.2929-.18753-.1875-.29289-.4419-.29289-.7071z" fill="#331e00" fill-rule="evenodd" data-original="#000000"></path></g></svg>


--------------------------------------------------------------------------------
/icons/profile.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 512 512.002" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path xmlns="http://www.w3.org/2000/svg" d="m210.351562 246.632812c33.882813 0 63.222657-12.152343 87.195313-36.128906 23.972656-23.972656 36.125-53.304687 36.125-87.191406 0-33.875-12.152344-63.210938-36.128906-87.191406-23.976563-23.96875-53.3125-36.121094-87.191407-36.121094-33.886718 0-63.21875 12.152344-87.191406 36.125s-36.128906 53.308594-36.128906 87.1875c0 33.886719 12.15625 63.222656 36.132812 87.195312 23.976563 23.96875 53.3125 36.125 87.1875 36.125zm0 0" fill="#331e00" data-original="#000000"></path><path xmlns="http://www.w3.org/2000/svg" d="m426.128906 393.703125c-.691406-9.976563-2.089844-20.859375-4.148437-32.351563-2.078125-11.578124-4.753907-22.523437-7.957031-32.527343-3.308594-10.339844-7.808594-20.550781-13.371094-30.335938-5.773438-10.15625-12.554688-19-20.164063-26.277343-7.957031-7.613282-17.699219-13.734376-28.964843-18.199219-11.226563-4.441407-23.667969-6.691407-36.976563-6.691407-5.226563 0-10.28125 2.144532-20.042969 8.5-6.007812 3.917969-13.035156 8.449219-20.878906 13.460938-6.707031 4.273438-15.792969 8.277344-27.015625 11.902344-10.949219 3.542968-22.066406 5.339844-33.039063 5.339844-10.972656 0-22.085937-1.796876-33.046874-5.339844-11.210938-3.621094-20.296876-7.625-26.996094-11.898438-7.769532-4.964844-14.800782-9.496094-20.898438-13.46875-9.75-6.355468-14.808594-8.5-20.035156-8.5-13.3125 0-25.75 2.253906-36.972656 6.699219-11.257813 4.457031-21.003906 10.578125-28.96875 18.199219-7.605469 7.28125-14.390625 16.121094-20.15625 26.273437-5.558594 9.785157-10.058594 19.992188-13.371094 30.339844-3.199219 10.003906-5.875 20.945313-7.953125 32.523437-2.058594 11.476563-3.457031 22.363282-4.148437 32.363282-.679688 9.796875-1.023438 19.964844-1.023438 30.234375 0 26.726562 8.496094 48.363281 25.25 64.320312 16.546875 15.746094 38.441406 23.734375 65.066406 23.734375h246.53125c26.625 0 48.511719-7.984375 65.0625-23.734375 16.757813-15.945312 25.253906-37.585937 25.253906-64.324219-.003906-10.316406-.351562-20.492187-1.035156-30.242187zm0 0" fill="#331e00" data-original="#331e00"></path></g></svg>


--------------------------------------------------------------------------------
/icons/search.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 118.783 118.783" style="enable-background:new 0 0 512 512" xml:space="preserve"><g transform="matrix(0.8,0,0,0.8,11.878287506103511,11.87820053100586)">
 2 | <g xmlns="http://www.w3.org/2000/svg">
 3 | 	<path d="M115.97,101.597L88.661,74.286c4.64-7.387,7.333-16.118,7.333-25.488c0-26.509-21.49-47.996-47.998-47.996   S0,22.289,0,48.798c0,26.51,21.487,47.995,47.996,47.995c10.197,0,19.642-3.188,27.414-8.605l26.984,26.986   c1.875,1.873,4.333,2.806,6.788,2.806c2.458,0,4.913-0.933,6.791-2.806C119.72,111.423,119.72,105.347,115.97,101.597z    M47.996,81.243c-17.917,0-32.443-14.525-32.443-32.443s14.526-32.444,32.443-32.444c17.918,0,32.443,14.526,32.443,32.444   S65.914,81.243,47.996,81.243z" fill="#331e00" data-original="#000000"></path>
 4 | </g>
 5 | <g xmlns="http://www.w3.org/2000/svg">
 6 | </g>
 7 | <g xmlns="http://www.w3.org/2000/svg">
 8 | </g>
 9 | <g xmlns="http://www.w3.org/2000/svg">
10 | </g>
11 | <g xmlns="http://www.w3.org/2000/svg">
12 | </g>
13 | <g xmlns="http://www.w3.org/2000/svg">
14 | </g>
15 | <g xmlns="http://www.w3.org/2000/svg">
16 | </g>
17 | <g xmlns="http://www.w3.org/2000/svg">
18 | </g>
19 | <g xmlns="http://www.w3.org/2000/svg">
20 | </g>
21 | <g xmlns="http://www.w3.org/2000/svg">
22 | </g>
23 | <g xmlns="http://www.w3.org/2000/svg">
24 | </g>
25 | <g xmlns="http://www.w3.org/2000/svg">
26 | </g>
27 | <g xmlns="http://www.w3.org/2000/svg">
28 | </g>
29 | <g xmlns="http://www.w3.org/2000/svg">
30 | </g>
31 | <g xmlns="http://www.w3.org/2000/svg">
32 | </g>
33 | <g xmlns="http://www.w3.org/2000/svg">
34 | </g>
35 | </g></svg>


--------------------------------------------------------------------------------
/icons/star.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="512" height="512" x="0" y="0" viewBox="0 0 511.99143 511" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><path xmlns="http://www.w3.org/2000/svg" d="m510.652344 185.882812c-3.371094-10.367187-12.566406-17.707031-23.402344-18.6875l-147.796875-13.417968-58.410156-136.75c-4.3125-10.046875-14.125-16.53125-25.046875-16.53125s-20.738282 6.484375-25.023438 16.53125l-58.410156 136.75-147.820312 13.417968c-10.835938 1-20.011719 8.339844-23.402344 18.6875-3.371094 10.367188-.257813 21.738282 7.9375 28.925782l111.722656 97.964844-32.941406 145.085937c-2.410156 10.667969 1.730468 21.699219 10.582031 28.097656 4.757813 3.457031 10.347656 5.183594 15.957031 5.183594 4.820313 0 9.644532-1.28125 13.953125-3.859375l127.445313-76.203125 127.421875 76.203125c9.347656 5.585938 21.101562 5.074219 29.933593-1.324219 8.851563-6.398437 12.992188-17.429687 10.582032-28.097656l-32.941406-145.085937 111.722656-97.964844c8.191406-7.1875 11.308594-18.535156 7.9375-28.925782zm-252.203125 223.722657" fill="#945803" data-original="#000000"></path></g></svg>


--------------------------------------------------------------------------------
/images/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/1.jpg


--------------------------------------------------------------------------------
/images/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/2.jpg


--------------------------------------------------------------------------------
/images/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/3.jpg


--------------------------------------------------------------------------------
/images/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/4.jpg


--------------------------------------------------------------------------------
/images/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/5.jpg


--------------------------------------------------------------------------------
/images/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/6.jpg


--------------------------------------------------------------------------------
/images/loc.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/loc.jpg


--------------------------------------------------------------------------------
/images/offer/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/offer/1.jpg


--------------------------------------------------------------------------------
/images/offer/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/offer/2.jpg


--------------------------------------------------------------------------------
/images/startScreen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/images/startScreen.jpg


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Coffee Planet</title>
 8 |     <link rel="stylesheet" href="./css/main/main.css">
 9 | </head>
10 | <body>
11 |     <div id="main">
12 |         <div class="s s1">
13 |             <div class="top">
14 |                 <h1 class="heading">Coffee Planet</h1>
15 |                 <p class="tagline">The best coffee shop <br> ever  in Bankura for the <br> ultimate drink to enjoy Every Day!</p>
16 |             </div>
17 |             <div class="dots">
18 |                 <div class="dot"></div>
19 |                 <div class="dot"></div>
20 |                 <div class="dot"></div>
21 |             </div>
22 | 
23 |             <div class="bottom">
24 |                 <button>Visit Now</button>
25 |                 <div class="arrow press" onclick="window.open('./pages/home.html','_self')">
26 |                     <img src="./icons/arrow-right.svg" alt="Right Arrow">
27 |                 </div>
28 |             </div>
29 |         </div>
30 | 
31 | 
32 |     </div>
33 | </body>
34 | </html>


--------------------------------------------------------------------------------
/js/common.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codeAbinash/coffee-shop-app-ui/7eb5e3cc715083585493b5054fd03969e8fcb21e/js/common.js


--------------------------------------------------------------------------------
/js/debounce.js:
--------------------------------------------------------------------------------
 1 | export default function debounce(func, wait, immediate) {
 2 |     var timeout;
 3 | 
 4 |     return function executedFunction() {
 5 |         var context = this;
 6 |         var args = arguments;
 7 | 
 8 |         var later = function () {
 9 |             timeout = null;
10 |             if (!immediate) func.apply(context, args);
11 |         };
12 | 
13 |         var callNow = immediate && !timeout;
14 | 
15 |         clearTimeout(timeout);
16 | 
17 |         timeout = setTimeout(later, wait);
18 | 
19 |         if (callNow) func.apply(context, args);
20 |     };
21 | };


--------------------------------------------------------------------------------
/js/main/main.js:
--------------------------------------------------------------------------------
 1 | import offer from "./offer.js";
 2 | 
 3 | 
 4 | function openPage(loc,type = "_self"){
 5 |     window.open(loc,type)
 6 | }
 7 | 
 8 | 
 9 | offer();
10 | 
11 | 


--------------------------------------------------------------------------------
/js/main/offer.js:
--------------------------------------------------------------------------------
 1 | 
 2 | import debounce from "../debounce.js"
 3 | 
 4 | export default function () {
 5 |     "use strict";
 6 |     let mainOfferDiv = document.querySelector(".body .mainOffer")
 7 |     let scrollDotsDiv = document.querySelector(".body .offerTopDiv .slider")
 8 | 
 9 |     let totalMainOffersCount = mainOfferDiv.childElementCount
10 | 
11 |     //Create dots
12 |     for(let i = 0; i<totalMainOffersCount; i++){
13 |         let dot = document.createElement("div")
14 |         dot.classList.add("dot")
15 |         scrollDotsDiv.appendChild(dot)
16 |     }
17 |     scrollDotsDiv.firstElementChild.classList.add("active")
18 | 
19 |     //Main offer Scroll
20 |     mainOfferDiv.addEventListener("scroll", debounce(mainOfferScroll, 100, false))
21 |     mainOfferDiv.addEventListener("touchmove", debounce(mainOfferScroll, 100, false))
22 | 
23 |     function mainOfferScroll(){
24 |         let scrollWidth = mainOfferDiv.scrollLeft
25 |         let oneWidth = mainOfferDiv.offsetWidth
26 |         let dotNumber = scrollWidth / oneWidth || 0
27 |         dotNumber = Math.round(dotNumber)
28 |         activeDot(dotNumber)
29 |     }
30 | 
31 |     function activeDot(n){
32 |         let count = totalMainOffersCount
33 |         
34 |         for(let i = 0; i < count; i++)
35 |             scrollDotsDiv.children[i].classList.remove("active")
36 |         scrollDotsDiv.children[n].classList.add("active")
37 |     }
38 | }


--------------------------------------------------------------------------------
/pages/home.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  8 |     <title>Coffee Planet</title>
  9 |     <link rel="stylesheet" href="../css/home/home.css">
 10 |     <script src="../js/main/main.js" onclick="openPage('./product.html')" type="module" defer></script>
 11 | </head>
 12 | 
 13 | <body>
 14 |     <div id="main">
 15 |         <header>
 16 |             <div class="menu press">
 17 |                 <img src="../icons/menu.svg" alt="Menu">
 18 |             </div>
 19 |             <span class="press">Coffee Planet</span>
 20 |             <div class="search press">
 21 |                 <img src="../icons/search.svg" alt="Search">
 22 |             </div>
 23 |         </header>
 24 |         <div class="body">
 25 | 
 26 |             <div class="offerTopDiv">
 27 | 
 28 |                 <div class="mainOffer">
 29 |                     <div class="offerImage pressBig" onclick="window.open('./product.html','_self')">
 30 |                         <img src="../images/offer/1.jpg" alt="">
 31 |                     </div>
 32 |                     <div class="offerImage pressBig">
 33 |                         <img src="../images/offer/2.jpg" alt="">
 34 |                     </div>
 35 |                     <div class="offerImage pressBig">
 36 |                         <img src="../images/offer/2.jpg" alt="">
 37 |                     </div>
 38 |                     <!-- <div class="offerImage pressBig"></div> -->
 39 |                 </div>
 40 |                 <div class="slider">
 41 |                     <!-- <div class="dot active"></div>
 42 |                         <div class="dot"></div>
 43 |                         <div class="dot"></div> -->
 44 |                 </div>
 45 |             </div>
 46 | 
 47 |             <div class="trendingDiv">
 48 |                 <div class="heading1">
 49 |                     <h2>Trending Today</h2>
 50 |                     <span>See All</span>
 51 |                 </div>
 52 |                 <div class="trending">
 53 |                     <div class="trend pressBig" onclick="window.open('./product.html','_self')">
 54 |                         <img src="../images/1.jpg" alt="Trend">
 55 |                         <span class="name">Cappuccino</span>
 56 |                     </div>
 57 |                     <div class="trend pressBig" onclick="window.open('./product.html','_self')">
 58 |                         <img src="../images/2.jpg" alt="Trend">
 59 |                         <span class="name">Ristretto</span>
 60 |                     </div>
 61 |                     <div class="trend pressBig" onclick="window.open('./product.html','_self')">
 62 |                         <img src="../images/3.jpg" alt="Trend">
 63 |                         <span class="name">Cold Brew</span>
 64 |                     </div>
 65 |                     <div class="trend pressBig" onclick="window.open('./product.html','_self')">
 66 |                         <img src="../images/4.jpg" alt="Trend">
 67 |                         <span class="name">Batch Brew</span>
 68 |                     </div>
 69 |                     <div class="trend pressBig" onclick="window.open('./product.html','_self')">
 70 |                         <img src="../images/5.jpg" alt="Trend">
 71 |                         <span class="name">Mezzo Mezzo</span>
 72 |                     </div>
 73 |                     <div class="trend pressBig" onclick="window.open('./product.html','_self')">
 74 |                         <img src="../images/6.jpg" alt="Trend">
 75 |                         <span class="name">Espresso</span> onclick="window.open('./product.html','_self')"
 76 |                     </div>
 77 |                     
 78 |                 </div>
 79 |             </div>
 80 | 
 81 |             <div class="popular">
 82 |                 <div class="heading1">
 83 |                     <h2>Popular Coffee</h2>
 84 |                     <span>See All</span>
 85 |                 </div>
 86 |                 <div class="coffees">
 87 | 
 88 |                     <div class="coffee pressBig" onclick="window.open('./product.html','_self')">
 89 |                         <div class="left">
 90 |                             <img src="../images/1.jpg" alt="Coffee">
 91 |                         </div>
 92 |                         <div class="right">
 93 |                             <span class="name">Cappuccino</span>
 94 |                             <div class="tags">
 95 |                                 <span><img src="../icons/star.svg" alt="Star">5.0</span>
 96 |                                 <span>Drink</span>
 97 |                                 <span>Cookie</span>
 98 |                             </div>
 99 |                             <div class="offDiv">
100 |                                 <span class="price">₹ 70</span>
101 |                                 <span class="off">20% Off</span>
102 |                             </div>
103 |                         </div>
104 |                     </div>
105 |                     <div class="coffee pressBig" onclick="window.open('./product.html','_self')">
106 |                         <div class="left">
107 |                             <img src="../images/2.jpg" alt="Coffee">
108 |                         </div>
109 |                         <div class="right">
110 |                             <span class="name">Ristretto</span>
111 |                             <div class="tags">
112 |                                 <span><img src="../icons/star.svg" alt="Star">4.7</span>
113 |                                 <span>Drink</span>
114 |                                 <span>Cookie</span>
115 |                             </div>
116 |                             <div class="offDiv">
117 |                                 <span class="price">₹ 80</span>
118 |                                 <span class="off">20% Off</span>
119 |                             </div>
120 |                         </div>
121 |                     </div>
122 |                     <div class="coffee pressBig" onclick="window.open('./product.html','_self')">
123 |                         <div class="left">
124 |                             <img src="../images/3.jpg" alt="Coffee">
125 |                         </div>
126 |                         <div class="right">
127 |                             <span class="name">Cold Brew</span>
128 |                             <div class="tags">
129 |                                 <span><img src="../icons/star.svg" alt="Star">4.6</span>
130 |                                 <span>Donut</span>
131 |                             </div>
132 |                             <div class="offDiv">
133 |                                 <span class="price">₹ 50</span>
134 |                                 <span class="off">20% Off</span>
135 |                             </div>
136 |                         </div>
137 |                     </div>
138 |                     <div class="coffee pressBig" onclick="window.open('./product.html','_self')">
139 |                         <div class="left">
140 |                             <img src="../images/4.jpg" alt="Coffee">
141 |                         </div>
142 |                         <div class="right">
143 |                             <span class="name">Batch Brew</span>
144 |                             <div class="tags">
145 |                                 <span><img src="../icons/star.svg" alt="Star">4.8</span>
146 |                                 <span>Drink</span>
147 |                                 <span>Cookie</span>
148 |                             </div>
149 |                             <div class="offDiv">
150 |                                 <span class="price">₹ 70</span>
151 |                                 <span class="off">20% Off</span>
152 |                             </div>
153 |                         </div>
154 |                     </div>
155 |                     <div class="coffee pressBig" onclick="window.open('./product.html','_self')">
156 |                         <div class="left">
157 |                             <img src="../images/5.jpg" alt="Coffee">
158 |                         </div>
159 |                         <div class="right">
160 |                             <span class="name">Mezzo Mezzo ( Piccolo )</span>
161 |                             <div class="tags">
162 |                                 <span><img src="../icons/star.svg" alt="Star">4.7</span>
163 |                                 <span>Drink</span>
164 |                             </div>
165 |                             <div class="offDiv">
166 |                                 <span class="price">₹ 40</span>
167 |                                 <span class="off">20% Off</span>
168 |                             </div>
169 |                         </div>
170 |                     </div>
171 |                     <div class="coffee pressBig" onclick="window.open('./product.html','_self')">
172 |                         <div class="left">
173 |                             <img src="../images/6.jpg" alt="Coffee">
174 |                         </div>
175 |                         <div class="right">
176 |                             <span class="name">Espresso ( Short Black )</span>
177 |                             <div class="tags">
178 |                                 <span><img src="../icons/star.svg" alt="Star">5.0</span>
179 |                                 <span>Drink</span>
180 |                                 <span>Chocolate Cake</span>
181 |                             </div>
182 |                             <div class="offDiv">
183 |                                 <span class="price">₹ 120</span>
184 |                                 <span class="off">20% Off</span>
185 |                             </div>
186 |                         </div>
187 |                     </div>
188 |                 
189 |                 </div>
190 |             </div>
191 | 
192 |             <div class="navBar">
193 |                 <div class="icon press"><img src="../icons/home.svg" alt="Home"></div>
194 |                 <div class="icon press"><img src="../icons/bookmark.svg" alt="Home"></div>
195 |                 <div class="icon press"><img src="../icons/search.svg" alt="Home"></div>
196 |                 <div class="icon press"><img src="../icons/cart.svg" alt="Home"></div>
197 |                 <div class="icon press"><img src="../icons/profile.svg" alt="Home"></div>
198 | 
199 |             </div>
200 | 
201 |             <div class="getOffer">
202 |                 <div class="heading1">
203 |                     <h2>Get Offer</h2>
204 |                     <span>See All</span>
205 |                 </div>
206 |                 <div class="offerDiv pressBig">
207 |                     <h2>get 35% off</h2>
208 |                     <p>Create an account, you will be given a QR code. Visit Coffee Planet and share the QR code to get
209 |                         35% off! Hurry UP! Limited time offer.</p>
210 |                 </div>
211 |                 <div class="offerDiv pressBig">
212 |                     <h2>Invite and get ₹100</h2>
213 |                     <p>Invite your friend to create an account. And if he visits Coffee Planet once, you'll get ₹100.
214 |                     </p>
215 |                 </div>
216 |             </div>
217 | 
218 |             <div class="locationsDiv">
219 |                 <div class="heading1">
220 |                     <h2>Bankura, Machantala, near the Watch Tower.</h2>
221 |                 </div>
222 |                 <div class="locations">
223 |                     <div class="location pressBig">
224 |                         <img src="../images/loc.jpg" alt="location">
225 |                     </div>
226 |                 </div>
227 |                 <div class="heading1 soon">
228 |                     <h2>Coming Soon !</h2>
229 |                 </div>
230 |             </div>
231 | 
232 |             <footer>
233 |                 <div class="from">From</div>
234 |                 <div class="dr">Coffee Planet</div>
235 |             </footer>
236 | 
237 | 
238 |         </div>
239 |     </div>
240 | </body>
241 | 
242 | </html>


--------------------------------------------------------------------------------
/pages/product.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 7 |     <title>Capuccino</title>
 8 |     <link rel="stylesheet" href="../css/product/product.css">
 9 | </head>
10 | <body>
11 |     <div id="main">
12 |         <header>
13 |             <div class="icon press" onclick="window.history.back()">
14 |                 <img src="../icons/arrow-left.svg" alt="Back" style="margin-right: 5px;">
15 |             </div>
16 |             <div class="icon press">
17 |                 <img src="../icons/heart.svg" alt="Back">
18 |             </div>
19 |         </header>
20 | 
21 |         <div class="productDetails">
22 |             <div class="imageDiv">
23 |                 <img src="../images/1.jpg" alt="Product Image">
24 |             </div>
25 | 
26 |             <div class="detailsDiv">
27 |                 <div class="slideBar"></div>
28 |                 <div class="name">Capuccino</div>
29 |                 <div class="priceRating">
30 |                     <div class="price">
31 |                         ₹70
32 |                     </div>
33 |                     <div class="rating">
34 |                         <img src="../icons/star.svg" alt="Star">
35 |                         <span>5.0 <span class="review"> ( 456 Reviews )</span></span>
36 |                     </div>
37 |                 </div>
38 | 
39 |                 <div class="text">
40 |                     Recognised by the froth on top, a cappuccino is one part espresso shot, one part textured milk and one part froth on top with a dusting of chocolate to finish.
41 |                     <br><br>
42 |                     A cappuccino in a 8oz cup contains one shot of espresso, in a 12oz cup 1.5 shots and in a 16oz cup two shots. This is the same for a latte, flat white and mocha.
43 |                 </div>
44 |                 <div class="tags">
45 |                     <div class="tag press">Drink</div>
46 |                     <div class="tag press">Cookie</div>
47 |                     <!-- <div class="tag press">Ipsum</div> -->
48 |                 </div>
49 | 
50 | 
51 |                 <div class="visit">
52 |                     <button class="pressBig">Visit Now</button>
53 |                 </div>
54 | 
55 |             </div>
56 | 
57 | 
58 |         </div>
59 | 
60 | 
61 |     </div>  
62 | </body>
63 | </html>


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