Advertisement
1xptolevitico69

@Media Basics

Jun 19th, 2019
235
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.09 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang=en>
  3. <head>
  4. <title>@Media Basics</title>
  5. <meta charset=utf-8>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style>
  8. body {  background-color:olive;  }
  9.  
  10. .container {  width:99%;margin:auto;margin-top:-30px;
  11.               padding-bottom:50px;background-color:white;       }
  12.  
  13.  
  14.  
  15.  @media all and (max-width: 768px) {
  16.        h1 {  font-size:8vw;text-align:center;font-family:segoe script;
  17.              color:maroon;padding-top:40px;   }
  18.     iframe {  width:90%; height:380px;margin:auto;display:block;
  19.               border:10px solid blue;padding:5px;
  20.               background-color:orange;   }
  21.         p {   font-family:segoe print;padding:50px 20px 0 40px;
  22.               text-indent:100px;  }
  23.          h2 { display:none;  }
  24.  }
  25.  
  26.  @media all and (min-width: 769px) and (max-width: 1024px){
  27.        .container { margin-top:-40px;   }
  28.        h1 {  font-size:8vw;text-align:center;font-family:courier new;
  29.              color:red;padding-top:30px;   }
  30.     iframe {  width:90%; height:518px;margin:auto;display:block;
  31.               border:20px solid green;padding:5px;  }
  32.         h2 {   font-family:ink free;padding:50px 20px 0 40px;
  33.               text-indent:100px;font-size:30px;color:blue;  }
  34.        p { display:none;  }
  35.  }
  36. </style>
  37. </head>
  38. <body>
  39.  
  40. <div class='container'>
  41.  
  42. <h1>Responsive</h1>
  43.  
  44. <iframe src="https://www.youtube.com/embed/l-8EC1sHZmQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  45.  
  46. <p>Arunachal Pradesh, Assam, Manipur, Meghalaya, Mizoram,
  47. Nagaland, Tripura and Sikkim are eight states located in the
  48. North East of the country and command special importance
  49. in India, not only because of their location but also their
  50. cultural and historical uniqueness. The landscape, the range
  51. of communities and geographical and ecological diversity
  52. make these states quite different from other parts of the
  53. country. They are known as eight siblings and referred to as
  54. ‘eight sisters’ or ‘seven sisters and one brother’. These states
  55. cover an area of 2,63,179 sq. km, approximately eight per cent
  56. of the country’s total geographical area and house around
  57. 3.76 per cent of the total population the country. Around 98
  58. per cent of the boundary of these states has international
  59. borders.
  60. Surrounded by hills and beautiful rivers, these states
  61. fall in the category of eastern Himalayan ranges and
  62. Patkai-Naga hills along with Brahmaputra-Barak river
  63. systems and valley plains. The hills and basins are a mixture
  64. of mountain ranges, plateaus, low hills and valleys. Rich
  65. in natural resources and flora and fauna, the region is a
  66. gateway to east and South-East Asia.
  67. The states have distinct cultures and multiple ethnic
  68. groups and are a fine example of unity in diversity. The
  69. variety of ethnic groups, languages and religions reflect the
  70. multi-cultural character of the states. The region houses
  71. over 200 of the 635 tribal groups in the country, speaking
  72. a variety of Tibeto-Burman languages and dialects. States
  73. like, Arunachal Pradesh, Meghalaya, Mizoram and Nagaland
  74. are predominantly inhabited by tribals with a certain degree
  75. of diversity among the tribes. States like, Assam, Manipur,
  76. Tripura and Sikkim are inhabited by people of various religious
  77. denominations like, Hindus, Christians and Muslims and a
  78. combination of local tribes and communities.</p>
  79.  
  80.  
  81. <h2>IN THE MORNING, when we arrive on foot from Dumont d’Urville, the French scientific base on the Adélie Coast of East Antarctica, we have to break up a thin layer of ice that has formed over the hole we drilled the day before. The hole goes right through the 10-foot-thick ice floe. It’s just wide enough for a man, and below it lies the sea. We’ve never tried to dive through such a small opening. I go first.
  82.  
  83. Pushing and pulling with hands, knees, heels, and the tips of my swim fins, I shimmy through the hole. As I plunge at last into the icy water, I look back—to a sickening sight. The hole has already begun to close behind me.</h2>
  84.  
  85.  
  86. </div>
  87.  
  88.  
  89.  
  90.  
  91.  
  92. <script>
  93.  
  94. </script>
  95. </body>
  96. </htm>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement