/* Selector */
/* id */
/* This is used only for one element in HTML */
/* #p1{
color: red;
}
#h{
font-size: 200%;
} */
/* class */
/* It can be used for multilple element in HTML */
/* .green-text{
color: green;
text-decoration: underline;
} */
/* Background images/Colors/multiple background */
/* #text{
color: black;
} */
/* #bg{
background-image: url(img/pic3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
} */
/* Multiple background image */
/* #bg{
background-color: yellow;
size: 10%;
background-image: url(img/logo2.png) , url(img/logo3.png);
background-repeat: no-repeat;
background-position: left top , right bottom;
} */
/* Borders */
/* #border{
border-style: solid;
border-width: 5px;
border-color: red green black blue; */
/* for specific side border */
/*
border-top-style: solid;
border-top-color: red;
border-top-width: 1px; */
/* Curved */
/* border-radius: 10px 20px 30px 5px; */
/* for specific radius */
/* border-bottom-left-radius: 20px;
} */
/* Height & Width */
/* body{
border: 1px solid black;
height: 1000px;
}
#div1{
background-color: aqua;
height: 500px;
width: 50%;
max-width: 500px;
max-height: 200px;
} */
/* Padding */
/* Change internally */
/* #div1{
border: 1px solid red ;
padding-top: 50px;
padding-bottom: 20px;
padding-right: 10%;
padding-left: 20%;
} */
/* Margin */
/* Change outerside */
/* we can use negative in margin */
/* body{
border: 3px dotted black;
}
.div1{
border: 1px solid red ;
padding: 50px;
}
#marg{
margin-top: 30px;
margin-bottom: 30px;
margin-left: 60px;
margin-right: 60px;
width: 200px;
} */
/* Margin Collaspse */
/* Big margin will be asign */
/* it not affect left and right */
/* .div1{
border: 1px solid black;
padding: 50px;
}
#marg{
margin-top: 50px;
}
#colsp{
margin-bottom: 30px;
} */
/* Text */
/* #text{
width: 300px;
border: 1px solid black;
direction: ltr;
vertical-align: bottom;
text-decoration: none;
text-transform:capitalize;
line-height: 50px;
text-indent: 50px;
word-spacing: 15px;
letter-spacing: 2px;
word-wrap: break-word;
color: black;
text-align: start;
writing-mode:vertical-rl;
} */
/* Shadow */
/* #shadow{
font-size: 70px;
text-shadow: 5px 10px 5px red;
} */
/* Links */
/* a{
text-decoration: none;
}
a:link{
color: yellowgreen;
}
a:visited{
color: black;
}
a:hover{
color: orange;
}
a:active{
color: red;
} */
/* Fonts */
/* h1{
color: chocolate;
font-weight: lighter;
font-family: 'Work Sans', sans-serif;
}
p{
font-size: 30px;
font-weight: normal;
font-family: 'Roboto', sans-serif;
} */
/* How to use downloaded Fonts */
/* @font-face {
font-family: abc;
src: url(fonts/font.ttf);
}
h1{
font-family: abc;
}
@font-face {
font-family: MonoLisa;
src: url(fonts/MonoLisa-Regular.ttf);
}
p{
font-family: MonoLisa;
font-size: 20px;
} */
/* CSS Units */
/* CSS Cursor */
/* p{
border: 1px solid red;
cursor: alias;
cursor: all-scroll;
cursor: cell;
cursor: col-resize;
cursor: crosshair;
cursor: wait;
cursor: copy;
cursor: move;
cursor: help;
cursor: not-allowed;
cursor: pointer;
} */
/* Box Shadow */
/* div{
border: 1px solid black;
width: 500px;
background-color: cyan;
margin: 100px;
padding: 20px;
box-shadow: 10px 10px 5px rgb(36, 116, 116) ;
} */
/* CSS Opacity */
/* #colorbox{
background-color: red;
height: 300px;
width: 500px;
}
#colorbox:hover{
background-color: red;
height: 300px;
width: 500px;
opacity: 0.7;
}
img{
height: 200px;
width: 500px;
}
img:hover{
height: 200px;
width: 500px;
opacity: 0.7;
} */
/* CSS Filters */
/* img{
height: 500px;
width: 1000px;
filter: brightness(0%);
filter: hue-rotate(90deg);
filter: invert(100%);
} */
/* CSS Gradient */
/* Linear Gradient and Radial Gradient */
/* .div1{
height: 600px;
border: 1px solid gray;
background-image: linear-gradient(160deg, rgb(17, 0, 255),rgb(255, 0, 43),rgb(255, 251, 0));
}
.div2{
height: 600px;
border: 1px solid gray;
background-image: radial-gradient( circle, rgb(229, 255, 0) ,rgb(247, 102, 6) 50%,rgb(193, 243, 193));
} */
/* OverFlow */
/* .overflow{
background-color: whitesmoke;
border: 3px solid red;
height: 500px;
width: 600px;
overflow-y: scroll;
overflow-x: hidden;
overflow: auto;
resize: none;
} */
/* CSS List Style */
/* ul{
list-style-type: disc;
list-style-position: inside;
}
ol{
list-style-image: url(img/home.png);
list-style-position: inside;
}
li{
border: 1px solid black;
} */
/* Table Style in CSS */
/* table{
border: 1px solid black;
border-collapse: collapse;
empty-cells: hide;
}
caption{
border: 1px solid black;
caption-side: top;
height: 40px;
padding-top: 25px;
}
tr{
border: 1px solid black;
}
th{
border: 1px solid black;
height: 30px;
padding: 10px;
text-align: center;
vertical-align: middle;
}
td{
border: 1px solid black;
height: 30px;
padding: 10px;
text-align: center;
vertical-align: bottom;
} */
/* Functions in CSS */
/* :root{
--primary-color: red;
--btn-color: black;
--text-color: yellow;
}
#fun{
background-color: var(--primary-color);
height: 200px;
width: calc(100% - 200px);
}
a{
padding: 10px 30px;
margin: 20px;
background-color: var(--btn-color);
color: var(--text-color);
text-decoration: none;
border-radius: 20px;
} */
/* BOX SIZING (it takes your border and everyting to remain same )*/
/* #div1{
background-color: orange;
height: 200px;
width: 50%;
}
#div2{
background-color: blueviolet;
height: 200px;
width: 50%;
padding: 50px;
border: 10px solid black;
box-sizing: border-box;
} */
/* Initial (Default value of CSS) , Inherit (It takes things from its parents) */
/* CSS Object fit */
/* img{
border: 1px solid black;
height: 420px;
width: 700px;
object-fit: contain;
object-position: center;
} */
/* Pseudo Class [:] */
/*
li:first-child{
color: red;
}
li:nth-child(4){
color: green;
}
li:nth-child(odd){
color: red;
}
input:focus{
background-color: rgb(68, 64, 64);
color: whitesmoke;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-weight: 200px;
} */
/* Pseudo element [::] */
/* p::first-letter{
color: red;
font-size: 35px;
}
h1::before{
content: url(img/home.png);
}
h1::after{
content: " added after";
}
p::selection{
background-color: yellow;
color: red;
} */
/* DISPLAY */
/*
block
1. new line
2. full width
3. height and width
inline
1. not new start
2. not full width
3. no height and width
inline-block
1. not new start
2. not full width
3. height and width */
/* .display{
border: 1px solid red;
height: 100px;
width: 50%;
display: inline-block;
}
#div{
display: none;
visibility: hidden;
} */
/* Position Property CSS */
/*
1. Static - (default) - normal flow
2. Relative (Start calculation to its own position)(It occupie its own place) (top,bottom,right,left)
3. Fixed (It looses his space) (top,bottom,right,left)
4. Absolute (Start calculation to its nearest parents) (It loose his place even though it move or not) (top,bottom,right,left)
*/
/* body{
height: 1000px;
}
#parent{
border: 1px solid red;
padding: 20px;
width: 50%;
}
#one{
height: 100px;
width: 100px;
background-color: green;
display: inline-block;
}
#two{
height: 100px;
width: 100px;
background-color: black;
display: inline-block;
position: fixed;
bottom: 10px;
right: 10px;
}
#three{
height: 100px;
width: 100px;
background-color: blue;
display: inline-block;
} */
/* Z-Index (Position property is neccesary (Absolute,Relative,Fixdd)) */
/* #parent{
height: 400px;
width: 50%;
margin: 150px;
position: relative;
}
#one{
height: 100px;
width: 100px;
background-color: red;
position: relative ;
display: inline-block;
z-index: 3;
}
#two{
height: 100px;
width: 100px;
background-color: black;
position: relative ;
display: inline-block;
top: 50px;
left: -50px;
z-index: 2;
}
#three{
height: 100px;
width: 100px;
background-color: blue;
position: relative ;
display: inline-block;
top: 100px;
left: -100px;
z-index: 1;
} */
/* Float */
/* #nav{
background-color: rgb(64, 168, 64) ;
list-style-type: none;
overflow: auto;
}
li{
color: white;
padding: 10px 15px;
float: right ;
} */
/* Clear */
/* #content{
height: 200px;
width: 70%;
background-color: green;
float: left;
}
#sidebar{
height: 150px;
width: 30%;
background-color: indianred;
float: left;
}
#footer{
background-color: goldenrod;
clear: both;
} */
/* 2D Trasnformation */
/* #wrapper{
padding: 20px;
margin: 20px;
}
a{
text-decoration: none;
background-color: lightcoral;
padding: 10px 20px;
color: white;
display: inline-block;
border-radius: 30px;
display: inline-block;
transform: rotate(20deg);
transform-origin: 0% 100%;
} */
/* a:hover{
display: inline-block;
transform: translate(0px ,0px);
transform: rotate(10deg);
transform: scalex(1.5);
transform: skew(20deg,10deg);
} */
/* 3D Transformation */
/*
#cover{
border: 2px solid red;
height: 200px;
width: 200px;
margin: 150px;
}
#content{
height: 200px;
width: 200px;
background-color: yellowgreen;
transform: perspective(300px) translate3d(00px , 0px , -150px );
transform: perspective(300px) rotate3d(50,100,50,20deg);
} */
/* Transition In CSS */
/* #div1{
height: 100px;
width: 100px;
border-radius: 100px;
background-color: red;
margin: 100px;
transition-property: all;
transition-duration: 0.5s;
transition-delay: 00ms;
transition-timing-function: ease;
}
#div1:hover{
width: 200px;
background-color: rgb(160, 89, 89);
} */
/* Animation in CSS */
/*
@keyframes changecolor{
0% {background-color: red; }
10% {background-color: green; }
20% {background-color: orange; }
30% {background-color: black; }
40% { background-color: blue;}
50% { background-color: yellow;}
60% { background-color: pink;}
70% { background-color: saddlebrown;}
80% { background-color: springgreen;}
90% { background-color: whitesmoke;}
100% { background-color: royalblue;}
}
#animate{
background-color: red;
height: 200px;
width: 200px;
animation-name: changecolor;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#animate2{
background-color: red;
height: 200px;
width: 200px;
animation-name: changecolor;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction:reverse;
} */
/* Print Specific Style in CSS */
/* @media screen {
p{
font-size: 20px;
}
}
@media print {
p{
font-size: 30px;
}
img{
height: 100px;
width: 100%;
}
div{
width: 50%;
}
} */
/* Media Query */
/* #div1{
width: 70%;
float:left;
background-color: lawngreen;
}
#div2{
width: 30%;
float: left;
background-color: rosybrown;
}
h1{
font-size: 80px;
}
@media screen and (max-width:768px){
#div1{
width: 50%;
}
#div2{
width: 50%;
color: white;
background-color: black;
}
}
@media screen and (max-width:400px){
#div1{
width: 100%;
}
#div2{
width: 100%;
}
}
img{
width: 100%;
height: auto;
}
video{
width: 100%;
height: auto;
}
*/
/* Multiple Columns */
/*
div{
column-count: 3;
column-gap: 50px;
column-rule-style: solid ;
column-rule-width: 1px; ;
column-rule-color:blue;
column-width: 300px;
column-rule: 1px solid red;
}
h1{
column-span: all;
} */
/* FLEX */
/* .container{
height: 544px;
width: 100%;
border: 2px solid black;
display: flex;
flex-direction: row;
flex-direction: row-reverse;
flex-wrap: wrap;
}
.item{
width: 200px;
height: 200px;
background-color: yellow;
border: 2px solid red;
margin: 10px;
padding: 3px;
} */
