Scribd
Upload
18 views

Responsive Website:: Example

Uploaded by

creatorcoder268
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

Responsive Website:: Example

Uploaded by

creatorcoder268
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

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>

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

<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;

background-color: #333;

li {

float: left;

li a, .dropbtn {

display: inline-block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

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

background-color: red;

li.dropdown {

display: inline-block;

.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;

text-decoration: none;

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>

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

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

</div>

</li>

</ul>

</body>

</html>

Slider :

<!DOCTYPE html>

<html>

<head>

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

<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%;

display: inline-block;

transition: background-color 0.6s ease;

.active, .dot:hover {

background-color: #717171;

/* 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>

<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>

<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>

</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>

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

<span class="dot" onclick="currentSlide(3)"></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;
let slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}

Slider with galary :

<!DOCTYPE html>

<html>

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

<style>

body {

font-family: Arial;

margin: 0;

*{

box-sizing: border-box;

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;

background-color: #222;

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">

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


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

</div>

<div class="mySlides">

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

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

</div>

<div class="mySlides">

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

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

</div>

<div class="mySlides">

<div class="numbertext">4 / 6</div>

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

</div>

<div class="mySlides">

<div class="numbertext">5 / 6</div>

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

</div>

<div class="mySlides">

<div class="numbertext">6 / 6</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>

<div class="column">

<img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">

</div>

<div class="column">

<img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">

</div>
<div class="column">

<img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">

</div>

<div class="column">

<img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">

</div>

<div class="column">

<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 slides = document.getElementsByClassName("mySlides");

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 < 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";

captionText.innerHTML = dots[slideIndex-1].alt;

</script>

</body>

</html>
Website Layout :

<!DOCTYPE html>

<html>

<head>

<style>

*{

box-sizing: border-box;

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;

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;

/* 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 */

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

.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 */

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

.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="#">Link</a>

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

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

<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>

<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>

<div class="rightcolumn">

<div class="card">

<h2>About Me</h2>

<div class="fakeimg" style="height:100px;">Image</div>

<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 class="fakeimg"><p>Image</p></div>

<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>

You might also like