Raz Programming school

  Creating a toggle switch with html and css So we will create a toggle switch with html and css. we will use check box for toggle. We will create it very reponsive. so lets begin. Here is the toggle switch Toggle Switch Here is the code <! DOCTYPE   html > < html > < head > < style > .switch  {    position : relative;    display : inline-block;    width :  60px ;    height :  34px ; } .switch   input  { display :none;} .slider  {    position : absolute;    cursor : pointer;    top :  0 ;    left :  0 ;    right :  0 ;    bottom :  0 ;    background-color : #ccc;    -webkit-transition :  .4s ;    transition :  .4s ; } .slider:before  {    position : absolute;    content :  "" ;    height :  26px ;    width :  26px ;    left :  4px ;    bottom :  4px ;    background-color : white;    -webkit-transition :  .4s ;    transition :  .4s ; } input:checked  +  .slider  {    background-color : #1565C0 ; } input:focus  +  .s

  Creating a responsive tab with html and css So we will create a tab with html and css. Tab will show at the top of the page. We will add some shadow of its bottom border. Here is the tab Here is the code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .tab { position  :fixed ; top : 0 ; left  : 0 ; width : 100% ; height :  40px ; border-bottom :  1px  solid #ddd; background : #fff;    margin :  0rem   0   1rem   0 ; } .inverse { background : #222; } </ style > </ head > < body > < div   class = "tab inverse " ></ div > </ body > </ html >

  Creating pagination with css and html We will create a beautifull pagination with html and css . It will have active pagination. It is very responsive . Here is the pagination 1 2 3 4 5 6 7 8 9 Here is the code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .pagination-container { text-align  :center ; } .pagination { margin : 0 ; padding  : 0 ; display  :inline-block ; } .pagination   li { list-style-type  :none; display  :inline-block ; } .pagination   li   a { width  : 30px  ; display  :block ; height  : 30px  ; line-height  : 30px ; border : 1px  solid #ddd ; display  :block ; text-align  :center ; text-decoration  :none ; color :#222; border-radius  : 30px ; transition  : 1s ; } .pagination   li   a:hover { background  :#1565C0 ; color :#fff; border-color :#1565C0 ; } .pagination   .active { background  :#1565C0 ; color :#fff; border-color :#1565C0 } </ style > </

How to create responsive navigation menu with css and html So we will create  responsive navigation menu with css and html. We will add  hoverable menu item with background color. Here is the menu Here is the source code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .nav { overflow  :hidden ; width : 100% ; padding  : 0 ; margin : 0 ; background  :#009688; position  :fixed ; top : 0 ; left  : 0 ; display  :flex; list-style-type :none; box-shadow : 0   0   6px   6px  rgba( 0 , 0 , 0 , 0.2 ); } .nav   li { background  :transparent ; width : 20% ; text-align  :center; overflow :hidden ; } .nav   li   a { text-decoration :none; display  :block ; height  : 50px ; line-height : 50px ; color :#dddddd; font-size  : 14px ; transition  : 1s ; } .nav   li   a:hover   { color :#fff; } .nav   .active { color :#fff; } </ style > </ head > < body > < ul   class = "nav" > < li &

How to create a list group with css and html We will create a responsive and very simple list group with css and html. We will design a beautiful header with  hoverable lists. Here is the list group Here is the source code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .group-list { width : 100% ; height  :auto; padding  : 0 ; margin  : 0 ; border-top : 1px  solid #ddd ; border-left : 1px  solid #ddd ; border-right  : 1px  solid #ddd; border-radius  : 2px ; box-shadow : 0   0   2px   2px  rgba( 0 , 0 , 0 , 0.1 ); } .group-list:first-child   a { border-top-left-radius : 2px ; border-top-right-radius : 2px ; } .group-list:last-child   a { border-bottom-left-radius : 2px ; border-bottom-right-radius : 2px ; } .group-list   .header { background  :#d32f2f ; color :#fff; } .group-list   .header:hover { background  :#d32f2f ; } .group-list   li { list-style-type  :none; display  :block ; width : 100% ; heig

How to create responsive text with html and css So we will create a responsive text with html and css with  a background and with out background. We will also create responsive Heading tags. Here is the text. Here is source code. <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .flow-text { font-weight  : 200 ; font-size  : 20px ; color :#222; padding : 5px ; border-radius  : 3px  ; font-family : Arial, Helvetica, sans-serif } .bg-color { background  :rgba( 140 , 20 , 20 , 0.1 ) } h1 ,  h2 ,  h3 ,  h4 ,  h5 ,  h6 { font-weight  : 330 ; font-family : Arial, Helvetica, sans-serif; line-height  : 20px ; } </ style > </ head > < body > < p   class = "flow-text" > This is flow-text class without background  </ p > < p   class = "flow-text bg-color" > This is flow-text class with  background  </ p > < h1 > Heading 1 </ h1 > < h2 >