CSS

Responsive Website :
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
/* On screens that are 600px wide or less, make the menu links stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
</style>
</head>
<body>
<h2>Responsive navigation menu</h2>
<p>Resize the browser window to see the effect: When the screen is less than 600px, the navigation menu will be displayed vertically instead of
horizontally.</p>
<div class="topnav">
<a href="#">Link</a>
</div>
</body>
</html>
Units :
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output
medium is known, such as for print layout.
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)
* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution
screens 1px implies multiple device pixels.
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scale better between different rendering
medium.
Unit Description
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vmin Relative to 1% of viewport's* smaller dimension
vmax Relative to 1% of viewport's* larger dimension
% Relative to the parent element
Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
Animation :
@keyframes mymove {
from {background-color: red;}
to {background-color: blue;}
}
Or devide animation duration into frames , hence instead off from or to code with animation duration percentage percentage .
Dropdown menu :
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
li {
float: left;
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
li.dropdown {
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
</div>
</li>
</ul>
</body>
</html>
Slider :
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
transition: background-color 0.6s ease;
.active, .dot:hover {
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="img_nature_wide.jpg" style="width:100%">

<div class="text">Caption Text</div>
</div>
<img src="img_snow_wide.jpg" style="width:100%">
<div class="text">Caption Two</div>
</div>
<img src="img_mountains_wide.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
function currentSlide(n) {
showSlides(slideIndex = n);
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}

for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
</script>
</body>
</html>
For automatic slideshow js will be :
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
Slider with galary :
<!DOCTYPE html>
<html>
<style>
body {
font-family: Arial;
margin: 0;
*{
img {
vertical-align: middle;
}
/* Position the image container (needed to position the left and right arrows) */
.container {
position: relative;
/* Hide the images by default */
.mySlides {
display: none;
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
/* Number text (1/3 etc) */

.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
/* Container for image text */
.caption-container {
text-align: center;
padding: 2px 16px;
color: white;
.row:after {
content: "";
display: table;
clear: both;
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
.active,
.demo:hover {
opacity: 1;
</style>
<body>
<h2 style="text-align:center">Slideshow Gallery</h2>
<div class="container">
<div class="mySlides">

<img src="img_woods_wide.jpg" style="width:100%">
</div>
<img src="img_5terre_wide.jpg" style="width:100%">
</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="row">
<div class="column">
<img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
</div>
<img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
</div>
<img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
<img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
</div>
<img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
function currentSlide(n) {
showSlides(slideIndex = n);
function showSlides(n) {
let i;
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
</script>
</body>
</html>
Website Layout :
<!DOCTYPE html>
<html>
<head>
<style>
*{
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
.header h1 {
font-size: 50px;
/* Style the top navigation bar */
.topnav {
overflow: hidden;
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
.topnav a {
float: none;
width: 100%;
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</div>
<div class="topnav">
<a href="#" style="float:right">Link</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>

CSS

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS

Uploaded by

Copyright:

Available Formats

Responsive Website :

@media screen and (min-width: 480px) {

<meta name="viewport" content="width=device-width, initial-scale=1">

/* Style the top navigation bar */

/* Style the topnav links */

padding: 14px 16px;

/* Change color on hover */

@media screen and (max-width: 600px) {

<h2>Responsive navigation menu</h2>

in inches (1in = 96px = 2.54cm)

px * pixels (1px = 1/96th of 1in)

pt points (1pt = 1/72 of 1in)

pc picas (1pc = 12 pt)

ex Relative to the x-height of the current font (rarely used)

ch Relative to the width of the "0" (zero)

rem Relative to font-size of the root element

vw Relative to 1% of the width of the viewport*

vh Relative to 1% of the height of the viewport*

vmin Relative to 1% of viewport's* smaller dimension

vmax Relative to 1% of viewport's* larger dimension

% Relative to the parent element

padding: 14px 16px;

li a:hover, .dropdown:hover .dropbtn {

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

.dropdown-content a:hover {background-color: #f1f1f1;}

<a href="javascript:void(0)" class="dropbtn">Dropdown</a>

<a href="#">Link 1</a>

<a href="#">Link 2</a>

<a href="#">Link 3</a>

<meta name="viewport" content="width=device-width, initial-scale=1">

body {font-family: Verdana, sans-serif; margin:0}

.mySlides {display: none}

img {vertical-align: middle;}

/* Next & previous buttons */

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

/* Position the "next button" to the right */

border-radius: 3px 0 0 3px;

/* On hover, add a black background color with a little bit see-through */

padding: 8px 12px;

/* Number text (1/3 etc) */

transition: background-color 0.6s ease;

from {opacity: .4}

/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

.prev, .next,.text {font-size: 11px}

<div class="mySlides fade">

<div class="numbertext">1 / 3</div>

<img src="img_nature_wide.jpg" style="width:100%">

<div class="mySlides fade">

<div class="numbertext">2 / 3</div>

<img src="img_snow_wide.jpg" style="width:100%">

<div class="text">Caption Two</div>

<div class="mySlides fade">

<div class="numbertext">3 / 3</div>

<img src="img_mountains_wide.jpg" style="width:100%">

<div class="text">Caption Three</div>

<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)">❯</a>

<span class="dot" onclick="currentSlide(1)"></span>

<span class="dot" onclick="currentSlide(2)"></span>

<span class="dot" onclick="currentSlide(3)"></span>

let slides = document.getElementsByClassName("mySlides");