If you use class in HTML, then use "." in CSS
if you use it in HTML then use "#" in CSS
you can use Bootstrap or a font-awesome website for icons but type this link in HTML.
. { padding:0; margin:0; } *UNIVERSAL STATEMENT
text-decoration:none;//[for dismiss option of lining] }
#yellow{ background-color :RGB(167, 219, 12);
**[you can use (rgb or 6 digit character to select color)]
border-radius:60%;
** [you can use it to curve the edges]
height:50px; width:70%
**[you can use percentage sign with respect to the previous ancestor]
text-align: center;
padding-top:40px;
**[this property can use to increase/decrease size in content]
margin-top:100px;
**[this is used for distancing 2 contents]
border:2px solid yellow;
font-size:0.85rem;
**[to set font-size]
spinAnimate is the name of class @keyframes spinAnimate{ from{tansform:rotate(0deg);} to {transform:rotate(360deg);} }
** [for animate]
@media (min-width:300px) and (max-width:400px){ div{ background-color: pink; }(phone, desktop,i-pad)
#box2 { 20. position: relative/absolute/sticky/static};
you can set the position of the boxes
top:20px;
left:10px;
z-index: 3;
**[if z-index is positive then it will come in front or if z-index is negative then it will occupy the space behind it]
logo{ background-image:URL("amazon_logo.png"); height:50px; width:100px; background-size: cover; }
YOU CAN SET BACKGROUND-IMAGE
YOU CAN SET THE BORDER AND HOVER
.border2 { border:2px solid transparent; } .border2:hover { border:2px solid orange; } .border:active { border:2px solid orange-red; }
FOR FLEX BOX*
{ display: flex;
flex-wrap: wrap;
justify-content:flex-end/space-around/space-evenly/:center;
flex-direction: row/row-reverse; }