Skip to content

Commit

Permalink
Merge pull request #19 from ReshetS/bugfix/your-order-section
Browse files Browse the repository at this point in the history 
image tint added
  • Loading branch information
@ReshetS
ReshetS authored Apr 13, 2024
2 parents 529cd46 + 2666f49 commit ae4b2eb
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 71 deletions.
16 changes: 16 additions & 0 deletions src/css/your-order.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,22 @@
margin-bottom: 20px;
}

.image-wrap{
position: relative;
}

.image-wrap::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(20, 20, 20, 0.3);
border-radius: 15px;
pointer-events: none;
}

.social-media-text {
line-height: 1.29;
letter-spacing: -0.01em;
Expand Down
168 changes: 97 additions & 71 deletions src/partials/your-order.html
View file
Original file line number Diff line number Diff line change
@@ -1,84 +1,110 @@
<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
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])."
<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">
<div class="image-wrap">
<picture class="adaptive-image">
<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"
/>
<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>
</picture>
</div>
<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>
Expand Down

0 comments on commit ae4b2eb

Please sign in to comment.