├── icons
    ├── 12.jpeg
    ├── 123.jpeg
    ├── pexels-photo-11481263.jpeg
    ├── pexels-photo-13396245.jpeg
    ├── pexels-photo-13867144.jpeg
    ├── facebook (1).svg
    ├── map-pin.svg
    ├── credit-card (1).svg
    ├── mail.svg
    ├── instagram.svg
    ├── twitter.svg
    └── phone.svg
├── example.css.map
├── example.css
├── example.scss
└── example.html


/icons/12.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmilAbdullazadeh/e-commerce/HEAD/icons/12.jpeg


--------------------------------------------------------------------------------
/icons/123.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmilAbdullazadeh/e-commerce/HEAD/icons/123.jpeg


--------------------------------------------------------------------------------
/icons/pexels-photo-11481263.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmilAbdullazadeh/e-commerce/HEAD/icons/pexels-photo-11481263.jpeg


--------------------------------------------------------------------------------
/icons/pexels-photo-13396245.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmilAbdullazadeh/e-commerce/HEAD/icons/pexels-photo-13396245.jpeg


--------------------------------------------------------------------------------
/icons/pexels-photo-13867144.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmilAbdullazadeh/e-commerce/HEAD/icons/pexels-photo-13867144.jpeg


--------------------------------------------------------------------------------
/icons/facebook (1).svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>


--------------------------------------------------------------------------------
/icons/map-pin.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-map-pin"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>


--------------------------------------------------------------------------------
/icons/credit-card (1).svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>


--------------------------------------------------------------------------------
/icons/mail.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>


--------------------------------------------------------------------------------
/icons/instagram.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>


--------------------------------------------------------------------------------
/icons/twitter.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>


--------------------------------------------------------------------------------
/icons/phone.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="blue" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>


--------------------------------------------------------------------------------
/example.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["example.scss","example.css"],"names":[],"mappings":"AAAA;EACI,sBAAA;EACA,SAAA;EACA,UAAA;ACCJ;;ADCA;EACI,yCAAA;EACA,kBAAA;EACA,YAAA;ACEJ;ADDI;EACI,2BAAA;EACA,YAAA;ACGR;;ADCA;EACI,yCAAA;EACA,aAAA;ACEJ;ADCI;EACI,kBAAA;EACA,kBAAA;ACCR;ADCQ;EACI,YAAA;ACCZ;ADCY;EACI,iBAAA;ACChB;ADEY;EACI,8BAAA;ACAhB;ADGY;EACI,sBAAA;ACDhB;ADIY;EACI,WAAA;ACFhB;ADIgB;EACI,YAAA;EACA,gBAAA;ACFpB;;ADQA;EACI,aAAA;EACA,gBAAA;ACLJ;ADMI;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,mCAAA;EACA,mBAAA;ACJR;ADOI;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,iCAAA;EACA,mBAAA;ACLR;ADQI;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,mCAAA;EACA,mBAAA;ACNR;ADSI;EACI,kBAAA;EACA,WAAA;EACA,YAAA;EACA,kCAAA;EACA,mBAAA;ACPR;;ADUA;EACI,yCAAA;EACA,aAAA;ACPJ;ADUI;EACI,kBAAA;EACA,kBAAA;ACRR;ADUQ;EACI,YAAA;ACRZ;ADUY;EACI,iBAAA;ACRhB;ADWY;EACI,8BAAA;ACThB;ADYY;EACI,sBAAA;ACVhB;ADaY;EACI,WAAA;ACXhB;ADagB;EACI,YAAA;EACA,gBAAA;ACXpB","file":"example.css"}


--------------------------------------------------------------------------------
/example.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   margin: 0;
  4 |   padding: 0;
  5 | }
  6 | 
  7 | #about {
  8 |   font-family: Arial, Helvetica, sans-serif;
  9 |   text-align: center;
 10 |   margin: 50px;
 11 | }
 12 | #about h5, #about p {
 13 |   color: rgba(0, 0, 0, 0.749);
 14 |   margin: 15px;
 15 | }
 16 | 
 17 | #photo {
 18 |   font-family: Arial, Helvetica, sans-serif;
 19 |   display: flex;
 20 | }
 21 | #photo .container {
 22 |   margin-right: 10px;
 23 |   margin-left: 100px;
 24 | }
 25 | #photo .container .card {
 26 |   margin: 40px;
 27 | }
 28 | #photo .container .card img {
 29 |   border-radius: 1%;
 30 | }
 31 | #photo .container .card h5 {
 32 |   color: rgba(33, 30, 30, 0.886);
 33 | }
 34 | #photo .container .card p {
 35 |   color: rgb(47, 44, 44);
 36 | }
 37 | #photo .container .card .p1 {
 38 |   color: gray;
 39 | }
 40 | #photo .container .card .p1 .p2 {
 41 |   color: green;
 42 |   font-weight: 800;
 43 | }
 44 | 
 45 | .circle {
 46 |   display: flex;
 47 |   margin-top: 10px;
 48 | }
 49 | .circle .first {
 50 |   margin-right: 10px;
 51 |   width: 15px;
 52 |   height: 15px;
 53 |   background-color: rgb(41, 208, 230);
 54 |   border-radius: 20px;
 55 | }
 56 | .circle .second {
 57 |   margin-right: 10px;
 58 |   width: 15px;
 59 |   height: 15px;
 60 |   background-color: rgb(8, 111, 32);
 61 |   border-radius: 20px;
 62 | }
 63 | .circle .third {
 64 |   margin-right: 10px;
 65 |   width: 15px;
 66 |   height: 15px;
 67 |   background-color: rgb(227, 143, 47);
 68 |   border-radius: 20px;
 69 | }
 70 | .circle .fourth {
 71 |   margin-right: 10px;
 72 |   width: 15px;
 73 |   height: 15px;
 74 |   background-color: rgb(103, 44, 19);
 75 |   border-radius: 20px;
 76 | }
 77 | 
 78 | #photo2 {
 79 |   font-family: Arial, Helvetica, sans-serif;
 80 |   display: flex;
 81 | }
 82 | #photo2 .container {
 83 |   margin-right: 10px;
 84 |   margin-left: 100px;
 85 | }
 86 | #photo2 .container .card {
 87 |   margin: 40px;
 88 | }
 89 | #photo2 .container .card img {
 90 |   border-radius: 1%;
 91 | }
 92 | #photo2 .container .card h5 {
 93 |   color: rgba(33, 30, 30, 0.886);
 94 | }
 95 | #photo2 .container .card p {
 96 |   color: rgb(47, 44, 44);
 97 | }
 98 | #photo2 .container .card .p1 {
 99 |   color: gray;
100 | }
101 | #photo2 .container .card .p1 .p2 {
102 |   color: green;
103 |   font-weight: 800;
104 | }/*# sourceMappingURL=example.css.map */


--------------------------------------------------------------------------------
/example.scss:
--------------------------------------------------------------------------------
  1 | *{
  2 |     box-sizing: border-box;
  3 |     margin: 0;
  4 |     padding: 0;
  5 | }
  6 | #about{
  7 |     font-family: Arial, Helvetica, sans-serif;
  8 |     text-align: center;
  9 |     margin: 50px;
 10 |     h5,p{
 11 |         color: rgba(0, 0, 0, 0.749);
 12 |         margin: 15px;
 13 |     }
 14 | }
 15 | 
 16 | #photo {
 17 |     font-family: Arial, Helvetica, sans-serif;
 18 |     display: flex;
 19 |     
 20 | 
 21 |     .container {
 22 |         margin-right: 10px;
 23 |         margin-left: 100px;
 24 | 
 25 |         .card {
 26 |             margin: 40px;
 27 | 
 28 |             img {
 29 |                 border-radius: 1%;
 30 |             }
 31 | 
 32 |             h5 {
 33 |                 color: rgba(33, 30, 30, 0.886);
 34 |             }
 35 | 
 36 |             p {
 37 |                 color: rgb(47, 44, 44);
 38 |             }
 39 | 
 40 |             .p1 {
 41 |                 color: gray;
 42 | 
 43 |                 .p2 {
 44 |                     color: green;
 45 |                     font-weight: 800;
 46 |                 }
 47 |             }
 48 |         }
 49 |     }
 50 | }
 51 | .circle {
 52 |     display: flex;
 53 |     margin-top: 10px;
 54 |     .first {
 55 |         margin-right: 10px;
 56 |         width: 15px;
 57 |         height: 15px;
 58 |         background-color: rgb(41, 208, 230);
 59 |         border-radius: 20px;
 60 |     }
 61 | 
 62 |     .second {
 63 |         margin-right: 10px;
 64 |         width: 15px;
 65 |         height: 15px;
 66 |         background-color: rgb(8, 111, 32);
 67 |         border-radius: 20px;
 68 |     }
 69 | 
 70 |     .third {
 71 |         margin-right: 10px;
 72 |         width: 15px;
 73 |         height: 15px;
 74 |         background-color: rgb(227, 143, 47);
 75 |         border-radius: 20px;
 76 |     }
 77 | 
 78 |     .fourth {
 79 |         margin-right: 10px;
 80 |         width: 15px;
 81 |         height: 15px;
 82 |         background-color: rgb(103, 44, 19);
 83 |         border-radius: 20px;
 84 |     }
 85 | }
 86 | #photo2 {
 87 |     font-family: Arial, Helvetica, sans-serif;
 88 |     display: flex;
 89 |     
 90 | 
 91 |     .container {
 92 |         margin-right: 10px;
 93 |         margin-left: 100px;
 94 | 
 95 |         .card {
 96 |             margin: 40px;
 97 | 
 98 |             img {
 99 |                 border-radius: 1%;
100 |             }
101 | 
102 |             h5 {
103 |                 color: rgba(33, 30, 30, 0.886);
104 |             }
105 | 
106 |             p {
107 |                 color: rgb(47, 44, 44);
108 |             }
109 | 
110 |             .p1 {
111 |                 color: gray;
112 | 
113 |                 .p2 {
114 |                     color: green;
115 |                     font-weight: 800;
116 |                 }
117 |             }
118 |         }
119 |     }
120 | }


