one page

olgatenison · Oct 12, 2023 · f56942e · f56942e
1 parent fc9fd28
commit f56942e
Show file tree

Hide file tree

Showing 2 changed files with 140 additions and 30 deletions.
diff --git a/css/history.css b/css/history.css
@@ -15,12 +15,12 @@
 .about01 {
 }
 .about01__left {
-  border-right: solid #a0761a 2px;
 }
 .about01__img {
 }
 .about01__right {
   padding: 40px;
+  border-left: solid #a0761a 2px;
 }
 .history__subtitle {
   font-family: "Marcellus SC", serif;
@@ -42,7 +42,9 @@
   text-align: center;
 }
 /* _________________________ */
-
+.about02__img03 {
+  display: none;
+}
 .history__subtitle02 {
   padding: 60px;
   text-align: center;
@@ -175,33 +177,133 @@
     top: 5px;
   }
 }
-@media screen and (max-width: 767px) {
-  .navigation__link {
+@media screen and (max-width: 895px) {
+  .history__about02 {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    border-top: solid #a0761a 2px;
+    border-bottom: solid #a0761a 2px;
+  }
+  .about02__left {
+    grid-column-start: 1;
+    grid-column-end: 5;
+    display: flex;
+    flex-direction: row;
+    padding-right: 0;
+    justify-content: center;
+    align-items: center;
+    border-bottom: solid #a0761a 2px;
+  }
+  .about02__img01 {
+    width: 250px;
+    height: 223px;
+  }
+  .about02_01 {
+    margin-right: 30px;
+    padding-right: 30px;
+    padding-bottom: 30px;
+    border-right: solid #a0761a 2px;
+  }
+  .about02__center {
+    grid-column-start: 3;
+    grid-column-end: 5;
+    grid-row-start: 2;
+    grid-row-end: 3;
+    border-left: 0;
+    padding: 0;
+  }
+
+  .about02__right {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    grid-row-start: 2;
+    grid-row-end: 4;
+    border-right: solid #a0761a 2px;
+    border-left: 0;
+    padding: 0;
+    margin-right: 30px;
+  }
+  .about02__img02 {
+    width: 260px;
+    padding-top: 60px;
+    padding-left: 30px;
+  }
+}
+@media screen and (max-width: 620px) {
+  .history__about01 {
+    display: flex;
+    flex-direction: column;
+  }
+  .about02__right {
     display: none;
   }
-  .title {
-    font-size: 34px;
-    line-height: 1.3;
-    letter-spacing: 1px;
+  .about01__right {
+    border-left: solid #a0761a 0px;
   }
-  .container {
-    margin: 0 auto;
-    padding: 0px 25px;
+  .about01__img {
+    padding-top: 20px;
+  }
+  .about02__center {
+    display: block;
+
+    max-width: 100%;
+    align-items: center;
+  }
+  .history__about02 {
+    display: flex;
+    flex-direction: column;
+  }
+  .about01__img {
     width: 100%;
   }
 }
-
-@media screen and (max-width: 380px) {
-  .container {
-    margin: 0 auto;
-    padding: 0px 15px;
+@media screen and (max-width: 500px) {
+  .about02__left {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    justify-content: center;
+  }
+  .about02_01 {
+    border-right: solid #a0761a 0px;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 30px;
+  }
+  .about02__img03 {
+    display: block;
     width: 100%;
+    margin: 0 auto;
+    padding-top: 20px;
+  }
+}
+@media screen and (max-width: 380px) {
+  .about01_subtitle,
+  .history__title {
+    font-size: 22px;
   }
-  .logo {
+  .history__title,
+  .history__subtitle02 {
+    font-size: 22px;
+    margin-top: 20px;
+    margin-bottom: 40px;
+    padding: 0;
+    text-align: left;
+  }
+  .about01__text {
     font-size: 14px;
-    max-width: 50px;
   }
-  .navigation__btn {
-    margin-left: 10px;
+  .about01__right {
+    padding: 10px;
+    padding-bottom: 20px;
+  }
+  .about02_subtitle {
+    padding-bottom: 30px;
+    font-size: 22px;
+  }
+  .about02__text02 {
+    padding: 0;
+    padding-top: 30px;
   }
 }
diff --git a/history.html b/history.html
@@ -97,16 +97,18 @@ <h2 class="history__subtitle02 subtitle">
             </h2>
             <div class="history__about02 about02">
               <div class="about02__left">
-                <h3 class="about02_subtitle subtitle">
-                  Welcome to Loretta's Choco
-                </h3>
-                <p class="about02__text01">
-                  Inspired by the beauty of Switzerland, we craft each chocolate
-                  delicacy with precision, dedication, and an unwavering
-                  commitment to quality. Our chocolates are more than just sweet
-                  treats; they are a reflection of the Swiss heritage and the
-                  natural wonders that surround us.
-                </p>
+                <div class="about02_01">
+                  <h3 class="about02_subtitle subtitle">
+                    Welcome to Loretta's Choco
+                  </h3>
+                  <p class="about02__text01">
+                    Inspired by the beauty of Switzerland, we craft each
+                    chocolate delicacy with precision, dedication, and an
+                    unwavering commitment to quality. Our chocolates are more
+                    than just sweet treats; they are a reflection of the Swiss
+                    heritage and the natural wonders that surround us.
+                  </p>
+                </div>
                 <img
                   class="about02__img01"
                   alt="swees"
@@ -115,6 +117,12 @@ <h3 class="about02_subtitle subtitle">
                 />
               </div>
               <div class="about02__center">
+                <img
+                  class="about02__img03"
+                  alt="swees"
+                  src="./images/history/onemaffin.png"
+                  width="300px"
+                />
                 <p class="about02__text02">
                   Imagine biting into a piece of chocolate that transports you
                   to the Swiss Alps – the crispness of air, the sweetness of