45 lines
8.8 KiB
HTML
45 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Assignment 3</title>
|
|
|
|
<link rel="stylesheet" href="assets/css/styles.css">
|
|
|
|
<style>
|
|
.floatLeft{
|
|
padding: 20px;
|
|
float: left;
|
|
}
|
|
.floatRight{
|
|
padding: 20px;
|
|
float: right;
|
|
}
|
|
#inner{
|
|
column-count: unset;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="outer">
|
|
<h1>HTML5 Columns and Google Fonts Assignment</h1>
|
|
<div id="inner">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae tortor condimentum lacinia quis vel eros donec ac. Curabitur gravida arcu ac tortor. Vitae purus faucibus ornare suspendisse sed nisi. Suscipit tellus mauris a diam. Commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Sagittis vitae et leo duis ut diam quam. Ultrices tincidunt arcu non sodales. Risus quis varius quam quisque id diam vel. Id velit ut tortor pretium. Sed viverra tellus in hac habitasse platea dictumst vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Sit amet justo donec enim diam vulputate ut pharetra. Varius sit amet mattis vulputate enim nulla. Feugiat vivamus at augue eget. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Ullamcorper malesuada proin libero nunc consequat interdum. Sit amet justo donec enim diam vulputate ut pharetra sit. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean.</p>
|
|
<video class="floatLeft" width="320" height="150" autoplay muted>
|
|
<source src="assets/video/megashigi-gource.mp4" type="video/mp4">
|
|
Your browser does not support this video tag. (What are you trying to view this on?)
|
|
</video>
|
|
<p>Tellus cras adipiscing enim eu turpis egestas. Et molestie ac feugiat sed lectus vestibulum. Parturient montes nascetur ridiculus mus. Nunc mi ipsum faucibus vitae. Sed id semper risus in. Nunc sed augue lacus viverra vitae congue eu. Facilisis gravida neque convallis a. Tortor at auctor urna nunc id cursus metus aliquam. Ultrices eros in cursus turpis massa. In ante metus dictum at tempor. Diam sit amet nisl suscipit adipiscing bibendum est. Placerat orci nulla pellentesque dignissim. Odio morbi quis commodo odio aenean sed adipiscing diam donec. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Est ante in nibh mauris cursus mattis molestie a. Tristique senectus et netus et malesuada fames ac turpis. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Et tortor at risus viverra adipiscing at. Arcu bibendum at varius vel.</p>
|
|
<iframe class="floatRight" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3239.977453855088!2d139.77236331570757!3d35.70217243018944!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ea73ea6f4ff%3A0x5eb9f1e50fe061e3!2sAkihabara%2C%20Taito%20City%2C%20Tokyo%20110-0006%2C%20Japan!5e0!3m2!1sen!2sus!4v1675892146909!5m2!1sen!2sus" width="300" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
|
|
<p>Dolor sed viverra ipsum nunc. Consectetur lorem donec massa sapien faucibus et molestie. Tellus in metus vulputate eu scelerisque felis. Ultrices neque ornare aenean euismod elementum. Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Turpis massa tincidunt dui ut ornare lectus. Bibendum arcu vitae elementum curabitur vitae. Odio ut enim blandit volutpat. Faucibus purus in massa tempor. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Convallis convallis tellus id interdum velit laoreet id donec ultrices. Sagittis orci a scelerisque purus semper eget. Massa eget egestas purus viverra accumsan in nisl. Integer enim neque volutpat ac tincidunt. In hac habitasse platea dictumst quisque sagittis purus sit amet. Nunc consequat interdum varius sit amet mattis vulputate enim. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit.</p>
|
|
<iframe class="floatLeft" width="240" height="140" src="https://www.youtube-nocookie.com/embed/7xbKejvXIGE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<p>Sit amet mauris commodo quis imperdiet. Iaculis eu non diam phasellus vestibulum lorem sed risus. Quis hendrerit dolor magna eget. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Odio ut sem nulla pharetra diam. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Magna eget est lorem ipsum dolor sit amet consectetur. Amet tellus cras adipiscing enim eu turpis egestas pretium. Proin fermentum leo vel orci porta non pulvinar neque laoreet. Fames ac turpis egestas sed tempus urna et pharetra pharetra. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Ridiculus mus mauris vitae ultricies leo integer. Rhoncus urna neque viverra justo nec. Sem et tortor consequat id. Amet dictum sit amet justo donec enim diam vulputate ut. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim. Neque volutpat ac tincidunt vitae semper quis lectus. Nisi porta lorem mollis aliquam ut porttitor leo.</p>
|
|
<iframe class="floatRight" width="340" height="240" src="https://www.youtube-nocookie.com/embed/LaloFVeUvOk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
|
<p>Purus semper eget duis at tellus at urna. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Morbi tempus iaculis urna id volutpat. Sapien eget mi proin sed libero enim sed faucibus. Mattis pellentesque id nibh tortor id aliquet lectus proin. Malesuada bibendum arcu vitae elementum curabitur. A lacus vestibulum sed arcu non odio euismod lacinia. Accumsan sit amet nulla facilisi morbi. Vitae tempus quam pellentesque nec nam. Scelerisque viverra mauris in aliquam sem fringilla ut morbi tincidunt. Cras semper auctor neque vitae tempus quam pellentesque nec nam. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Etiam erat velit scelerisque in dictum. Volutpat maecenas volutpat blandit aliquam etiam erat velit. Sed risus pretium quam vulputate dignissim suspendisse. Sodales ut etiam sit amet nisl purus in mollis. Id leo in vitae turpis massa. Tellus molestie nunc non blandit massa enim nec dui. Eget mi proin sed libero enim sed faucibus.</p>
|
|
<iframe class="floatLeft" src="https://itch.io/embed/1709477?bg_color=283044&fg_color=78a1bb&link_color=ffbc42&border_color=434752" width="208" height="167" frameborder="0"><a href="https://lunarpenguin.itch.io/photo-gallery">Photo Gallery by Lunar_Penguin</a></iframe>
|
|
<p>Eget velit aliquet sagittis id consectetur purus. Eu turpis egestas pretium aenean pharetra magna. Pharetra diam sit amet nisl suscipit adipiscing. At tempor commodo ullamcorper a lacus vestibulum sed. Risus quis varius quam quisque. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Donec enim diam vulputate ut pharetra sit amet. Erat imperdiet sed euismod nisi porta lorem. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Neque egestas congue quisque egestas diam in arcu. Viverra adipiscing at in tellus integer. Cursus sit amet dictum sit. Diam vel quam elementum pulvinar etiam non. Gravida cum sociis natoque penatibus. Tellus in metus vulputate eu scelerisque felis imperdiet proin fermentum. Commodo viverra maecenas accumsan lacus vel facilisis volutpat. Eu lobortis elementum nibh tellus molestie. Amet consectetur adipiscing elit ut aliquam purus.</p>
|
|
<p>Mauris vitae ultricies leo integer malesuada nunc. Ante in nibh mauris cursus. Aliquet sagittis id consectetur purus ut faucibus pulvinar. Urna condimentum mattis pellentesque id nibh tortor id aliquet. In arcu cursus euismod quis viverra nibh. Congue eu consequat ac felis. Sed viverra tellus in hac. Nisi porta lorem mollis aliquam ut porttitor leo a. Lacus suspendisse faucibus interdum posuere. Augue lacus viverra vitae congue eu consequat. Dictum at tempor commodo ullamcorper a lacus vestibulum. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit eget. Pellentesque id nibh tortor id aliquet lectus proin. Quam pellentesque nec nam aliquam. Egestas erat imperdiet sed euismod nisi porta lorem mollis. Tellus in metus vulputate eu scelerisque felis. Proin sagittis nisl rhoncus mattis. Eget egestas purus viverra accumsan in nisl nisi scelerisque. Cum sociis natoque penatibus et magnis dis.</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |