Pages

▼

Saturday, January 29, 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 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);

}

at No comments:

Friday, January 28, 2022

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;

}

at No comments:

Wednesday, January 19, 2022

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;

}

at No comments:

Friday, January 14, 2022

Button Group

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

    <div class="btn-group">

        <button>Apple</button>

        <button>Samsung</button>

        <button>Sony</button>


    </div>

</body>


</html>


CSS Button Group Style

 .btn-group button{

    background-color: #04aa6d;

    border:1px solid green ;

    color: white;

    padding:10px 24px;

    cursor: pointer;

    float: left;

}

.btn-group button::after{

 content: "";

 clear: both;

 display: table;

}

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

    border-right: none;

}

.btn-group button:hover{

    background-color: #3e8e41;

    color: #000;

}

at No comments:

Thursday, January 13, 2022

Navigation with logo

 Navigation with logo

 


<!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="header">

        <a href="#" class="logo">CompanyLogo</a>

        <div class="header-right">

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

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

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

        </div>

    </div>

    <div style="padding:20px;">

      <h1>Responive logo </h1>

      <p>Resize the brower windows to see the effect</p>

    </div>

</body>


</html>


CSS Navigation with logo Style

 body{

    margin:0;

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

}

.header{

    overflow: hidden;

    background-color:#f1f1f1;

    padding:20px 10px;

}

.header a{

    float: left;

    color: #000;

    text-align: center;

    padding:12px;

    text-decoration: none;

    font-size:18px;

    line-height:25px;

    border-radius: 4px;

}

.logo{

    font-size:25px;

    font-weight: bold;

}

.header a:hover{

    background-color: #ddd;

    color: #000;

}

 .active{

    background-color: dodgerblue;

    color: white;

}

.header-right{

    float: right;

}

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

    .header a{

        float: none;

        display: block;

        text-align: left;

    }

    .header-right{

        float: none;

    }

}

at No comments:

Monday, January 10, 2022

Blur Background Image

 Blur Background Image


<!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="bg-image"></div>

<div class="bg-text">

    <h2>Blurred Background</h2>

    <h1 style="font-size:50px ;">I am John Doe</h1>

    <p>And I m a Photoshop</p>

</div>       

</body>


</html>


CSS Blur Background Image Style

  body{

    height:100%;

    margin: 0;

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

}

*{box-sizing: border-box;}

.bg-image{

    background-image: url(images.jpg);

    filter: blur(8px);

    -webkit-filter: blur(8px);

    height:100%;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

.bg-text{

    background-color: rgb(0,0,0);

    background-color: rgba(0,0,0,0.4);

    color: white;

    font-weight: bold;

    border:3px solid #f1f1f1 ;

    position: absolute;

    top:50%;

    left:50%;

    transform: translate(-50%,-50%);

    z-index: 2;

    width:80% ;

    padding:20px ;

    text-align: center;

}

    

at No comments:

Friday, January 7, 2022

Search Button

 Search Button



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

  <h2>Search Button</h2>

  <p>Full width</p>

  <form>

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

      <button type="submit"><i class="fa fa-search"></i></button>

  </form>

  <p>Centered inside a form with max-width:

</p>

<form style="margin:auto; max-width: 300px;">

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

    <button type="submit"><i class="fa fa-search"></i></button>

</form>       

</body>


</html>


CSS Search Button Style

 *{

    box-sizing: border-box;

}

body{

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

}

input[type=text]{

    padding:10px;

    font-size:17px;

    border:1px solid grey;

    float: left;

    width:80%;

    background-color: #f2f2f2;

}

button{

    float: left;

    width:20% ;

    padding:10px ;

    font-size:17px ;

    background-color: #2196f3;

    color: #fff;

    border:1px solid grey ;

    border-left: none;

    cursor: pointer;

}

button:hover{

    background-color:#0b7dda ;

}

form::after{

    content: "";

    display: table;

    clear: both;

}

at No comments:

Thursday, January 6, 2022

Responsive Section Counter

 Responsive Section Counter


 <!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>Responsive Section Counter</h1>

     <div class="row">

         <div class="column">

             <div class="card">

            <p><i class="fa fa-user"></i></p>

            <h3>11+</h3>

            <p>Pathners</p>

             </div>

         </div>

         <div class="column">

            <div class="card">

           <p><i class="fa fa-check"></i></p>

           <h3>55+</h3>

           <p>Projects</p>

            </div>

        </div>

        <div class="column">

            <div class="card">

           <p><i class="fa fa-smile-o"></i></p>

           <h3>100+</h3>

           <p>Happy Client</p>

            </div>

        </div>

        <div class="column">

            <div class="card">

           <p><i class="fa fa-coffee"></i></p>

           <h3>100+</h3>

           <p>Meeting</p>

            </div>

        </div>

     </div>

</body>


</html>


CSS Responsive Section Counter Style

 *{box-sizing: border-box;}

body{

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

}

.column{

    float: left;

    width:25%;

    padding:0 5px;

}

.row{margin:0  -5px;}

.row::after{

    content:"" ;

    display: table;

    clear: both;

}

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

    .column{

        width:100% ;

        display: block;

        margin-bottom:10px;

    }

}

.card{

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

    padding:16px;

    text-align: center;

    background-color: #444;

    color: white;

}

.fa{

    font-size:50px ;

}

at No comments:

Wednesday, January 5, 2022

Parallax Scrolling Effect

 Parallax Scrolling Effect


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

    <p>Scroll and Down this page to see the parallax Scroll Effect.</p>

<div class="parallax"></div>

<div style="height: 1000px; background-color: red;font-size: 36px;">Scroll Up and Down this page to see the parallax scrolling effect. This div is just here to enable scrolling. Tip: Try to remove the background-attachment property to remove the scrolling effect.</div>

</body>


</html>


CSS Parallax Scrolling Style

 .parallax{

    background-image: url(shit.jpg);

    min-height:500px;

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

at No comments:

Monday, January 3, 2022

Heor-image

 Heor-image


 <!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="hero-image">

    <div class="text">

        <h1>I am John Doe</h1>

        <p>I m a Photographer</p>

        <button>Hire me</button>

    </div>

</div>

<div>Page infor</div>

</body>


</html>


CSS hero-image Style

 body{

    height:100%;

    margin: auto;

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

}

.hero-image{

  background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0,0.5)url(images.jpg));

   height:50%;

   background-position: center;

   background-repeat: no-repeat;

   background-size: cover;

   position: relative;

}

.hero-image text{

    text-align: center;

    position: absolute;

    top:50%;

    left:50%;

    transform: translate(-50%,-50%);

    color: white;

}

.hero-image button{

    background-color: #ddd;

    border: none;

    color: #000;

    outline:0;

    text-align: center;

    display: inline-block;

    padding:10px 25px;

    cursor: pointer;

}

.hero-image button:hover{

    background-color: #555;

    color: white;

}

at No comments: