dzcode.talk/HTML-CSS-BOOTSTRAP-SCSS/learning/traversey-html-css/html/video.html at master · zed-dz/dzcode.talk · GitHub

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
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">

	<link rel="stylesheet" href="../css/video.css">

	<title>Video Background</title>

</head>

<body>

	<header class="v-header container">
		<div class="fullscreen-video-wrap">
			<!--  https://www.videvo.net/video/typing-on-computer-white-bg/4475/ -->
			<!-- DO NOT USE THIS VIDEO, I JUST NEEDED A HOSTED VIDEO FOR THIS CODEPEN> USE THE ONE ABOVE -->
			<video src="https://production.cdmycdn.com/assets/marketing-pages/intensives/bws/coding-scenes-9a2031e8142b40bdb5d936d5eef33dfa.mp4"
			  autoplay="true" loop="true">
			</video>
		</div>
		<div class="header-overlay"></div>
		<div class="header-content text-md-center">
			<h1>Welcome Everyone</h1>
			<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id temporibus perferendis necessitatibus numquam amet impedit
				explicabo? Debitis quasi ullam aperiam!</p>
			<a class="btn">Find Out More</a>
		</div>
	</header>

	<section class="section section-a">
		<div class="container">
			<h2>Section A</h2>
			<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et maiores blanditiis
				doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod quae accusantium, ex inventore ducimus.
				Beatae mollitia exercitationem, quam similique, consectetur ratione reprehenderit delectus neque eligendi facere soluta
				dolor ducimus!</p>
		</div>
	</section>

	<section class="section section-b">
		<div class="container">
			<h2>Section B</h2>
			<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, impedit amet minima iste autem cumque et maiores blanditiis
				doloribus aut dolorum quaerat non est voluptatum, tempore ut dolorem voluptas quod quae accusantium, ex inventore ducimus.
				Beatae mollitia exercitationem, quam similique, consectetur ratione reprehenderit delectus neque eligendi facere soluta
				dolor ducimus!</p>
		</div>
	</section>


</body>

</html>