CSS Flexbox and Animation

Download My Project

Click Here To Download: SSSDIIT MANAGEMENT TOOL

Create QR Code Generater

HTML & JS

<!DOCTYPE html>
<html>
<head>
    <title>QR Code Generateor</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
    <p>Enter Your  Text or URL</p>
    <input type="text" name="" placeholder="Text or URL" id="qrtxt">
    <div  id="img">
        <img src="" id="qrimg">
    </div>
    <button onclick="gq()">Generate QR Code</button>

</div>
<script type="text/javascript">
    
    let qrimg= document.getElementById("qrimg");
    let qrtxt= document.getElementById("qrtxt");
    function gq()
    {
        if(qrtxt.value.length > 0){
        qrimg.src=" https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+qrtxt.value;
        
    }
    else
    {
        alert("plese enter text or url");
    }
    }

</script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
body
{
    background-color: #262a2f;
}
.container
{
    width: 400px;
    padding: 25px 35px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #fff;
    border-radius: 10px;

}
.container p{
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 8px;

}
.container input{
    width: 100%;
    height: 50px;
    border: 1px solid #49eea;
    outline: 0;
    padding: 10px;
    margin: 10px 0 20px;
    border-radius: 5px;
}
.container button
{
    width: 100%;
    height: 50px;
    background: green;
    color: white;
    border:0;
    outline: 0;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    margin: 20px 0;
    font-weight: 500; }

HTML & CSS SLIDER

HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Slider</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    
    <div class="carousel">
      <div class="carousel-content">
        <div class="carousel-item">
          <img src="C:\Users\91940\Pictures\nature.jpg" alt="pic" />
        </div>
        <div class="carousel-item">
          <img src="C:\Users\91940\Pictures\nature2.jpg" alt="pic" />
        </div>
        <div class="carousel-item">
          <img src="C:\Users\91940\Pictures\nature3.jpg" alt="pic" />
        </div>
        <div class="carousel-item">
          <img src="C:\Users\91940\Pictures\flower.webp" alt="pic" />
        </div>
        <div class="carousel-item">
          <img src="C:\Users\91940\Pictures\nature3.jpg" alt="pic" />
        </div>
        <div class="carousel-item">
          <img src="C:\Users\91940\Pictures\nature.jpg" alt="pic" />
        </div>
      </div>
    </div>
  </body> 
</html>  

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel {
    width: 400px;
    height: 400px;
    perspective: 800px;
  }

  .carousel-content {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateZ(-500px) rotateY(0);
    transform-style: preserve-3d;
    animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
  }

  .carousel-item {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-box-reflect: below 0px
      linear-gradient(transparent, transparent, #00000040);
  }

  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }

  .carousel-item:nth-child(1) {
    transform: rotateY(0) translateZ(500px);
  }

  .carousel-item:nth-child(2) {
    transform: rotateY(60deg) translateZ(500px);
  }

  .carousel-item:nth-child(3) {
    transform: rotateY(120deg) translateZ(500px);
  }

  .carousel-item:nth-child(4) {
    transform: rotateY(180deg) translateZ(500px);
  }

  .carousel-item:nth-child(5) {
    transform: rotateY(240deg) translateZ(500px);
  }

  .carousel-item:nth-child(6) {
    transform: rotateY(300deg) translateZ(500px);}
  /* Create a carousel animation  */
  @keyframes carousel {
    0%,
    8.3% {
      transform: translateZ(-500px) rotateY(0);
    }
    16.6%,
    24.9% {
      transform: translateZ(-500px) rotateY(-60deg);
    }
    33.2%,
    41.5% {
      transform: translateZ(-500px) rotateY(-120deg);
    }
    49.8%,
    58.1% {
      transform: translateZ(-500px) rotateY(-180deg);
    }
    66.4%,
    74.7% {
      transform: translateZ(-500px) rotateY(-240deg);
    }
    83%,
    91.3% {
      transform: translateZ(-500px) rotateY(-300deg);
    }
    100% {
      transform: translateZ(-500px) rotateY(-360deg);
    }
  }

Dark & Light Mode

 <html>
     <head>
        <meta name="color-scheme" content="light">
    </head>
</html>
<body><br><br><br>
     <h1>Dark & Light Mode </h1>
    <select id="ab"  onchange="change()">
       <div > <option value="light">Light</option>
        <option value="dark">Dark</option></div>
    </select>

</body>
</html>
<script>
    function change()
    {
        const ab= document.getElementById("ab").value;
        document.getElementsByTagName("meta")[0].content = ab;
    }
</script>

Difference Between POST and GATE Methods

Difference Between POST and GATE method:

GATE method is a Unsecure while POST method is Secure.

GATE method is not secure because that can pass inside a URL . POST method is secure because That can pass inside background.

Range of GATE method is 255 character in URL, While Unlimited Range of POST method.

Accessing GET method using $_GET[ ] Server Variable. Assessing POST method using $_POST[ ] Server Variable.

Simple Program

Simple PHP Program For Begineers:

1.

OUTPUT: Hellofriends

Hellofriends
Hello friends

2.Write a program to calculate addition, multiplication, substration and division.

OUTPUT: Addition : 40

                      Substration: -20
                      Multiplication: 300
                   Division: 0.33333333333333

2.Write a program to get value from user and fetch that value .

OUTPUT:

2.Write a program to get value from user and fetch that value Using POST method.

Introduction Of PHP

PHP is very popular language used to make dynamic website. With the help of PHP we can make any type of dynamic website. PHP is most popular because it is easy to learn and Free of cost.

PHP stand for Personal Home Page OR Hypertaxt Processor.

PHP is a server side language.

PHP is Dynamic Language.

PHP is a open source.

Apache is a PHP server name.

