Skip to content

Commit dae861d

Browse files
codeIntrovertcodeIntrovert
committed
div center karna hai
1 parent f7cead5 commit dae861d

File tree

3 files changed

+205
-6
lines changed

3 files changed

+205
-6
lines changed

‎home.html‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,36 @@
4848
</div>
4949
</div>
5050

51-
<div class="cardMain">
52-
<div class="courses-container">
53-
<div class="course">
51+
<div class="cardMain container">
52+
<div class="courses-container row" >
53+
<div class="course col">
5454
<div class="course-preview">
5555
<h6>Course</h6>
5656
<h2>JavaScript Fundamentals</h2>
5757
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
5858
<button class="btn">Continue</button>
5959
</div>
60-
61-
60+
</div>
61+
62+
<div class="course col">
63+
<div class="course-preview">
64+
<h6>Course</h6>
65+
<h2>JavaScript Fundamentals</h2>
66+
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
67+
<button class="btn">Continue</button>
68+
</div>
69+
</div>
70+
<div class="course col">
71+
<div class="course-preview">
72+
<h6>Course</h6>
73+
<h2>JavaScript Fundamentals</h2>
74+
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
75+
<button class="btn">Continue</button>
76+
</div>
77+
</div>
78+
6279
</div>
80+
</div>
6381

6482
<!-- Include Bootstrap JS and jQuery -->
6583
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>

‎static/card.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
}
1818

1919
.courses-container {
20+
align-items: center;
21+
justify-content: center;
2022

2123
}
2224

@@ -25,9 +27,13 @@
2527
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
2628
display: flex;
2729
overflow: hidden;
28-
30+
align-items: center;
31+
justify-content: center;
32+
width: 100%;
2933
}
3034

35+
36+
3137
.course h6 {
3238
opacity: 0.6;
3339
margin: 0;

‎test.html‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Learning Path</title>
5+
<!-- Include Bootstrap CSS -->
6+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
8+
<style>
9+
10+
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
16+
17+
.cardMain {
18+
background-color: #172439;
19+
font-family: 'Muli', sans-serif;
20+
display: flex;
21+
align-items: center;
22+
justify-content: center;
23+
flex-direction: column;
24+
margin: 20px;
25+
}
26+
27+
.courses-container {
28+
align-items: center;
29+
justify-content: center;
30+
31+
}
32+
33+
.course {
34+
border-radius: 10px;
35+
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
36+
display: flex;
37+
overflow: hidden;
38+
align-items: center;
39+
justify-content: center;
40+
width: 100%;
41+
}
42+
43+
44+
45+
.course h6 {
46+
opacity: 0.6;
47+
margin: 0;
48+
letter-spacing: 1px;
49+
text-transform: uppercase;
50+
}
51+
52+
.course h2 {
53+
letter-spacing: 1px;
54+
margin: 10px 0;
55+
}
56+
57+
.course-preview {
58+
background-color: #7c3aed;
59+
color: #fff;
60+
padding: 30px;
61+
max-width: 350px;
62+
}
63+
64+
.course-preview a {
65+
color: #fff;
66+
display: inline-block;
67+
font-size: 12px;
68+
opacity: 0.6;
69+
margin-top: 30px;
70+
text-decoration: none;
71+
}
72+
73+
.course-info {
74+
padding: 30px;
75+
position: relative;
76+
width: 100%;
77+
}
78+
79+
.progress-container {
80+
position: absolute;
81+
top: 30px;
82+
right: 30px;
83+
text-align: right;
84+
width: 150px;
85+
}
86+
87+
.progress {
88+
background-color: #ddd;
89+
border-radius: 3px;
90+
height: 5px;
91+
width: 100%;
92+
}
93+
94+
.progress::after {
95+
border-radius: 3px;
96+
background-color: #7c3aed;
97+
content: '';
98+
position: absolute;
99+
top: 0;
100+
left: 0;
101+
height: 5px;
102+
width: 66%;
103+
}
104+
105+
.progress-text {
106+
font-size: 10px;
107+
opacity: 0.6;
108+
letter-spacing: 1px;
109+
}
110+
111+
.btn {
112+
background-color:#fff;
113+
border: 0;
114+
border-radius: 50px;
115+
color: black;
116+
font-size: 16px;
117+
padding: 10px 22px;
118+
position: absolute;
119+
margin-left: 85px;
120+
margin-top: 18px;
121+
letter-spacing: 1px;
122+
font-family: 'Muli', sans-serif;
123+
}
124+
body
125+
{
126+
background-color: #172439;
127+
padding-left: 5px;
128+
padding-right: 5px;
129+
}
130+
131+
132+
</style>
133+
</head>
134+
135+
136+
<body>
137+
138+
139+
<div class="cardMain container">
140+
<div class="courses-container row" >
141+
<div class="course col">
142+
<div class="course-preview">
143+
<h6>Course</h6>
144+
<h2>JavaScript Fundamentals</h2>
145+
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
146+
<button class="btn">Continue</button>
147+
</div>
148+
</div>
149+
150+
<div class="course col">
151+
<div class="course-preview">
152+
<h6>Course</h6>
153+
<h2>JavaScript Fundamentals</h2>
154+
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
155+
<button class="btn">Continue</button>
156+
</div>
157+
</div>
158+
<div class="course col">
159+
<div class="course-preview">
160+
<h6>Course</h6>
161+
<h2>JavaScript Fundamentals</h2>
162+
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
163+
<button class="btn">Continue</button>
164+
</div>
165+
</div>
166+
167+
</div>
168+
</div>
169+
170+
<!-- Include Bootstrap JS and jQuery -->
171+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
172+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
173+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
174+
</body>
175+
</html>

0 commit comments

Comments
 (0)