Merge pull request #7 from lewypopescu/lesson9

Lesson9

css/barbers-styles.css

@@ -1,11 +1,21 @@
 .barbers {
   background-color: #f7f7f7;
+  height: 890px; /* height din pagina mare container */
+  padding: 130px 55px; /* marginile la pagina mare */
+}
+
+.barbers-head {
+  margin-top: 20px;
+  margin-bottom: 44px;
 }
 
 .barbers-social-media-list {
   display: flex;
   gap: 10px;
   fill: var(--black-color);
+  margin: auto;
+  width: fit-content;
+  margin: 30px auto 0px auto;
 }
 
 .barbers-social-media-icon {
@@ -23,3 +33,34 @@
 .barbers-social-media-icon:active {
   fill: var(--brand-color);
 }
+
+.barbers-list {
+  display: flex; /* sa puna imaginile una dupa alta */
+  gap: 30px; /* distanta intre imagini cele 3 e de 30px */
+}
+
+.barbers-list-item {
+}
+
+.barbers-list-item-title {
+  /* se refera la numele fiecaruia john smith michele doe si alan */
+  color: var(--black-color);
+  text-align: center;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.36px;
+
+  margin-top: 30px;
+}
+
+.barbers-list-item-description {
+  color: var(--brand-color);
+  text-align: center;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.28px;
+  margin-top: 8px;
+}

css/hero-styles.css

@@ -11,10 +11,46 @@
   justify-content: space-between;
 }
 
+.hero-container {
+  background-color: var(--black-color);
+  /* background-image: url("../images/hero-slider.jpg"); */
+  background-size: cover;
+  color: var(--white-color);
+  flex-grow: 1;
+
+  position: relative;
+}
+
+.hero-carousel {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  overflow: hidden;
+}
+
+.hero-carousel-item {
+  /* clasa specifica pt imagine ca sa o punem in pagina -imaginea hero prima */
+  /* noi vrem sa ajunga imaginea asta ca fundal */
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* ca sa arate bine, joaca-te cu ea sa vezi */
+  display: block; /* pt ca exista un ff mic spatiu intre cele 3 imagini sliders */
+}
+
 .hero-social-media {
   margin-bottom: 40px;
 }
 
+.hero-content-container {
+  position: relative;
+  z-index: 1;
+  padding: 40px 55px 40px 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
 .hero-control-buttons {
   display: flex;
   justify-content: flex-end;
@@ -43,18 +79,6 @@
   margin-bottom: 40px;
 }
 
-.hero-container {
-  background-color: var(--black-color);
-  background-image: url("../images/hero-slider.jpg");
-  background-size: cover;
-  color: var(--white-color);
-  flex-grow: 1;
-  padding: 40px 55px 40px 100px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
 .hero-navbar {
   display: flex;
   align-items: center;

css/style.css

@@ -33,6 +33,19 @@ ul {
 
 /* Classes */
 
+.modal {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  z-index: 10;
+  position: fixed;
+}
+
+.is-hidden {
+  visibility: hidden;
+}
+
 .container {
   width: 1280px;
   margin: auto;
@@ -155,26 +168,6 @@ ul {
   color: var(--white-color);
 }
 
-.why-us-cards {
-  --card-width: 170px;
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: 30px;
-
-  max-width: calc(var(--card-width) * 2 + 30px);
-}
-
-.why-us-card {
-  flex-basis: var(--card-width);
-  height: 133px;
-
-  background-color: #f7f7f7;
-}
-
-.why-us-card-shifted {
-  margin-top: 30px;
-}
-
 .contact-address {
   color: #9da4bd;
   font-size: 18px;

css/why-us-styles.css

@@ -0,0 +1,58 @@
+.why-us {
+  height: 582px; /* dau click pe imaginea mare si imi iau heightul la tot containerul */
+  padding: 130px 155px; /*ma uit la elementele din container sa vad care e cel mai sus/dreapta/jos/stanga */
+  display: flex; /* ca sa mute why us in dreapta patrate */
+  gap: 130px; /* distanta dintre patrate si scrisul din drepata */
+}
+
+.why-us-cards {
+  --card-width: 170px;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 30px;
+
+  max-width: calc(var(--card-width) * 2 + 30px);
+}
+
+.why-us-card {
+  flex-basis: var(--card-width);
+  height: 133px;
+
+  background-color: #f7f7f7;
+
+  padding: 20px 24px; /* in patrat ai 2 containere si dai distantele sus-dreapta-jos la 600 si satisfied customers per day */
+  display: flex; /* pt a pune pe centrul patratul impreuna cu justify content + align */
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.why-us-card-shifted {
+  margin-top: 30px;
+}
+
+.why-us-card-title {
+  /* whyuscardtitle se refera la numerele din cards 600 20 50 100 */
+  color: var(--black-color);
+  text-align: center;
+  font-size: 42px;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 2.1px;
+}
+
+.why-us-card-title > sup {
+  /*  clasa pt acel plus colorat prin > sup il facem direct copil si nu facem clasa separata cu alt nume */
+  color: var(--brand-color);
+  /* TODO make it smaller */
+}
+
+.why-us-card-description {
+  /* clasa aceasta se refera la descrierea de sub numerele 600 20 50 100 din carduri */
+  color: var(--black-color);
+  text-align: center;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}