Top sellers

package.json

@@ -2,10 +2,10 @@
   "name": "parcel-project-template",
   "version": "2.0.0",
   "description": "",
-  "homepage": "https://goitacademy.github.io/parcel-project-template",
+  "homepage": "ancasab.github.io/HTML-CSS-Team2Project/",
   "scripts": {
     "start": "parcel src/*.html",
-    "build": "parcel build src/*.html --public-url /parcel-project-template/"
+    "build": "parcel build src/*.html --public-url /HTML-CSS-Team2Project/"
   },
   "repository": {
     "type": "git",

src/css/advantages.css

@@ -0,0 +1,65 @@
+img,picture,svg {
+    max-width: 100%;
+    display: block;}
+
+    :root {
+        --orange: #FD9222;
+        --white: #FFFFFF;
+        --black: #111111;
+        --dark-violet:#1E1823;
+        --primary-font: 'Montserrat', sans-serif;
+
+    }
+
+
+ .benefits_container {
+    margin: 0 auto;
+    max-width: 1200px;
+    margin-top: 30px;
+    margin-bottom: 128px;    /* Adaugat Anca */
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: center; */
+    background-color: #1E1823;
+    color: white;
+    padding: 2em;
+    }
+
+
+     .element {
+        width: 30%;
+    } 
+
+    .element + .element {
+        margin-left: 50px;
+    }
+
+    .benefits_icons{
+      width: 25px;
+         height: 25px;
+         margin-bottom: 30px;
+        border-radius: 100px;
+        /* padding: 20px 20px;
+         border-radius: 100px;
+         border: 1px solid ; */
+    } 
+
+    .elements_text h2 {
+        font-weight: 600;
+        font-family: var(--primary-font);
+        font-size: 18px;
+        line-height: 22px;
+        color: var(--white);
+
+    }
+
+    .elements_text p {
+        font-weight: 400;
+        font-family: var(--primary-font);
+        font-size: 10x;
+        line-height: 17px;
+        letter-spacing: -2%;
+        color: var(--white) 
+        rgba(255, 255, 255, 0.7);
+        margin-top: 1em;
+    }

src/css/footer.css

@@ -0,0 +1,162 @@
+.footer-section {
+    display: flex;
+    max-width: 1200px;
+    width: 100%;
+    min-height: 270px;
+    margin: 0 auto;
+    flex-direction: column;
+    justify-content: space-between;
+    background-color: var(--black);
+    color: var(--white);
+
+}
+
+@media screen and (max-widt: 374px) {
+    .footer-section {
+        height: 440px;
+    }
+}
+
+.footer-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content:space-between;
+    margin-left: 50px;
+    margin-right: 50px;;
+
+}
+
+.footer-container p {
+    font-size: 28px;
+    font-weight: 500;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+    text-align: left;
+    margin-top: 32px;
+
+}
+@media screen and (max-width: 374px) {
+    .footer-container p {
+        font-size: 24px;
+        line-height: 1.2;
+    }
+}
+
+.footer__slogan {
+    color: var(--orange);
+}
+
+.footer-contact {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: baseline;
+}
+
+.footer-contact p,
+.footer-contact a {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.3;
+    letter-spacing: -0.02em;
+    color:var(--white);
+}
+
+.footer_social {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 18px;
+
+}
+
+@media screen and (max-width: 374px) {
+    .footer_social {
+        gap: 14px;
+        margin-right: 20px;
+    }
+}
+
+
+.footer_social li {
+    list-style: none;
+    width: 24px;
+    height: 24px;
+
+}
+
+.footer_social__icon {
+    fill: var(--black);
+    stroke: var(--white);
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.footer__line {
+    display:flex;
+    max-width: 1136px;
+    width: 100%;
+    height: 0px;
+    margin: 0 auto;
+    border: 1px solid #FFFFFF1A;
+    padding-left: 32px;
+    padding-right: 32px;
+    margin-top: 62px;
+
+
+}
+@media screen and (max-width: 767px) {
+    .footer__line {
+            max-width: 704px;
+            padding-left: 32px;
+            padding-right: 32px;
+
+    }
+}
+
+@media screen and (max-width: 374px) {
+    .footer__line {
+        /* max-width: 1136px;
+        padding-left: 32px;
+        padding-right: 32px; */
+        max-width: 335px;
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+}
+
+.footer__navigation {
+    list-style: none;
+    display: flex;
+    /* flex-direction: raw; */
+    align-items: center;
+    justify-content: center;
+    max-width: 532px;
+    gap: 25px;
+    margin-left: 32px;
+    margin-bottom: 50px;
+
+}
+
+@media screen and (max-width: 374px) {
+    .footer__navigation {
+        display: flex;
+        flex-direction: column;
+        justify-content:flex-start;
+        align-items: baseline;
+        gap: 18px;
+        margin-left: 20px;
+        margin-bottom: 32px;
+
+        }
+}
+
+.footer__navigation a {
+    text-decoration: none;
+    color: var(--white);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 1.14;
+    letter-spacing: -0.02em;
+}

src/css/general-style.css

@@ -0,0 +1,22 @@
+*,*::before,*::after {
+    box-sizing: border-box;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+
+}
+
+body {
+    font-family: var(--primary-font);
+    background-color: var(--white);
+}
+:root {
+    --orange: #FD9222;
+    --white: #FFFFFF;
+    --black: #111111;
+    --dark-violet:#1E1823;
+    --primary-font: 'Montserrat', sans-serif;
+
+}