Web Design& development programming Studio: February 2022

Monday, February 28, 2022

The ScaleY()Method

The ScaleY()Method

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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>ScaleY()Method</h1>

<p>The ScaleY()Method increase or descrease the height of an element</p>

<div>The div element is three times of its original height</div>

</body>

</html>

CSS The ScaleY()Method Style

div{

margin:150px;

width:200px;

height:100px;

background-color: yellow;

border:1px solid black ;

transform: scaleY(3);

}

Saturday, February 26, 2022

ScaleX()Method

ScaleX()Method

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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>Scale()Method</h1>

<p>The scalex()Method increase or decrease the width of an element</p>

<div>The div element is half of its original width</div>

</body>

</html>

CSS ScaleX()Method Style

div{

margin: 150px;

width:200px;

height: 100px;

background-color: yellow;

border:1px solid black ;

transform: scaleX(0.5);

}

Friday, February 25, 2022

ScaleX()Method

ScaleX()Method

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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>ScaleX()Method</h1>

<p>The ScaleXMethod increase or decrease the width of an element</p>

<div>The div element is two times of its original width</div>

</body>

</html>

CSS ScaleX()Method Style

div{

margin:150px;

width:200px;

height:100px;

background-color: red;

border:1px solid black ;

transform: scaleX(2);

}

Thursday, February 24, 2022

Login Form with navbar

Login Form with navbar

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

<div class="topnav">

<a href="#" class="active">Home</a>

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

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

<div class="login">

<form>

<input type="text"placeholder="Username"name="Username">

<input type="text"placeholder="Passwords"name="psw">

<button type="submit">Login</button>

</form>

</div>

<div style="padding-left:16px ;">

<h2>Responsive Login Form in Navbar</h2>

<p>Navigation menu with a Login Form and a submit button inside of it</p>

<p>Reside a brower window to see the reponsive effect</p>

</div>

</body>

</html>

CSS Login Form with navbar Style

box-sizing: border-box;

}

body{

margin:0;

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

}

.topnav{

overflow: hidden;

background-color: #eee;

}

.topnav a{

float: left;

display: block;

color: #000;

text-align: center;

padding:14px 16px;

text-decoration: none;

font-size:17px;

}

.topnav a:hover{

background-color: #ddd;

color: #000;

}

.active{

background-color: #2196f3;

color: #fff;

}

.login{

float: right;

}

input[type=text]{

float: right;

padding:6px;

margin-top:8px;

font-size:17px;

border: none;

width:120px;

}

button{

float: right;

padding:6px 10px ;

margin-right:8px;

background-color: #555;

color: white;

font-size: 17px;

border: none;

cursor: pointer;

}

button:hover{

background-color: green;

color: #000;

}

Sunday, February 13, 2022

The Scale()Method

The Scale()Method

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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 Scale()Method</h1>

<p>the scale()method inncrease or decrease the size of an element </p>

<div>This div element is decreased to be half of its original width and height.</div>

</body>

</html>

CSS Scale Method Style

div{

margin: 150px;

width:200px;

height:100px;

background-color: yellow;

border:1px solid black ;

transform: scale(0.5,0.5);

}

Thursday, February 10, 2022

The rotate()Method

The rotate()Method

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<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 rotate()Method</h1>

<p>The rotate()method rotate an element clockwise or counter-clockwise </p>

<div>This a normal element</div>

<div id="mydiv">the div element is rotated clockwise with 20 degrees</div>

</body>

</html>

CSS rotate Style

div{

width:300px;

height:100px;

background-color: yellow;

border:1px solid black ;

}

#mydiv{

transform: rotate(-20deg);

}

Tuesday, February 8, 2022

CSS Animation

CSS Animation

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

<div></div>

<p><b>Note</b>When an Animation is finisted it goes back to it Original Style</p>

</body>

</html>

CSS Animation Style

div{

height:100px ;

width:100px ;

background-color: red;

position: relative;

animation-name: explam;

animation-duration:4s;

}

@keyframes explam{

0%{background-color:red;left:0px;top:0px;}

25%{background-color:yellow;left:200px;top:0px;}

50%{background-color:blue;left:200px;top:200px;}

75%{background-color:green;left:0px;top:200px;}

100%{background-color:red;left:0px;top:0px;}

}

Thursday, February 3, 2022

Border Bottom Navigation

Border Bottom Navigation

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

<div class="topnav">

<a href="#" class="active">Home</a>

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

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

</div>

<div style="padding-left:16px;">

<h2>Border link</h2>

<p>Hover over this link</p>

</div>

</body>

</html>

CSS Border Navigation Style

body{

margin:0 ;

}

.topnav{

overflow: hidden;

background-color: #f1f1f1;

}

.topnav a{

float: left;

display: block;

color: #000;

text-align: center;

padding:14px 16px;

text-decoration: none;

font-size:17px ;

border-bottom:3px solid transparent;

}

.active{

border-bottom: 3px solid red;

}

.topnav a:hover{

border-bottom:3px solid red ;

}

Pages

Monday, February 28, 2022

Saturday, February 26, 2022

Friday, February 25, 2022

Thursday, February 24, 2022

Sunday, February 13, 2022

Thursday, February 10, 2022

Tuesday, February 8, 2022

Thursday, February 3, 2022