120 Design Lessons - Day 003: Difference between revisions
No edit summary |
No edit summary |
||
| Line 5: | Line 5: | ||
<html> | <html> | ||
<html><iframe width="560" height="315" src="https://www.youtube.com/embed/xQQvW0FtOjc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html> | |||
<head> | <head> | ||
Revision as of 21:03, 3 July 2021
<head>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<SCRIPT TYPE="text/javascript">
</SCRIPT>
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
a:link { color:#6495ED; }
a:hover { color:rgb(255,0,0); }
.headercontainer {
width:32.75%; float:left; margin:0px 0.875% 0px 0px;
}
.headercontainer_map {
width:32.75% float:left;
}
.headercontainer_video {
width:100%; float:left;
}
.headercontainer_statuslog {
width:66.375%; float:left;
}
.fluidcontainer {
width:100%; border: 2px solid black; float:left; margin:0px 0.875% 0px 0px; -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.fluidcontainer_map {
width:32.75%; border: 2px solid black; float:left; margin:0px 0px 0px 0px; -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.fluidcontainer_youtubeandstatuslog {
width:100%; max-height:242px;
}
.fluidWrapper {
position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; width:100%; height:100%;
}
.fluidWrapper iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.fluidWrapper img {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
h3 {
font-size:145%; font-family: 'Arvo', serif; letter-spacing:1px; margin-bottom:-3px;
}
h4 {
font-size:120%; font-family: 'Arvo', serif; margin-bottom:-2px;
}
.youtube {
width:100%; border: 2px solid black; float:left; margin-right:0.875%; -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.statuslog {
width:100%; border: 2px solid black; float:left; max-height:244px; -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.taskboard {
height:350px; width:100%; border:2px solid black; -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.controlpanel {
border:2px solid black; height:600px; width:100%; -webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.25); box-shadow: 2px 2px 3px rgba(0,0,0,0.25); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
</style>
</head>
</html>