Skip to content

Commit 7bbff51

Browse files
codeIntrovertcodeIntrovert
committed
card final
1 parent dae861d commit 7bbff51

File tree

12 files changed

+97
-48
lines changed

12 files changed

+97
-48
lines changed

‎assets/icons/Python.png‎

31.9 KB
Loading

‎assets/icons/angular.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎assets/icons/home.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎assets/icons/javascript.png‎

2.27 KB
Loading

‎assets/icons/logout.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎assets/icons/profile.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎assets/icons/python.jpg‎

60.6 KB
Loading

‎assets/icons/react.png‎

212 KB
Loading

‎home.html‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
<html>
33
<head>
44
<title>Learning Path</title>
5+
56
<!-- Include Bootstrap CSS -->
67
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
78
<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-
<link rel="stylesheet" href="/static/home.css">
9+
<link rel="stylesheet" href="/static/home.css">
910
<link rel="stylesheet" href="static/card.css">
1011
</head>
1112

@@ -48,37 +49,68 @@
4849
</div>
4950
</div>
5051

51-
<div class="cardMain container">
52-
<div class="courses-container row" >
53-
<div class="course col">
52+
<div class="cardMain .container-fluid">
53+
<div class="courses-container row">
54+
<div class="course col-3">
5455
<div class="course-preview">
55-
<h6>Course</h6>
56+
<img src="assets/icons/javascript.png" alt="COURSE">
5657
<h2>JavaScript Fundamentals</h2>
58+
<a href="#">Duration: 11 hours <i class="fas fa-chevron-right"></i></a>
59+
<button class="btn">Explore</button>
60+
</div>
61+
</div>
62+
63+
<div class="course col-3">
64+
<div class="course-preview">
65+
<img src="assets/icons/angular.svg" alt="COURSE">
66+
<h2>Angular Fundamentals</h2>
5767
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
5868
<button class="btn">Continue</button>
5969
</div>
6070
</div>
61-
62-
<div class="course col">
71+
<div class="course col-3">
6372
<div class="course-preview">
64-
<h6>Course</h6>
73+
<img src="assets/icons/react.png" alt="COURSE">
74+
<h2>React JS Fundamentals</h2>
75+
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
76+
<button class="btn">Continue</button>
77+
</div>
78+
</div>
79+
<div class="course col-3">
80+
<div class="course-preview">
81+
<img src="assets/icons/javascript.png" alt="COURSE">
6582
<h2>JavaScript Fundamentals</h2>
6683
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
6784
<button class="btn">Continue</button>
6885
</div>
6986
</div>
70-
<div class="course col">
87+
<div class="course col-3">
7188
<div class="course-preview">
72-
<h6>Course</h6>
89+
<img src="assets/icons/javascript.png" alt="COURSE">
7390
<h2>JavaScript Fundamentals</h2>
7491
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
7592
<button class="btn">Continue</button>
7693
</div>
7794
</div>
78-
95+
<div class="course col-3">
96+
<div class="course-preview">
97+
<img src="assets/icons/javascript.png" alt="COURSE">
98+
<h2>JavaScript Fundamentals</h2>
99+
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
100+
<button class="btn">Continue</button>
101+
</div>
102+
</div>
103+
<div class="course col-3">
104+
<div class="course-preview">
105+
<img src="assets/icons/javascript.png" alt="COURSE">
106+
<h2>JavaScript Fundamentals</h2>
107+
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
108+
<button class="btn">Continue</button>
109+
</div>
79110
</div>
80111
</div>
81112

113+
82114
<!-- Include Bootstrap JS and jQuery -->
83115
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
84116
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>

‎static/card.css‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,36 @@
1-
1+
22
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
33

44
* {
55
box-sizing: border-box;
66
}
77

8-
98
.cardMain {
109
background-color: #172439;
1110
font-family: 'Muli', sans-serif;
12-
display: flex;
11+
1312
align-items: center;
1413
justify-content: center;
15-
flex-direction: column;
16-
margin: 20px;
14+
15+
margin: 10px;
1716
}
1817

1918
.courses-container {
2019
align-items: center;
2120
justify-content: center;
22-
2321
}
2422

2523
.course {
26-
border-radius: 10px;
27-
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
28-
display: flex;
24+
25+
2926
overflow: hidden;
3027
align-items: center;
3128
justify-content: center;
32-
width: 100%;
29+
30+
margin: 10px;
31+
padding: 0;
3332
}
3433

35-
36-
3734
.course h6 {
3835
opacity: 0.6;
3936
margin: 0;
@@ -47,10 +44,13 @@
4744
}
4845

4946
.course-preview {
47+
border-radius: 10px;
5048
background-color: #7c3aed;
5149
color: #fff;
5250
padding: 30px;
5351
max-width: 350px;
52+
width: 100%;
53+
height: 100%; /* Added height: 100% */
5454
}
5555

5656
.course-preview a {
@@ -61,7 +61,14 @@
6161
margin-top: 30px;
6262
text-decoration: none;
6363
}
64-
64+
.course-preview img
65+
{
66+
height: 25px;
67+
width: 25px;
68+
border-radius: 3px;
69+
margin-top: -5px;
70+
71+
}
6572
.course-info {
6673
padding: 30px;
6774
position: relative;
@@ -101,15 +108,16 @@
101108
}
102109

103110
.btn {
104-
background-color:#fff;
111+
background-color: #fff;
105112
border: 0;
106113
border-radius: 50px;
107114
color: black;
108115
font-size: 16px;
109116
padding: 10px 22px;
110117
position: absolute;
111-
margin-left: 85px;
118+
margin-left: 85px;
112119
margin-top: 18px;
113120
letter-spacing: 1px;
114-
font-family: 'Muli', sans-serif;
121+
font-family: 'Muli', sans-serif;
115122
}
123+

0 commit comments

Comments
 (0)