-
Notifications
You must be signed in to change notification settings - Fork 0
/
single_video.html
144 lines (139 loc) · 6.78 KB
/
single_video.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="./src/img/fav-icon.ico" type="image/x-icon" />
<!-- linking font awesome -->
<link rel="stylesheet" href="./src/css/all.min.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"/> -->
<!-- linking css file -->
<link rel="stylesheet" href="./src/css/style.css" />
<link rel="stylesheet" href="./src/css/animation.css" />
<title>OFPPT Archive || digital development</title>
<meta name="description" content="Discover the resources you need to succeed in digital development.">
</head>
<body>
<div id="go-top">
<i class="fa-solid fa-arrow-up"></i>
</div>
<!-- gear icon -->
<i class="fa-solid fa-gears settings-icon" id="settings-icon"></i>
<!-- settings -->
<div class="settings" id="settings">
<h4>website settings</h4>
dark mode
<input class="switch" type="checkbox" id="mode-change" checked />
<ul class="colors">
<li class="color" style="background-color: rgba(255, 99, 71, 1)"></li>
<li class="color" style="background-color: rgba(255, 128, 128,1)"></li>
<li class="color" style="background-color: rgba(255, 176, 0,1)"></li>
<li class="color" style="background-color: rgba(186,9,19,1)"></li>
<li class="color" style="background-color: rgba(79, 155, 115, 1)"></li>
<li class="color" style="background-color: rgba(56, 118, 191,1)"></li>
</ul>
</div>
<!-- settings -->
<!-- header section starts here -->
<i class="menu-icon fa fa-bars" id="menu-icon"></i>
<header class="container">
<a href="/">
<img src="./src/img/devlogo.png" alt="Ofppt logo" class="logo" /></a>
<nav class="navbar" id="navbar">
<ul class="main-menu">
<li>
<a href="index.html"><i class="fa fa-home"></i>Home</a>
</li>
<li>
<a href="about.html"><i class="fa fa-question-circle"></i>about</a>
</li>
<li>
<a href="Team.html"><i class="fa fa-users"></i>our team</a>
</li>
<li>
<a href="contact.html"><i class="fa fa-headset"></i>Contact</a>
</li>
<li>
<a href=""><i class="fa fa-list"></i>Courses</a>
<div class="sub-menu">
<img src="./src/img/Dropdown menu-bro.svg" alt="mega menu image" class="image pulse" />
<div class="links">
<ul>
<li class="active">
<a href=""><i class="fa fa-video"></i>Videos</a>
</li>
<li>
<a href=""><i class="fa fa-file"></i>Documents</a>
</li>
<li>
<a href=""><i class="fa fa-globe"></i>Websites</a>
</li>
</ul>
<ul>
<li>
<a href=""><i class="fa fa-computer"></i>Applications</a>
</li>
<li>
<a href=""><i class="fa fa-gamepad"></i>Games</a>
</li>
<li>
<a href=""><i class="fa fa-folder"></i>Articles</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</header>
<!-- ! header section ends here -->
<main id="single_video_page" class="container">
<div class="main_video">
<video src="./src/video/Python_Threading.mp4" controls>
</video>
<h2 class="main-video-title">Multi Threading in Python</h2>
<details class="video_description">
<summary>Description » Lorem ipsum dolor sit, amet</summary>
consectetur adipisicing elit. Impedit animi, nobis asperiores maxime
consequatur aut? At, nostrum eveniet tempora qui voluptatum quod aspernatur dolorem commodi, alias,
rerum quas molestiae ratione! Eius sit quia omnis! Omnis, ipsam porro? Quibusdam sapiente enim
distinctio rerum est architecto unde, reprehenderit natus? Minus, assumenda. Ducimus, porro non velit
quibusdam voluptates pariatur fuga illo maxime ipsa ea nemo qui error commodi repudiandae sequi dolor
quidem, impedit provident maiores aspernatur nesciunt quaerat! Ex, quis illo iste id non magni. Vero,
quam assumenda et libero eius dicta aliquid? Saepe sunt laudantium non. Minima dicta excepturi quasi
repellendus praesentium pariatur, accusamus sapiente. Libero odit aut, ab debitis a pariatur esse
corrupti voluptatum? Optio, molestias beatae quas est distinctio inventore? Assumenda fugit blanditiis
corporis laudantium aperiam! Debitis officiis blanditiis itaque accusantium cupiditate reprehenderit
deleniti quasi animi vel nemo, tempora nisi dolorem autem! Unde, nobis eius omnis, modi, reprehenderit
itaque repudiandae similique incidunt laboriosam temporibus
</details>
</div>
<aside>
<h1 class="section-title">related videos</h1>
<div class="related_videos">
<div class="related_video">
<img src="./src/img/AIWebsites.jpg">
<i class="fa fa-play-circle"></i>
</div>
<div class="related_video">
<img src="./src/img/codePro.jpg">
<i class="fa fa-play-circle"></i>
</div>
<div class="related_video">
<img src="./src/img/cssMediaquery.jpg">
<i class="fa fa-play-circle"></i>
</div>
<div class="related_video">
<img src="./src/img/Functions.jpg">
<i class="fa fa-play-circle"></i>
</div>
<div class="related_video">
<img src="./src/img/gototop.jpg">
<i class="fa fa-play-circle"></i>
</div>
</div>
</aside>
</main>
<script src="./src/js/script.js"></script>
</body>
</html>