Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/ElizabethBil/project-13
Browse files Browse the repository at this point in the history
  • Loading branch information
@ElizabethBil
ElizabethBil committed Oct 4, 2023
2 parents ecade8f + da3e502 commit ecf8abb
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 29 deletions.
40 changes: 21 additions & 19 deletions src/css/order.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

.your-order-section {
max-width: 100%;
background-image: url('./img/order/order-bkg-mobile.jpg');
background-image: url('/img/order/order-bkg-mobile.jpg');
background-size: 375px 550px;
background-repeat: no-repeat;
background-position-x: center;
Expand All @@ -12,7 +12,7 @@

@media screen and (min-resolution: 192dpi) and (min-width:375px) {
.your-order-section {
background-image: url('./img/order/[email protected]');
background-image: url('/img/order/[email protected]');
}
}

Expand Down Expand Up @@ -48,6 +48,7 @@
letter-spacing: -0.02em;
background-color: transparent;
outline: transparent;
color: #FCF9F9;
border: 1px solid rgba(252, 249, 249, 0.10);
transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
Expand Down Expand Up @@ -80,6 +81,7 @@
background-color: transparent;
outline: transparent;
resize: none;
color: #FCF9F9;
border: 1px solid rgba(252, 249, 249, 0.10);
margin-bottom: 40px;
}
Expand Down Expand Up @@ -135,8 +137,8 @@

@media screen and (min-resolution: 192dpi) and (min-width:768px) {
.your-order-section {
background-image: url('./img/order/[email protected]'),
url('./img/order/[email protected]');
background-image: url('/img/order/[email protected]'),
url('/img/order/[email protected]');
}
}

Expand All @@ -145,8 +147,8 @@

.your-order-section {
max-width: 100%;
background-image: url('./img/order/order-bkg-tablet.jpg'),
url('./img/order/bkg-element-tablet.png');
background-image: url('/img/order/order-bkg-tablet.jpg'),
url('/img/order/bkg-element-tablet.png');
background-size: 768px 776px, 288px 484px;
background-repeat: no-repeat;
background-position-x: center, left;
Expand Down Expand Up @@ -196,6 +198,11 @@
.bkg-ornament-placeholder {
height: 79px;
}

.order-button {
padding: 14px 39px;

}
}


Expand All @@ -205,8 +212,8 @@

@media screen and (min-resolution: 192dpi) and (min-width:1280px) {
.your-order-section {
background-image: url('./img/order/[email protected]'),
url('./img/order/[email protected]');
background-image: url('/img/order/[email protected]'),
url('/img/order/[email protected]');
}
}

Expand All @@ -215,8 +222,8 @@

.your-order-section {
max-width: 100%;
background-image: url('./img/order/order-bkg-desktop.jpg'),
url('./img/order/bkg-element-desktop.png');
background-image: url('/img/order/order-bkg-desktop.jpg'),
url('/img/order/bkg-element-desktop.png');
background-size: 1282px 776px, 288px 484px;
background-repeat: no-repeat;
background-position-x: center, left;
Expand Down Expand Up @@ -261,17 +268,17 @@

@media screen and (min-resolution: 192dpi) and (min-width:1440px) {
.your-order-section {
background-image: url('./img/order/[email protected]'),
url('./img/order/[email protected]');
background-image: url('/img/order/[email protected]'),
url('/img/order/[email protected]');
}
}


@media screen and (min-width: 1440px) {

.your-order-section {
background-image: url('./img/order/order-bkg-desktop-1440.jpg'),
url('./img/order/bkg-element-desktop-1440.png');
background-image: url('/img/order/order-bkg-desktop-1440.jpg'),
url('/img/order/bkg-element-desktop-1440.png');
background-size: 1440px 776px, 323px 484px;
}

Expand All @@ -284,11 +291,6 @@
margin-left: 0;
}

.order-button {
padding: 14px 39px;

}

}


Expand Down
22 changes: 12 additions & 10 deletions src/partials/order.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,27 @@ <h2 class="section-title order-title">
</label>
</div>
<div class="order-section-textarea-wrapper">
<label class="order-form-textarea" for="user-comment"></label>
<textarea class="order-form-coment" name="user-comment" id="user-comment"
placeholder="Comments"></textarea>
<label class="order-form-textarea" for="user-comment">
<textarea class="order-form-coment" name="user-comment" id="user-comment"
placeholder="Comments"></textarea>
</label>

</div>
<button class="order-button" type="submit">
Send
<svg class="order-button-icon" width="26" height="13">
<use href="./img/icons.svg#icon-arrow"></use>
<use href="/img/icons.svg#icon-arrow"></use>
</svg>
</button>
</form>
</div>
<img class="order-content-img" srcset="./img/order/order-img-tablet.jpg 638w,
./img/order/[email protected] 1276w,
./img/order/order-img-desktop.jpg 524w,
./img/order/[email protected] 1048w"
sizes="(min-width: 1440px) 524px, (min-width: 1280px) 524px, (min-width: 768px) 638x"
src="../img/order/order-img-tablet.jpg" alt="girl-wearing-embroidered-shirt">
<img class="order-content-img" srcset="
./img/order/order-img-tablet.jpg 638w,
./img/order/[email protected] 1276w,
./img/order/order-img-desktop.jpg 524w,
./img/order/[email protected] 1048w
" sizes="(min-width: 1280px) 524px, (min-width:768px) 638px" src="./img/order/order-img-tablet.jpg"
alt="girl-wearing-embroidered-shirt">

</div>
<div class="bkg-ornament-placeholder "></div>
Expand Down

0 comments on commit ecf8abb

Please sign in to comment.