Skip to content

Commit 3f9822a

Browse files
Wagner3UBWagner3UB
committed
Formulario refeito com adição de uma lista para melhor posicionamento dos alerts; sessão da direita implementada com validação dos cupons
1 parent 3d15c29 commit 3f9822a

4 files changed

Lines changed: 197 additions & 81 deletions

File tree

‎css/style.css‎

Lines changed: 123 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -536,6 +536,7 @@ main.product .right-column select{
536536
main.p-details{
537537
position: relative;
538538
overflow: hidden;
539+
height: 100vh;
539540
}
540541
main.p-details::before{
541542
content: "";
@@ -605,7 +606,7 @@ main.p-details form label{
605606
font-family: Helvetica, Arial, sans-serif;
606607
vertical-align: text-top;
607608
}
608-
.shipping-address{
609+
.shipping-address ul{
609610
display: flex;
610611
flex-wrap: wrap;
611612
justify-content: space-between;
@@ -614,18 +615,20 @@ main.p-details form label{
614615
margin-top: 40px;
615616
width: 100%;
616617
}
617-
618618
main.p-details form input, main.p-details form select{
619619
border: .5px solid rgba(137, 137, 137, 1);
620620
padding: 7px 17px;
621621
font-size: 14px;
622622
line-height: 25.6px;
623623
margin-top: 12px;
624624
}
625-
input#name, input#surname{
625+
.shipping-address .input-full{
626+
width: 100%;
627+
}
628+
.shipping-address .input-medium{
626629
width: 49%;
627630
}
628-
input#city, input#postalCode{
631+
.shipping-address .input-small{
629632
width: 32%;
630633
}
631634
select#province, select#country{
@@ -659,77 +662,146 @@ select#province, select#country{
659662
line-height: 11.5px;
660663
color: #818181;
661664
}
662-
.footer-datails{
665+
.footer-details{
663666
display: flex;
664667
margin-top: 60px;
665668
}
666-
.footer-datails p, .footer-datails input[type=submit]{
669+
.footer-details p, .footer-details input[type=submit]{
667670
width: 50%;
668671
}
669-
.footer-datails p{
672+
.footer-details p{
670673
display: flex;
671674
align-items: center;
672675
}
673-
.footer-datails p a{
676+
.footer-details p a{
674677
color: var(--green);
675678
text-decoration: underline;
676679
font-weight: 400;
677680
font-size: 18px;
678681
line-height: 25.6px;
679682
letter-spacing: -.9px;
680683
}
681-
/* Form validation */
682-
.contact, .shipping-address{
684+
main.p-details .summary-product{
685+
width: 410px;
686+
padding-top: 66px;
687+
margin-left: 65px;
688+
z-index: 1;
689+
}
690+
.summary-product .row-1{
691+
display: flex;
692+
margin-bottom: 50px;
693+
}
694+
.summary-product .row-1 img{
695+
background-color: rgba(247, 248, 250, 1);
696+
margin-right: 60px;
697+
698+
}
699+
.summary-product .row-1 figure{
683700
position: relative;
684701
}
685-
main.p-details form label.error{
686-
font-family: "Roboto", Helvetica, Arial, sans-serif;
687-
font-weight: 400;
688-
font-size: 12px;
689-
line-height: 22px;
690-
color: #d00;
691-
display: block;
692-
width: 100%;
702+
.summary-product .row-1 figure::after{
703+
content: "1";
704+
top: -8px;
705+
right: 56px;
706+
width: 22px;
707+
height: 22px;
708+
font: 500 16px "Roboto", Helvetica, Arial, sans-serif;
709+
border-radius: 50%;
710+
background-color: var(--green);
711+
color: var(--white);
693712
position: absolute;
713+
display: flex;
714+
justify-content: center;
715+
align-items: center;
716+
}
717+
.summary-product .row-1 h2{
718+
font-size: 16px;
719+
line-height: 57.6px;
720+
letter-spacing: -.9px;
721+
}
722+
.summary-product .row-1 h3{
723+
font-size: 21px;
724+
line-height: 30px;
725+
letter-spacing: -.9px;
726+
color: var(--green);
727+
}
728+
.summary-product form{
729+
padding: 28px 0;
730+
border-top: 1px solid rgba(86, 178, 128, 0.2);
731+
border-bottom: 1px solid rgba(86, 178, 128, 0.2);
732+
display: flex;
733+
justify-content: space-between;
734+
}
735+
.summary-product form div{
736+
width: 65%;
737+
}
738+
.summary-product form input[type=text]{
739+
border: .5px solid #898989;
740+
background-color: var(--white);
694741
}
695-
#contact-error{
696-
top: 62px;
697-
left: 18px;
742+
.summary-product form input[type=submit]{
743+
width: 32%;
744+
max-height: 41.2px;
745+
background: #A8A8A8;
746+
border-radius: 4px;
747+
font: 400 17px/21px "Roboto", Helvetica, Arial, sans-serif;
748+
color: var(--white);
698749
}
699-
#name-error{
700-
top: 102px;
701-
left: 18px;
750+
.summary-product .row-3 section:first-of-type{
751+
display: flex;
752+
flex-wrap: wrap;
753+
padding: 15px 0 33px;
754+
border-bottom: 1px solid rgba(86, 178, 128, 0.2);
755+
}
756+
.summary-product .row-3 p{
757+
width: 50%;
758+
font-size: 14px;
759+
line-height: 25.6px;
760+
letter-spacing: -.9px;
761+
color: rgba(97, 97, 97, 1);
702762
}
703-
#surname-error{
704-
top: 102px;
705-
left: 238px;
763+
.summary-product .row-3 p:nth-of-type(2){
764+
color: var(--black);
765+
margin-bottom: 12px;
706766
}
707-
#address-error{
708-
top: 154px;
709-
left: 18px;
767+
.summary-product .row-3 p:nth-of-type(even){
768+
text-align: right;
710769
}
711-
#city-error{
712-
top: 260px;
713-
left: 5px;
770+
.summary-product .row-3 section:last-of-type{
771+
display: flex;
772+
padding-top: 15px;
714773
}
715-
#postalCode-error{
716-
top: 260px;
717-
left: 149px;
774+
.summary-product .row-3 h2{
775+
width: 50%;
776+
text-align: right;
777+
font-size: 24px;
778+
line-height: 25.6px;
779+
letter-spacing: -.9px;
718780
}
719-
#province-error{
720-
top: 37px;
721-
left: 5px;
722-
letter-spacing: -.7px;
781+
782+
/* Form validation */
783+
main.p-details form label.error{
784+
font-family: "Roboto", Helvetica, Arial, sans-serif;
785+
font-weight: 400;
786+
font-size: 12px;
787+
line-height: 24px;
788+
letter-spacing: -.9px;
789+
color: #900;
790+
display: block;
791+
position: relative;
792+
width: 100%;
793+
animation: alert-form 2s ease .2s infinite;
723794
}
724-
#country-error{
725-
top: 37px;
726-
left: 5px;
727-
letter-spacing: -.7px;
795+
@keyframes alert-form {
796+
0%{left: 0;}
797+
50%{left: 2px;}
798+
100%{left: 0;}
728799
}
729-
/* MEDIA QUERIES */
730800

731801

732802

803+
/* MEDIA QUERIES */
804+
733805
@media screen and (max-width: 376px){
734806
.mobile_only {
735807
display: block;
@@ -981,4 +1053,10 @@ main.p-details form label.error{
9811053
font-size: 20px;
9821054
line-height: 23px;
9831055
}
1056+
main.p-details .summary-product{
1057+
display: none;
1058+
}
1059+
main.p-details::before{
1060+
display: none;
1061+
}
9841062
}

‎img/img-details-product1.png‎

9.08 KB
Loading

‎js/script.js‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎p-details.html‎

Lines changed: 64 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -41,54 +41,82 @@ <h2>Contact</h2>
4141
</section>
4242
<section class="shipping-address">
4343
<h2>Shipping Address</h2>
44-
<input type="text" placeholder="Name" name="name" id="name" required>
45-
<input type="text" placeholder="Second Name" name="surname" id="surname" required>
46-
<input type="text" placeholder="Address and number" name="address" id="address" required>
47-
<input type="text" placeholder="Shipping note (optional)">
48-
<input type="text" placeholder="City" name="city" id="city">
49-
<input type="text" placeholder="Postal Code" name="postalCode" id="postalCode">
50-
<div class="box-province">
51-
<span>Province</span>
52-
<select name="province" id="province">
53-
<option value>Province</option>
54-
<option value="1">Province 1</option>
55-
<option value="2">Province 2</option>
56-
<option value="3">Province 3</option>
57-
<option value="4">Province 4</option>
58-
<option value="5">Province 5</option>
59-
<option value="6">Province 6</option>
60-
</select>
61-
</div>
62-
<div class="box-country">
63-
<span>Country/Region</span>
64-
<select name="country" id="country">
65-
<option value></option>
66-
<option value="it">Italy</option>
67-
<option value="pt">Portugal</option>
68-
<option value="br">Brazil</option>
69-
<option value="uk">United Kingdom</option>
70-
<option value="fr">France</option>
71-
<option value="es">Spain</option>
72-
<option value="ch">China</option>
73-
<option value="jp">Japan</option>
74-
</select>
75-
</div>
44+
<ul>
45+
<li class="input-medium"><input type="text" placeholder="Name" name="name" id="name" required></li>
46+
<li class="input-medium"><input type="text" placeholder="Second Name" name="surname" id="surname" required></li>
47+
<li class="input-full"><input type="text" placeholder="Address and number" name="address" id="address" required></li>
48+
<li class="input-full"><input type="text" placeholder="Shipping note (optional)"></li>
49+
<li class="input-small"><input type="text" placeholder="City" name="city" id="city"></li>
50+
<li class="input-small"><input type="text" placeholder="Postal Code" name="postalCode" id="postalCode"></li>
51+
<li class="box-province">
52+
<span>Province</span>
53+
<select name="province" id="province">
54+
<option value>Province</option>
55+
<option value="1">Province 1</option>
56+
<option value="2">Province 2</option>
57+
<option value="3">Province 3</option>
58+
<option value="4">Province 4</option>
59+
<option value="5">Province 5</option>
60+
<option value="6">Province 6</option>
61+
</select>
62+
</li>
63+
<li class="box-country">
64+
<span>Country/Region</span>
65+
<select name="country" id="country">
66+
<option value></option>
67+
<option value="it">Italy</option>
68+
<option value="pt">Portugal</option>
69+
<option value="br">Brazil</option>
70+
<option value="uk">United Kingdom</option>
71+
<option value="fr">France</option>
72+
<option value="es">Spain</option>
73+
<option value="ch">China</option>
74+
<option value="jp">Japan</option>
75+
</select>
76+
</li>
77+
</ul>
7678
</section>
7779
<input type="checkbox" name="save-info" id="save-info"><label for="save-info">Save this informations for a future fast checkout</label>
78-
<section class="footer-datails">
80+
<section class="footer-details">
7981
<p><a href="/cart.html">Back to cart</a></p>
8082
<input type="submit" value="Go to shipping" class="btn">
8183
</section>
8284
</form>
8385
</main>
84-
8586
</article>
8687
<article class="summary-product">
88+
<article class="row-1">
89+
<figure>
90+
<img src="img/img-details-product1.png" alt="Spiced Mint Candleaf">
91+
</figure>
92+
<div>
93+
<h2>Spiced Mint Candleaf®</h2>
94+
<h3>$ 9.99</h3>
95+
</div>
96+
</article>
97+
<form action="" class="couponForm">
98+
<div>
99+
<input type="text" name="coupon" id="coupon" placeholder="Coupon code">
100+
</div>
101+
<input type="submit" value="Add code" class="btn-coupon">
102+
</form>
103+
<article class="row-3">
104+
<section>
105+
<p>Subtotal</p>
106+
<p>$ 9.99</p>
107+
<p>Shipping</p>
108+
<p>Calculated at the next step</p>
109+
</section>
110+
<section>
111+
<p>Total</p>
112+
<h2>$ 9.99</h2>
113+
</section>
114+
115+
</article>
116+
87117

88118
</article>
89-
90119
</article>
91-
92120
</main>
93121
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
94122
<script src="js/script.js"></script>

0 commit comments

Comments
 (0)