Skip to content

Commit efbebc4

Browse files
Wagner3UBWagner3UB
committed
conclusão p-details desktop
1 parent cd4c9e9 commit efbebc4

3 files changed

Lines changed: 189 additions & 41 deletions

File tree

‎css/style.css‎

Lines changed: 152 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -463,21 +463,18 @@ main.product figure h3{
463463
color: var(--green);
464464
cursor: pointer;
465465
}
466-
.left-column .counter p:nth-of-type(2){
467-
font-size: ;
468-
}
469466
p.alert-negative, p.alert-out{
470467
display:none;
471468
font-size: 12px;
472469
color: #d00;
473470
line-height: 14px;
474471
margin-top: 5px;
475472
}
476-
.right-column{
473+
main.product .right-column{
477474
width: 350px;
478475
float: left;
479476
}
480-
.right-column div{
477+
main.product .right-column div{
481478
margin-top: 15px;
482479
display: flex;
483480
align-items: center;
@@ -486,24 +483,24 @@ p.alert-negative, p.alert-out{
486483
padding: 20px 10px 20px 20px ;
487484
border: 1px solid rgb(161, 161, 161, 0);
488485
}
489-
.right-column div.active{
486+
main.product .right-column div.active{
490487
border: 1px solid rgb(161, 161, 161);
491488
}
492-
.right-column div p, .right-column div p a{
489+
main.product .right-column div p, main.product .right-column div p a{
493490
font: 400 14px/15.6px "Helvetica", Arial, sans-serif;
494491
color: #818181;
495492
margin-top: 10px;
496493
}
497-
.right-column div p a{
494+
main.product .right-column div p a{
498495
color: var(--green);
499496
}
500-
.right-column label{
497+
main.product .right-column label{
501498
font-weight: 400;
502499
line-height: 15.6px;
503500
letter-spacing: -.9px;
504501
width: 60%;
505502
}
506-
.right-column select{
503+
main.product .right-column select{
507504
width: 25%;
508505
float: right;
509506
border: 1px solid var(--black);
@@ -535,10 +532,153 @@ p.alert-negative, p.alert-out{
535532
}
536533

537534

535+
/* PAGE DETAILS*/
536+
main.p-details{
537+
position: relative;
538+
overflow: hidden;
539+
}
540+
main.p-details::before{
541+
content: "";
542+
position: absolute;
543+
top: 0;
544+
right: 0;
545+
width: 50vw;
546+
height: 100%;
547+
background-color: rgba(242, 242, 242, 1);
548+
}
549+
main.p-details .container{
550+
display: flex;
551+
}
552+
.personal-info, .summary-product{
553+
width: 50%;
554+
}
555+
.personal-info{
556+
padding-right: 125px;
557+
padding-bottom: 110px;
558+
}
559+
.personal-info > div{
560+
margin: 20px 0;
561+
}
562+
.steps{
563+
width: 60%;
564+
display: flex;
565+
justify-content: space-between;
566+
font-family: "Roboto", Helvetica, Arial, sans-serif;
567+
font-size: 16px;
568+
font-weight: 500;
569+
line-height: 25.6px;
570+
letter-spacing: -.9px;
571+
color: rgba(97, 97, 97, 1);
572+
margin-bottom: 40px;
573+
}
574+
.steps li:first-child{
575+
color: var(--green);
576+
}
577+
.steps li.active{
578+
color: var(--black);
579+
}
580+
main.p-details .contact div{
581+
display: flex;
582+
justify-content: space-between;
583+
}
584+
main.p-details .contact div h2, .shipping-address h2{
585+
font-size: 20px;
586+
line-height: 26px;
587+
letter-spacing: -.9px;
588+
}
589+
main.p-details .contact div p, main.p-details .contact div a{
590+
font-size: 14px;
591+
line-height: 26px;
592+
}
593+
main.p-details .contact div a{
594+
color: var(--green);
595+
}
596+
main.p-details .contact input[type=checkbox], main.p-details input[type=checkbox] {
597+
width: 16px;
598+
height: 16px;
599+
display: inline;
600+
margin-right: 7px;
601+
}
602+
main.p-details form label{
603+
font-size: 14px;
604+
line-height: 16px;
605+
font-family: Helvetica, Arial, sans-serif;
606+
vertical-align: text-top;
607+
}
608+
.shipping-address{
609+
display: flex;
610+
flex-wrap: wrap;
611+
justify-content: space-between;
612+
}
613+
.shipping-address h2{
614+
margin-top: 40px;
615+
width: 100%;
616+
}
538617

618+
main.p-details form input, main.p-details form select{
619+
border: .5px solid rgba(137, 137, 137, 1);
620+
padding: 7px 17px;
621+
font-size: 14px;
622+
line-height: 25.6px;
623+
margin-top: 12px;
624+
}
625+
input#name, input#surname{
626+
width: 49%;
627+
}
628+
input#city, input#postal-code{
629+
width: 32%;
630+
}
631+
select#province, select#country{
632+
padding-top: 15px;
633+
}
634+
.shipping-address .box-province{
635+
position: relative;
636+
width: 32%;
637+
}
638+
.shipping-address .box-country{
639+
position: relative ;
640+
width: 100%;
641+
}
642+
.shipping-address .box-province span{
643+
position: absolute;
644+
top: 15px;
645+
left: 22px;
646+
font-family: Helvetica, Arial, sans-serif;
647+
font-weight: 400;
648+
font-size: 10px;
649+
line-height: 11.5px;
650+
color: #818181;
651+
}
652+
.shipping-address .box-country span{
653+
position: absolute;
654+
top: 15px;
655+
left: 22px;
656+
font-family: Helvetica, Arial, sans-serif;
657+
font-weight: 400;
658+
font-size: 10px;
659+
line-height: 11.5px;
660+
color: #818181;
661+
}
662+
.footer-datails{
663+
display: flex;
664+
margin-top: 60px;
665+
}
666+
.footer-datails p, .footer-datails input[type=submit]{
667+
width: 50%;
668+
}
669+
.footer-datails p{
670+
display: flex;
671+
align-items: center;
672+
}
673+
.footer-datails p a{
674+
color: var(--green);
675+
text-decoration: underline;
676+
font-weight: 400;
677+
font-size: 18px;
678+
line-height: 25.6px;
679+
letter-spacing: -.9px;
539680

540-
541-
681+
}
542682
/* MEDIA QUERIES */
543683

544684

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ <h1><a href="/"><img src="img/logo.png" alt="Brand Logo"></a></h1>
5151
</div>
5252
</div>
5353
</header>
54-
<main>
54+
<main class="home">
5555
<section class="top_banner">
5656
<div class="box container">
5757
<img src="img/leaf.png" alt="leaf">

‎payment.html‎

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@
1313
<title>Spiced Mint Candle</title>
1414
</head>
1515
<body>
16-
<main class="p-datails">
16+
<main class="p-details">
1717
<article class="container">
1818
<article class="personal-info">
19-
<header>
19+
<div>
2020
<h1><a href="/"><img src="img/logo.png" alt="Brand Logo"></a></h1>
21-
</header>
21+
</div>
2222
<main>
2323
<ul class="steps">
2424
<li>Cart</li>
@@ -31,45 +31,53 @@ <h1><a href="/"><img src="img/logo.png" alt="Brand Logo"></a></h1>
3131
</ul>
3232
<form action="" method="post">
3333
<section class="contact">
34-
<h2>Contact</h2>
35-
<p>So you have an account? <a href="">Login</a></p>
34+
<div>
35+
<h2>Contact</h2>
36+
<p>So you have an account? <a href="">Login</a></p>
37+
</div>
3638
<input type="text" placeholder="Email or mobile phone number">
3739
<input type="checkbox" name="newsletter" id="newsletter"><label for="newsletter">Add me to Candleaf newsletter for a 10% discount</label>
3840
</section>
3941
<section class="shipping-address">
42+
<h2>Shipping Address</h2>
4043
<input type="text" placeholder="Name" name="name" id="name" required>
4144
<input type="text" placeholder="Second Name" name="surname" id="surname" required>
4245
<input type="text" placeholder="Address and number" name="address" id="address" required>
4346
<input type="text" placeholder="Shipping note (optional)">
4447
<input type="text" placeholder="City" name="city" id="city">
4548
<input type="number" placeholder="Postal Code" name="postal-code" id="postal-code">
46-
<select name="province" id="province">
47-
<option>Province</option>
48-
<option value="1">Province 1</option>
49-
<option value="2">Province 2</option>
50-
<option value="3">Province 3</option>
51-
<option value="4">Province 4</option>
52-
<option value="5">Province 5</option>
53-
<option value="6">Province 6</option>
54-
</select>
55-
<select name="country" id="country">
56-
<option value="it">Italy</option>
57-
<option value="pt">Portugal</option>
58-
<option value="br">Brazil</option>
59-
<option value="uk">United Kingdom</option>
60-
<option value="fr">France</option>
61-
<option value="es">Spain</option>
62-
<option value="ch">China</option>
63-
<option value="jp">Japan</option>
64-
</select>
65-
<input type="checkbox" name="save-info" id="save-info"><label for="save-info">Save this informations for a future fast checkout</label>
49+
<div class="box-province">
50+
<span>Province</span>
51+
<select name="province" id="province">
52+
<option>Province</option>
53+
<option value="1">Province 1</option>
54+
<option value="2">Province 2</option>
55+
<option value="3">Province 3</option>
56+
<option value="4">Province 4</option>
57+
<option value="5">Province 5</option>
58+
<option value="6">Province 6</option>
59+
</select>
60+
</div>
61+
<div class="box-country">
62+
<span>Country/Region</span>
63+
<select name="country" id="country">
64+
<option value="it">Italy</option>
65+
<option value="pt">Portugal</option>
66+
<option value="br">Brazil</option>
67+
<option value="uk">United Kingdom</option>
68+
<option value="fr">France</option>
69+
<option value="es">Spain</option>
70+
<option value="ch">China</option>
71+
<option value="jp">Japan</option>
72+
</select>
73+
</div>
6674
</section>
75+
<input type="checkbox" name="save-info" id="save-info"><label for="save-info">Save this informations for a future fast checkout</label>
6776
<section class="footer-datails">
68-
<a href="/cart.html">Back to cart</a>
77+
<p><a href="/cart.html">Back to cart</a></p>
6978
<input type="submit" value="Go to shipping" class="btn">
70-
7179
</section>
72-
</form>
80+
</form>
7381
</main>
7482

7583
</article>

0 commit comments

Comments
 (0)