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 increases or decreases the size of an element</p>

<div>This div element is two times of its original width, and three times of its original height.</div>

</body>

</html>

CSS Scale()Method Style

 div{

    margin: 150px;

    width:200px;

    height:100px;

    background-color: yellow;

    border:1px solid black;

    transform: scale(2,3);

}

CSS Newsletter

 CSS Newsletter

 

<!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 Newsleeter</h1>

<form>

    <div class="container">

        <h2>Subscribe to our Newsleeter</h2>

        <p>Lorem ipsum text about why you should subscribe to our newsletter blabla. Lorem ipsum text about why you should subscribe to our newsletter blabla.

        </p>

    </div>

    <div class="container" style="background-color: white;">

        <input type="text"placeholder="Name"name="name"required>

        <input type="text"placeholder="EmailAdress"name="mail"required>

       <label>

           <input type="checkbox"checkbox="checkbox"required>Daily Newsleeter

       </label>

    </div>

    <div class="container">

        <input type="submit"value="Subscribe">

    </div>

</form>

</body>

</html>

CSS Newsletter Style

 form{

    border: 3px solid #f1f1f1;

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

}

.container{

    padding:20px;

    background-color: #f1f1f1;

}

input[type=text], input[type=submit]{

  width:100%;

  padding:12px ;

  margin:8px 0 ;

  display: inline-block;

  border:1px solid #ccc;

  box-sizing: border-box;

}

input[type=checkbox]{

    margin-top:16px;

}

input[type=submit]{

    background-color: #04aa6d;

    color: white;

    border: none;

}

input[type=submit]:hover{

    opacity:0.8;

}

Vertical Button Group

 Vertical Button Group

 <!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>Vertical Button Group</h1>

    <div class="btn-group">

        <button>Apple</button>

        <button>Samsung</button>

        <button>Sony</button>

    </div>

</body>

</html>

CSS Vertical Button Group Style

 .btn-group button{

    background-color: #04aa6d;

    border: 1px solid green;

    color: white;

    padding:10px 24px;

    cursor: pointer;

    width:50%;

    display: block;

}

.btn-group button:not(:last-child){

    border-right: none;

}

.btn-group button:hover{

    background-color: #3e8e41;

}