Raz Programming school

 How to create a box shadow with CSS So how we will create CSS box shadow. To do this you must know little bit about HTML and CSS. So lets do this The follow these step to create box shadow  1. Create new html file.  To create a html file open an editor and save that file with .html extension. Write basic tag of html like html head and body tag. And then save it with .html extension. I personally recommended to install nodepad++. Nodepad++ is color the sytax.  2. Creating box To create box in html we will use div tag as a box. Div tag is work as a container. So div tag is the best tag for creating box.  <div></div> 3. Adding attribute to div tag Attribute is the property of any tag. We will use class attribute for div tag. Class attribute will represent that tag. Do to this we will simply put class="Class Name" . <div class="box" ></div> 4. Now adding style to the box Now we will add style the box. Add style tag between head tag. To acces...

 How to create side navigation menu Side navigation menu is menu which placed either on the  left side of the or on the right side on the page. so today we are going to create it . How to build First create a div and inside div create ul . Now add <li> you want and inside <li> add <a> tag. Add style and you will get this. Here is the code <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > html ,  body { padding  : 0 ; margin  : 0 ; font-family : Arial, Helvetica, sans-serif; } .side-nav { position  :fixed ; display  :block; width  : 300px ; height  : 100% ; box-shadow : 0   0   8px   8px  rgba( 0 , 0 , 0 , 0.2 ); overflow-x :hidden ; } .side-nav   ul { display  :block ; padding  : 0 ; } .side-nav   ul   li { list-style-type  :none ; margin-left  : 10px ; ...

 How to create responsive form in css In this post we are going to show you how to create a responsive form with html and css. It is very easy to create and designing of responsive Form like this. In this form we have created two input field whcih is beautifully designed with css  button and a link.  It is very responsive and is very easy for everyone to create form like that.  Here is the code . <! DOCTYPE   html > < html > < head > < title ></ title > < style   type = "text/css" > .flow-text { font-weight  : 200 ; font-size  : 20px ; color :#222; background  :rgba( 140 , 20 , 20 , 0.1 ) ; padding : 5px ; border-radius  : 3px  ; } p { font-weight  : 250 ; font-size  : 16px ; } .input { width :auto; height : auto; padding-top :  7px ; padding-bottom :  7px ; border : 1px  solid #ddd; outline :  0 ; border : 1px  solid #ddd; transition : .5s ; ...

  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 :...

  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...

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   {...

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   .h...

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...

How to create a responsive hoverable dropdown menu in html and css. We will create a simple dropdown menu with html and css . When we move a mouse arrow on the button it will show  the menu. It is very easy Here is the Drop down menu Here is the source code:  <! DOCTYPE   html > < html > < head > < style > .dropbtn  {      background-color : #48d1cc;      color : white;      padding :  16px ;      font-size :  16px ;      border : none;      cursor : pointer; } .dropdown  {      position : relative;      display : inline-block; } .dropdown-content  {      display : none;      position : absolute;      background-color : #f9f9f9;      min-width ...

We will create a responsive table using HTML and CSS. We are going to create a responsive table with html and css. it will show the price in a responsive with the sing up button. Here is the table: The source code: <! DOCTYPE   html > < html > < head > < meta   name = "viewport"   content = "width= device-width, initial-scale=1.0" > < style > *  {      box-sizing : border-box; } .columns  {      float : left;      width :  33.3% ;      padding :  8px ; } .price  {      list-style-type : none;      border :  1px  solid #eee;      margin :  0 ;      padding :  0 ;      -webkit-transition :  0.3s ;      transition :  0.3s ; } .price:hover  {     ...