Skip to content

Commit 3a87f3a

Browse files
codeIntrovertcodeIntrovert
authored
file uploaD
1 parent 01287c5 commit 3a87f3a

File tree

4 files changed

+218
-0
lines changed

4 files changed

+218
-0
lines changed

‎card.html‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<style>
5+
body
6+
{
7+
background-color: #172439;
8+
padding: 30px;
9+
font-family: sans;
10+
}
11+
.card {
12+
width: 240px;
13+
height: 330px;
14+
background-color: #fff;
15+
border-radius: 30px;
16+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
17+
overflow: hidden;
18+
display: flex;
19+
flex-direction: column;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
24+
.card .logo {
25+
display: flex;
26+
justify-content: center;
27+
align-items: center;
28+
height: 50%;
29+
background-color: #fff;
30+
margin-bottom:-35px;
31+
}
32+
33+
.card .logo img {
34+
width: 110px;
35+
height: 110px;
36+
border-radius: 50%;
37+
}
38+
39+
.card .details {
40+
padding: 10px;
41+
text-align: center;
42+
}
43+
44+
.card .details h3 {
45+
font-size: 25px;
46+
margin-bottom: 5px;
47+
}
48+
49+
.card .details p {
50+
font-size: 16x;
51+
color: #666;
52+
53+
display: flex;
54+
}
55+
56+
.card .duration {
57+
background-color: #f5f5f5;
58+
padding: 5px 10px;
59+
border-radius: 10px;
60+
font-size: 16px;
61+
color: #666;
62+
margin-top: 5px;
63+
}
64+
65+
.card .enroll-btn {
66+
width: 100%;
67+
height: 20%;
68+
background-color: #4CAF50;
69+
display: flex;
70+
justify-content: center;
71+
align-items: center;
72+
}
73+
74+
.card .enroll-btn a {
75+
text-decoration: none;
76+
color: #fff;
77+
display: fixed;
78+
font-weight: bold;
79+
}
80+
</style>
81+
</head>
82+
<body>
83+
<div class="card">
84+
<div class="logo">
85+
<img src="html5logo.png" alt="HTML5 Logo">
86+
</div>
87+
<div class="details">
88+
<h3>HTML 5</h3>
89+
<p>Backbone of the internet we all know and love.</p>
90+
<div class="duration">Duration: 10 Hours</div>
91+
</div>
92+
<div class="enroll-btn">
93+
<a href="#">Enroll for Free</a>
94+
</div>
95+
</div>
96+
</body>
97+
</html>

‎home.html‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
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+
<!-- Include your custom CSS file if needed -->
8+
<link rel="stylesheet" href="styles.css">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
10+
<style>
11+
body
12+
{
13+
background-color: #172439;
14+
padding-left: 5px;
15+
padding-right: 5px;
16+
}
17+
18+
19+
20+
.d-inline-block
21+
{
22+
height: 11.5vh;
23+
}
24+
.navbar
25+
{
26+
margin-bottom: -3vh;
27+
}
28+
hr
29+
{
30+
border-top:3px solid #A78BFA;
31+
width: 90%;
32+
}
33+
34+
.search-container {
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
height: 15vh;
39+
}
40+
41+
.search-box {
42+
position: relative;
43+
display: inline-block;
44+
}
45+
46+
.search-box input[type="text"] {
47+
padding: 10px 20px;
48+
border: none;
49+
border-radius: 20px;
50+
background-color: #3F4A5B;
51+
color: #fff;
52+
width: 22vw;
53+
}
54+
55+
.search-box input[type="text"]::placeholder {
56+
color: #fff;
57+
}
58+
59+
.search-box .search-icon {
60+
position: absolute;
61+
top: 50%;
62+
right: 18px;
63+
height: 20px;
64+
width:20px;
65+
transform: translateY(-50%);
66+
}
67+
68+
</style>
69+
</head>
70+
<body>
71+
<nav class="navbar navbar-expand-lg">
72+
<a class="navbar-brand" href="#">
73+
<!-- Replace the 'logo.svg' with your SVG logo -->
74+
<img src="logo.svg" class="d-inline-block align-top" alt="Logo">
75+
</a>
76+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
77+
<span class="navbar-toggler-icon"></span>
78+
</button>
79+
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
80+
<ul class="navbar-nav">
81+
<li class="nav-item">
82+
<!-- Replace the 'icon1.svg' with your first SVG icon -->
83+
<a class="nav-link" href="#"><img src="icons/home.svg" width="43" height="43" alt="Icon 1"></a>
84+
</li>
85+
<li class="nav-item">
86+
<!-- Replace the 'icon2.svg' with your second SVG icon -->
87+
<a class="nav-link" href="#"><img src="icons/logout.svg" width="43" height="43" alt="Icon 2"></a>
88+
</li>
89+
<li class="nav-item">
90+
<!-- Replace the 'icon3.svg' with your third SVG icon -->
91+
<a class="nav-link" href="#"><img src="icons/profile.svg" width="43" height="43" alt="Icon 3"></a>
92+
</li>
93+
</ul>
94+
</div>
95+
</nav>
96+
97+
98+
<hr>
99+
100+
101+
<div class="search-container">
102+
<div class="search-box">
103+
<input type="text" placeholder="Search" class="search-box">
104+
<img src="icons/search.svg" alt="Search Icon" class="search-icon">
105+
</div>
106+
</div>
107+
108+
109+
110+
111+
112+
113+
114+
115+
<!-- Include Bootstrap JS and jQuery -->
116+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
117+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
118+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
119+
</body>
120+
</html>

‎html5logo.png‎

3.35 KB
Loading

0 commit comments

Comments
 (0)