Web Design& development programming Studio: October 2021

Sunday, October 31, 2021

Bordered Button Groups

Bordered Button Groups Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>Bordered Button Groups</h1>

<div class="btn-groups">

<button class="button">button</button>

</div>

</body>

</html>

CSS Bordered Button Groups Style Code

.btn-groups .button{

background-color: green;

border:1px solid green ;

color: #fff;

padding:15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

cursor: pointer;

float: left;

}

.btn-groups .button:not(.lastchild){

border-right: none;

}

.btn-groups .button:hover{

background-color: #3e8e41;

}

Saturday, October 30, 2021

Shadow Button

Shadow Button Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>Css Shadow Button</h1>

<button class="button button1">Shadow button</button>

<button class="button button2">Shadow button on hover</button>

</body>

</html>

CSS Shadow Button Style

.button{

background-color: green;

border: none;

color: #fff;

padding:15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin:4px 2px ;

cursor: pointer;

-webkit-transition-duration:0.4s ;

transition-duration:0.4s ;

}

.button1{

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

}

.button2:hover{

box-shadow:0px 12px 16px rgba(0,0,0,0.24)0 17px 5px 0 rgba(0,0,0,0.24) ;

}

Disabled Button

Disabled Button Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<button class="button">Nomal Boutton</button>

<button class="button disable" >disable Boutton</button>

</body>

</html>

CSS Disabled Button Style Code

.button{

background-color: green;

border: none;

color: #fff;

padding:15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin:4px 2px;

cursor: pointer;

}

.disable{

opacity:0.6;

cursor: not-allowed;

}

Thursday, October 28, 2021

Button-Groups

Button-Groups Code

<!DOCTYPE html>

<html>

<head>

<title>web design</title>

</head>

<body>

<h1>CSS Button Group</h1>

<button class="button">button</button>

</div>

</body>

</html>

CSS Button-Groups Style Code

.btn-group,.button{

background-color: green;

border: none;

color: #fff;

padding: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin:4px 2px;

cursor: pointer;

float: left;

}

.button:hover{

background-color: gray;

}

Wednesday, October 27, 2021

Hoverable Button

Hoverable Button Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>Hoverable Button</h1>

<button class="button button1">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

CSS Hoverable Button

.button{

background-color: green;

border: none;

color: #fff;

padding:15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin:4px 2px;

cursor: pointer;

}

.button1{

background-color: white;

color: #000;

border: 2px solid green;

}

.button1:hover{

background-color: green;

color: #fff;

}

.button2{

background-color: white;

color: #000;

border: 2px solid blue;

}

.button2:hover{

background-color: blue;

color: #fff;

}

.button3{

background-color: white;

color: #000;

border:2px solid red ;

}

.button3:hover{

background-color: red;

color: #fff;

}

.button4{

background-color: white;

color: #000;

border: 2px solid gray;

}

.button4:hover{

background-color: gray;

color: #fff;

}

.button5{

background-color: white;

color: #000;

border: 2px solid black;

}

.button5:hover{

background-color: black;

color: #fff;

}

Tuesday, October 26, 2021

Colored Button Border

Colored Button Border Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>Colored Button Border</h1>

<button class="button button1">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">Red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

CSS Colored Button Border Style Code

.button{

background-color: green;

border: none;

color: #fff;

padding:15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size:16px;

margin:4px 2px;

cursor: pointer;

}

.button1{

background-color: white;

color: #000;

border:2px solid green ;

}

.button2{

background-color: white;

color: #000;

border:2px solid blue ;

}

.button3{

background-color: white;

color: #000;

border:2px solid red ;

}

.button4{

background-color: white;

color: #000;

border:2px solid gray ;

}

.button5{

background-color: white;

color: #000;

border:2px solid black ;

}

Monday, October 25, 2021

A menu icon

A menu icon Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>A menu icon</h1>

<div></div>

</body>

</html>

CSS menu icon Style

div{

width: 35px;

height:5px;

background-color: black;

margin:6px 0;

}

Html Button with CSS Width Style

Html Button with CSS Width Style Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>Set Button Width</h1>

<button class="button button1">25px</button><br>

<button class="button button2">50%</button><br>

<button class="button button3">100%</button>

</body>

</html>

CSS Width Style Code

.button{

background-color: green;

color: #fff;

border: none;

padding:15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 4px 2px;

cursor: pointer;

}