PHP is based on LINUX OS.

PHP/FI was created by Rasmus Lerdoref in 1995.

PHP is used to make dynamic website(Run Time chanege).

Advantage of php is free of cost, easy to use, HTMP support.

Syantx Of PHP:

Output:

Hwllo,World

Hello

Variable Diclaration:

Syntax: $ variable_name = " data";

Let's see the sample program for batter understanding.

OUTPUT: Hellofriends

In above program we make 2 variable $a and $b. And print that variable.

Variable

Variable In C Language

Variable is used to store data. Variable is the name of the memory location .

let's see the syntax of declaration of variable:
Syntax: variable_type variable_name
Example:

int y;

char ch;

float per;

In Above example int, char, float are the datatype and y, ch, per is the name of variable.

We can also provide value while we declare the varable as show below:

int y=10;

char ch='B';

float a=10.5, b=5.5;//Declaring 2 variable of float type

Rules of Declaring The Variable:

Variable can have only aphabate and unerscore.
Variable can not start with digit.
White space is not allowed while you declaring the variable.

Valid Variable Name:

Invalid Variable Name:

Types Of Variable In C language:

1.Local Variable :

local variable declare inside of the function.

2.Global Variable:

A global variable declare outside of the function.

3.Static Variable:

Static means unchanged. A Variable declare with static keyword is called static variable.

C Programing Basic Programs

C Programing Basic Programs Using Printf() and Scanf() Functions

Write a function called Area() Which is used to fined out are of triangel, square, circule. Use the concept of function overloading. Write a main function tha gets value from the user to test three function

#include<iostream.h>
#include<conio.h>

void area(float r)
{

float area;
area=3.65*r;
cout<<endl << "\tArea of Circule:"<<area;
}

void area(float h, float b)
{
float ans;
ans=h*b/2;
cout<<endl<<"\tArea Of Triangle:"<<ans;
}

void area(int no)
{
float ans;
ans=no*no;
cout<<endl<<"\tArea Of Square:"<<ans;
}

void main()
{
clrscr();
area(2.5f);
area(10,2.6f);
area(12);
getch();
}

OUTPUT:
Area Of Circule: 9.125
Area Of Triangle: 13
Area Of Square: 144

Create Layout Of Your Website With HTML & CSS!!

1.HTML CODE:

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylegride.css">
</head>
<body>
<main class="l">
<div class="div1">Header</div>
<div class="div2">Box1</div>
<div class="div3">Box2</div>
<div class="div4">Box3</div>
<div class="div5">sidebar</div>
<div class="div6">Maincontent</div>
<div class="div7">Footer</div>
</main>
</body>
</html>

2.CSS CODE:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
main
{
width: 75%;
margin: 50px auto;
border: 1px solid black;
display: grid;
grid-template-rows: 60px 100px 200px 60px;
grid-template-columns: repeat(3, 1fr) 150px;
grid-gap: 20px;
}
.div1{background-color: red; color: white;
grid-column: 1/-1}
.div2{background-color: blue; color: white;}
.div3{background-color: blue; color: white;}
.div4{background-color: blue;color: white;}
.div5{background-color: gray;color: white;
grid-row: 2/4;
grid-column: 4/5;
}
.div6{background-color: orange;color: white;
grid-column: 1/4;
}
.div7{background-color: black;color: white;
grid-column: 1/-1;
}

Code With Bhagyesh

Pages

CSS Flexbox and Animation

Download My Project

Create QR Code Generater

HTML & JS

CSS

HTML & CSS SLIDER

Dark & Light Mode

Difference Between POST and GATE Methods

Difference Between POST and GATE method:

Simple Program

Simple PHP Program For Begineers:

1.

2.Write a program to calculate addition, multiplication, substration and division.

2.Write a program to get value from user and fetch that value .

2.Write a program to get value from user and fetch that value Using POST method.

Introduction Of PHP

Introduction Of PHP

Variable

Variable In C Language

Variable is used to store data. Variable is the name of the memory location .

let's see the syntax of declaration of variable:
Syntax: variable_type variable_name
Example:

int y;

char ch;

float per;

In Above example int, char, float are the datatype and y, ch, per is the name of variable.

int y=10;

char ch='B';

float a=10.5, b=5.5;//Declaring 2 variable of float type

C Programing Basic Programs

C Programing Basic Programs Using Printf() and Scanf() Functions

Write a function called Area() Which is used to fined out are of triangel, square, circule. Use the concept of function overloading. Write a main function tha gets value from the user to test three function

OUTPUT:
Area Of Circule: 9.125
Area Of Triangle: 13
Area Of Square: 144

Create Layout Of Your Website With HTML & CSS!!

1.HTML CODE:

2.CSS CODE:

Code With Bhagyesh

Popular Posts

Pages

Category

Pages

HTML & JS

CSS

1.

2.Write a program to calculate addition, multiplication, substration and division.

2.Write a program to get value from user and fetch that value .

2.Write a program to get value from user and fetch that value Using POST method.

Variable is used to store data. Variable is the name of the memory location .

let's see the syntax of declaration of variable:Syntax: variable_type variable_nameExample: int y;

char ch;

float per;

In Above example int, char, float are the datatype and y, ch, per is the name of variable.

int y=10;

char ch='B';

float a=10.5, b=5.5;//Declaring 2 variable of float type

OUTPUT: Area Of Circule: 9.125 Area Of Triangle: 13 Area Of Square: 144

1.HTML CODE:

2.CSS CODE:

Popular Posts

Pages

Category

let's see the syntax of declaration of variable:
Syntax: variable_type variable_name
Example:

int y;

OUTPUT:
Area Of Circule: 9.125
Area Of Triangle: 13
Area Of Square: 144