My Online Products
My first paragraph.
=========HomePage===============================================
Computer Troubleshooters Online Store
==============================Page2(About)===========================================================
About
==================Page3(FAQ)===================================================================
FAQ
FAQs
When the workshop open and when it closes?
Where does the workshop located?
Are there any delivery charges?
=========================Page4(Contact Us)===========================================================
Contact Us
===============================Desktops============================================================
Desktops
==============================(Laptops)===============================================================
Laptops
==================================Accessories=======================================================
Accesseries
=============================Networking=============================================================
Networking
================================Mobile==============================================================
Mobile
================================Main CSS File(test2)================================================================
*{
margin: 0;
padding: 0;
}
html{
margin: 0;
padding: 0;
height: 100%;
}
body{
background: white;
font-family: Arial;
margin: 0;
padding: 0;
height: 100%
}
#Wrapper{
min-height: 100%;
min-width: 1300px;
position: relative;
margin-top: 20px;
}
/* Navigation Menu and Logo */
.Logo{
display: inline;
text-align: center;
}
.NavMenu{
height: 0px auto;
width: 0px auto;
margin: 0px auto;
margin-top: 20px;
padding: 0px auto;
background: #00703C;
text-align: center;
}
.Logo h1 {
color: #00703C;
font-weight: lighter;
}
.NavMenu nav ul li {
color: white;
font-weight: lighter;
display: inline-block;
margin: 0px 20px 0px;
padding: 30px 30px 20px ;
text-align: center;
-o-transition:.2s;
-ms-tranition:.2s;
-moz-transition:.2s;
-webkit-transition:.2s;
transition: .2s;
}
.NavMenu nav ul li:hover{
background: #0A9A44;
}
.NavMenu a {
list-style-type:none;
font-size:medium;
font-weight:lighter;
display: inline-block;
text-transform: uppercase;
color: white;
text-align: justify;
}
.NavMenu .current{
color: #F58026;
}
/* Main Body */
#MainBody{
margin: 0;
padding: 0;
width: 100%;
height: 1400px;
}
.MainContent{
float: right;
width: 75%;
margin-top: 20px;
height: 1400px;
}
.MainContent p {
font-size: medium;
color: #302E2E;
margin-right: 20px;
margin-top: 15px;
}
.justifier{
text-align: justify;
}
.MainContent h3 {
margin-top: 0 auto;
font-weight:700;
color: #2C2E31;
text-align:left;
}
.MainContent h2 {
background: #F58026;
color: white;
font-weight:lighter;
font-size:large;
border-radius: 5px;
text-align: left;
margin: 0 auto;
margin-top: 20px;
margin-right: 10px;
padding: 5px 10px;
}
.Product-Catalog{
margin-top: 5px;
text-align: justify;
color: #302E2E;
}
/* Categories Div */
.Categories{
background: #F58026;
float: left;
width: 290px;
min-width: 100px;
margin: 10px;
margin-top: 165px;
position:absolute;
padding: 0px auto;
}
.Categories h2{
background:#00703C;
color: white;
font-size:medium;
font-weight:lighter;
text-align: left;
margin: 0px auto;
padding: 5px 5px 10px;
}
.Categories-Menu{
background:#F58026;
color: white;
width: 290px;
min-width: 100px;
float: left;
margin: 0;
padding: 0;
}
.Categories-Menu ul{
list-style-type: none;
margin: 0;
}
.Categories-Menu ul li{
position: relative;
width: 290px;
min-width: 100px;
background-color: #F58026;
}
.Categories-Menu a{
color: white;
display: block;
padding: 5px 0 5px 5px;
margin: 0;
border-bottom: 1px dotted white;
list-style-type: none;
}
.Categories-Menu a:hover{
background: #CD5E0D;
}
.Categories-Menu-ul ul{
transition: all 0.3s
opacity: 0;
position:absolute;
visibility: hidden;
left: 100%;
top: -2%;
}
.Categories-Menu-ul ul li a{
list-style-type: none;
text-decoration: none;
color: white;
}
.Categories-Menu-ul li:hover ul{
display: block;
opacity: 1;
visibility: visible;
}
.Categories-Menu .sub-arrow:after {
content: '\203A';
float: right;
margin-right: 20px;
}
.Categories-Menu-ul ul a:before {
content: '\203A';
margin-right: 20px;
}
.Categories-Menu-ul li:hover .sub-arrow:after {
content: '\203A';
}
/* Contact US */
#ContactMain{
margin: 0px auto;
height: 600px;
}
.ContactInfo {
margin-left: 30px;
margin-right: 70px;
margin-top: 35px;
height: 450px;
font-family: Arial;
}
.ContactInfo p{
border-bottom: 1px dotted #302E2E;
}
/* About */
.Information h3{
margin-top: 35px;
margin-left: 35px;
margin-right: 70px;
font-weight:700;
color:#00703C;
text-align:left;
font-weight: lighter;
border-bottom: 1px double #2C2E31;
}
.Information p{
font-family: Arial;
font-size: medium;
margin-right: 70px;
margin-top: 35px;
margin-left: 35px;
height: 500px;
}
.Questions{
height: 540px;
margin-left: 35px;
margin-top: 35px;
margin-right: 70px;
}
.Questions h3{
color: #00703C;
font-weight: lighter;
}
.Questions b{
color: #F58026;
}
/* Footer */
#Footer{
background: #2C2E31;
margin: 0px auto;
width: 100%;
height: 100px;
padding: 35px 0px;
bottom :0;
left: 0;
text-align: center;
position:absolute;
}
.Footer-Socail{
text-align:center;
font-size: 20px;
}
/* Icons */
.icon-button{
background-color: white;
border-radius: 3.6rem;
cursor: pointer;
display: inline-block;
font-size: 2.0rem;
height: 3.6rem;
line-height: 3.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 3.6rem;
}
.icon-button span{
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
h-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span{
width: 3.6rem;
height: 3.6rem;
border-radius: 3.6rem;
margin: -1.8rem;
}
.twitter span{
background-color: #4099ff;
}
.facebook span{
background-color: #3B5998;
}
.youtube span{
background-color: red;
}
.icon-button i{
background: none;
color: white;
height: 3.6rem;
left: 0;
line-height: 3.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 3.6rem;
z-index: 10;
}
.icon-button .icon-twitter{
color: #4099ff;
}
.icon-button .icon-facebook{
color: #3B5998;
}
.icon-button .icon-youtube{
color: red;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-youtube{
color: white;
}
/* CopyRights */
#Footer .CopyRights {
background: grey;
color: #302E2E;
font-size:medium;
font-weight:normal;
font-family:Arial;
width: 100%;
height: 30px;
margin: 0px auto;
bottom: 5px;
position:absolute;
font-weight:lighter;
text-align: center;
}
No comments:
Post a Comment