.button1{width:25px;}

.button2{width:50%;}

.button1{width:100%;}

Html Button with CSS Rounded Style

Html Button with CSS Rounded Style Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>CSS Rounded button</h1>

<button class="button button1">2px</button>

<button class="button button2">4px</button>

<button class="button button3">8px</button>

<button class="button button4">12px</button>

<button class="button button5">50px</button>

</body>

</html>

CSS Rounded Style Code

.button{

background-color: green;

color: #fff;

border: none;

padding:20px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin:4px 2px;

cursor: pointer;

}

.button1{border-radius:2px;}

.button2{border-radius:4px;}

.button3{border-radius:8px;}

.button4{border-radius:12px;}

.button5{border-radius:50px;}

Sunday, October 24, 2021

Html Button With CSS Padding Style

Html Button With CSS Padding Style Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>CSS Button</h1>

<button class="button button1">10px 24px</button>

<button class="button button2">12px 20px</button>

<button class="button button3">14px 40px</button>

<button class="button button4">32px 15px</button>

<button class="button button1">16px</button>

</body>

</html>

CSS Padding Style Code

.button{

background-color: green;

border: none;

color: #fff;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin:4px 2px;

cursor: pointer;

}

.button1{padding:10px 24px ;}

.button2{padding:12px 20px;}

.button3{padding:14px 40px ;}

.button4{padding:32px 15px ;}

.button5{padding:16px ;}

Saturday, October 23, 2021

Html forms with Date and Time

Html forms with Date and Time Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>date and time Forms</h1>

<form>

<label for="date">select a date </label>

<input type="date"id="date">

<label for="time">select a time </label>

<input type="time"id="time">

</form>

</body>

</html>

Friday, October 22, 2021

Html Forms with Email

Html Forms with Email Code

<!DOCTYPE html>

<html>

<head>

<title>web design</title>

</head>

<body>

<h1>Email Forms</h1>

<form>

<label for="fname">First name</label><br>

<label for="email"> Email</label><br>

<label for="password">password</label><br>

</form>

</body>

</html>

Thursday, October 21, 2021

CSS Button Sizes

CSS Button Sizes Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>Button Sizes</h1>

<button class="button button1">10px</button>

<button class="button button2">16px</button>

<button class="button button3">20px</button>

<button class="button button4">24px</button>

</body>

</html>

CSS Button Sizes Style

.button{

background-color: green;

border: none;

color: #fff;

padding:15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

margin:4px 2px;

cursor: pointer;

}

.button1{font-size:10px ;}

.button2{font-size:16px ;}

.button3{font-size:20px ;}

.button4{font-size:24px ;}

Wednesday, October 20, 2021

Responsive Web Page -With CSS Flex - Column

Responsive Web Page -With CSS Flex - Column Code

<!DOCTYPE html>

<html>

<head>

<title>web design</title>

</head>

<body>

<header>Header</header>

<div class="column"style="background:#aaa;">column</div>

<div class="column"style="background:#bbb;">column</div>

<div class="column"style="background:#ccc;">column</div>

</div>

<div class="footer">footer</div>

</body>

</html>

CSS Flex - Column Style

box-sizing: border-box;

}

body{

font-family: Arial, Helvetica, sans-serif;

}

header{

background-color:#f1f1f1;

padding:30px;

text-align: center;

font-size:35px ;

}

.row{

display: flex;

display: -webkit-flex;

}

.column{

-webkit-flex:1;

-ms-flex: 1;

flex: 1;

padding:20px;

height:300px;

}

.footer{

background-color: #f1f1f1;

padding:10px;

text-align: center;

}

Monday, October 18, 2021

The Flex direction property

The Flex direction property Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>The Flex direction Property</h1>

<div class="flex">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

</body>

</html>

CSS Flex direction Style Code

.flex{

display: flex;

flex-direction: column-reverse;

background-color: dodgerblue;

}

.flex >div{

background-color: #f1f1f1;

width:100px;

margin:10px;

text-align: center;

line-height:75px;

font-size:30px;

}

Sunday, October 17, 2021

The Flex direction property

The Flex direction property Code

<!DOCTYPE html>

<html>

<head>

<title>web design</title>

</head>

<body>

<h1>The Flex direction Property</h1>

</div>

</body>

</html>

CSS Fex direction Style Code

.flex{

display: flex;

flex-direction: column;

background-color: dodgerblue;

}

