Skip to content

Commit f7cead5

Browse files
codeIntrovertcodeIntrovert
committed
struture
1 parent a9d341e commit f7cead5

File tree

11 files changed

+214
-174
lines changed

11 files changed

+214
-174
lines changed

‎assets/LPlogo.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

icons/home.svg renamed to assets/icons/home.svg

File renamed without changes.

icons/logout.svg renamed to assets/icons/logout.svg

File renamed without changes.

icons/profile.svg renamed to assets/icons/profile.svg

File renamed without changes.

icons/search.svg renamed to assets/icons/search.svg

File renamed without changes.

logo.svg renamed to assets/logo.svg

File renamed without changes.

‎card.html‎

Lines changed: 18 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,27 @@
11
<!DOCTYPE html>
22
<html>
33
<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>
4+
<link rel="preconnect" href="https://fonts.googleapis.com">
5+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
6+
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans&display=swap" rel="stylesheet">
7+
<link rel="stylesheet" href="static/card.css">
818
</head>
829
<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>
10+
<div class="cardMain">
11+
<div class="courses-container">
12+
<div class="course">
13+
<div class="course-preview">
14+
<h6>Course</h6>
15+
<h2>JavaScript Fundamentals</h2>
16+
<a href="#"> <button class="btn">Continue</button></i></a>
17+
18+
</div>
19+
20+
</div>
9421
</div>
9522
</div>
23+
</div>
24+
25+
</div>
9626
</body>
9727
</html>

‎home.html‎

Lines changed: 21 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -4,74 +4,17 @@
44
<title>Learning Path</title>
55
<!-- Include Bootstrap CSS -->
66
<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>
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+
<link rel="stylesheet" href="/static/home.css">
9+
<link rel="stylesheet" href="static/card.css">
6910
</head>
11+
12+
7013
<body>
7114
<nav class="navbar navbar-expand-lg">
7215
<a class="navbar-brand" href="#">
7316
<!-- Replace the 'logo.svg' with your SVG logo -->
74-
<img src="logo.svg" class="d-inline-block align-top" alt="Logo">
17+
<img src="assets/logo.svg" class="d-inline-block align-top" alt="Logo">
7518
</a>
7619
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
7720
<span class="navbar-toggler-icon"></span>
@@ -80,15 +23,15 @@
8023
<ul class="navbar-nav">
8124
<li class="nav-item">
8225
<!-- 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>
26+
<a class="nav-link" href="#"><img src="assets/icons/home.svg" width="43" height="43" alt="Icon 1"></a>
8427
</li>
8528
<li class="nav-item">
8629
<!-- 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>
30+
<a class="nav-link" href="#"><img src="assets/icons/logout.svg" width="43" height="43" alt="Icon 2"></a>
8831
</li>
8932
<li class="nav-item">
9033
<!-- 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>
34+
<a class="nav-link" href="#"><img src="assets/icons/profile.svg" width="43" height="43" alt="Icon 3"></a>
9235
</li>
9336
</ul>
9437
</div>
@@ -101,16 +44,22 @@
10144
<div class="search-container">
10245
<div class="search-box">
10346
<input type="text" placeholder="Search" class="search-box">
104-
<img src="icons/search.svg" alt="Search Icon" class="search-icon">
47+
<img src="assets/icons/search.svg" alt="Search Icon" class="search-icon">
10548
</div>
10649
</div>
107-
10850

51+
<div class="cardMain">
52+
<div class="courses-container">
53+
<div class="course">
54+
<div class="course-preview">
55+
<h6>Course</h6>
56+
<h2>JavaScript Fundamentals</h2>
57+
<a href="#">View all chapters <i class="fas fa-chevron-right"></i></a>
58+
<button class="btn">Continue</button>
59+
</div>
60+
10961

110-
111-
112-
113-
62+
</div>
11463

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

‎navbar/navbarU.html‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,14 @@
55
<!-- Include Bootstrap CSS -->
66
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
77
<!-- Include your custom CSS file if needed -->
8-
<link rel="stylesheet" href="styles.css">
9-
<style>
10-
body
11-
{
12-
background-color: #172439;
13-
}
8+
<link rel="stylesheet" href="/static/home.css">
149

15-
16-
</style>
1710
</head>
1811
<body>
19-
<nav class="navbar navbar-expand-lg navbar-light bg-light">
12+
<nav class="navbar navbar-expand-lg">
2013
<a class="navbar-brand" href="#">
2114
<!-- Replace the 'logo.svg' with your SVG logo -->
22-
<img src="LPlogo.svg" width="30" height="30" class="d-inline-block align-top" alt="Logo">
15+
<img src="assets/logo.svg" class="d-inline-block align-top" alt="Logo">
2316
</a>
2417
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
2518
<span class="navbar-toggler-icon"></span>
@@ -28,19 +21,23 @@
2821
<ul class="navbar-nav">
2922
<li class="nav-item">
3023
<!-- Replace the 'icon1.svg' with your first SVG icon -->
31-
<a class="nav-link" href="#"><img src="icon1.svg" width="30" height="30" alt="Icon 1"></a>
24+
<a class="nav-link" href="#"><img src="assets/icons/home.svg" width="43" height="43" alt="Icon 1"></a>
3225
</li>
3326
<li class="nav-item">
3427
<!-- Replace the 'icon2.svg' with your second SVG icon -->
35-
<a class="nav-link" href="#"><img src="icon2.svg" width="30" height="30" alt="Icon 2"></a>
28+
<a class="nav-link" href="#"><img src="assets/icons/logout.svg" width="43" height="43" alt="Icon 2"></a>
3629
</li>
3730
<li class="nav-item">
3831
<!-- Replace the 'icon3.svg' with your third SVG icon -->
39-
<a class="nav-link" href="#"><img src="icon3.svg" width="30" height="30" alt="Icon 3"></a>
32+
<a class="nav-link" href="#"><img src="assets/icons/profile.svg" width="43" height="43" alt="Icon 3"></a>
4033
</li>
4134
</ul>
4235
</div>
4336
</nav>
37+
38+
39+
<hr>
40+
4441

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

0 commit comments

Comments
 (0)