topsellers section v01

src/index.html

@@ -11,5 +11,6 @@
     <h1>Example title</h1>
     <!-- ❗️❗️❗️ Add partials like so for every page -->
     <include src="./partials/example.html"></include>
+    <include src="./partials/topsellers.html"></include>
   </body>
 </html>

src/partials/topsellers.html

@@ -0,0 +1,57 @@
+<div class="topsellers">
+
+    <h1 class="topsellers__title"><span style="color:
+rgba(253, 146, 34, 1) ;">top</span> sellers</h1>
+
+    <ul class="topsellers__list">
+        <li>
+            <img src="/src/images/topsellers/tsimg01.png" alt="chocolate and coffee">
+            <p class="topsellers__text">Crazy enough chocolate originates from a bean just like the coffee bean called
+                Cacao. Cacao has been around for thousands of years and was first discovered by the Native American
+                tribe called the Mayans.
+        </li>
+        <li>
+            <img src="/src/images/topsellers/tsimg02.png" alt="chocolate and mint">
+        </li>
+    </ul>
+    <button data-modal-open class="topsellers__btn" type="button">Buy now</button>
+    </div>
+
+    <!-- Modal section-->
+
+    <div data-modal class="is-hidden">
+        <div data-modal-content>
+            <p></p>
+            <button data-modal-close type="button">x</button>
+            <h1 class="modal-title"><span style="color:rgba(253, 146, 34, 1) ;">buy</span> now</h1>
+            <form name="modal-form" class="modal-form">
+                <label class="modal-form__position">Personal information
+                    <input type="text" name="name" class="modal-form__input" placeholder="Name" />
+
+                    <input type="text" name="surname" class="modal-form__input" placeholder="Surname" />
+                </label>
+                <label class="modal-form__position">Telephone
+                    <input type="number" name="telephone" class="modal-form__input" />
+
+                </label>
+                <label class="modal-form__position">E-mail
+                    <input type="email" name="email" class="modal-form__input" />
+
+                </label>
+                <label class="modal-form__position">Comments
+                    <textarea name="comment" placeholder="Enter the text" class="modal-form__comment"></textarea>
+                </label>
+                <label class="modal-form__position modal-form__checked form-checked">
+                    <input type="checkbox" name="agree" value="agree" class="modal-form__input" />
+                    <span class="replace-checkbox            modal-checkbox__position">
+
+                    </span>
+
+
+                    I agree with the letter and accept the <a href="#" class="condition">Terms and Conditions</a>
+                </label>
+                <button type="submit" class="modal-form__btn">submit</button>
+
+            </form>
+        </div>
+    </div>

src/sass/topsellers.scss

