Responsive and based device icon

Responsive and based device icon



<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />



<!-- To support old sizes -->
<link rel="apple-touch-icon" sizes="57x57" href="path/favicons/apple-touch-icon-57x57.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="72x72" href="path/favicons/apple-touch-icon-72x72.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="114x114" href="path/favicons/apple-touch-icon-114x114.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="144x144" href="path/favicons/apple-touch-icon-144x144.png?v=5c11f68f183dc">

<!-- To support new sizes -->
<link rel="apple-touch-icon" sizes="60x60" href="path/favicons/touch-icon-iphone-60x60.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="76x76" href="path/favicons/touch-icon-ipad-76x76.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="120x120" href="path/favicons/touch-icon-iphone-retina-120x120.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="152x152" href="path/favicons/touch-icon-ipad-retina-152x152.png?v=5c11f68f183dc">
<link rel="apple-touch-icon" sizes="180x180" href="path/favicons/apple-touch-icon-180x180.png?v=5c11f68f183dc">

<!-- To support Android -->
<link rel="icon" sizes="192x192" href="path/favicons/touch-icon-192x192.png?v=5c11f68f183dc" >
<link rel="icon" sizes="128×128" href="path/favicons/favicon.png?v=5c11f68f183dc" >

I most liked Box shadow like this

2. div{box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
3.     margin: 0 7.6923%;}
4. 
   
5. 
   
6. 
   
7. 
   

8. 
   

Embeding video repsonsive in html page

How do responsive in embeded video in html page

1. Embed video code from youtube or anywhere
2. HTML code is below
3. CSS code is below

Just change your video path only everything tested, working perfectly.

<div class="main-video-container">
                <div class="myvideowraper">
                    <!-- Copy & Pasted from YouTube -->
                            <iframe width="764" height="429" src="videoembedcodehere" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                </div>
</div>
                                         

<style type="text/css">


/* Embeded video responsive */
.myvideowraper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 0px;
  height: 0;
}
.myvideowraper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* End video responsive */


.main-video-container{ max-width:  767px !important; overflow-x: hidden; margin:0px auto; }

 @media only screen and (max-width:1366px) {
.main-video-container{ max-width:  767px !important; overflow-x: hidden; margin:0px auto; }
}



/* flex box css */

.mainsection-items{flex-direction:row; display: flex; align-items: center; justify-content: center; min-height: 200px; height: 100%;  border: solid 1px #ccc }
.box1{ width: 33.3%; }
</style>   
 

Array data display in list / span Array with id for single items

Array data display in list / span
Array with id for single items

<h2>JavaScript Arrays</h2>

<p id="demo"></p>

<script>
n = 0;
var cars = ["Saab", "Volvo", "BMW"];

var str = "";
for (var i = 0; i < cars.length; i++)
{
n = n + 1;
str = str + "<span id='" + n +"'>this car is:" + cars[i] + "</span><br>";

//str += "<li>" + cars[i] + "</li>";

//document.write("this car name is :" + cars[i] + "<br>");
 }

document.getElementById("demo").innerHTML = str;

</script>