Skip to content

Commit 45c1cce

Browse files
GziXnineGziXnine
committedJun 29, 2024
Add Assignment Three In Topic Ten
1 parent 3ce5993 commit 45c1cce

File tree

2 files changed

+157
-0
lines changed

2 files changed

+157
-0
lines changed
 

‎10 - Border Radius, Box Shadow 38 ~ 41/Task 3/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Document</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="parent">
14+
<div class="one">
15+
16+
<div class="free">Free</div>
17+
<div class="basic"><span>Basic</span></div>
18+
</div>
19+
<div class="two">
20+
<div class="pro">Pro</div>
21+
<div class="dollar">$30</div>
22+
</div>
23+
</div>
24+
</body>
25+
26+
</html>

‎10 - Border Radius, Box Shadow 38 ~ 41/Task 3/style.css

+131
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
body {
2+
font-family: Arial, Helvetica, sans-serif;
3+
}
4+
5+
.parent {
6+
width: 550px;
7+
height: 300px;
8+
background-color: #ffffff;
9+
margin: auto;
10+
text-align: center;
11+
position: relative;
12+
}
13+
14+
.one, .two {
15+
background-color: #EEE;
16+
width: calc(50% - 50px);
17+
height: 280px;
18+
position: absolute;
19+
}
20+
21+
.one {
22+
top: 10px;
23+
left: 16px;
24+
}
25+
26+
.two {
27+
top: 10px;
28+
right: 16px;
29+
}
30+
31+
.basic {
32+
position: absolute;
33+
width: calc(80%);
34+
height: 45px;
35+
background-color: #03a9f4;
36+
font-weight: bold;
37+
font-size: 20px;
38+
top: 13px;
39+
left: 22px;
40+
text-align: center;
41+
color: white;
42+
line-height: 45px;
43+
44+
border-radius: 11px;
45+
-webkit-border-radius: 11px;
46+
-moz-border-radius: 11px;
47+
-ms-border-radius: 11px;
48+
-o-border-radius: 11px;
49+
}
50+
51+
.free {
52+
width: 185px;
53+
height: 185px;
54+
background-color: #DDD;
55+
position: absolute;
56+
top: 78px;
57+
left: 21px;
58+
line-height: 185px;
59+
font-size: 30px;
60+
61+
border-radius: 50%;
62+
-webkit-border-radius: 50%;
63+
-moz-border-radius: 50%;
64+
-ms-border-radius: 50%;
65+
-o-border-radius: 50%;
66+
}
67+
68+
.pro {
69+
position: absolute;
70+
width: calc(80%);
71+
height: 45px;
72+
background-color: #03a9f4;
73+
font-weight: bold;
74+
font-size: 20px;
75+
top: 13px;
76+
left: 22px;
77+
text-align: center;
78+
color: white;
79+
line-height: 45px;
80+
81+
border-radius: 11px;
82+
-webkit-border-radius: 11px;
83+
-moz-border-radius: 11px;
84+
-ms-border-radius: 11px;
85+
-o-border-radius: 11px;
86+
}
87+
88+
.dollar {
89+
width: 185px;
90+
height: 185px;
91+
background-color: #DDD;
92+
position: absolute;
93+
top: 78px;
94+
left: 21px;
95+
line-height: 185px;
96+
font-size: 30px;
97+
98+
border-radius: 50%;
99+
-webkit-border-radius: 50%;
100+
-moz-border-radius: 50%;
101+
-ms-border-radius: 50%;
102+
-o-border-radius: 50%;
103+
}
104+
105+
.one::after {
106+
content: "";
107+
position: absolute;
108+
width: 1px;
109+
height: 280px;
110+
background-color: #03a9f4;
111+
top: 0px;
112+
left: 115%;
113+
}
114+
115+
.two::before {
116+
content: "Or";
117+
position: absolute;
118+
width: 30px;
119+
height: 30px;
120+
background-color: #03a9f4;
121+
top: calc(50% - 20px);
122+
left: -22%;
123+
color: white;
124+
line-height: 30px;
125+
126+
border-radius: 50%;
127+
-webkit-border-radius: 50%;
128+
-moz-border-radius: 50%;
129+
-ms-border-radius: 50%;
130+
-o-border-radius: 50%;
131+
}

0 commit comments

Comments
 (0)
Please sign in to comment.