@@ -0,0 +1,271 @@
+/*
+ * topsellers styles
+ */
+
+li {
+   padding-top: 16px;
+}
+
+.topsellers {
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+}
+
+.topsellers__title {
+   margin-top: 72px;
+   margin-bottom: 0px;
+   text-transform: uppercase;
+   text-align: center;
+   font-family: Montserrat;
+   font-size: 20px;
+   font-weight: 600;
+   line-height: 24px;
+   letter-spacing: -0.03em;
+
+}
+
+.topsellers__list {
+   list-style: none;
+   padding: 0px;
+}
+
+.topsellers__text {
+   width: 306px;
+   font-size: 14px;
+   font-weight: 400;
+   line-height: 18px;
+   letter-spacing: -0.02em;
+   text-align: left;
+}
+
+.topsellers__btn {
+   width: 120px;
+   height: 41px;
+   padding: 12px 28px 12px 28px;
+   border-radius: 25px;
+   background: rgba(253, 146, 34, 1);
+   color: #fff;
+   outline: none;
+   border: none;
+   cursor: pointer;
+   font-family: Montserrat;
+   font-size: 14px;
+   font-weight: 600;
+   line-height: 17px;
+
+}
+
+/*
+ * modal styles
+ */
+.is-hidden {
+   opacity: 0;
+   visibility: hidden;
+   pointer-events: none;
+}
+
+[data-modal] {
+   height: 100%;
+   width: 100%;
+   position: fixed;
+   top: 0;
+   left: 0;
+   background-color: rgba(0, 0, 0, 0.5);
+
+}
+
+[data-modal-content] {
+   width: 311px;
+   height: 994px;
+   background-color: rgba(250, 250, 250, 1);
+   border-radius: 15px;
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+   transition-duration: 1s;
+}
+
+[data-modal-close] {
+   position: absolute;
+   top: 10px;
+   right: 8px;
+   width: 24px;
+   height: 24px;
+   background-color: rgba(255, 255, 255, 1);
+   border: none;
+}
+
+[data-modal-close]:hover {
+   cursor: pointer;
+
+}
+
+
+
+.is-hidden [data-modal-content] {
+   transform: translate(-50%, -70%) scale(0.3);
+}
+
+/*form section style */
+
+.modal-title {
+   text-transform: uppercase;
+   color: #2a2a2a;
+   font-family: Roboto;
+   font-size: 20px;
+   font-weight: 700;
+   line-height: 23.44px;
+   letter-spacing: 0.03em;
+   text-align: center;
+   padding-top: 20px;
+   padding-left: 20px;
+   padding-right: 20px;
+
+}
+
+.modal-form {
+   padding: 12px 20px;
+   display: flex;
+   flex-direction: column;
+}
+
+.modal-form__position {
+   padding-top: 4px;
+   margin-bottom: 4px;
+   display: flex;
+   flex-direction: column;
+   font-weight: 400;
+   font-size: 12px;
+   line-height: 14px;
+   letter-spacing: 0.01em;
+   color: rgba(117, 117, 117, 1);
+   gap: 4px;
+   position: relative;
+}
+
+.modal-form__position svg {
+   position: absolute;
+   height: 18px;
+   width: 18px;
+   top: 34px;
+   left: 12px;
+}
+
+.modal-form__position input {
+   padding-left: 18px;
+}
+
+.modal-form__position input:focus+svg,
+.modal-form__position input:hover+svg {
+   fill: var(--light-blue)
+}
+
+.modal-form__input {
+   outline: none;
+   cursor: pointer;
+   height: 40px;
+   border: solid 1px rgba(33, 33, 33, 0.2);
+   border-radius: 4px;
+   padding-left: 14px;
+}
+
+.modal-form__comment {
+   outline: none;
+   cursor: pointer;
+   margin-top: 4px;
+   height: 120px;
+   border: solid 1px rgba(33, 33, 33, 0.2);
+   border-radius: 4px;
+   padding-left: 16px;
+   padding-top: 14px;
+}
+
+.modal-form__checked {
+   display: flex;
+   flex-direction: row;
+   align-items: center;
+   font-size: 14px;
+   font-weight: 400;
+   line-height: 24px;
+   letter-spacing: 0.03em;
+   gap: 7px;
+   padding-left: 14px;
+   margin-bottom: 20px;
+}
+
+.condition {
+   text-decoration: underline;
+   color: var(--light-blue);
+   padding-left: 5px;
+}
+
+.modal-form__input[type="checkbox"] {
+   display: none;
+}
+
+.modal-form__input[type="checkbox"]:checked+.replace-checkbox {
+   background-color: var(--light-blue);
+   border-color: var(--light-blue);
+}
+
+.modal-checkbox__position {
+   position: relative;
+   width: 17px;
+   height: 15px;
+   border: 2px solid var(--black);
+   border-radius: 2px;
+}
+
+.modal-checkbox__position svg {
+   position: absolute;
+   top: -4px;
+   left: -2px;
+   display: none;
+   fill: var(--white)
+}
+
+.modal-form__input[type="checkbox"]:checked+.modal-checkbox__position svg {
+   display: block;
+}
+
+.modal-form__btn {
+   text-transform: capitalize;
+   cursor: pointer;
+   width: 109px;
+   height: 41px;
+   background-color: rgba(253, 146, 34, 1);
+   border-radius: 25px;
+   outline: none;
+   border: none;
+   color: var(--white);
+   font-size: 14px;
+   text-align: center;
+   line-height: 17px;
+   margin: 0px auto;
+}
+
+.modal-form__btn:hover {
+   box-shadow:
+      1px 4px 6px 0px #00000029,
+      0px 4px 4px 0px #0000000F,
+      0px 1px 1px 0px #0000001F;
+   transition-property: color, background-color, transform;
+   transition-duration: 250ms;
+   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.modal-form__input:hover,
+.modal-form__comment:hover,
+.modal-form__input:focus,
+.modal-form__comment:focus {
+   border-color: var(--light-blue);
+   box-shadow:
+      1px 4px 6px 0px #00000029,
+      0px 4px 4px 0px #0000000F,
+      0px 1px 1px 0px #0000001F;
+   transition-property: color, background-color, transform;
+   transition-duration: 250ms;
+   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}