-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcase1.html
67 lines (67 loc) · 4.6 KB
/
case1.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Portfolio</title>
<!-- For responsive design scale the width of the website to the device width-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900|Cormorant+Garamond:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<a class="header-brand" href="index.html">mmtuts</a>
<nav>
<ul>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About me</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<a class="header-cases" href="cases.html">Cases</a>
</nav>
</header>
<!-- Would it have been better here to only have a div and no section so that we could center the content correctly vertically no matter the vertical height of the device? See the CSS table code trick.-->
<main>
<section class="case-vid">
<div class="wrapper">
<h2>Tutorial</h2>
<video src="video/tutorial.mp4" poster="" controls></video>
<article>
<h3>REC | VIDEO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus maximus ac enim vulputate accumsan. Donec eget leo ullamcorper, pulvinar turpis sit amet, sollicitudin nisi. Donec sed quam sed tortor tempor rhoncus non id diam. Etiam velit diam, interdum sed facilisis id, vehicula vel leo. Vestibulum elementum eleifend ipsum et dignissim. Nulla lacinia lobortis orci, id finibus nibh malesuada in. Vestibulum aliquet elit vel enim rhoncus auctor. Pellentesque posuere elit vitae felis ultricies euismod. Maecenas eget tempor magna, eu dapibus dolor. Maecenas facilisis vel nisl eu venenatis. Fusce id dictum est, et dictum arcu. Aenean lobortis, tellus viverra luctus pulvinar, libero velit semper augue, non tempus felis leo ut erat. Donec placerat felis tincidunt felis volutpat sodales. Nulla accumsan feugiat dolor ut accumsan. Ut iaculis nunc at magna elementum dignissim. Praesent pretium ante finibus consectetur maximus. Proin nibh orci, congue sit amet imperdiet a, dignissim id sapien. Nullam a sodales nisi. In hac habitasse platea dictumst. Morbi nec pharetra enim, et congue nisl. Etiam magna metus, tincidunt ut porta viverra, aliquet maximus lacus. Ut efficitur est enim, quis tincidunt metus ullamcorper nec. Donec consequat dapibus luctus. Nunc volutpat, lacus congue luctus tempus, lacus mi tincidunt arcu, id dapibus ex odio non augue. Etiam pellentesque nulla vitae luctus tristique. Aenean quis ultricies lorem. In suscipit sit amet nisl eget aliquam. Etiam varius porta volutpat. Aenean interdum id odio eget gravida. Fusce pulvinar massa sed ornare fermentum. Donec vel ligula in lectus porttitor tempor in at arcu. Pellentesque tempor euismod porta. Morbi vel condimentum quam, sed egestas purus.</p>
</article>
</div>
</section>
</main>
<div class="wrapper">
<footer>
<ul class="footer-links-main">
<li><a href="">Home</a></li>
<li><a href="">Cases</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">About me</a></li>
<li><a href="">Contact</a></li>
</ul>
<ul class="footer-links-cases">
<li><p>Latest cases</p></a></li>
<li><a href="">MALING SHAOLIN - WEB DEVELOPMENT</a></li>
<li><a href="">EXCELLENTO - WEB DEVELOPMENT, SEO</a></li>
<li><a href="">MMTUTS - YOUTUBE CHANNEL</a></li>
<li><a href="">WELTEC - VIDEO PRODUCTION</a></li>
</ul>
<div class="footer-sm">
<!--Of course add the actual links to the social media-->
<a href="">
<img src="img/youtube.png" alt="youtube icon">
</a>
<a href="">
<img src="img/twitter.png" alt="twitter icon">
</a>
<a href="">
<img src="img/facebook.png" alt="facebook icon">
</a>
</div>
</footer>
</div>
</body>
</html>