Skip to content

Commit

Permalink
Merge pull request #18 from ReshetS/feature/your-order-section
Browse files Browse the repository at this point in the history 
feature/your order section
  • Loading branch information
@ReshetS
ReshetS authored Apr 11, 2024
2 parents 9042e0f + 3c67fc1 commit 785dd5e
Show file tree
Hide file tree
Showing 2 changed files with 365 additions and 2 deletions.
283 changes: 282 additions & 1 deletion src/css/your-order.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1,282 @@
/* Styles for "Your Order" section */
:root {
--text: #141414;
--background: #576f35;
--background-2: #7a3145;
--main-text: #fbfbfb;
--harvest: rgba(251, 251, 251, 0.3);
--font-family: "Inter Tight", sans-serif;
}


.your-order {
padding:80px 0;
}

.your-order-title {
display: block;
font-size: 48px;
line-height: 1.04;
letter-spacing: -0.01em;
text-transform: uppercase;
margin-bottom: 29px;
}

.highlight-text-harvest {
color: var(--harvest);
}

.your-order-text {
font-weight: 500;
line-height: 1.29;
margin-bottom: 40px;
}

.order-block {
border-radius: 30px;
padding: 40px 20px;
background-color: var(--main-text);
}

.order-form-text {
margin-bottom: 40px;
font-size: 24px;
line-height: 1.08;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text);
}

.highlight-text-from-us {
color: var(--background-2);
}

.the-form {
color: var(--background);
}

.order-form {
display: flex;
flex-direction: column;
}

.form-input {
border: 1px solid rgba(77, 61, 61, 0.2);
width: 100%;
border-radius: 30px;
padding-left: 16px;
margin-bottom: 15px;
height: 46px;
}

.form-input:user-valid {
border-color: #3cbc81;
}

.form-input:user-invalid {
border-color: #e74a3b;
}

.form-input:focus , .form-textarea:focus{
outline: none;
border-color: var(--background-2);
}

.form-textarea {
resize: none;
width: 100%;
border: 1px solid rgba(20, 20, 20, 0.2);
border-radius: 15px;
padding-left: 16px;
padding-top: 14px;
height: 91px;
margin-bottom: 20px;
}

.order-form ::placeholder{
font-weight: 500;
line-height: 129%;
letter-spacing: -0.02em;
color: var(--text);
}

.form-submit-btn {
font-weight: 600;
line-height: 1.29;
letter-spacing: -0.01em;
border: none;
text-transform: uppercase;
color: var(--main-text);
border-radius: 30px;
padding:16px 0;
max-width: 100%;
text-align: center;
background: var(--background);
}

.social-media-block {
margin-top: 20px;
border-radius: 30px;
padding: 40px 20px;
background-color: var(--background);
}

.order-block,
.social-media-block{
min-width: 280px;
}

.social-media-image {
max-width: 100%;
border-radius: 15px;
max-height: 273px;
margin-bottom: 20px;
}

.social-media-text {
line-height: 1.29;
letter-spacing: -0.01em;
color: rgba(251, 251, 251, 0.5);
}

.social-media {
margin-top: 14px;
}

.social-media-item{
display: inline-block;
}

.social-media-item:not(:last-child){
margin-bottom: 8px;
}

.social-media-item:not(:last-child):after {
content: "/";
font-size: 24px;
line-height: 1.08;
margin: 0 8px;
}

.social-media-link {
font-size: 24px;
line-height: 1.08;
letter-spacing: -0.01em;
}

