Responsive-CSS

By zack263 on Mar 01, 2017

<!DOCTYPE html>

<!-- Original Source: CatsWhoCode 2012-2014
   Link: http://www.catswhocode.com/blog/making-a-website-responsive-in-3-easy-steps
   Link: http://www.catswhocode.com/blog/5-powerful-techniques-for-responsive-web-design
--> 

<!-- Step 1: The Lay Out -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

<!-- Step 10 - Add Font from google fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 

<title>Responsive CSS</title>

<style>

/* Step 2: Set the image */
img { max-width: 100%; }

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}

/* Step 3: Tablet Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

/* Step 4: Video container css */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

/* Step 5 */
.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Step 6: Typography */
html { font-size:100%; } 

/* Step 7 - Responsive Font Size */
@media (min-width: 640px) { body {font-size:1rem;} } 
@media (min-width:960px) { body {font-size:1.2rem;} } 
@media (min-width:1100px) { body {font-size:1.5rem;} } 

/* Step 8 width */
.container {
margin:auto;
width: 69%;
}

/* Step 9 Colors */
/* Step 10 Part 2 Add CSS */
/* Step 10 - add the font-family Raleway line */
body {
background-color: #000000;
color: #00c800;
font-weight: normal;
font-family: 'Raleway', sans-serif;
}

a, .boldgreen {
font-weight: bold;
font-family: 'Raleway', sans-serif;
text-decoration: none;
color: #00fc00;
}

input {
color: #00c800;
background-color: #000000;
border-color: #00fc00;
font-family: 'Raleway', sans-serif;
}

/* Step 10 Part 2 Add CSS */

</style>

<body class="container">
<!-- Step 10 - Link Colors -->
<body bgcolor=black text=#00c800 link=#00fc00 alink=#00fc00 vlink=#00fc00>

<!-- Step 11 - Pick Google Font: Example: Tinos, Inconsolata, Adobe Source Sans, Roboto, Arimo, 
Noto Serif, Titillum, Raleway (add to html and css) -->
</br></br>
<h1>UFC Videos</h1>
<div class="video-container">
    <iframe src="https://www.youtube.com/embed/BU0LxV9PpCM" width="800" height="450" frameborder="0"></iframe>
</div> 
<p><a href="http://www.ufc.com" target="_blank">UFC</a> 209 Embedded: Vlog Series - Episode 2</p>
</br></br></br></br></br></br></br>

<div class="video-container">
    <iframe src=""https://www.youtube.com/embed/HgCr8yddQs0" width="800" height="450" frameborder="0"></iframe>
</div> 
<p><a href="http://bjjscout.com/" target="_blank">BJJScout</a> - Dominick Cruz v Cody Garbrandt UFC 207 Mini-Preview </p>
</br></br></br></br></br></br></br>

<div class="video-container">
    <iframe src="https://www.youtube.com/embed/fYfmCIH3Gq8" width="800" height="450" frameborder="0"></iframe>
</div> 
<p><a href="http://www.ufc.com/" target="_blank">UFC</a> 209: Top 8 Finishes</p>
</br></br></br></br></br></br></br>

Example WebPage with ResponsiveCSS.
<!-- Example Video Container -->
<!-- 
<div class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div> 
-->

</body>
</html> 

Comments

Sign in to comment.
bvbdub2   -  May 30, 2017

Very good stuff and I want to even try to apply some chips on our website https://assignment.essayshark.com/ that are used here. Continue to share such useful information. After all, many people are faced with the problem of adapting sites to different devices, so it is important to solve this problem not only here and now, but also with a vision for the future.

 Respond  
Are you sure you want to unfollow this person?
Are you sure you want to delete this?
Click "Unsubscribe" to stop receiving notices pertaining to this post.
Click "Subscribe" to resume notices pertaining to this post.