Styling

Styling on desktop and mobile. Work with grid system.
naskriK · Dec 28, 2023 · d786fc4 · d786fc4
1 parent 180c7f1
commit d786fc4
Showing 1 changed file with 256 additions and 0 deletions.
diff --git a/src/style/style.css b/src/style/style.css
@@ -54,4 +54,260 @@
 
 body {
   font-family: var(--primary-ff);
+  overflow-x: hidden;
+}
+
+.content {
+  position: relative;
+  min-height: 100vh;
+  background-image: url("./../assets/bg-main-desktop.png");
+  background-position: right top -250px;
+}
+
+.wrapper {
+  --width: 75.25rem;
+  max-width: var(--width);
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.hero {
+  --width: 55rem;
+  max-width: var(--width);
+}
+
+.header {
+  padding: 3rem 0;
+  color: var(--color-general);
+}
+
+.heading__primary {
+  font-size: 5rem;
+  line-height: 1.05;
+  margin-bottom: 2rem;
+}
+
+.description {
+  line-height: 1.7;
+  font-size: 1.2rem;
+}
+
+.order {
+  --radius: 16px;
+  margin: 256px 0 192px;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  border-radius: var(--radius);
+  background-color: var(--color-general);
+  background-image: url("./../assets/bg-pattern-2.svg");
+  background-repeat: no-repeat;
+  background-position: center top;
+}
+
+.order__image {
+  width: 100%;
+  transform: translateY(-150px);
+  grid-column: 2/4;
+}
+
+.order__card {
+  height: fit-content;
+  grid-column: 5/8;
+  transform: translateY(150px);
+  background-color: var(--color-card-background);
+  border-radius: var(--radius);
+  padding: 2rem;
+  color: var(--color-neutral);
+}
+
+.order__title {
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+}
+
+.order__description {
+  line-height: 1.7;
+  margin-bottom: 2rem;
+}
+
+.order__price-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+}
+
+.order__price {
+  font-size: 4rem;
+}
+
+.order__per {
+  padding-top: 1.5rem;
+  align-self: flex-start;
+}
+
+.order__actions {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.btn {
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  font-family: inherit;
+  padding: 1rem 1.5rem;
+
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  align-items: center;
+
+  font-weight: 600;
+  transition: 0.3s;
+}
+
+.footer {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  padding-bottom: 5rem;
+}
+
+.footer .logo {
+  width: fit-content;
+  align-self: flex-start;
+}
+
+.footer__links {
+  justify-self: flex-end;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  list-style-type: none;
+  gap: 1rem;
+}
+
+.footer__content {
+  color: var(--color-general);
+  line-height: 1.7;
+}
+
+.footer__mail:link,
+.footer__mail:visited {
+  font-weight: 600;
+  text-decoration: none;
+  color: inherit;
+}
+
+.btn--ios {
+  background-color: var(--color-general);
+  color: var(--color-neutral);
+  border-radius: var(--radius);
+}
+
+.btn--ios:hover {
+  background-color: var(--color-primary);
+}
+
+.btn--android {
+  background-color: var(--color-neutral);
+  color: var(--color-general);
+  border-radius: var(--radius);
+}
+
+.btn--android:hover {
+  background-color: var(--color-secondary);
+}
+
+.logo:link,
+.logo:visited {
+  display: inline-block;
+  text-decoration: none;
+}
+
+.decoration {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  right: 0;
+}
+
+@media (max-width: 75rem) {
+  .hero {
+    --width: 40rem;
+  }
+
+  .decoration {
+    top: -5rem;
+    right: -5rem;
+  }
+}
+
+@media (max-width: 55rem) {
+  .decoration {
+    display: none;
+  }
+
+  .order {
+    grid-template-rows: 1fr;
+  }
+
+  .order__image {
+    grid-column: 2/5;
+    grid-row: 1;
+  }
+
+  .order__card {
+    grid-column: 4/8;
+    grid-row: 1;
+  }
+
+  .footer {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+  }
+
+  .footer__content {
+    grid-column: 1/2;
+    grid-row: 2;
+  }
+
+  .footer__links {
+    grid-row: 1/-1;
+  }
+}
+
+@media (max-width: 38rem) {
+  .heading__primary {
+    font-size: 3rem;
+  }
+
+  .order {
+    margin-top: 128px;
+    margin-bottom: 0;
+  }
+
+  .order__image {
+    grid-column: 3/7;
+    transform: translateY(-50px);
+  }
+
+  .order__card {
+    grid-column: 1/-1;
+    transform: translateY(0);
+    grid-row: 2/-1;
+    align-self: flex-end;
+  }
+
+  .footer {
+    margin-top: 48px;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .footer__links {
+    grid-row: auto;
+    justify-self: flex-start;
+  }
 }