Posts

Transform Property In CSS

 <!DOCTYPE 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>CSS Transform</title>     <style>         * {             margin: 0px;             padding: 0px;         }         .container {             height: 80vh;             background-color: rgb(44, 19, 92);             display: flex;             justify-content: center;             align-items: center;         }         .box {             displ...
Post a Comment
Read more

Creating Transitions in CSS

 <!DOCTYPE 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>CSS Transition</title> </head> <style>     body{         background-color: black;     }      #Box{          display: flex;          height: 200px;          width: 200px;          background-color: rgb(63, 25, 201);          justify-content: center;          align-content: center;          align-items: center;          /* transition-property: background-color;          transition-duration: 3s;   ...
Post a Comment
Read more

Creating Animations & Keyframes

 <!DOCTYPE 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>Keyframes and Animations</title>     <style>         .container {             background-color: rgb(51, 45, 45);         }         .box {             background-color: grey;             width: 250px;             height: 250px;             position: relative;             animation-name: suraj1;             animation-duration: 2s;             animation-iteration-count: 5;   ...
Post a Comment
Read more

Variables & Custom Properties

 <!DOCTYPE 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>CSS Variable/Custom Properties</title>     <style>         :root {             --box-color: grey;             --primary-color: blue;             --danger-color: red;             --maxw: 333px;         }         .box {             --box-color: pink;             width: 200px;             height: 200px;             background-color: var(--box-color);         ...
Post a Comment
Read more

Box Shadow and Text Shadow

 <!DOCTYPE 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>Box Shadow and Text Shadow</title>     <style>         .container {             display: flex;         }         .card {             padding: 23px 12px;             margin: 23px 12px;             /* border: 2px solid red; */             background-color: grey;             /* box-shadow: offset-x offset-y color; */             /* box-shadow: offset-x offset-y blur-radius color; */        ...
Post a Comment
Read more

Before and after Pseudo selectors

 <!DOCTYPE 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>Before and after Pseudo selectors</title>     <style>         body {             background-color: black;             color: white;             margin: 0px;             padding: 0px;         }         header::before {             background: url('https://source.unsplash.com/1600x900/?technology') no-repeat center center/cover;             content: "";             position: absolute;       ...
Post a Comment
Read more

Attribute & nth child pseudo Selectors

 <!DOCTYPE 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>Attribute and nth pseudo selectors</title>     <style>         body {             background-color: rgb(22, 19, 19);         }         .container {             display: block;             width: 233px;             margin: auto;         }         input {             display: block;         }         input[type='text'] {             padding: 23px;   ...
Post a Comment
Read more