basic css for starting website designing



html {
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
font-family: 'Open Sans', sans-serif;
line-height: 23px;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font: 14px !important;
font-weight: 400;
background-color: #fff;
color: #666666;

}


a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, form, footer, header, hgroup, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, tt, table, tbody, textarea, tfoot, thead, time, tr, th, td, u, ul, var, video  {
font-family: inherit;
font-size: 100%;
font-weight: inherit;
font-style: inherit;
vertical-align: baseline;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
                       
ol, ul {
list-style: none;
}

blockquote, q {
-webkit-hyphens: none;
 -moz-hyphens: none;
  -ms-hyphens: none;
      hyphens: none;
       quotes: none;
}

figure {
margin: 0;
}

:focus {
outline: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

img {
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: middle;
}

legend {
white-space: normal;
}

button,
input,
select,
textarea {
font-size: 100%;
margin: 0;
max-width: 100%;
vertical-align: baseline;
-webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
      box-sizing: border-box;
}

button,
input {
line-height: normal;
}

input,
textarea {
background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); /* Removing the inner shadow, rounded corners on iOS inputs */
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
line-height: 1;
cursor: pointer; /* Improves usability and consistency of cursor style between image-type 'input' and others */
-webkit-appearance: button; /* Corrects inability to style clickable 'input' types in iOS */
border: none;
}

input[type="checkbox"],
input[type="radio"] {
padding: 0; /* Addresses excess padding in IE8/9 */
}

input[type="search"] {
-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
}

input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
-webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
border: 0;
padding: 0;
}

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

/* Repeatable Patterns
-------------------------------------------------------------- */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
box-sizing: border-box;
}
{
color: #333333;
text-decoration: none;
-webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

a:hover,a.active,
a:focus {
color: #ffaa30;
text-decoration: none;
outline: 0;
-webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

ul, ol {
padding: 0;
}

img {
max-width: 100%;
height: auto;
}

.img-left {
margin: -10px 50px 0 0 !important;
float: left;
}

.img-right {
margin: 0 0 0 50px !important;
float: right;
}

b, strong {
font-weight: 900;
}

.entry-page p {
margin-bottom: 25px;
}


h1 { font-size: 35px;  font-weight: 700; }
h2 { font-size: 32px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

h1, h2, h3, h4, h5, h6 {
font-family: "Montserrat", sans-serif;
    font-style: normal;
    color: #333333;
    margin-bottom: 26px;
}

p {font-family: 'Open Sans', sans-serif;
font-size:13px;
}

button {
border: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
font-size: 14px;
text-transform: uppercase;
    color: #ffffff;
  background-image: none;
  height: 35px;
  background-color: #ffaa30;
  line-height: 50px;
  padding: 0 24px 0 32px;
  cursor: pointer;
  /*letter-spacing: 1px;*/
  white-space: nowrap;
  border: none;
  -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
        -ms-border-radius: 3px;
         -o-border-radius: 3px;
            border-radius: 3px;
   display: inline-block;
    -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
background-color: #222;
border-color: #222;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
border: 1px solid #e5e5e5;
  height: 39px;
  /*padding: 20px;   */
  font-size: 12px;
  line-height: 19px;
  color: #333333;
  max-width: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
width: 100%;
    padding-top: 7px;
    padding-right: 38px;
    padding-bottom: 4px;
    padding-left: 14px;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus {
border: 1px solid #ffaa30;
-webkit-box-shadow: none;
  -moz-box-shadow: none;
box-shadow: none;
}

textarea {
width: 100%;
height: 200px;
padding: 14px 20px;
}

input[type="checkbox"] {
display: inline;
}

textarea:-moz-placeholder,
textarea::-moz-placeholder,
input:-moz-placeholder,
input::-moz-placeholder {
font-size: 12px;
  line-height: 19px;
color: #b1b1b1;
opacity: 1;
}

input:-ms-input-placeholder {
font-size: 12px;
  line-height: 19px;
color: #b1b1b1;
}

textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder {
font-size: 12px;
  line-height: 19px;
color: #b1b1b1;
opacity: 1;
}

@-webkit-keyframes pop-scale { 0% { -webkit-transform: scale(0.7) } 100% { -webkit-transform: scale(1) } }
@-moz-keyframes pop-scale { 0% { -moz-transform: scale(0.7) } 100% { -moz-transform: scale(1) } }
@keyframes pop-scale { 0% { transform: scale(0.7) } 100% { transform: scale(1) } }

/* bootstrap resetting elements */
.btn {
background-image: none;
}

textarea,
input[type="text"],
input[type="submit"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input,
.dropdown-menu,
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
-webkit-appearance: none;
text-shadow: none;
-webkit-box-shadow: none;
  -moz-box-shadow: none;
    -o-box-shadow: none;
       box-shadow: none;
color: #333333;
}

.bold {
font-weight: 700;
}

.cl-orange {
color: #ffaa30;
}

.container {
padding-left: 0;
padding-right: 0;
}

.blog-single .entry p {
margin-bottom: 30px;
}

label.modern-select {
position:relative;
margin-left: 3px;
}
label.modern-select:after {
  content: "\f078";
font-family: FontAwesome;
position: absolute;
top: 0;
right: 15px;
font-size: 11px;
line-height: 40px;
color: #b1b1b1;
}

.sort-views, .sort-views .list-grid {
float: right;
}

select.orderby {
color: #b1b1b1;
border-color: #ccc;
border-radius: 1px;
display: inline-block;
padding: 0 89px 0 15px;
margin: 0;
height: 40px;
cursor: pointer;
    -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
    position: relative;
-webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

label.modern-select:hover select {
color: #ffaa30;
border-color: #ffaa30;
}

label.modern-select:hover:after {
color: #ffaa30;
}

.go-top {
    position: fixed !important;
    right: -35px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background-color: #428bdc;
    line-height: 40px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.go-top i {
color: #fff;
}

.go-top.show {
    right: 15px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    visibility: visible;
    z-index: 9999;
}

.go-top.show:hover {
background: #ffaa30;
}

No comments:

Post a Comment