.flex >div{

background-color: #f1f1f1;

width:100px;

margin:10px;

line-height:75px;

font-size:35px;

}

Create a Flex Container

Create a Flex Container Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<h1>Create a Flex CONTAINER</h1>

<div class="container">

<div>1</div>

<div>2</div>

<div>3</div>

</div>

</body>

</html>

CSS Flex Container Style Code

.container{

display: flex;

background-color: dodgerblue;

}

.container >div{

background-color: #f1f1f1;

margin:10px;

padding:20px;

font-size:30px;

}

Saturday, October 16, 2021

Html page with CSS Flexible box Style

Html page with CSS Flexible box Style Code

<!DOCTYPE html>

<html>

<head>

<title>web design</title>

</head>

<body>

<h1>CSS Fliexble box</h1>

</div>

</body>

</html>

CSS Flexible box Style Code

.flex{

display: flex;

flex-wrap: nowrap;

background-color: dodgerblue;

}

.flex >div{

background-color: #f1f1f1;

width:100%;

margin:10px;

text-align: center;

line-height:75px;

font-size: 35px;

}

Friday, October 15, 2021

Responsive Web Page -With CSS Flex Side- Column

Responsive Web Page -With CSS Flex Side- Column Code

<!DOCTYPE html>

<html>

<head>

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

<link rel="STYLESHEET"type="text/css"href="web.css">

<title>web design</title>

</head>

<body>

<header>

header

</header>

<div class="row">

<div class="column-side"style="background:#aaa;">Coloumn</div>

<div class="column-middle"style="background:#bbb;"> Coloumn</div>

<div class="column-side"style="background:#aaa;">Coloumn</div>

</div>

<footer>Footer</footer>

</body>

</html>

CSS Flex Side- Column

box-sizing: border-box;

}

body{

font-family: Arial, Helvetica, sans-serif;

}

header{

background-color:#f1f1f1;

padding:30px;

text-align: center;

font-size:35px;

}

.row{

display: -webkit-flex;

display: flex;

}

.column{

height:300px;

padding:10px ;

}

.column-side{

-webkit-flex:1;

-ms-flex:1;

flex:1;

}

.column-middle{

-webkit-flex:2;

-ms-flex:2;

flex:2;

}

footer{

background-color: #f1f1f1;

padding:10px;

text-align: center;

}

Monday, October 11, 2021

Responsive Web Page -With CSS Float Side- Column

Responsive Web Page -With CSS Float Side- Column Code

<!DOCTYPE html>>

<html>

<head>

<meta charset="utf-8">

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

<link rel="stylesheet" type="text/css" href="nav.css">

<title>CSS Animation</title>

</head>

<body>

<header>

header

</header>

<div class="row">

<div class="coloumn"style="background:#aaa;">Coloumn</div>

<div class="coloumn"style="background:#bbb;">"Coloumn</div>

<div class="coloumn"style="background:#ccc;">Coloumn</div>

</div>

<div class="footer">footer</div>

</body>

</html>

CSS Float Side- Column Style Code

box-sizing: border-box;

}

body{

font-family: Arial, Helvetica, sans-serif;

}

header{

background-color:#f1f1f1;

padding:30px;

text-align: center;

font-size:35px;

}

.coloumn{

float: left;

width:33.33%;

padding:10px;

height:300px;

}

.row{

content:"";

display: table;

clear: both;

}

.footer{

background-color: #f1f1f1;

padding:10px;

text-align: center;

}

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

.coloumn{

width:100% ;

}

Saturday, October 9, 2021

CSS Animation box

CSS Animation box Code

<!DOCTYPE html>>

<html>

<head>

<title>CSS Animation</title>

</head>

<body>

<h1>CSS Animation</h1>

<p><b>Note:</b> When an animation is finished, it goes back to its original style.</p>

</body>

</html>

CSS Animation box Style code

div{

width:100px;

height:100px;

background-color: red;

animation-name:box;

animation-duration:4s;

}

@keyframe box{

form{background-color: red;}

to{background-color:yellow;}

}

Responsive Web Page -With CSS Float Side- nav

Responsive Web Page -With CSS Float Side- nav Code

<!DOCTYPE html>>

<html>

<head>

<title>CSS Templater using float</title>

</head>

<body>

<h1>CSS Templater using float</h1>

<div class="header">Header</div>

<div class="column side" style="background-color:#aaa;">Column</div>

