Skip to content

Commit

Permalink
change newsletter input html structure & restyling
Browse files Browse the repository at this point in the history
  • Loading branch information
@goldipl
goldipl committed Jun 11, 2024
1 parent 84940ca commit 45d5276
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 49 deletions.
17 changes: 9 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -743,14 +743,16 @@ <h2>i zgarnij<span>50 zł rabatu!</span></h2>
</div>
<div class="newsletter-wrapper-content-right">
<form class="newsletter-form">
<input type="email" name="newsletter" id="newsletter-input" class="newsletter-input" placeholder="e-mail" required="">
<button class="newsletter-btn">Zapisz się</button>
<div class="form-input-box">
<input type="email" name="newsletter" id="newsletter-input" class="newsletter-input" placeholder="e-mail" required="">
<button class="newsletter-btn">Zapisz się</button>
</div>
<div class="checkbox">
<label class="custom-checkbox-container newsletter">Akceptuję <a href="">warunki newslettera</a><input type="checkbox" class="custom_input" required="">
<span class="custom-checkbox-checkmark"></span>
</label>
</div>
</form>
<div class="checkbox">
<label class="custom-checkbox-container newsletter">Akceptuję <a href="">warunki newslettera</a><input type="checkbox" class="custom_input" required="">
<span class="custom-checkbox-checkmark"></span>
</label>
</div>
</div>
</div>
</div>
Expand All @@ -761,7 +763,6 @@ <h2>i zgarnij<span>50 zł rabatu!</span></h2>
<div class="footer-wrapper">

</div>

</footer>
<!-- jQuery v1.12.2 -->
<script src="./js/jquery.min.js"></script>
Expand Down
76 changes: 40 additions & 36 deletions sass/home/_newsletter_section.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,48 +72,52 @@
margin-left: 80px;
.newsletter-form {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
input {
all: unset;
width: 373px;
height: 60px;
box-sizing: border-box;
background-color: $white;
font-size: 17px;
font-weight: 400;
line-height: 18px;
text-align: left;
color: $grey01;
padding: 0 22px;
border-radius: 7px;
margin-right: 10px;
&::placeholder {
flex-direction: column;
.form-input-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
input {
all: unset;
width: 373px;
height: 60px;
box-sizing: border-box;
background-color: $white;
font-size: 17px;
font-weight: 400;
line-height: 18px;
text-align: left;
color: $grey01;
padding: 0 22px;
border-radius: 7px;
margin-right: 10px;
&::placeholder {
font-size: 17px;
font-weight: 400;
line-height: 18px;
text-align: left;
color: $grey01;
}
}
button {
all: unset;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 131px;
height: 60px;
box-sizing: border-box;
border-radius: 7px;
background-color: $furnipol_orange;
color: $white;
font-size: 17px;
font-weight: 700;
line-height: 18px;
text-align: left;
cursor: pointer;
}
}
button {
all: unset;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 131px;
height: 60px;
box-sizing: border-box;
border-radius: 7px;
background-color: $furnipol_orange;
color: $white;
font-size: 17px;
font-weight: 700;
line-height: 18px;
text-align: left;
cursor: pointer;
}
}
.checkbox {
Expand Down
12 changes: 8 additions & 4 deletions sass/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1018,12 +1018,16 @@ body {
margin-left: 80px;
}
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form {
display: flex;
flex-direction: column;
}
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form .form-input-box {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form input {
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form .form-input-box input {
all: unset;
width: 373px;
height: 60px;
Expand All @@ -1038,21 +1042,21 @@ body {
border-radius: 7px;
margin-right: 10px;
}
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form input::-moz-placeholder {
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form .form-input-box input::-moz-placeholder {
font-size: 17px;
font-weight: 400;
line-height: 18px;
text-align: left;
color: #25262b;
}
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form input::placeholder {
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form .form-input-box input::placeholder {
font-size: 17px;
font-weight: 400;
line-height: 18px;
text-align: left;
color: #25262b;
}
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form button {
.main-2-0 #newsletter-section .newsletter-wrapper-content-right .newsletter-form .form-input-box button {
all: unset;
display: flex;
flex-direction: row;
Expand Down
Loading

0 comments on commit 45d5276

Please sign in to comment.