--------------------------------------------------------------------------------
/example.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>Document</title>
  8 |     <link rel="stylesheet" href="example.css">
  9 | </head>
 10 | <body>
 11 |     <main>
 12 |         <div id="about">
 13 |             <h5>Featured Products</h5>
 14 |             <h3>BESTSELLER PRODUCTS</h3>
 15 |             <p>Problems trying to resolve the conflict between</p>
 16 |         </div>
 17 |         <section id="photo">
 18 |             <div class="container">
 19 |                 <div class="card">
 20 |                     <img src="./icons/12.jpeg" alt="" width="200px" height="310">
 21 |                     <div>
 22 |                         <h5>Graphic Design</h5>
 23 |                         <p>English Department</p>
 24 |                         <p class="p1">$16.48 <span class="p2">$6.48</span></p> 
 25 |                     </div>
 26 |                     <div class="circle">
 27 |                         <div class="first"></div>
 28 |                         <div class="second"></div>
 29 |                         <div class="third"></div>
 30 |                         <div class="fourth"></div>
 31 |                     </div>
 32 |                 </div>
 33 |             </div>
 34 |             <div class="container">
 35 |                 <div class="card">
 36 |                     <img src="./icons/123.jpeg" alt="" width="200px" height="310px">
 37 |                     <div>
 38 |                         <h5>Graphic Design</h5>
 39 |                         <p>English Department</p>
 40 |                         <p class="p1">$16.48 <span class="p2">$6.48</span></p> 
 41 |                     </div>
 42 |                     <div class="circle">
 43 |                         <div class="first"></div>
 44 |                         <div class="second"></div>
 45 |                         <div class="third"></div>
 46 |                         <div class="fourth"></div>
 47 |                     </div>
 48 |                 </div>
 49 |             </div>
 50 |             <div class="container">
 51 |                 <div class="card">
 52 |                     <img src="./icons/pexels-photo-13867144.jpeg" alt="" width="200px" height="auto">
 53 |                     <div>
 54 |                         <h5>Graphic Design</h5>
 55 |                         <p>English Department</p>
 56 |                         <p class="p1">$16.48 <span class="p2">$6.48</span></p> 
 57 |                     </div>
 58 |                     <div class="circle">
 59 |                         <div class="first"></div>
 60 |                         <div class="second"></div>
 61 |                         <div class="third"></div>
 62 |                         <div class="fourth"></div>
 63 |                     </div>
 64 |                 </div>
 65 |             </div>
 66 |         </section>
 67 |         <section id="photo2">
 68 |             <div class="container">
 69 |                 <div class="card">
 70 |                     <img src="./icons/pexels-photo-13867144.jpeg" alt="" width="200px" height="auto">
 71 |                     <div>
 72 |                         <h5>Graphic Design</h5>
 73 |                         <p>English Department</p>
 74 |                         <p class="p1">$16.48 <span class="p2">$6.48</span></p> 
 75 |                     </div>
 76 |                     <div class="circle">
 77 |                         <div class="first"></div>
 78 |                         <div class="second"></div>
 79 |                         <div class="third"></div>
 80 |                         <div class="fourth"></div>
 81 |                     </div>
 82 |                 </div>
 83 |             </div>
 84 |             <div class="container">
 85 |                 <div class="card">
 86 |                     <img src="./icons/pexels-photo-11481263.jpeg" alt="" width="200px" height="310px">
 87 |                     <div>
 88 |                         <h5>Graphic Design</h5>
 89 |                         <p>English Department</p>
 90 |                         <p class="p1">$16.48 <span class="p2">$6.48</span></p> 
 91 |                     </div>
 92 |                     <div class="circle">
 93 |                         <div class="first"></div>
 94 |                         <div class="second"></div>
 95 |                         <div class="third"></div>
 96 |                         <div class="fourth"></div>
 97 |                     </div>
 98 |                 </div>
 99 |             </div>
100 |             <div class="container">
101 |                 <div class="card">
102 |                     <img src="./icons/pexels-photo-13396245.jpeg" alt="" width="200px" height="310px">
103 |                     <div>
104 |                         <h5>Graphic Design</h5>
105 |                         <p>English Department</p>
106 |                         <p class="p1">$16.48 <span class="p2">$6.48</span></p> 
107 |                     </div>
108 |                     <div class="circle">
109 |                         <div class="first"></div>
110 |                         <div class="second"></div>
111 |                         <div class="third"></div>
112 |                         <div class="fourth"></div>
113 |                     </div>
114 |                 </div>
115 |             </div>
116 |         </section>
117 |     </main>
118 | </body>
119 | </html>


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