<div class="column middle"style="background-color:#bbb;" >Column</div>

<div class="column side"style="background-color:#ccc;">Column</div>

</div>

<div class="footer">footer</div>

</body>

</html>

CSS Float Side-nav

box-sizing: border-box;

}

body{

font-family: Arial, Helvetica, sans-serif;

}

.header{

background-color:#f1f1f1;

padding:30px;

text-align: center;

font-size:35px;

}

.column{

float: left;

padding:10px;

height:300px ;

}

.column.side{

width:25% ;

}

.column.middle{

width:50%;

}

.footer{

background-color:#f1f1f1;

padding:10px;

text-align: center;

}

Monday, October 4, 2021

Responsive Web Page -Simple topnav

Responsive Web Page -Simple Topnav Code

<!DOCTYPE html>>

<html>

<head>

<meta charset="utf-8">

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

<link rel="stylesheet" type="text/css" href="nav.css">

<title>CSS Button colors</title>

</head>

<body>

<div class="topnav">

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

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

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

</div>

<div class="content">

<h1>CSS Template</h1>

<p>A topnav, content and a footer</p>

</div>

<div class="footer">

footer

</div>

</body>

</html>

CSS Simple topnav Style

box-sizing: border-box;

font-family: Arial, Helvetica, sans-serif;

}

.topnav{

overflow: hidden;

background-color: #333;

}

.topnav a{

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding:14px 16px;

text-decoration: none;

}

.topnav a:hover{

background-color:#ddd;

color: #000;

}

.content{

background-color:#ddd;

padding:10px;

height:200px;

}

.footer{

background-color:#f1f1f1;

padding:10px ;

}

Saturday, October 2, 2021

Responsive Web Page - fixed sidenav

Responsive Web Page - fixed SideNav Code

<!DOCTYPE html>>

<html>

<head>

<meta charset="utf-8">

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

<link rel="stylesheet" type="text/css" href="nav.css">

<title>CSS Button colors</title>

</head>

<body>

<div class="sidenav">

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

</div>

<div class="content">

<h1>CSS Temple</h1>

<p>A full height, fixed sidenav and content</p>

</div>

</body>

</html>

CSS Fixed Sidenav Style

box-sizing: border-box;

}

body{

margin:0;

font-family: Arial, Helvetica, sans-serif;

}

.sidenav{

height:100%;

width:200px;

position: fixed;

z-index: 1;

top:0%;

left:0%;

background-color:#111;

overflow-x: hidden;

}

.sidenav a{

color: #fff;

padding:16px;

text-decoration: none;

display: block;

}

.sidenav a:hover{

background-color: #ddd;

color: #000;

}

.content{

margin-left:200px;

padding:20px;

}

Friday, October 1, 2021

Html&CSS Button Blackground-Colors Style

Html&CSS Button Blackground-Colors Style Code

<!DOCTYPE html>>

<html>

<head>

<meta charset="utf-8">

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

<link rel="stylesheet" type="text/css" href="nav.css">

<title>CSS Button colors</title>

</head>

<body>

<h1>CSS BUTTON COLORS</h1>

<p>Change the background color of a button with the background-color property:</p>

<button class="button">Green</button>

<button class="button button2">Blue</button>

<button class="button button3">red</button>

<button class="button button4">Gray</button>

<button class="button button5">Black</button>

</body>

</html>

CSS BLACKGROUND-COLORS STYLE

.button{

background-color: #4cac50;

border: none;

color: #fff;

padding:15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size:16px;

margin:4px 2px;

cursor: pointer;

}

.button2{

background-color: blue;

}

.button3{

background-color: red;

}

.button4{

background-color: gray;

}

.button5{

background-color: black;

}

Pages

Sunday, October 31, 2021

Saturday, October 30, 2021

Thursday, October 28, 2021

Wednesday, October 27, 2021

Tuesday, October 26, 2021

Monday, October 25, 2021

Sunday, October 24, 2021

Saturday, October 23, 2021

Friday, October 22, 2021

Thursday, October 21, 2021

Wednesday, October 20, 2021

Monday, October 18, 2021

Sunday, October 17, 2021

Saturday, October 16, 2021

Friday, October 15, 2021

Monday, October 11, 2021

Saturday, October 9, 2021

Monday, October 4, 2021

Saturday, October 2, 2021

Friday, October 1, 2021