我正在研究移动优先设计方法，因此请将屏幕尺寸调整为移动尺寸或检查并设置为任何手机。
我无法让此表格正常运行。它不会居中，提交按钮也不会与表单的右侧对齐。
当我在手机屏幕之间切换时，表单输入上的不同边框边缘会发出声音。在一个屏幕上，其缺少名称输入的顶部边框，在一个屏幕上，每个框的所有右侧边框都在此边框，等等。
您如何解决此问题？
css
.container {
padding: 0 2em;
}
main {
position: relative;
top: -20%;
}
body, html {
width: 100%;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
overflow-x: hidden;
/*background: #CE2026;*/
}
/*-- ---------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- --------------------------------------------------------------- --*/
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 78px;
border-bottom: 8px solid #CE2026;
position: relative;
z-index: 1;
}
.navbar-links {
display: none;
}
#logo {
display: none;
}
.open-slide {
float: right;
margin-top: 25px;
margin-right: 20px;
display: block;
z-index: 4;
position: absolute;
right: 0;
}
.side-nav {
width: 0;
display: none;
height: 100%;
position: absolute;
top: 0;
background-color: #fff;
transition: 0.5s;
right: -1px;
text-align: right;
z-index: 15;
margin-top: 5%;
}
#side-hidden {
background-color: #000;
opacity: 0.9;
height: 100%;
position: absolute;
top: 0;
transition: 0.5s;
left: 0
margin: 0;
width: 0;
z-index: 6;
}
.side-nav ul {
display: block;
text-decoration: none;
z-index: 6;
/* Added this */
padding: 0;
position: relative;
top: -8%;
list-style: none;
}
/* Added this */
.nav-item {
display:block;
margin: 0;
}
.side-nav ul a {
position: relative;
width: 100%;
/* Changed this */
/* padding: 10px 130px 10px 100px;*/
padding: 20px 15px;
text-decoration: none;
color: #000;
margin-right: 20px;
z-index: 6;
/* Removed this */
/* right: 30px; */
text-align: right;
/* Added these */
display: block;
box-sizing: border-box;
}
.btn-close {
display: block;
background: #fff;
position: absolute;
top: 0;
/* Changed this */
/* left: 22px; */
left: 0;
font-size: 36px;
text-decoration: none;
color: #ccc;
right: 7px;
top: -10px;
}
.btn-close {
background: #fff;
color:#2F2E2E;
position: relative;
padding: 0;
margin: 0;
}
.btn-close a:hover {
color: #444;
cursor: pointer;
background: #fff;
}
.side-nav .btn-close:hover {
color: #fff
}
.side-nav li a:hover {
color: #fff;
background: #CE2026;
}
.side-active {
color: #ffffff !important;
background: #CE2026;
}
.mobile-logo {
position: relative;
top: 10%;
right: 0%;
padding: 0;
}
/*-- -------------------------------------------- -->
<!-- HERO STRIP -->
<!-- -------------------------------------------- -*/
#hero {
height: 100%;
width: 100%;
position: relative;
background:url("images/Landing.jpg") no-repeat center center fixed;
padding: 0;
margin: 0;
color: #fff;
border-bottom: 1px solid #CE2026;
}
#home-h {
width: 100%;
font-weight: 900;
font-size: 2.7em;
padding-top: .8em;
line-height: 1.4em;
margin-top: 0;
}
#home-p {
font-size: 1.25em;
padding-bottom: .8em;
font-weight: 350;
animation-delay: 0.3s;
margin: 0;
}
.learn {
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: #FFFFFF;
font-size: 17px;
margin: 28px 0;
padding: 18px 80px;
color: #FFFFFF;
text-decoration: none;
animation-delay: 0.6s;
}
.heroText a:hover {
background: #fff;
border-color: #fff;
color: #CE2026;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
cursor: pointer;
}
/*-- -------------------------------------------- -->
<!-- RED STRIP -->
<!-- -------------------------------------------- -*/
#red-strip {
background: #CE2026;
color: #fff;
height: 100%;
padding: 0;
margin: 0;
padding-bottom: 0em;
}
#strip-1 {
margin-top: 0;
padding-top: 0;
}
#strip-1 h3 {
font-size: 1.313em;
}
#strip-1 p {
line-height: 1.4em;
}
.top h3 {
margin-top: 0;
padding-top: 0;
}
.strip-1-center {
padding: 1.8em;
}
.strip-1-center h3 {
padding-top: 1em;
}
/*-- -------------------------------------------- -->
<!-- GIVE CALL -->
<!-- -------------------------------------------- -*/
#give-call {
margin-top: 1em;
padding: 0;
background: #fff;
height: 100%;
}
.gcn-call, .gcn-number {
font-size: 1.375em;
}
.gcn-call {
margin-bottom: 0;
padding-top: 3em;
}
.gcn-number {
margin-top: .4em;
}
.gcn-p {
line-height: 1.5em;
margin-bottom: 3em;
}
.give-call-number {
margin-bottom: 5em;
}
.give-call-number a {
border: 2px solid #000;
border-radius: 25px;
position: relative;
padding: 15px 25%;
margin-top: 2em;
margin-bottom: 2em;
text-decoration: none;
color:#2F2E2E;
}
.give-call-number a:hover {
background: #CE2026;
color: #fff;
border-color: #CE2026;
}
.give-call-email {
display: flex;
flex-direction: column;
padding-bottom: 3em;
}
#give-call img {
width: auto;
}
/*-- -------------------------------------------- -->
<!-- ICONS -->
<!-- -------------------------------------------- -*/
#icons {
background: #EEF0E4;
color: #2F2E2E;
height: 100%;
}
#icons i {
color: #CE2026;
}
.top-margin {
margin-top: 0;
padding-top: 3em;
font-size: 1.375em;
}
.margin-bottom {
margin-bottom: 3.5em;
}
#icons p {
line-height: 1.5em;
}
/*-- -------------------------------------------- -->
<!-- PARALLAX -->
<!-- -------------------------------------------- -*/
#parallax {
color: #fff;
height: 100%;
padding-bottom: 3em;
background: #CE2026;
}
.parallax-right h3 {
font-size: 2.375em;
margin-bottom: 0;
}
.parallax-margin-top {
margin-top: .2em;
}
.parallax-margin-top-1 {
margin-top: 0em;
padding-top: 1em;
}
.parallax-p {
line-height: 1.5em;
}
.parallax-p a {
text-decoration: none;
border: 2px solid #fff;
padding: 1em 25%;
color: #fff;
margin-top: 2em;
margin-bottom: 4em;
}
.parallax a:hover {
cursor: pointer;
background: white;
color: #CE2026;
}
/*-- -------------------------------------------- -->
<!-- CONTACT -->
<!-- -------------------------------------------- -*/
#contact-info {
text-align: left;
background: white;
color: #605E5E;
font-weight: 300;
padding-top: 3em;
height: 100%;
padding-bottom: 3.6em;
}
#adress p {
margin-bottom: 0;
margin-top: 0;
}
.red {
color: #ce2026;
font-weight: 400;
}
.form h6 {
font-size: 1.375em;
margin-bottom: 1em;
text-align: center;
}
.form {
width: 100%;
margin: .3em;
}
input, textarea {
margin: .4em;
font-size: 14px;
font-family: 'Raleway', sans-serif;
white-space: pre;
}
input[type=submit] {
background: #CE2026;
color: #fff;
font-size: 14px;
float: right;
padding: 7px 13px;
margin-right: 0;
border: none;
}
input[type=submit]:hover {
background: #831517;
cursor: pointer;
}
::-webkit-input-placeholder { /* Chrome */
color: #605E5E;
opacity: .5;
padding-left: 5px;
}
:-ms-input-placeholder { /* IE 10+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: red;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
/*-- -------------------------------------------- -->
<!-- FOOTER -->
<!-- -------------------------------------------- -*/
footer {
color: #A0A09F;
background: #2F2E2E;
}
footer h3 {
font-size: 1em;
}
footer p {
font-size: .875em;
line-height: 1.5em;
}
footer li {
font-size: .875em;
line-height: 1.5em;
}
footer ul {
list-style: none;
text-align: center;
padding: 0;
}
.footer-item {
padding-top: 2em;
}
.margin-p {
margin-bottom: 0;
}
.facebook {
padding: 2em 0;
}
.facebook i {
color: #3b5998;
}
.copyright {
background: #242323;
color: #A0A09F;
}
.copy-center {
padding: 2em 0;
margin: 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body id="noScroll">
<!-- ----------------------------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- ----------------------------------------------------------------------------------- -->
<nav class="navbar grid animated fadeIn ">
<div class="open-slide">
<div>
<a href="#" onclick="toggleNav()">
<svg width="30" height="30">
<path d="M0,5 35,5" stroke="#000" stroke-width="2"/>
<path d="M0,14 35,14" stroke="#000" stroke-width="2"/>
<path d="M0,23 35,23" stroke="#000" stroke-width="2"/>
</svg>
</a>
</div>
</div>
<img class="mobile-logo container" src="images/brushworks_logo.png" width="91px" height="91px">
<ul class="navbar-links">
<li><a class="active" href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li id="number">(360) 679-4444</li>
</ul>
</nav>
<div id="side-hidden-parent">
<div id="side-hidden"></div>
</div>
<div id="side-menu" class="side-nav">
<ul class="on-top">
<li><a href="#" id="btn-close" class="btn-close" onclick="closeSideMenu()">×</a></li>
<li class="nav-item"><a class="side-active" href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Services</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</div>
<main>
<section id="hero" class="grid">
<div class="container">
<img id="logo" class="animated fadeInRight" src="images/brushworks_logo.png" alt="brush roller">
<div class="heroText">
<h1 id="home-h" class="animated fadeInUp">The Best Painters For Your
Home or Business</h1>
<h2 id="home-p" class="animated fadeInUp">See why we're trusted for over 30 years to service Whidbey Island. Our results speak for themselves</h2>
<a class="learn animated fadeInRight href=">Services</a>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- RED STRIP -->
<!-- -------------------------------------------- -->
<section id="red-strip" class="grid">
<div class="container">
<div id="strip-1" class="strip-1-center animated slideInUp">
<div class="top">
<h3>Residential</h3>
<p>Our qualified staff are trained to use the techniques and materials that are best suited for each individual home.</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Commercial</h3>
<p>No matter what business you're in or how big you facility is, we have the staff and equipment to get it done</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Interior/Exterior</h3>
<p>Whether it's inside or out, we have you covered. Our staff can manage any texture and any material</p>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- GIVE CALL -->
<!-- -------------------------------------------- -->
<section id="give-call" class="grid">
<div class="container">
<div class="give-call-number">
<h3 class="gcn-call">Give us a call!</h3>
<h3 class="gcn-number">(360)679-444</h3>
<p class="gcn-p">We love working on Whidbey Island and the surrounding area. The diverse, eclectic and highly creative customer base keeps our staff and crew challenged and motivated to exceed our customers expectations.</p>
<a href="#">Contact Us</a>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- ICONS -->
<!-- -------------------------------------------- -->
<section id="icons" class="grid">
<div class="container">
<div class="icons-top">
<div>
<h4 class="top-margin">OFFERING YOU THE BEST SOLUTION FOR YOUR PROJECT</h4>
</div>
<div>
<p class="margin-bottom">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction
guarantee.</p>
</div>
</div>
<div class="center-3">
<div class="local">
<div class="circle">
<i class="fas fa-map-pin fa-2x"></i>
</div>
<h2>LOCALLY OWNED</h2>
<p class="margin-bottom">With over 30 years experience as professional painters, we are one of the largest residential and commercial painting companies on Whidbey Island.</p>
</div>
<div class="value">
<div class="circle">
<i class="fas fa-dollar-sign fa-2x"></i>
</div>
<h2>BEST VALUE</h2>
<p class="margin-bottom">We are confident that we provide the highest quality work for the price. We take great pride in the work we do and refuse to let you pay for work that does not meet expectations.</p>
</div>
<div class="qualified">
<div class="circle">
<i class="fas fa-medal fa-2x"></i>
</div>
<h2>PROFESSIONALLY QUALIFIED</h2>
<p class="margin-bottom">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction guarantee.</p>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- PARALLAX -->
<!-- -------------------------------------------- -->
<section id="parallax" class="grid">
<div class="container">
<div class="parallax-left">
</div>
<div class="parallax-right">
<h3 class="parallax-margin-top-1">Any Project,</h3>
<h3 class="parallax-margin-top">Any Size</h3>
<div class="parallax-p">
<p>Our shop can handle projects from small to large. Over that last 30 years we have seen it all and done it all. </p><br>
<a class="read" href="#">READ MORE</a>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- CONTACT INFO -->
<!-- -------------------------------------------- -->
<section id="contact-info" class="grid">
<div class="container">
<div id="adress">
<p class="red">Address</p>
<p class="regular">Brushworks NW <br>
691 Oak St. Unit I <br>
Oak Harbor, WA 98277
</p><br>
<p class="red">Telephone</p>
<p class="regular">Tel: (360) 679-4444 <br>
Fax: (360) 679-5026
</p><br>
<p class="red">Email</p>
<p class="regular">bwnwinc@gmail.com</p><br>
<p class="red">Opening Hours</p>
<p class="regular">Mon - Fri: 7am - 5pm</p>
</div>
<div class="form">
<div>
<h6>Call Or Email Us Today!</h6>
</div>
<form>
<input class="" type="text" name="name" placeholder="Full name" style="width: 100%; height: 30px"><br>
<input class="form" type="text" name="email" placeholder="Email" style="width: 100%; height: 30px"><br>
<textarea class="form" name="message" placeholder="Message" style="width: 99.5%; height: 100px"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>
</main>
</body>
</html>
答案 0 :(得分：0)
最好使用flex-box。
.container {
padding: 0 2em;
}
main {
position: relative;
top: -20%;
}
body, html {
width: 100%;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
overflow-x: hidden;
/*background: #CE2026;*/
}
/*-- ---------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- --------------------------------------------------------------- --*/
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 78px;
border-bottom: 8px solid #CE2026;
position: relative;
z-index: 1;
}
.navbar-links {
display: none;
}
#logo {
display: none;
}
.open-slide {
float: right;
margin-top: 25px;
margin-right: 20px;
display: block;
z-index: 4;
position: absolute;
right: 0;
}
.side-nav {
width: 0;
display: none;
height: 100%;
position: absolute;
top: 0;
background-color: #fff;
transition: 0.5s;
right: -1px;
text-align: right;
z-index: 15;
margin-top: 5%;
}
#side-hidden {
background-color: #000;
opacity: 0.9;
height: 100%;
position: absolute;
top: 0;
transition: 0.5s;
left: 0
margin: 0;
width: 0;
z-index: 6;
}
.side-nav ul {
display: block;
text-decoration: none;
z-index: 6;
/* Added this */
padding: 0;
position: relative;
top: -8%;
list-style: none;
}
/* Added this */
.nav-item {
display:block;
margin: 0;
}
.side-nav ul a {
position: relative;
width: 100%;
/* Changed this */
/* padding: 10px 130px 10px 100px;*/
padding: 20px 15px;
text-decoration: none;
color: #000;
margin-right: 20px;
z-index: 6;
/* Removed this */
/* right: 30px; */
text-align: right;
/* Added these */
display: block;
box-sizing: border-box;
}
.btn-close {
display: block;
background: #fff;
position: absolute;
top: 0;
/* Changed this */
/* left: 22px; */
left: 0;
font-size: 36px;
text-decoration: none;
color: #ccc;
right: 7px;
top: -10px;
}
.btn-close {
background: #fff;
color:#2F2E2E;
position: relative;
padding: 0;
margin: 0;
}
.btn-close a:hover {
color: #444;
cursor: pointer;
background: #fff;
}
.side-nav .btn-close:hover {
color: #fff
}
.side-nav li a:hover {
color: #fff;
background: #CE2026;
}
.side-active {
color: #ffffff !important;
background: #CE2026;
}
.mobile-logo {
position: relative;
top: 10%;
right: 0%;
padding: 0;
}
/*-- -------------------------------------------- -->
<!-- HERO STRIP -->
<!-- -------------------------------------------- -*/
#hero {
height: 100%;
width: 100%;
position: relative;
background:url("images/Landing.jpg") no-repeat center center fixed;
padding: 0;
margin: 0;
color: #fff;
border-bottom: 1px solid #CE2026;
}
#home-h {
width: 100%;
font-weight: 900;
font-size: 2.7em;
padding-top: .8em;
line-height: 1.4em;
margin-top: 0;
}
#home-p {
font-size: 1.25em;
padding-bottom: .8em;
font-weight: 350;
animation-delay: 0.3s;
margin: 0;
}
.learn {
display: inline-block;
border-style: solid;
border-width: 2px;
border-color: #FFFFFF;
font-size: 17px;
margin: 28px 0;
padding: 18px 80px;
color: #FFFFFF;
text-decoration: none;
animation-delay: 0.6s;
}
.heroText a:hover {
background: #fff;
border-color: #fff;
color: #CE2026;
transition: background 0.4s ease 0s;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease;
transition-delay: 0s;
cursor: pointer;
}
/*-- -------------------------------------------- -->
<!-- RED STRIP -->
<!-- -------------------------------------------- -*/
#red-strip {
background: #CE2026;
color: #fff;
height: 100%;
padding: 0;
margin: 0;
padding-bottom: 0em;
}
#strip-1 {
margin-top: 0;
padding-top: 0;
}
#strip-1 h3 {
font-size: 1.313em;
}
#strip-1 p {
line-height: 1.4em;
}
.top h3 {
margin-top: 0;
padding-top: 0;
}
.strip-1-center {
padding: 1.8em;
}
.strip-1-center h3 {
padding-top: 1em;
}
/*-- -------------------------------------------- -->
<!-- GIVE CALL -->
<!-- -------------------------------------------- -*/
#give-call {
margin-top: 1em;
padding: 0;
background: #fff;
height: 100%;
}
.gcn-call, .gcn-number {
font-size: 1.375em;
}
.gcn-call {
margin-bottom: 0;
padding-top: 3em;
}
.gcn-number {
margin-top: .4em;
}
.gcn-p {
line-height: 1.5em;
margin-bottom: 3em;
}
.give-call-number {
margin-bottom: 5em;
}
.give-call-number a {
border: 2px solid #000;
border-radius: 25px;
position: relative;
padding: 15px 25%;
margin-top: 2em;
margin-bottom: 2em;
text-decoration: none;
color:#2F2E2E;
}
.give-call-number a:hover {
background: #CE2026;
color: #fff;
border-color: #CE2026;
}
.give-call-email {
display: flex;
flex-direction: column;
padding-bottom: 3em;
}
#give-call img {
width: auto;
}
/*-- -------------------------------------------- -->
<!-- ICONS -->
<!-- -------------------------------------------- -*/
#icons {
background: #EEF0E4;
color: #2F2E2E;
height: 100%;
}
#icons i {
color: #CE2026;
}
.top-margin {
margin-top: 0;
padding-top: 3em;
font-size: 1.375em;
}
.margin-bottom {
margin-bottom: 3.5em;
}
#icons p {
line-height: 1.5em;
}
/*-- -------------------------------------------- -->
<!-- PARALLAX -->
<!-- -------------------------------------------- -*/
#parallax {
color: #fff;
height: 100%;
padding-bottom: 3em;
background: #CE2026;
}
.parallax-right h3 {
font-size: 2.375em;
margin-bottom: 0;
}
.parallax-margin-top {
margin-top: .2em;
}
.parallax-margin-top-1 {
margin-top: 0em;
padding-top: 1em;
}
.parallax-p {
line-height: 1.5em;
}
.parallax-p a {
text-decoration: none;
border: 2px solid #fff;
padding: 1em 25%;
color: #fff;
margin-top: 2em;
margin-bottom: 4em;
}
.parallax a:hover {
cursor: pointer;
background: white;
color: #CE2026;
}
/*-- -------------------------------------------- -->
<!-- CONTACT -->
<!-- -------------------------------------------- -*/
#contact-info {
text-align: left;
background: white;
color: #605E5E;
font-weight: 300;
padding-top: 3em;
height: 100%;
padding-bottom: 3.6em;
}
#adress p {
margin-bottom: 0;
margin-top: 0;
}
.red {
color: #ce2026;
font-weight: 400;
}
.form h6 {
font-size: 1.375em;
margin-bottom: 1em;
text-align: center;
}
.form {
/* width: 100%; */ // <-- Not required
margin: .3em;
}
/* Make the form flex box */
form {
display: flex;
flex-flow: row wrap;
}
input, textarea {
margin: .4em;
font-size: 14px;
font-family: 'Raleway', sans-serif;
white-space: pre;
}
input[type=submit] {
background: #CE2026;
color: #fff;
font-size: 14px;
float: right;
padding: 7px 13px;
/* margin-right: 0; */ // <-- Not required
border: none;
flex: 1 1 auto; // <-- If you want button of full width
}
input[type=submit]:hover {
background: #831517;
cursor: pointer;
}
::-webkit-input-placeholder { /* Chrome */
color: #605E5E;
opacity: .5;
padding-left: 5px;
}
:-ms-input-placeholder { /* IE 10+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #605E5E;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: red;
opacity: .5;
margin-left: 5px;
padding-left: 5px;
}
/*-- -------------------------------------------- -->
<!-- FOOTER -->
<!-- -------------------------------------------- -*/
footer {
color: #A0A09F;
background: #2F2E2E;
}
footer h3 {
font-size: 1em;
}
footer p {
font-size: .875em;
line-height: 1.5em;
}
footer li {
font-size: .875em;
line-height: 1.5em;
}
footer ul {
list-style: none;
text-align: center;
padding: 0;
}
.footer-item {
padding-top: 2em;
}
.margin-p {
margin-bottom: 0;
}
.facebook {
padding: 2em 0;
}
.facebook i {
color: #3b5998;
}
.copyright {
background: #242323;
color: #A0A09F;
}
.copy-center {
padding: 2em 0;
margin: 0;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Brushworks NW Inc.</title>
</head>
<body id="noScroll">
<!-- ----------------------------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- ----------------------------------------------------------------------------------- -->
<nav class="navbar grid animated fadeIn ">
<div class="open-slide">
<div>
<a href="#" onclick="toggleNav()">
<svg width="30" height="30">
<path d="M0,5 35,5" stroke="#000" stroke-width="2"/>
<path d="M0,14 35,14" stroke="#000" stroke-width="2"/>
<path d="M0,23 35,23" stroke="#000" stroke-width="2"/>
</svg>
</a>
</div>
</div>
<img class="mobile-logo container" src="images/brushworks_logo.png" width="91px" height="91px">
<ul class="navbar-links">
<li><a class="active" href="#">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT US</a></li>
<li id="number">(360) 679-4444</li>
</ul>
</nav>
<div id="side-hidden-parent">
<div id="side-hidden"></div>
</div>
<div id="side-menu" class="side-nav">
<ul class="on-top">
<li><a href="#" id="btn-close" class="btn-close" onclick="closeSideMenu()">×</a></li>
<li class="nav-item"><a class="side-active" href="#">Home</a></li>
<li class="nav-item"><a href="#">About</a></li>
<li class="nav-item"><a href="#">Services</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
</ul>
</div>
<main>
<section id="hero" class="grid">
<div class="container">
<img id="logo" class="animated fadeInRight" src="images/brushworks_logo.png" alt="brush roller">
<div class="heroText">
<h1 id="home-h" class="animated fadeInUp">The Best Painters For Your
Home or Business</h1>
<h2 id="home-p" class="animated fadeInUp">See why we're trusted for over 30 years to service Whidbey Island. Our results speak for themselves</h2>
<a class="learn animated fadeInRight href=">Services</a>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- RED STRIP -->
<!-- -------------------------------------------- -->
<section id="red-strip" class="grid">
<div class="container">
<div id="strip-1" class="strip-1-center animated slideInUp">
<div class="top">
<h3>Residential</h3>
<p>Our qualified staff are trained to use the techniques and materials that are best suited for each individual home.</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Commercial</h3>
<p>No matter what business you're in or how big you facility is, we have the staff and equipment to get it done</p>
</div>
<div class="line"></div>
<div class="flex-1">
<h3>Interior/Exterior</h3>
<p>Whether it's inside or out, we have you covered. Our staff can manage any texture and any material</p>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- GIVE CALL -->
<!-- -------------------------------------------- -->
<section id="give-call" class="grid">
<div class="container">
<div class="give-call-number">
<h3 class="gcn-call">Give us a call!</h3>
<h3 class="gcn-number">(360)679-444</h3>
<p class="gcn-p">We love working on Whidbey Island and the surrounding area. The diverse, eclectic and highly creative customer base keeps our staff and crew challenged and motivated to exceed our customers expectations.</p>
<a href="#">Contact Us</a>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- ICONS -->
<!-- -------------------------------------------- -->
<section id="icons" class="grid">
<div class="container">
<div class="icons-top">
<div>
<h4 class="top-margin">OFFERING YOU THE BEST SOLUTION FOR YOUR PROJECT</h4>
</div>
<div>
<p class="margin-bottom">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction
guarantee.</p>
</div>
</div>
<div class="center-3">
<div class="local">
<div class="circle">
<i class="fas fa-map-pin fa-2x"></i>
</div>
<h2>LOCALLY OWNED</h2>
<p class="margin-bottom">With over 30 years experience as professional painters, we are one of the largest residential and commercial painting companies on Whidbey Island.</p>
</div>
<div class="value">
<div class="circle">
<i class="fas fa-dollar-sign fa-2x"></i>
</div>
<h2>BEST VALUE</h2>
<p class="margin-bottom">We are confident that we provide the highest quality work for the price. We take great pride in the work we do and refuse to let you pay for work that does not meet expectations.</p>
</div>
<div class="qualified">
<div class="circle">
<i class="fas fa-medal fa-2x"></i>
</div>
<h2>PROFESSIONALLY QUALIFIED</h2>
<p class="margin-bottom">We provide many painting services to our customers. All of our work is performed by our highly qualified staff and backed by our 100% customer satisfaction guarantee.</p>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- PARALLAX -->
<!-- -------------------------------------------- -->
<section id="parallax" class="grid">
<div class="container">
<div class="parallax-left">
</div>
<div class="parallax-right">
<h3 class="parallax-margin-top-1">Any Project,</h3>
<h3 class="parallax-margin-top">Any Size</h3>
<div class="parallax-p">
<p>Our shop can handle projects from small to large. Over that last 30 years we have seen it all and done it all. </p><br>
<a class="read" href="#">READ MORE</a>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------- -->
<!-- CONTACT INFO -->
<!-- -------------------------------------------- -->
<section id="contact-info" class="grid">
<div class="container">
<div id="adress">
<p class="red">Address</p>
<p class="regular">Brushworks NW <br>
691 Oak St. Unit I <br>
Oak Harbor, WA 98277
</p><br>
<p class="red">Telephone</p>
<p class="regular">Tel: (360) 679-4444 <br>
Fax: (360) 679-5026
</p><br>
<p class="red">Email</p>
<p class="regular">bwnwinc@gmail.com</p><br>
<p class="red">Opening Hours</p>
<p class="regular">Mon - Fri: 7am - 5pm</p>
</div>
<div class="form">
<div>
<h6>Call Or Email Us Today!</h6>
</div>
<form>
<input class="" type="text" name="name" placeholder="Full name" style="width: 100%; height: 30px"><br>
<input class="form" type="text" name="email" placeholder="Email" style="width: 100%; height: 30px"><br>
<textarea class="form" name="message" placeholder="Message" style="width: 99.5%; height: 100px"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>
</main>
</body>
</html>