Skip to content

Commit

Permalink
Merge pull request #21 from MarcoPolo236/About-and-Advantages
Browse files Browse the repository at this point in the history 
Media queries 768px & 1200px
  • Loading branch information
@MarcoPolo236
MarcoPolo236 authored Sep 3, 2024
2 parents 5b8d075 + b0bd92c commit 86fac3d
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 94 deletions.
134 changes: 68 additions & 66 deletions src/partials/about.html
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,38 @@
<!-- Tradition and Love section -->
<section class="about-container">
<div class="about-container-box">
<div class="about-title">
<h2 class="tradition">TRADITION AND LOVE</h2>
<h1 class="how-is-title">HOW IT'S MADE?</h1>
</div>
<div class="content-box">
<div class="images">
<img
class="cow-image"
src="./images/Cow-image.png"
alt="Cow eating grass"
width="279"
/>
<div class="about-title">
<h2 class="tradition">TRADITION AND LOVE</h2>
<h1 class="how-is-title">HOW IT'S MADE?</h1>
</div>
<div>
<p class="first-paragraph">
Ice is a place where you will become not only a little happier, but also
healthier. Health is the main value for us, and we follow it when
creating our handmade desserts.
</p>
<p class="second-paragraph">
We use traditional recipes and 100% natural ingredients. Our products
are so natural that they can be given to children from the age of three
years. Sweets lovers can expect 55 types of ice cream, 15 types of
coffee and 23 milkshakes.
</p>
<p class="second-paragraph">
This is enough to choose ice cream and coffee for any mood!
</p>
<div class="content-box">
<div class="images">
<img
class="cow-image"
src="./images/Cow-image.png"
alt="Cow eating grass"
width="279"
/>
</div>

<div class="all-paragraphs">
<p class="first-paragraph">
Ice is a place where you will become not only a little happier, but
also healthier. Health is the main value for us, and we follow it when
creating our handmade desserts.
</p>
<p class="second-paragraph">
We use traditional recipes and 100% natural ingredients. Our products
are so natural that they can be given to children from the age of
three years. Sweets lovers can expect 55 types of ice cream, 15 types
of coffee and 23 milkshakes.
</p>
<p class="second-paragraph">
This is enough to choose ice cream and coffee for any mood!
</p>
</div>
</div>

<div class="read-btn-container">
<button class="read-more-btn">
Read more
Expand All @@ -38,45 +41,44 @@ <h1 class="how-is-title">HOW IT'S MADE?</h1>
</svg>
</button>
</div>
<div>
<ul class="advantages-list">
<li class="advantages-icon-list">
<div>
<svg class="advantages-svg" width="36" height="36">
<use href="./images/cow-weight-icecream.svg#icon-cow" />
</svg>
<h2 class="advantages-title">721</h2>
<p class="advantages-paragraph">
Aliquam ac dui vel dui vulputate consectetur. Mauris massa.
</p>
</div>
</li>
<li class="advantages-icon-list">
<div>
<svg class="advantages-svg" width="36" height="36">
<use href="./images/cow-weight-icecream.svg#icon-weight" />
</svg>
<h2 class="advantages-title">16KG</h2>
<p class="advantages-paragraph">
Aliquam ac dui vel dui vulputate consectetur. Mauris massa.
</p>
</div>
</li>
<li class="advantages-icon-list">
<div>
<svg class="advantages-svg" width="36" height="36">
<use href="./images/cow-weight-icecream.svg#icon-ice-cream" />
</svg>
<h2 class="advantages-title">84</h2>
<p class="advantages-paragraph">
Aliquam ac dui vel dui vulputate consectetur. Mauris massa.
</p>
</div>
</li>
</ul>
</div>
</div>
<div>
<ul class="advantages-list">
<li class="advantages-icon-list">
<div>
<svg class="advantages-svg" width="36" height="36">
<use href="./images/cow-weight-icecream.svg#icon-cow" />
</svg>
<h2 class="advantages-title">721</h2>
<p class="advantages-paragraph">
Aliquam ac dui vel dui vulputate consectetur. Mauris massa.
</p>
</div>
</li>
<li class="advantages-icon-list">
<div>
<svg class="advantages-svg" width="36" height="36">
<use href="./images/cow-weight-icecream.svg#icon-weight" />
</svg>
<h2 class="advantages-title">16KG</h2>
<p class="advantages-paragraph">
Aliquam ac dui vel dui vulputate consectetur. Mauris massa.
</p>
</div>
</li>
<li class="advantages-icon-list">
<div>
<svg class="advantages-svg" width="36" height="36">
<use href="./images/cow-weight-icecream.svg#icon-ice-cream" />
</svg>
<h2 class="advantages-title">84</h2>
<p class="advantages-paragraph">
Aliquam ac dui vel dui vulputate consectetur. Mauris massa.
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="modal-backdrop">
<div class="modal-box">
<button type="button" class="close-modal-box">
Expand All @@ -97,4 +99,4 @@ <h2 class="modal-title">How it's made?</h2>
</p>
</div>
</div>
</section>
</section>
57 changes: 29 additions & 28 deletions src/sass/_about.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ section.about-container {

.advantages-list {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
margin: 50px 0 68px 0;
gap: 16px;
Expand Down Expand Up @@ -164,6 +164,10 @@ section.about-container {
font-weight: 400;
line-height: 20.4px;
text-align: center;
position: relative;
margin-bottom: 50px;
margin-left: 45px;
margin-right: 45px;
}

.about-container {
Expand Down Expand Up @@ -218,10 +222,10 @@ section.about-container {
text-align: center;
}

.modal-backdrop {
visibility: hidden;
opacity: 0;
}
.modal-backdrop {
visibility: hidden;
opacity: 0;
}

.modal-backdrop.is-open {
visibility: visible;
Expand Down Expand Up @@ -291,14 +295,12 @@ section.about-container {

.advantages-paragraph {
text-align: center;
margin: auto 80px;
margin: auto 125px;
}

.read-btn-container {
padding-left: 28px;
}


}

@media (min-width: 768px) {
Expand All @@ -310,10 +312,14 @@ section.about-container {
.content-box {
display: flex;
justify-content: space-between;
flex-direction: column;
flex-direction: row;
align-items: center;
margin-left: 38px;
}

.cow-image {
margin-right: 32px;
}
.tradition {
font-size: 22px;
font-weight: 800;
Expand Down Expand Up @@ -388,6 +394,11 @@ section.about-container {
font-weight: 400;
line-height: 24.36px;
text-align: center;
margin: auto 70px;
}

.read-btn-container {
margin-left: 36px;
}

.close-modal-svg {
Expand Down Expand Up @@ -417,6 +428,13 @@ section.about-container {
}

@media (min-width: 1200px) {
.content-box {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 109px;
}

.tradition {
font-size: 22px;
font-weight: 800;
Expand All @@ -433,13 +451,6 @@ section.about-container {
text-align: center;
}

.content-box {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
}

.all-paragraphs {
margin-top: 135px;
margin-right: 121px;
Expand Down Expand Up @@ -475,16 +486,6 @@ section.about-container {
line-height: 28.16px;
letter-spacing: 0.02em;
text-align: center;
margin: auto 16px;
}

}

// .modal-backdrop {
// visibility: hidden;
// opacity: 0;
// }

// .modal-backdrop.is-open {
// visibility: visible;
// opacity: 1;
// }
}

0 comments on commit 86fac3d

Please sign in to comment.