CSS Codeing
*{
margin: 0;
padding: 0;
}
.container{
max-width: 1200px;
margin: 0 auto;
}
.col-1{
width: 8.33%;
float:left;
}
.col-2{
width: 16.66%;
float:left;
}
.col-3{
width: 25%;
float:left;
}
.col-4{
width: 33.33%;
float:left;
}
.col-5{
width: 41.66%;
float:left;
}
.col-6{
width: 50%;
float:left;
}
.col-7{
width: 58.31%;
float:left;
}
.col-8{
width: 66.64%;
float:left;
}
.col-9{
width: 75%;
float:left;
}
.col-10{
width: 83.3%;
float:left;
}
.col-11{
width: 91.66%;
float:left;
}
.col-12{
width: 100%;
float:;
}
.clearfix{
clear: both;
}
.bg-red{
background-color: #f00;
}
.bg-blue{
background-color: #0f0;
}
.bg-green{
background-color: green;
}
.p-2{
padding: 2px;
}
.p-4{
padding: 4px;
}
.p-6{
padding: 6px;
}
.p-8{
padding: 8px;
}
.p-10{
padding: 10px;
}
.p-12{
padding: 12px;
}
.p-14{
padding: 14px;
}
.p-16{
padding: 16px;
}
.p-18{
padding: 18px;
}
.p-20{
padding: 20px;
}
.p-22{
padding: 22px;
}
.p-2{
padding: 2px;
}
.p-24{
padding: 24px;
}
.p-26{
padding: 26px;
}
.p-28{
padding: 28px;
}
.p-30{
padding: 30px;
}
.p-32{
padding: 32px;
}
.p-34{
padding: 34px;
}
.p-36{
padding: 36px;
}
.p-38{
padding: 38px;
}
.p-40{
padding: 40px;
}
.p-42{
padding: 42px;
}
.p-44{
padding: 44px;
}
.p-46{
padding: 46px;
}
.p-48{
padding: 48px;
}
.p-50{
padding: 50px;
}
.text-white{
color: #fff
}
.ml-2 {
margin-left: 2px;
}
.ml-4 {
margin-left: 4px;
}
.ml-6 {
margin-left: 6px;
}
.ml-8 {
margin-left: 8px;
}
.ml-10 {
margin-left: 10px;
}
.ml-12 {
margin-left: 12px;
}
.ml-14 {
margin-left: 14px;
}
.ml-16 {
margin-left: 16px;
}
.ml-18 {
margin-left: 18px;
}
.ml-20 {
margin-left: 20px;
}
.ml-22 {
margin-left: 22px;
}
.ml-24 {
margin-left: 24px;
}
.ml-26 {
margin-left: 26px;
}
.ml-28 {
margin-left: 28px;
}
.ml-30 {
margin-left: 30px;
}
.ml-32 {
margin-left: 32px;
}
.ml-34 {
margin-left: 34px;
}
.ml-36 {
margin-left: 36px;
}
.ml-38 {
margin-left: 38px;
}
.ml-40 {
margin-left: 40px;
}
.ml-42 {
margin-left: 42px;
}
.ml-44 {
margin-left: 44px;
}
.ml-46 {
margin-left: 46px;
}
.ml-48 {
margin-left: 48px;
}
.ml-50 {
margin-left: 50px;
}
.mr-2 {
margin-right: 2px;
}
.mr-4 {
margin-right: 4px;
}
.mr-6 {
margin-right: 6px;
}
.mr-8 {
margin-right: 8px;
}
.mr-10 {
margin-right: 10px;
}
.mr-12 {
margin-right: 12px;
}
.mr-14 {
margin-right: 14px;
}
.mr-16 {
margin-right: 16px;
}
.mr-18 {
margin-right: 18px;
}
.mr-20 {
margin-right: 20px;
}
.mr-22 {
margin-right: 22px;
}
.mr-24 {
margin-right: 24px;
}
.mr-26 {
margin-right: 26px;
}
.mr-28 {
margin-right: 28px;
}
.mr-30 {
margin-right: 30px;
}
.mr-32 {
margin-right: 32px;
}
.mr-34 {
margin-right: 34px;
}
.mr-36 {
margin-right: 36px;
}
.mr-38 {
margin-right: 38px;
}
.mr-40 {
margin-right: 40px;
}
.mr-42 {
margin-right: 42px;
}
.mr-44 {
margin-right: 44px;
}
.mr-46 {
margin-right: 46px;
}
.mr-48 {
margin-right: 48px;
}
.mr-50 {
margin-right: 50px;
}
.d-inline{
display: inline-block;
}
.mt-20{
margin-top: 20px;
}
.box{
display: flex;
}
.box div{
width: 100%;
}
/*menu style*/
.menu-bar {
background-color: #00a0ff;
}
.menu {
background-color: #00a0ff;
text-align: center;
}
.menu ul {
list-style-type: none;
display: inline-block;
}
.menu ul li {
display: inline-b;
float: left;
}
.menu ul li a {
color: #fff;
text-decoration: none;
padding: 15px 25px;
display: inline-block;
border-right: 1px solid #fff;
}
.menu ul li:last-child a {
border-right: none;
}
.menu ul li a:hover {
background-color: #f00;
}
.menu ul li.active a {
background-color: #0f0;
}
.menu ul li:nth-child(2) a {
background-color: #f0f;
}
/*end menu style*/
Comments
Post a Comment