Skip to content

Commit 7d3f057

Browse files
committed
Code 2 - Class 3
1 parent aa17ca4 commit 7d3f057

4 files changed

Lines changed: 165 additions & 0 deletions

File tree

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
section.S1 {
8+
background-color: rgba(21, 21, 165, 0.819);
9+
display: flex;
10+
/* flex-direction: column; */
11+
gap: 5px;
12+
justify-content: space-between;
13+
flex-wrap: wrap;
14+
align-items: center;
15+
width: 100vw;
16+
height: 100vh;
17+
}
18+
19+
section.S1 div {
20+
background-color: aliceblue;
21+
border: 2px solid black;
22+
width: 200px;
23+
height: 200px;
24+
}
25+
26+
section.S2 {
27+
background-color: rgba(21, 21, 165, 0.819);
28+
display: flex;
29+
/* flex-direction: column; */
30+
width: 700px;
31+
height: 300px;
32+
}
33+
34+
section.S2 div {
35+
background-color: aliceblue;
36+
border: 2px solid black;
37+
width: 200px;
38+
height: 200px;
39+
/* margin: 0 20%; */
40+
}
Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1.0"
8+
/>
9+
<!-- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> -->
10+
<link
11+
rel="stylesheet"
12+
href="css/style.css"
13+
/>
14+
<link href='https://cdn.boxicons.com/3.0.6/fonts/basic/boxicons.min.css' rel='stylesheet'>
15+
<title>Document</title>
16+
</head>
17+
<body>
18+
<section class="S1">
19+
<div>1</div>
20+
<div>2</div>
21+
<div>3<i class='bx bx-cart'></i></div>
22+
</section>
23+
<!-- <section class="S2">
24+
<div>1</div>
25+
<div>2</div>
26+
<div>3</div>
27+
</section> -->
28+
</body>
29+
</html>
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link href='https://cdn.boxicons.com/3.0.6/fonts/basic/boxicons.min.css' rel='stylesheet'>
9+
</head>
10+
<body>
11+
<header>
12+
<div class="icon"><i class='bx bx-cart'></i> </div>
13+
<div class="logo"><h1>Ryzer</h1></div>
14+
</header>
15+
<h2 class="h2">products</h2>
16+
17+
<section>
18+
19+
20+
<div><img src="" alt="">
21+
<h4>product 1</h4>
22+
</div>
23+
24+
<div><img src="" alt="">
25+
<h4>product 2</h4>
26+
</div>
27+
28+
<div><img src="" alt="">
29+
<h4>product 3</h4>
30+
</div>
31+
32+
<div><img src="" alt="">
33+
<h4>product 4</h4>
34+
</div>
35+
36+
<div><img src="" alt="">
37+
<h4>product 5</h4>
38+
</div>
39+
40+
<div><img src="" alt="">
41+
<h4>product 6</h4>
42+
</div>
43+
44+
<div><img src="" alt="">
45+
<h4>product 7</h4>
46+
</div>
47+
48+
<div><img src="" alt="">
49+
<h4>product 8</h4>
50+
</div>
51+
52+
<div><img src="" alt="">
53+
<h4>product 9</h4>
54+
</div>
55+
56+
</section>
57+
</body>
58+
</html>
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
header {
7+
display: flex;
8+
flex-direction: row-reverse;
9+
width: 100%;
10+
height: 50px;
11+
background-color:black ;
12+
justify-content: space-between;
13+
14+
}
15+
header div{
16+
width: 30px;
17+
height: 45px;
18+
color: aliceblue;
19+
20+
}
21+
body{
22+
background-color: rgb(34, 35, 37);
23+
}
24+
section {
25+
display: flex;
26+
width: 80%;
27+
height: 100vh;
28+
justify-content: center;
29+
}
30+
section div{
31+
width: 200px;
32+
height: 200px;
33+
background-color: greenyellow;
34+
}
35+
.h2{
36+
text-align: center;
37+
color: aliceblue;
38+
}

0 commit comments

Comments
 (0)