final project.css

/*main layout of website - the box modle*/

html {
    font-family: "Open Sans", Mels, Arial;
    background-color: #CFCFEA;
}

.box {
    width: 1100px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
    border: 0px solid black;
}

/*login and sign up forms*/
/*Base CSS code for #form_sign, #form_log, and .form_para came from: https://www.codeinfoweb.com/2021/02/sign-up-and-login-form-with-html-and-css.html */

#form_sign {
  width: 360px;
  height: 1060px;
  margin: auto;
  background-color: #66A3BB;
  font-family: Arial;
}

#form_log {
    width: 360px;
    height: 280px;
    margin: auto;
    background-color: #66A3BB;
    font-family: Arial;
}

/*all forms*/
/*Base CSS code came from: https://www.w3schools.com/css/css_border_rounded.asp */

input[type=text], input[type=email], input[type=password], input[type=tel] {
    width: 250px;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 1px solid black;
    border-radius: 25px;
}

input[type=submit] {
    width: 100px;
    height: 35px;
    clear: both;
    border: none;
    border-radius: 25px;
    padding: 5px;
    background-color: white;
}

.form_para {
  text-align: center;
  color: black;
  font-size: 15px;
  margin-top: 40px;
  padding: 15px;
}

.form_para a {
  color: #253A47;
}

/*response page for forms*/

#logo {
    text-align: center;
    margin-left: 23em;
    padding: 10px;
}

/*header*/

/*header for all pages*/
#header {
    padding: 20px;
}

#login {
    float: right;
    margin-left: 15em;
    font-family: "Lemon Milk";
}

#signup {
    float: right;
    font-family: "Lemon Milk";
}

/*navigation bar for all pages*/

nav {
    font-family: "Lemon Milk";
    clear: both;
    overflow: hidden;
    background-color: #253A47;
}

nav ul {
    list-style-type: none;
}

nav ul li {
    float: left;
    margin-right: 1em;
}

nav ul li a {
    padding: 0.25em 1em 1em;
    text-decoration: none;
    color: #66A3BB;
    text-align: center;
    display: block;
}

nav ul li a:hover, nav ul li a:focus {
    color: #061826;
    background-color: #CFCFEA;
    font-weight: bold;
}

/*main content*/

/*body for all pages*/
.banner {
    text-align: center;
    padding: 10px;
}

.container {
    width: 1080px;
    margin: 0 auto;
    background: #66A3BB;
    padding: 10px;
}

/*heading font*/
h1, h2 {
    font-family: Vogue;
    text-align: center;
}

/*Welcome heading for Home Page*/
.welcome {
    text-align: center;
    text-decoration-line: underline;
    text-decoration-style: double;
    padding: 0px;
}

/*Home Page*/
.deals {
    padding: 10px;
    column-count: 2;
}

.deals a:link, .service a:link {
    color: #E8F1F2;
}

.service a:visited {
    color: #172A3A;
}

.deals a:visited {
    color: #FFFF;
}

.deals a:hover, .service a:hover {
    color: #CFCFEA;;
}

#newyear, #upcoming {
    width: 450px;
    height: 250px;
    padding: 10px;
    border: 2px solid black;
    overflow: auto;
    background-color: #253A47;
    color: #CFCFEA;
}

/*Base code taken from: https://www.w3schools.com/css/tryit.asp?filename=trycss3_box-shadow*/
.shadow {
    width: 215px;
    height: 45px;
    padding: 10px;
    background-color: #CFCFEA;
    box-shadow: 10px 10px;
    color: black;
}

.main {
    padding: 10px;
}

/*image*/
.sunil {
    float: left;
    padding: 10px;
}

.service {
    padding: 10px;
    clear: both;
}

/*image gallery*/
/*Base CSS code taken from: https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery*/

div.gallery {
    margin: 5px;
    border: 1px solid #0000;
    float: left;
    width: 500px;
    padding: 10px;
    background-color: #66A3BB;
}

div.gallery img {
    width: 100%;
}

div.desc {
    padding: 15px;
    text-align: center;
}

/*Services Page*/

#services {
    padding: 0px;
}

.table {
    column-count: 2;
}

.install, .supply, .repair, .trouble {
    padding: 10px;
}

.book {
    width: 115px;
    height: 40px;
    padding: 10px;
    background-color: #253A47;
    box-shadow: 10px 10px;
    color: white;
    text-align: center;
    font-family: "Lemon Milk";
}

.book a:link {
    color: #66A3BB;
}

.book a:visited {
    color: #CFCFEA;
}

.book a:hover {
    color: white;
}

/*contact page*/

/*appoitment form*/

#appoint {
    width: 550px;
    height: 1020px;
    padding: 10px;
}

#contact {
    position: relative;
    left: 700px;
    bottom: 1000px;
}

/*site map*/

#sitemap {
    text-align: center;
}

/*footer for all pages*/
#footer {
    padding: 10px;
    font-family: "Lemon Milk";
    clear: both;
    text-align: center;
}

/*site map and footer links*/

#footer a:link, #sitemap a:link {
    color: #66A3BB;
}

#footer a:visited, #sitemap a:visited {
    color: #172A3A;
}

#footer a:hover, #sitemap a:hover {
    color: #183059;
}