@media screen and (min-width:768px){
.your-order {
padding: 100px 0;
}

.your-order-title{
font-size: 64px;
line-height: 1.0;
}

.your-order-text{
line-height: 1.25;
max-width: 640px;
}

.order-block{
margin: 0 auto;
max-width: 628px;
padding: 50px 100px;
}

.order-form-text{
margin-bottom: 50px;
}

.form-input{
height: 52px;;
line-height: 1.25;
}

.order-form::placeholder{
font-weight: 500;
font-size: 16px;
line-height: 1.25;
letter-spacing: -0.02em;
}

.form-textarea{
height: 95px;
margin-bottom: 25px;
}

.form-submit-btn{
font-size: 18px;
line-height: 1.11;
}

.social-media-block{
max-width: 628px;
margin: 0 auto;
margin-top: 25px;
padding: 50px;
}

.social-media-image{
margin-bottom: 50px;
}

.social-media-text{
font-size: 18px;
line-height: 1.11;
}

.social-media{
margin-top: 15px;
}

.social-media-item:not(:last-child):after{
font-size: 32px;
line-height: 1.0;
margin: 0 12px;
}

.social-media-item:not(:last-child) {
margin: 0;
}

.social-media-link{
font-size: 32px;
line-height: 1.0;
}
}

@media screen and (min-width:1280px) {
.order-wrap{
display: flex;
gap: 24px;
}

.order-block{
padding: 50px;
}

.your-order-title{
margin-bottom: 25px;
margin-right: auto;
max-width: 751px;
}

.your-order-text {
margin-right: auto;
margin-bottom: 50px;
max-width: 742px;
}

.social-media-block{
margin-top: 0;
}

.order-block, .social-media-block {
flex-basis: calc((100% - 24px) / 2);
}

.social-media-item:not(:last-child) {
margin-bottom: 12px;
}
}
84 changes: 83 additions & 1 deletion src/partials/your-order.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,85 @@
<section class="your-order" id="your-order">

<div class="container">
<h2 class="your-order-title">
fresh <span class="highlight-text-harvest">harvest</span> box has got you covered
</h2>
<p class="your-order-text">
Our boxes are packed with delicious, nutritious vegetables, perfect for
anyone looking to eat healthier or support local farmers. Order your box
today and start enjoying the best that nature has to offer!
</p>
<div class="order-wrap">
<div class="order-block">
<form class="order-form">
<p class="order-form-text">
Ordering <span class="highlight-text-from-us">from us</span> is quick and easy! Fill
out <span class="the-form">the form</span> below and we will contact
you!
</p>
<input
class="form-input"
type="text"
name="full-name"
required
placeholder="Full Name"
pattern="[A-ZА-Я][a-zа-я]+ [A-ZА-Я][a-zа-я]+$"
title="Please enter your full name, starting with capital letters (e.g., John Doe)."
/>
<input
class="form-input"
type="email"
name="email"
required
pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})"
placeholder="Email"
title="Please enter a valid email address (e.g., [email protected])."
/>
<textarea class="form-textarea" name="comment" placeholder="Comment"></textarea>
<button class="form-submit-btn" type="submit">Send</button>
</form>
</div>
<div class="social-media-block">
<picture>
<source media="(max-width: 767px)"
srcset="./img/womfill-mob-1x-min.jpg 1x,
./img/womfill-mob-2x-min.jpg 2x,
./img/womfill-mob-3x-min.jpg 3x">
<source media="(max-width: 1279px)"
srcset="./img/womfill-tab-1x-min.jpg 1x,
./img/womfill-tab-2x-min.jpg 2x,
./img/womfill-tab-3x-min.jpg 3x">
<source media="(min-width: 1280px)"
srcset="./img/womfill-desc-1x-min.jpg 1x,
./img/womfill-desc-2x-min.jpg 2x,
./img/womfill-desc-3x-min.jpg 3x">
<img src="./img/womfill-tab-1x-min.jpg" class="social-media-image" alt="Woman filling the blender with fruits">
</picture>
<p class="social-media-text">Follow us on our social networks:</p>
<ul class="social-media">
<li class="social-media-item">
<a
class="social-media-link"
target="_blank"
href="https://www.instagram.com/goitclub/"
>instagram</a>
</li>
<li class="social-media-item">
<a
class="social-media-link"
target="_blank"
href="https://www.youtube.com/c/GoIT"
>facebook</a>
</li>
<li class="social-media-item">
<a
class="social-media-link"
target="_blank"
href="https://www.facebook.com/goITclub/"
>youtube</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>

0 comments on commit 785dd5e

Please sign in to comment.