File tree Expand file tree Collapse file tree
Block Chain Collage Code 2/3 Expand file tree Collapse file tree Original file line number Diff line number Diff line change 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+ }
Original file line number Diff line number Diff line change 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 >
Original file line number Diff line number Diff line change 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 >
Original file line number Diff line number Diff line change 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+ }
You can’t perform that action at this time.
0 commit comments