Skip to content

Commit 530950e

Browse files
devvsakibdevvsakib
committed
Done and Closed
1 parent efaa11d commit 530950e

3 files changed

Lines changed: 43 additions & 10 deletions

File tree

‎README.md‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎productpage/index.html‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>Product Page Design</title>
78
<link rel="shortcut icon" href="images/favicon-32x32.png" type="image/x-icon">
8-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
9-
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
10-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script><link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com">
11-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
10+
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
11+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
12+
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
13+
crossorigin="anonymous"></script>
14+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
15+
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
16+
crossorigin="anonymous"></script>
17+
<link
18+
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,700&family=Montserrat:wght@500;700&display=swap"
19+
rel="stylesheet">
20+
<link rel="preconnect" href="https://fonts.googleapis.com">
21+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1222
<link rel="stylesheet" href="style.css">
1323
</head>
14-
<body>
1524

25+
<body>
26+
<div class="topHeader">
27+
<h3>Frontend Web Developer</h3>
28+
<span>~ DevvSakib</span>
29+
</div>
1630
<section class="container-fluid">
1731
<div class="mainContainer">
1832
<div class="leftcontainer">
@@ -22,19 +36,25 @@
2236
<div class="rightcontainer">
2337
<p>perfume</p>
2438
<h2>Gabrielle Essence Eau De Perfum</h2>
25-
<p>A floral, solar and voluptous interpretation composed by Olivier POlge, Perfumer-Creattor for the House of CHANEL.</p>
39+
<p>A floral, solar and voluptous interpretation composed by Olivier POlge, Perfumer-Creattor for the House of
40+
CHANEL.</p>
2641
<div class="price">
2742
<h2>$149.99</h2>
2843
<span>$169.99</span>
2944
</div>
3045
<button class="cart">Add to Cart</button>
3146
</div>
32-
<svg width="15" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"/></svg>
47+
<svg width="15" height="16" xmlns="http://www.w3.org/2000/svg">
48+
<path
49+
d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z"
50+
fill="#FFF" />
51+
</svg>
3352

3453
</div>
3554
</section>
3655

3756

3857

3958
</body>
59+
4060
</html>

‎productpage/style.css‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,20 @@ body {
1414
background: hsl(30, 38%, 92%);
1515
}
1616

17-
.container-fluid {
17+
.topHeader {
18+
width: 350px;
19+
margin: auto;
20+
text-align: center;
21+
margin-top: 10px;
22+
font-family: 'Fraunces';
23+
24+
}
25+
.topHeader span{
26+
display: block;
27+
text-align: right;
28+
color: hsl(228, 12%, 48%);
29+
font-weight: 500;
30+
1831
}
1932

2033
.mainContainer {
@@ -23,9 +36,10 @@ body {
2336
margin: auto;
2437
display: flex;
2538
align-items: center;
26-
margin-top: 100px;
39+
margin-top: 50px;
2740
border-radius: 10px;
2841
background: hsl(0, 0%, 100%);
42+
margin-bottom: 50px;
2943
}
3044

3145
.leftcontainer {

0 commit comments

Comments
 (0)