Add files via upload

100_projects/78-product-card/assets/css/styles.css

@@ -0,0 +1,369 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
+:root {
+  --header-height: 3.5rem;
+  --first-color: #A29596;
+  --primary: #A29596;
+  --second-color: #33303D;
+  --black-color: #111111;
+  --white-color: #FFF;
+  --body-font: 'Roboto', sans-serif;
+  --biggest-font-size: 1.5rem;
+  --big-font-size: 1.5rem;
+  --normal-font-size: .938rem;
+  --smaller-font-size: .75rem;
+  --font-medium: 500;
+  --font-bold: 700;
+  --z-fixed: 100;
+  --z-modal: 1000;
+}
+@media screen and (min-width: 968px) {
+  :root {
+    --biggest-font-size: 3.25rem;
+    --big-font-size: 2.25rem;
+    --normal-font-size: 1rem;
+    --smaller-font-size: .813rem;
+  }
+}
+*, ::before, ::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: var(--body-font);
+  background-color: var(--white-color);
+  color: var(--black-color);
+}
+h1, h2, h3, p {
+  margin: 0;
+}
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+a {
+  text-decoration: none;
+}
+.grid {
+  max-width: 1200px;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+.header {
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: var(--z-fixed);
+  background-color: var(--white-color);
+}
+.nav {
+  height: var(--header-height);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+@media screen and (max-width: 968px) {
+  .nav__menu {
+    position: fixed;
+    left: -100%;
+    top: var(--header-height);
+    background-color: var(--white-color);
+    width: 80%;
+    height: 100%;
+    padding: 2rem;
+    z-index: var(--z-fixed);
+    transition: .3s;
+  }
+}
+.nav__list {
+  display: flex;
+  flex-direction: column;
+  row-gap: 2rem;
+}
+
+.nav__item {
+  font-weight: var(--font-bold);
+}
+
+.nav__link {
+  color: var(--black-color);
+}
+
+.nav__toggle {
+  cursor: pointer;
+}
+.show {
+  left: 0;
+}
+.home {
+  height: 100vh;
+  display: grid;
+  row-gap: 3.5rem;
+  grid-template-rows: repeat(2, max-content);
+  overflow: hidden;
+}
+.sneaker {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 6rem;
+  position: relative;
+}
+
+.sneaker__figure {
+  width: 240px;
+  height: 240px;
+  background-color: var(--primary);
+  border-radius: 50%;
+  transition: .5s;
+}
+
+.sneaker__img {
+  width: 313px;
+  position: absolute;
+  top: 16%;
+  left: 9%;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  transform: rotate(30deg);
+  opacity: 0;
+  filter: drop-shadow(0px 10px 10px rgba(17, 17, 17, 0.4));
+}
+
+.sneaker__img.shows {
+  opacity: 1;
+}
+
+.sneaker__colors {
+  position: absolute;
+  right: 2%;
+}
+
+.sneaker__color {
+  display: block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  margin-bottom: .5rem;
+  cursor: pointer;
+}
+
+.sneaker__color.active {
+  border: 2px solid var(--white-color);
+  box-shadow: 0 0 2px black;
+}
+
+.sneaker__colors-one {
+  background-color: var(--first-color);
+}
+
+.sneaker__colors-two {
+  background-color: var(--black-color);
+}
+
+.data {
+  margin-bottom: 1.5rem;
+}
+
+.data__subtitle {
+  font-size: var(--normal-font-size);
+  font-weight: var(--font-medium);
+}
+
+.data__title {
+  font-size: var(--biggest-font-size);
+  margin-bottom: .5rem;
+}
+
+.data__description {
+  font-size: var(--normal-font-size);
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+}
+.size__title {
+  font-size: var(--normal-font-size);
+  margin-bottom: 1rem;
+}
+
+.size__content {
+  display: flex;
+}
+
+.size__tallas {
+  width: 30px;
+  height: 30px;
+  margin-right: .5rem;
+  font-size: var(--smaller-font-size);
+  text-align: center;
+  line-height: 30px;
+  border-radius: .25rem;
+  cursor: pointer;
+}
+
+.size__tallas.active {
+  background-color: var(--primary);
+  color: var(--white-color);
+}
+
+.quantity__title {
+  font-size: var(--normal-font-size);
+  margin-bottom: 1rem;
+}
+
+.quantity__content {
+  width: 100px;
+  height: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--primary);
+  color: var(--white-color);
+  padding: .5rem;
+  border-radius: .25rem;
+}
+
+.price {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 1rem 0;
+  background-color: var(--white-color);
+  border-radius: 1.5rem 1.5rem 0 0;
+  box-shadow: 0px 0px 20px rgba(17, 17, 17, 0.25);
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+
+.price__title {
+  font-size: var(--big-font-size);
+  color: var(--black-color);
+}
+
+.price__button {
+  background-color: var(--primary);
+  color: var(--white-color);
+  padding: 1.25rem 3.125rem;
+  border-radius: .5rem;
+  transition: box-shadow .4s;
+}
+@media screen and (max-width: 320px) {
+  .home {
+    row-gap: 1.5rem;
+  }
+  .sneaker__figure {
+    width: 210px;
+    height: 210px;
+  }
+  .sneaker img {
+    width: 230px;
+  }
+  .sneaker__colors {
+    right: 1%;
+  }
+  .price__title {
+    font-size: var(--normal-font-size);
+  }
+  .price__button {
+    padding: 1.25rem 2rem;
+  }
+}
+
+@media screen and (min-width: 480px) {
+  .data__description {
+    width: 350px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .home {
+    grid-template-columns: repeat(2, max-content);
+    align-content: center;
+    justify-content: center;
+    column-gap: 6rem;
+    row-gap: 0;
+  }
+  .sneaker {
+    margin-top: 0;
+  }
+  .sneaker__colors {
+    right: -10%;
+  }
+  .sneaker__img {
+    left: -6%;
+  }
+  .actions {
+    margin-bottom: 3rem;
+  }
+  .price {
+    position: initial;
+    background-color: initial;
+    justify-content: space-between;
+    box-shadow: none;
+    padding: 0;
+  }
+  .price__title {
+    color: var(--black-color);
+    font-weight: var(--font-medium);
+  }
+}
+@media screen and (min-width: 968px) {
+  .nav {
+    height: calc(var(--header-height) + 1.5rem);
+  }
+  .nav__list {
+    flex-direction: row;
+    column-gap: 3rem;
+  }
+  .nav__toggle {
+    display: none;
+  }
+  .sneaker {
+    margin: 0;
+  }
+  .sneaker__figure {
+    width: 430px;
+    height: 430px;
+  }
+  .sneaker__img {
+    width: 550px;
+    top: 13%;
+  }
+  .sneaker__colors {
+    right: initial;
+    bottom: -3rem;
+  }
+  .sneaker__colors span {
+    display: inline-block;
+  }
+  .info {
+    align-self: center;
+  }
+  .data {
+    margin-bottom: 2.5rem;
+  }
+  .data__subtitle {
+    font-size: 1.5rem;
+  }
+  .data__title {
+    margin-bottom: 1rem;
+  }
+  .size__tallas {
+    width: 34px;
+    height: 34px;
+    line-height: 35px;
+  }
+}
+@media screen and (min-width: 1200px) {
+  .grid {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}

100_projects/78-product-card/assets/icons/icon-menu.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3.33333" cy="3.33333" r="2.58333" stroke="#111111" stroke-width="1.5"/>
+<circle cx="3.33333" cy="12.6667" r="2.58333" stroke="#111111" stroke-width="1.5"/>
+<circle cx="12.6667" cy="3.33333" r="2.58333" stroke="#111111" stroke-width="1.5"/>
+<circle cx="12.6667" cy="12.6667" r="2.58333" stroke="#111111" stroke-width="1.5"/>
+</svg>

100_projects/78-product-card/assets/icons/nike-logo.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="14" viewBox="0 0 40 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.4804 4.51489L19.9955 5.16737L13.1007 6.97233C10.6657 7.57481 8.53579 8.37729 6.48334 7.67481C3.69341 6.46984 3.74341 3.33492 5.82336 0C2.14595 3.03492 -4.47139 12.7397 4.47839 13.7197C5.61836 13.8697 7.64831 13.4697 9.85325 12.5422L19.9955 8.37979L40 0.199995L22.4804 4.51489Z" fill="#111111"/>
+</svg>

100_projects/78-product-card/assets/icons/shopping-bag.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.3571 4.85714C13.3571 2.17892 11.1782 0 8.5 0C5.82174 0 3.64286 2.17892 3.64286 4.85714H0V16.3929C0 18.0694 1.35913 19.4286 3.03571 19.4286H13.9643C15.6409 19.4286 17 18.0694 17 16.3929V4.85714H13.3571ZM8.5 1.21429C10.5087 1.21429 12.1429 2.84845 12.1429 4.85714H4.85714C4.85714 2.84845 6.49131 1.21429 8.5 1.21429ZM15.7857 16.3929C15.7857 17.3972 14.9686 18.2143 13.9643 18.2143H3.03571C2.03139 18.2143 1.21429 17.3972 1.21429 16.3929V6.07143H3.64286V7.89286C3.64286 8.22819 3.91471 8.5 4.25 8.5C4.58529 8.5 4.85714 8.22819 4.85714 7.89286V6.07143H12.1429V7.89286C12.1429 8.22819 12.4147 8.5 12.75 8.5C13.0853 8.5 13.3571 8.22819 13.3571 7.89286V6.07143H15.7857V16.3929Z" fill="#111111"/>
+</svg>

100_projects/78-product-card/assets/js/main.js

@@ -0,0 +1,38 @@
+const showMenu = (toggleId,navId) =>{
+    const toggle = document.getElementById(toggleId),
+    nav = document.getElementById(navId)
+
+    if(toggle && nav){
+        toggle.addEventListener('click', ()=>{
+            nav.classList.toggle('show')
+        })
+    }
+}
+showMenu('nav-toggle','nav-menu')
+
+
+const sizes = document.querySelectorAll('.size__tallas');
+const colors = document.querySelectorAll('.sneaker__color');
+const sneaker = document.querySelectorAll('.sneaker__img');
+
+function changeSize(){
+    sizes.forEach(size => size.classList.remove('active'));
+    this.classList.add('active');
+}
+
+function changeColor(){
+    let primary = this.getAttribute('primary');
+    let color = this.getAttribute('color');
+    let sneakerColor = document.querySelector(`.sneaker__img[color="${color}"]`);
+
+    colors.forEach(c => c.classList.remove('active'));
+    this.classList.add('active');
+
+    document.documentElement.style.setProperty('--primary', primary);
+
+    sneaker.forEach(s => s.classList.remove('shows'));
+    sneakerColor.classList.add('shows')
+}
+
+sizes.forEach(size => size.addEventListener('click', changeSize));
+colors.forEach(c => c.addEventListener('click', changeColor));

100_projects/78-product-card/assets/scss/styles.scss

@@ -0,0 +1,403 @@
+/*===== GOOGLE FONTS =====*/
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
+
+/*===== VARIABLES CSS =====*/
+:root{
+    --header-height: 3.5rem;
+
+    /*===== Colors =====*/
+    --first-color: #A29596;
+    --primary: #A29596;
+    --second-color: #33303D;
+    --black-color: #111111;
+    --white-color: #FFF;
+
+    /*===== Font and typography =====*/
+    --body-font: 'Roboto', sans-serif;
+    
+    --biggest-font-size: 1.5rem;
+    --big-font-size: 1.5rem;
+    --normal-font-size: .938rem;
+    --smaller-font-size: .75rem;
+
+    // Responsive typography
+    @media screen and (min-width: 968px){
+        --biggest-font-size: 3.25rem;
+        --big-font-size: 2.25rem;
+        --normal-font-size: 1rem;
+        --smaller-font-size: .813rem;
+    }
+
+    /*========== Font weight ==========*/
+    --font-medium: 500;
+    --font-bold: 700;
+
+    /*===== z index =====*/
+    --z-fixed: 100;
+    --z-modal: 1000;
+}
+
+/*===== BASE =====*/
+*,::before,::after{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body{
+    font-family: var(--body-font);
+    background-color: var(--white-color);
+    color: var(--black-color);
+}
+h1,h2,h3,p{
+    margin: 0;  
+}
+ul{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}
+/*===== LAYOUT =====*/
+.grid{
+    max-width: 1200px;
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+.header{
+    width: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-fixed);
+    background-color: var(--white-color);
+}
+/*===== HEADER & NAV =====*/
+.nav{
+    height: var(--header-height);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__menu{
+        @media screen and(max-width: 968px){
+            position: fixed;
+            left: -100%;
+            top: var(--header-height);
+            background-color: var(--white-color);
+            width: 80%;
+            height: 100%;
+            padding: 2rem;
+            z-index: var(--z-fixed);
+            transition: .3s;
+        }
+    }
+    &__list{
+        display: flex;
+        flex-direction: column;
+        row-gap: 2rem;
+    }
+    &__item{
+        font-weight: var(--font-bold);
+    }
+    &__link{
+        color: var(--black-color);
+    }
+    &__toggle{
+        cursor: pointer;
+    }
+}
+/* Show menu */
+.show{
+    left: 0;
+}
+
+/*===== HOME =====*/
+.home{
+    height: 100vh;
+    display: grid;
+    row-gap: 3.5rem;
+    grid-template-rows: repeat(2, max-content);
+    overflow: hidden;
+}
+/*===== Sneaker =====*/
+.sneaker{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 6rem;
+    position: relative;
+
+    &__figure{
+        width: 240px;
+        height: 240px;
+        background-color: var(--primary);
+        border-radius: 50%;
+        transition: .5s;
+    }
+    &__img{
+        width: 313px;
+        position: absolute;
+        top: 16%;
+        left: 9%;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        transform: rotate(30deg);
+        opacity: 0;
+        filter: drop-shadow(0px 10px 10px rgba(17, 17, 17, 0.4));
+
+        &.shows{
+            opacity: 1;
+        }
+    }
+    &__colors{
+        position: absolute;
+        right: 2%;
+    }
+    &__color{
+        display: block;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        margin-bottom: .5rem;
+        cursor: pointer;
+        
+        &.active{
+            border: 2px solid var(--white-color);
+            box-shadow: 0 0 2px rgba(0, 0, 0, 1);
+        }
+    }
+    &__colors-one{
+        background-color: var(--first-color);
+    }
+    &__colors-two{
+        background-color: var(--black-color);
+    }
+}
+/*===== Data =====*/
+.data{
+    margin-bottom: 1.5rem;
+
+    &__subtitle{
+        font-size: var(--normal-font-size);
+        font-weight: var(--font-medium);
+    }
+    &__title{
+        font-size: var(--biggest-font-size);
+        margin-bottom: .5rem;
+    }
+    &__description{
+        font-size: var(--normal-font-size);
+    }
+}
+.actions{
+    display: flex;
+    justify-content: space-between;
+}
+/*===== Size =====*/
+.size{
+    &__title{
+        font-size: var(--normal-font-size);
+        margin-bottom: 1rem;
+    }
+    &__content{
+        display: flex;
+    }
+    &__tallas{
+        width: 30px;
+        height: 30px;
+        margin-right: .5rem;
+        font-size: var(--smaller-font-size);
+        text-align: center;
+        line-height: 30px;
+        border-radius: .25rem;
+        cursor: pointer;
+    }
+    &__tallas.active{
+        background-color: var(--primary);
+        color: var(--white-color);
+    }
+}
+/*===== Qty =====*/
+.quantity{
+    &__title{
+        font-size: var(--normal-font-size);
+        margin-bottom: 1rem;
+    }
+    &__content{
+        width: 100px;
+        height: 30px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: var(--primary);
+        color: var(--white-color);
+        padding: .5rem;
+        border-radius: .25rem;
+    }
+}
+/*===== Price =====*/
+.price{
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    padding: 1rem 0;
+    background-color: var(--white-color);
+    border-radius: 1.5rem 1.5rem 0 0;
+    box-shadow: 0px 0px 20px rgba(17, 17, 17, 0.25);
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    &__title{
+        font-size: var(--big-font-size);
+        color: var(--black-color);
+    }
+    &__button{
+        background-color: var(--primary);
+        color: var(--white-color);
+        padding: 1.25rem 3.125rem;
+        border-radius: .5rem;
+        transition: box-shadow .4s;
+    }
+}
+/*===== BREAKPOINTS =====*/
+/* For small devices */
+@media screen and (max-width: 320px){
+    .home{
+        row-gap: 1.5rem;
+    }
+    .sneaker{
+        &__figure{
+            width: 210px;
+            height: 210px;
+        }
+        & img{
+            width: 230px;
+        }
+        &__colors{
+            right: 1%;
+        }
+    }
+
+    .price{
+        &__title{
+            font-size: var(--normal-font-size);
+        }
+        &__button{
+            padding: 1.25rem 2rem;
+        }
+    }
+
+}
+
+/* For medium devices */
+@media screen and (min-width: 480px){
+    .data__description{
+        width: 350px;
+    }
+}
+
+@media screen and (min-width: 768px){
+    .home{
+        grid-template-columns: repeat(2, max-content);
+        align-content: center;
+        justify-content: center;
+        column-gap: 6rem;
+        row-gap: 0;
+    }
+
+    .sneaker{
+        margin-top: 0;
+
+        &__colors{
+            right: -10%;
+        }
+        &__img{
+            left: -6%;
+        }
+    }
+
+    .actions{
+        margin-bottom: 3rem;
+    }
+
+    .price{
+        position: initial;
+        background-color: initial;
+        justify-content: space-between;
+        box-shadow: none;
+        padding: 0;
+
+        &__title{
+            color: var(--black-color);
+            font-weight: var(--font-medium);
+        }
+    }
+
+}
+
+/* For large devices */
+@media screen and(min-width: 968px){
+    .nav{
+        height: calc(var(--header-height) + 1.5rem);
+
+        &__list{
+            flex-direction: row;
+            column-gap: 3rem;
+        }
+        &__toggle{
+            display: none;
+        }
+    }
+
+    .sneaker{
+        margin: 0;
+
+        &__figure{
+            width: 430px;
+            height: 430px;
+        }
+        &__img{
+            width: 550px;
+            top: 13%;
+        }
+        &__colors{
+            right: initial;
+            bottom: -3rem;
+
+            & span{
+                display: inline-block;
+            }
+        }
+    }
+    .info{
+        align-self: center;
+    }
+    .data{
+        margin-bottom: 2.5rem;
+
+        &__subtitle{
+            font-size: 1.5rem;
+        }
+        &__title{
+            margin-bottom: 1rem;
+        }
+    }
+    .size__tallas{
+        width: 34px;
+        height: 34px;
+        line-height: 35px;
+    }
+}
+
+
+@media screen and (min-width: 1200px){
+    .grid{
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

100_projects/78-product-card/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="assets/css/styles.css">
+        <title>document</title>
+    </head>
+    <body>
+        <header class="header">
+            <nav class="nav grid">
+                <div class="nav__toggle" id="nav-toggle">
+                    <img src="assets/icons/icon-menu.svg" alt="">
+                </div>
+                <div>
+                    <a class="nav__logo"><img src="assets/icons/nike-logo.svg" alt=""></a>
+                </div>
+                <div class="nav__menu" id="nav-menu">
+                    <ul class="nav__list">
+                        <li class="nav__item"><a href="" class="nav__link">MEN</a></li>
+                        <li class="nav__item"><a href="" class="nav__link">WOMEN</a></li>
+                        <li class="nav__item"><a href="" class="nav__link">KIDS</a></li>
+                        <li class="nav__item"><a href="" class="nav__link">CUSTOMIZE</a></li>
+                        <li class="nav__item"><a href="" class="nav__link">SALE</a></li>
+                    </ul>
+                </div>
+                <div class="nav__shop">
+                    <img src="assets/icons/shopping-bag.svg" alt="">
+                </div>
+            </nav>
+        </header>
+        <main class="main grid">
+            <div class="home">
+                <div class="sneaker">
+                    <div class="sneaker__figure">
+                    </div>
+                    <div>
+                        <img src="assets/img/NikeAirMaxMotion2.png" alt="" class="sneaker__img shows" color="#A29596">
+                        <img src="assets/img/NikeAirMax Motion2black.png" alt="" class="sneaker__img" color="#111111">
+                    </div>
+                    <div class="sneaker__colors">
+                        <span class="sneaker__color sneaker__colors-one active" primary="#A29596" color="#A29596"></span>
+                        <span class="sneaker__color sneaker__colors-two " primary="#111111" color="#111111"></span>
+                    </div>
+                </div>
+                <div class="info">
+                    <div class="data">
+                        <span class="data__subtitle">Nike</span>
+                        <h1 class="data__title">Air Max Motion 2</h1>
+                        <p class="data__description">They combine breathable mesh without seams for a traditional style.</p>
+                    </div>
+                    <div class="actions">
+                        <div class="size">
+                            <h3 class="size__title">Sizes</h3>
+                            <div class="size__content">
+                                <span class="size__tallas active">
+                                    8.5
+                                </span>
+                                <span class="size__tallas">
+                                    9
+                                </span>
+                                <span class="size__tallas">
+                                    9.5
+                                </span>
+                            </div>
+                        </div>
+                        <div class="quantity">
+                            <h3 class="quantity__title">Qty.</h3>
+                            <div class="quantity__content"> 
+                                <span>-</span>
+                                <span>1</span>
+                                <span>+</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="price">
+                        <span class="price__title">$99.00</span>
+                        <a href="#" class="price__button">ADD TO CART</a>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <script src="assets/js/main.js"></script>
+    </body>
+</html>