Posts

Showing posts from June, 2021

HTML /CSS Code : GRID Layout

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {   box-sizing: border-box; } .row::after {   content: "";   clear: both;   display: table; } [class*="col-"] {   float: left;   padding: 15px; } .col-1 {width: 8.33%;background-Color:gray;} .col-2 {width: 16.66%;background-color:teal;} .col-3 {width: 25%; background:#013827;} .col-4 {width: 33.33%;background-Color:gray;} .col-5 {width: 41.66%;background-color:orange;} .col-6 {width: 50%;background:green} .col-7 {width: 58.33%;background-Color:blue;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;background-Color:lightgray;} .col-12 {width: 100%; background-color:teal;} html {   font-family: "Lucida Sans", sans-serif; } .header {   background-color: #9933cc;   color: #ffffff;   padding: 15px; } .menu ul {   list-style-type: none;   margin...

HTML/CSS Code : Creating Respnsive Web Design Example

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {   box-sizing: border-box; } .row::after {   content: "";   clear: both;   display: table; } [class*="col-"] {   float: left;   padding: 15px; } html {   font-family: "Lucida Sans", sans-serif; } .header {   background-color: teal;   color: #ffffff;   padding: 15px; } .menu ul {   list-style-type: none;   margin: 0;   padding: 0; } .menu li {   padding: 8px;   margin-bottom: 7px;   background-color: teal;   color: #ffffff;   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover {   background-color: #005266;   color:yellow; } .aside {   background-color: teal;   padding: 15px;   color: #ffffff;   text-align: center;   font-size: 14px;   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2...