<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Project1_Video</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<title>Ollie Bike Sharing</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="container">
<div class="nav">
<br>
<img src="http://www.creme-de-languedoc.com/pin-img/cooking.gif" style="height: 120px;"> </img> <br>
<h2> Global Cooking </h2>
<ul>
<li>Home </li>
<li>About </li>
<li>Videos</li>
<li>Rate Us</li>
</ul>
</div>
<div class="main">
<h1 style= background-color:#E9E581> Global Cooking Videos </h1>
<h3>Share Your Pedals with the World.</h3>
<p>Here is a <a href="cities.html">list </a> of cities where you can find us. Need a set of wheels while you're in town? Use Global Eats to pair your perfect vacation with a stylish, affordable bike rental.</p>
<div class ="vid">
<video controls> <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4"></video>Video One
<video controls> <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4"></video>Video One
<video controls> <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4"></video>Video One
<video controls> <source src="https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-1/ollie.mp4" type="video/mp4"></video> Video One
</div>
</div>
</div>
</body>
<div class="footer">
<h2 style="font-size: 24px"> Thanks for Stopping By Global Cooking <br><br><img src="http://pre04.deviantart.net/1a7c/th/pre/f/2015/351/9/3/social_media_black_icons_by_yakoubbazzar-d9kfpqs.png" height= 50px> </img> </h2>
</div>
</html>
</body>
</html>
/*Downloaded from https://www.codeseek.co/Jussic/project1_video-PGGywa */
html, body {
font-family: sans-serif;
margin: 0;
width: 100%;
height: 100%;
background-color: F6F6F6
}
.nav h2 {
font-size: 100%
}
h1 {
font-size: 48px;
}
p {
max-width: 65%;
min-width: 500px;
}
h2 {
text-align: center;
font-size: 2.6rem;
}
div {
padding-right: 30px;
height: 100%;
width: 100%;
}
video {
background-color: #000000;
border: 2px solid black;
}
.container {
display: flex;
}
.main {
padding-left: 30px;
min-width: 75%;
}
.nav {
background-color: #DE1B1B;
max-width: %;
min-width: 140px;
flex: 100%;
}
video {
width:40%;
height: auto;
float:right;
}
.footer {
background-color: #2B2B2B;
color: #fff;
max-width: 100%;
max-height: 30%;
min-width: 140px;
margin: 0px;
padding: 1px;
flex: 100%;
}
.nav h1 {
padding-left:0px;
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
