#font-face {
font-family: Raleway;
src: url(../font/Raleway-Regular.ttf);
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
color: black;
font-family: 'Raleway';
background-color: white;
scroll-behavior: smooth;
}
/* Navigation */
.nav {
color: white;
min-height: 70px;
line-height: 70px;
text-align: left;
background-color: #222629;
border-bottom: 3px solid #86C232;
}
.menu a {
float: left;
text-decoration: none;
color: white;
line-height: 40px;
height: 40px;
padding: 5px 12.5px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 25px;
}
.menu a:hover {
background-color: #6B6E70;
text-decoration: underline;
text-decoration-color: #86C232;
}
.logo {
padding: 0 5px 0 5px;
font-size: 34px;
}
.logo a {
color: #86C232;
}
.logo a:hover {
background-color: #222629;
}
label {
margin: 0 0 0 20px;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: left;
}
#toggle {
display: none;
}
/* Search Bar */
.search-box {
position: absolute;
top: 3.5%;
left: 97.5%;
transform: translate(-50%, -50%);
background-color: #2F3640;
height: 30px;
border-radius: 30px;
padding: 10px;
}
.search-box:hover {
left: 92%;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: white;
}
.search-btn {
color: #E84118;
float: right;
width: 30px;
height: 30px;
border-radius: 50%;
background: #2F3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
text-decoration: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 30px;
width: 0px;
}
/* Content Div */
#welcome {
width: 100%;
height: auto;
}
.welcome {
color: white;
margin: 0;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
padding-top: 10%;
}
.content {
margin: 0 12.5% 0 12.5%;
}
.categories-box-1,
.categories-box-2 {
display: flex;
flex-direction: column;
}
h3 {
padding-left: 20%;
text-align: center;
text-decoration: underline;
}
.boxes {
margin: 10px;
width: 80%;
}
.boxes a {
text-decoration: none;
color: black;
}
.boxes ul {
padding-left: 35%;
}
.boxes ul li {
list-style: none;
padding: 5px 10px 5px 10px;
}
.boxes ul li a:hover {
border-bottom: 2px solid #86C232;
}
/* Footer */
.footer {
color: white;
float: left;
width: 100%;
text-align: center;
background-color: #222629;
}
/* Media Query */
#media only screen and (max-width: 1400px) {
/* Navigation */
label {
display: block;
cursor: pointer;
}
.menu {
margin: 0;
width: 100%;
display: none;
text-align: center;
background-color: #222629;
}
.menu a {
float: none;
clear: left;
display: block;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #EAEAEB;
margin: 0;
padding: 0;
}
.menu a:hover {
background-color: #6B6E70;
text-decoration: underline;
text-decoration-color: #86C232;
}
.menu .border-nav {
border-top: 1px solid #EAEAEB;
}
#toggle:checked+.menu {
display: block;
}
.logo {
float: right;
padding-right: 20px;
padding-top: 10px;
}
.logo a {
border: none;
}
.search-bar-input {
padding-right: 38%;
}
/* Content */
.categories-box-1,
.categories-box-2 {
display: flex;
flex-direction: column;
}
.boxes {
width: 95%;
}
.boxes ul {
padding-left: 20%;
}
}
#media only screen and (max-width: 680px) {
.search-bar-input {
padding-right: 8%;
padding-bottom: 3.5%;
}
content {
margin: 0 5% 0 5%;
}
#showcase #welcome {
margin-top: -19px;
}
.boxes ul {
padding-left: 20%;
}
}
#media only screen and (max-width: 480px) {
.search-bar-input {
padding-right: 8%;
padding-bottom: 3.5%;
}
.content {
margin: 0 2% 0 2%;
}
h3 {
padding-left: 0;
}
.boxes ul {
padding-left: 2%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Home | Physical Model </title>
<!--Website CSS-->
<link href="css/collapse.css" type="text/css" rel="stylesheet">
<!-- Icon CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="css/application.css" type="text/css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<div class="logo"><a><i class="fa fa-cog" ></i></a></div>
Home
Construction
Dynamics
Fluids
Heat Transfer
Material Science
Mechanics
Statics
Thermodynamics
</div>
</div>
</nav>
<div class="container-4">
<div class="search-box">
<input class="search-txt" type="text" placeholder="Search..." name="">
<a class="search-btn" href="#"><i class="fas fa-search"></i></a>
</div>
</div>
<content>
<div id="showcase">
<img id="welcome" src="img/welcome.jpg" width="1900px" height="900px">
</div>
<div class="content">
<div class="categories-box-1">
<div id="box-1" class="boxes">
<section id="construction">
<h3>Construction</h3>
<ul>
<li>Crane Rigging Angles</li>
<li>Excavation and Earthwork Pressure</li>
</ul>
</section>
</div>
<div id="box-2" class="boxes">
<section id="dynamics">
<h3>Dynamics</h3>
<ul>
<li>Collision and Deformation: When Worlds Collide</li>
<li>General Planar Motion: Armor Attack</li>
<li>General Planar Motion: The Helicopter</li>
<li>General Planar Motion: The Oil Rig</li>
<li>General Planar Motion: The Slider</li>
<li>General Planar Motion: The Tank</li>
<li>Projectile Motion</li>
<li>Rectilinear Motion</li>
<li>Relative Motion: Choo Choo Train</li>
<li>Rotation: No Slip Wheel</li>
<li>Rotation and Moment of Inertia: A Day at the Races</li>
<li>Rotational Kinematics: The Ferris Wheel</li>
</ul>
</section>
</div>
<div id="box-3" class="boxes">
<section id="fluids">
<h3>Fluids</h3>
<ul>
<li>Fluid Properties</li>
<li>Head Loss</li>
<li>Hydrostatics</li>
<li>Internal Flow and Losses</li>
<li>Laminar and Turbulent Flow: Smoke Tunnel</li>
</ul>
</section>
</div>
<div id="box-4" class="boxes">
<section id="heattran">
<h3>Heat Transfer</h3>
<ul>
<li>Conservation of Energy: Ice Melting Blocks</li>
<li>Radiant Energy: Parabolic Concentrator</li>
</ul>
</section>
</div>
</div>
<div class="categories-box-2">
<div id="box-5" class="boxes">
<section id="matsci">
<h3>Material Science</h3>
<ul>
<li>Deformation: Bending a Knife Blade</li>
<li>Deformation: Shape Memory Alloys</li>
<li>Primary and Secondary Creep: Creepy Plastic</li>
</ul>
</section>
</div>
<div id="box-6" class="boxes">
<section id="mechanics">
<h3>Mechanics</h3>
<ul>
<li>Axial Strain</li>
<li>Beam Bending: Foam Beam</li>
<li>Design of Axial Members</li>
<li>Elastic vs. Plastic</li>
<li>Load Conditions: Rubber Shapes</li>
<li>Paper Stress Concentrations</li>
<li>Shear Demonstrator</li>
<li>Stress/Strain: A Strainge Transformation</li>
<li>Stress/Strain Transformation: The Big Book of Shear</li>
<li>Thermal Expansion</li>
<li>Thin Wall Pressure Vessels - Balloons</li>
<li>Thin Wall Pressure Vessels - Hot Dogs</li>
<li>Thin Wall Pressure Vessels
<li>Torsion: Tower of Torque</li>
</ul>
</section>
</div>
<div id="box-7" class="boxes">
<section id="statics">
<h3>Statics</h3>
<ul>
<li>Concentrated Cable Loads: The Ski Gondola</li>
<li>Coulomb Friction: Fun with Friction</li>
<li>Force Vector: Amazing Weight Loss Program</li>
<li>Frame Demos</li>
<li>Friction: Belt Friction</li>
<li>Loading: Distributed Student Loading</li>
<li>Mechanical Advantage: Pulleys - Equilibrator Challenge</li>
<li>Mechanical Advantage: The Torque Tester</li>
<li>Moments: Lug Wrench vs. Breaker Bar</li>
<li>Moments: Moments and Couples</li>
<li>Moments: The Persuader</li>
<li>Moments: Varignon's I-Beam</li>
<li>Truss Design: K'NEX Trusses</li>
<li>Truss Design: Ruler Truss</li>
<li>Truss Design: Wacky Fun Noodle</li>
<li>Truss Design: Wooden Truss 2D</li>
<li>Truss Design: Wooden Truss 3D</li>
<li>Uniformly Loaded Cables</li>
<li>Zero Force Members</li>
</ul>
</section>
</div>
<section id="thermodynamics">
<div id="box-8" class="boxes">
<h3>Thermodynamics</h3>
<ul>
<li>2nd Law - Direction</li>
<li>2nd Law - Losses</li>
<li>Boiling Point: The Hand Boiler</li>
<li>Boiling Properties</li>
<li>Closed vs. Open Systems</li>
<li>Conservation of Mass: Molasses Madness</li>
<li>Density and Buoyancy: The Lava Lamp</li>
<li>Otto Cycle: Engine Knock</li>
<li>Psychrometry</li>
<li>Total Energy - Fan Box</li>
<li>Total Energy</li>
<li>Vapor Power Cycle: The Little Engine That Could</li>
</ul>
</div>
</section>
</div>
</div>
</content>
<footer>
<div class="footer">
<p>Tyler Kautz, Trevor Swann, Jacob Stambaugh. Copyright © 2019. Some Rights Reserved.</p>
</div>
</footer>
</body>
</html>
I am having trouble with my search bar icon. It is shifting down when I hover over it. Can anyone tell me why and how to fix it? I have messed with margins and everything to try and get it fixed but nothing is working. I've also included a link below if that helps.
https://jsfiddle.net/tylerk9001/eb42nofx/
Change this:
.search-box {
position: absolute;
top: 3.5%;
right: 0;
background-color: #2F3640;
height: 30px;
border-radius: 30px;
padding: 10px;
}
Delete this:
.search-box:hover {
left: 92%;
}
Related
I have made an about page for my class assignment. Everything worked fine until I used the inspect option to see if my webpage is responsive to other devices. It was not responsive, I tried to see what is wrong with the code but I could not find an error in my codes after 5 hrs. Help would be appreciated.
*{
margin: 0;
padding:0;
box-sizing: border-box;
color: white;
background-color: black;
}
.title12{
text-align: center;
font-size: 24px;
margin-top: 100px;
}
.p1{
text-align: center;
font-size: 20px;
margin-top: 200px;
}
h1{
text-align: center;
}
.h2{
margin-top: 400px;
}
.reviews{
margin-top: 400px;
margin-left: 300px;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;
}
/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
#media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;
}
}
/* Style the counter cards */
.card {
padding: 16px;
text-align: center;
background-color: black;
}
.re1{
width: 250px;
}
.re3{
width:250px;
height: 350px;
}
.container2{
display: flex;
flex-direction: column;
justify-content: center;
align-items:justify;
text-align: center;
margin: 40px 20px 0 20px;
margin-top: 80px;
}
.container2 .heading{
width: 50%;
padding-bottom: 50px;
}
.container2 .heading h3{
font-size: 3em;
font-weight: bolder;
padding-bottom: 10px;
border-bottom: 3px solid white;
}
.container2 .heading h3 span{
font-weight: 100;
color: #fff;
}
.con2{
margin-top: auto;
margin-top: 900px;
}
.container{
max-width: 1280px;
margin: 2 auto;
display:flex;
align-items: center;
justify-content: space-between;
}
nav{
position:fixed;
top:0;
left:0;
right:0;
z-index: 99;
background-color: black;
padding: 16px 32px;
border-bottom: 3px solid blue ;
}
.menu{
display:flex;
justify-content: flex-end;
margin: 0 -16px;
flex: 1 1 0%;
}
.menu a{
color: white;
margin: 0 16px;
font-weight: 600;
text-decoration: none;
transition: 0.4s;
padding:8px 16px;
border-radius: 90px;
}
.menu a.highlight, .menu a:hover{
background-color:red;
}
a{
font-size: 25px;
text-decoration: none;
}
body {
margin: 0px;
font-weight: 400;
}
video {
width: 50%;
float: left;
margin-bottom: 35px;
}
.normal{
width: 100%;
}
.footer{
padding: 40px 0;
background-color: black;
}
.footer .social{
text-align: center;
padding-bottom: 25px;
color: white;
}
.footer .social a{
font-size: 24px;
color: white;
border: 1px solid white;
width: 40px;
height: 40px;
line-height: 38px;
display: inline-block;
text-align: center;
border-radius: 50%;
margin: 0 8px;
opacity: 0.75;
}
.footer .social a:hover{
opacity: 0.9;
}
.footer ul{
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a{
color: white;
text-decoration: none;
opacity: 0.8;
}
.footer ul li{
display: inline-block;
padding: 0 15px;
}
.footer ul li a:hover{
opacity: 1;
color: red;
}
.footer .copy{
margin-top: 15px;
text-align: center;
font-size: 13px;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="about.css">
<script src="https://kit.fontawesome.com/57160f5774.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css">
<title>About Us</title>
</head>
<body>
<nav>
<div class="container">
<div class="menu">
Home
Products
PC Designs
Support
Build Your PC
</div>
</div>
</nav>
<img style="float: left; height: 750px;" src ="About us/V388-SUPRIM.png">
<div class="title12">
<h1>SUPRIMX</h1>
</div>
<div class="p1">
<p>SUPRIMX is a world leader in gaming, content creation, business & productivity and AIoT solutions. </p>
<p>Bolstered by its cutting-edge R&D capabilities and customer-driven innovation, SUPRIMX has a wide-ranging global presence spanning over 120 countries. Its comprehensive lineup of laptops, graphics cards, monitors, motherboards, desktops, peripherals, and telematics systems are globally acclaimed.</p>
</div>
<div class="reviews">
<div class="container2">
<div class="heading">
<h3>Reviews<span> </span></h3>
</div>
</div>
<div class="row">
<div class="column">
<div class="card">
<h3><img class="re1" src="About us/kayla.jpg"></h3>
<br>
<p>Kayla </p>
<br>
<p>
Amazing website to buy a lot of products!.
</p>
</div>
</div>
<div class="column">
<div class="card">
<br>
<br>
<h3><img class="re2" src="About us/Curtis.jpg"></h3>
<br>
<p>Curtis</p>
<br>
<p>5 stars!!</p>
</div>
</div>
<div class="column">
<div class="card">
<h3><img class="re3" src="About us/Tyler.jpg"></h3>
<br>
<p>Tyler</p>
<br>
<p>Incredible website!</p>
</div>
</div>
</div>
</div>
</div>
<hr>
<section class="footer">
<div class="social">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
<i class="fa fa-pinterest" aria-hidden="true"></i>
</div>
<ul class="list">
<li>
Home
</li>
<li>
About SUPRIMX
</li>
<li>
Forums
</li>
<li>
Products
</li>
<li>
Support
</li>
</ul>
<p class="copy">
SUPRIMX © 2022
</p>
</section>
</body>
</html>
:root {
--primary-color: #10b929ff;
--background-light-grey: #696969;
--background-dark-grey: #2f2f2f;
}
body {
background: var(--background-light-grey);
margin: 0;
font-family: 'Josefin Sans', sans-serif;
}
.navbar {
background: var(--background-dark-grey);
padding: 1em;
font-family: 'Josefin Sans', sans-serif;
//position: fixed;
}
footer {
background: #2f2f2f;
}
nav {
display: none;
position: fixed;
z-index: 999;
width: 66%;
right: 0;
top:0;
background-color: var(--background-dark-grey);
height: 100%;
padding: 2em;
ul.primary-nav {
margin-top: 5em;
}
li {
a{
color: white;
text-decoration: none;
display: block;
padding: .5em;
text-align: right;
font-size: 30px;
&:hover{
font-weight: bold;
}
}
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
}
nav.menu-btn {
display: block;
}
.website-logo {
display: flex;
place-content: space-between;
}
.mobile-menu{
cursor: pointer;
width: 2em;
//max-width: 10%;
}
#media only screen and (max-width: 400px){
nav{
width: 44%;
padding-right: 30px;
}
}
#media only screen and (max-width: 768px){
.mobile-menu{
cursor: pointer;
width: 2em;
max-width: 10%;
}
.website-logo {
display: flex;
place-content: space-between;
img{
width: 200px;
}
}
.mobile-menu-exit{
float: right;
margin: .5em;
cursor: pointer;
max-width: 10%;
}
}
a {
color: white;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
section {
padding: 10em 0em 5em 0em;
}
.hero {
text-align: center;
//padding-bottom: 160px;
}
.hero-image{
background-image: url("https://am3pap006files.storage.live.com/y4pNuJohtpUdzBTZoc4fAQHlLNdeLvEQERim4Rs1KspeWQaKszREazNg4Ljnl7YTmkR6Sgsa4MUN4kB4aAf-vbbEuFnP9EPp2tAExe-dH_9o45qLndBetYu64mzC8r1Ynb8pOgWBAoqfzUL6lgg-Oue0OCqK6PPNliLbVrv6A3Yhuqalg__GtCNUkfzHJbwEuEtMWtpMjsvc_zHKMDeI1jNt5lG7eLxLiR5TluSAml-UuQ/IMG_0560.jpg?psid=1&width=720&height=486");
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
background-size: cover;
text-align: center;
padding-bottom: 160px;
}
.centre-col {
color: white;
h1 {
text-transform: uppercase;
font-weight: 600;
font-size: 3em;
resize: horizontal;
margin-bottom: 10px;
}
h3 {
font-weight: 200;
font-size: 1.2em;
margin-bottom: 20px;
}
.primary-cta {
background: var(--primary-color);
padding: .6em 1.3em;
text-decoration: none;
border-radius: 5em;
display: inline-block;
font-size: 1.5em;
}
}
.instagram-feed {
padding-top: 00px;
padding-bottom: 10px;
z-index: 0;
}
.eapps-link img {
display:none !important;
}
.club-vision-values {
background: var(--background-light-grey);
z-index: 1;
top: 40%;
padding-top: 0px;
text-align: center;
color: white;
margin-left: 2em;
margin-right: 2em;
margin-bottom: 10px;
padding-bottom: 20px;
margin-top: 10px;
position: relative;
}
.the-coaches{
padding: 20px;
ul{
max-width: 500px;
//padding-top: 10px;
display: gird;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
}
}
.coach-list {
column-count: 2;
max-width: 500px;
margin: auto;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
max-width: 800px;
margin: auto;
text-align: center;
background: var(--primary-color);
color: white;
margin-bottom: 40px;
h1 {
margin: 4px;
margin-top: 10px;
}
p {
font-size: 18px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 8px;
//padding-top: 3px;
}
}
#media only screen and (min-width: 768px){
.coach-list {
column-count: 2;
max-width: 800px;
margin: auto;
}
}
#media only screen and (min-width: 1080px){
.coach-list {
display: inline;
max-width: 2600px;
display: flex;
justify-content: center;
}
.the-coaches{
padding: 20px;
padding-bottom: 40px;
margin: auto;
ul {
max-width: 2200px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 40px;
padding-right: 40px;
}
}
.card {
margin: 10px;
}
}
.footer{
margin:0;
padding: 0;
box-sizing: border-box;
}
.footer-container{
max-width: 1670px;
margin:auto;
}
.footer-col {
color: white;
width: 20%;
padding: 0 35px;
}
.footer-col h4{
font-size: 18px;
margin-bottom: 20px;
position: relative;
}
.about-us {
line-height: 25px;
}
.footer-col h4::before{
content: '';
position: absolute;
left:0;
bottom: -10px;
background-color: var(--primary-color);
height: 2px;
box-sizing: border-box;
width: 50px;
}
.row
{
display: flex;
flex-wrap: wrap;
}
ul{
list-style: none;
}
.footer{
padding: 60px;
}
.footer-col .social-links a{
display: inline-block;
height: 40px;
width: 40px;
background-color: rgba(255,255,255,0.2);
margin:0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer-col .social-links a:hover{
color: #24262b;
background-color: #ffffff;
}
/*responsive*/
#media(max-width: 767px){
.footer-col{
width: 50%;
margin-bottom: 30px;
}
}
#media(max-width: 574px){
.footer-col{
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Era Boxing</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div class="navbar">
<div class="website-logo">
<img id="logo" class="logo" src="Images/logo.svg" alt="The club logo">
<img id="mobile-cta" class="mobile-menu" src="images/menu.svg" alt="Open Navigation">
<nav>
<img id="mobile-exit" class="mobile-menu-exit" src="images/exit.svg" alt="Exit Navigation">
<ul class="primary-nav">
<li>Classes</li>
<li>FAQs</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
<section class="hero-image">
<div class="container">
<!-- <img src="images/raul.JPG" alt="Raul"> -->
<div class="centre-col">
<h1>First-class boxing training<br>
for youths and adults alike</h1>
<h3>We provide a supportive and inclusive training environment</h3>
<div class="hero-cta">
View our timetable
</div>
</div>
</div>
</div>
</section>
<section class="instagram-feed">
<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-a2b6cbed-0090-4fd3-9a99-b6ce405f0cbf"></div>
</section>
<section class="club-vision-values">
<div>
<h2>Our Club</h2>
<p>New-Era Boxing Club was formed in 2011 by Mark Bebbington and focuses on teaching core values as well as providing first class training for youths and adults alike</p>
</div>
<div>
<h2>Our Vision</h2>
<p>Our vision is to create opportunities for members through boxing, education and personal development in doing so we will provide a supportive and inclusive training environment.</p>
</div>
<div>
<h2>Our Values</h2>
<p>New Era Boxing emphasises the core value of Equality, Integrity, Compassion, Resilience and Humility at the heart of the clubs activities.</p>
</div>
</section>
<section class="the-coaches">
<div class="coach-list">
<ul class="left">
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
<li>
<div class="card">
<img src="images/mark.PNG" alt="Mark Bebbington - Lead Coach" style="width:100%">
<h1>Mark Bebbington</h1>
<p>Lead Coach</p>
</div>
</li>
</div>
</div>
</section>
<footer class="footer">
<div class="footer-container">
<div class="row">
<div class="footer-col">
<h4>Phone Us</h4>
<ul>
<li>07830 085132</li>
</ul>
</div>
<div class="footer-col">
<h4>Email Us</h4>
<ul>
<li class="email">neweraboxing#hotmail.co.uk</li>
</ul>
</div>
<div class="footer-col">
<h4>About Us</h4>
<ul>
<li class="about-us"><a href="#">
FAQs
</a></li>
<li class="about-us"><a href="#">
Club Partners
</a></li>
<li class="about-us"><a href="#">
Timetable
</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Follow Us</h4>
<div class="social-links">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-instagram"></i></i>
<i class="fab fa-twitter"></i></i>
<i class="fab fa-whatsapp"></i></i>
</div>
</div>
</div>
</div>
</footer>
<script>
const mobileBtn = document.getElementById('mobile-cta')
nav = document.querySelector('nav')
mobileBtnExit = document.getElementById('mobile-exit');
mobileBtn.addEventListener('click', () => {
nav.classList.add('menu-btn');
})
mobileBtnExit.addEventListener('click', () => {
nav.classList.remove('menu-btn');
})
</script>
</body>
</html>
I am viewing my website in the Developer tools but whenever I try to view it in a mobile resolution below 400px wide it seems to add this unwanted padding to the right side. Sometimes this disappears, but other times it just stays there. Is this a common issue and are there any suggestions on how to fix this please?
enter image description here
How the page layout should look^
As shown by the screenshot, the two images in this html code are making a white space on the right side of the page. There is no padding nor does the image itself extend beyond where it apparently does - what is causing this unnecessary white space and how do I remove it?
CSS below:
.Text {
color: #bd8729;
font-family: sans-serif;
}
body {
margin: 0;
font-family: serif, sans-serif;
background-color: #F7F6F6;
}
/** {*/
/*background: #000 !important;*/
/*color: #0f0 !important;*/
/*outline: solid #f00 1px !important;*/
/*}*/
.topnav {
overflow: hidden;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
.leftSide {
position: relative;
float: left;
width: 55%;
}
.leftPicture1 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
float: left;
width: 45%;
max-width: 100%;
height: auto;
display: block;
}
.leftPicture2 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
float: right;
width: 45%;
max-width: 100%;
height: auto;
display: block;
}
.rightSide {
position: relative;
float: right;
width: 45%;
}
.form {
border-radius: 5px;
position: relative;
float: left;
background-color: #F7F6F6;
width: 50%;
padding: 20px;
height: 120%;
border: 20px black;
}
.insideForm {
background-color: white;
border: black 5px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: white;
color: #111011;
padding: 12px 20px;
border: #bd8729;
align-items: center;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd8729;
}
.rightPicture1 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
width: 80%;
margin-right: 0px;
max-width: 100%;
height: auto;
}
.rightPicture2 {
padding-left: 20px;
padding-bottom: 20px;
position: relative;
width: 80%;
max-width: 100%;
height: auto;
}
.centerDiv {
position: relative;
text-align: center ;
}
.footer {
width: 100%;
height: 100px;
background-color: #303233;
z-index: 10;
margin-top: 1000px;
position: relative;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:900px)">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<div class="topnav" id="myTopnav">
<img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
<img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="leftSide">
<div class="centerDiv"><h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
Resort </h2></div>
<img src="748A5226_RT.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
<div class="centerDiv">
<p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
of year
destination, pairing excellent golf and attractive resort experiences.
</p>
</div>
<p class="Text">
<ul style="list-style-position: inside">
<li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
<li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
<li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
<li> Variety of package options available, including other Algarve golf courses</li>
<li> Only 45 minutes from Faro airport</li>
</ul>
</p>
<div class="leftPicture1">
<img src="img.jpeg" width="95%">
</div>
<div class="leftPicture2">
<img src="img3.jpg" width="95%">
</div>
</div>
<div class="rightSide Text">
<div class="form">
<div class="insideForm">
<form action="/action_page.php">
<div class="centerDiv"><h2> Find out more today </h2></div>
<hr>
<p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
</p>
<input type="text" id="name" name="firstname" placeholder="Name">
<input id="email" name="email" placeholder="Email">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
agree to the terms of the Monte Rei Data Policy<br>
<input type="submit" value="SEND">
</form>
</div>
</div>
<div class="rightPicture1">
<img src="Swimming%20pool.jpg" width="95%">
</div>
<div class="rightPicture2">
<img src="Monte_Rei_Exterior_01_Jack_Hardy_2018.jpg" width="95%">
</div>
</div>
<div class="footer">
<img src="logo.png" style="float: left; padding-top: 25px; padding-left: 25px; width: 10%;">
<img src="icon.png" style="float: right; padding-top: 25px; padding-right: 25px; width: 3%;">
</div>
</body>
</html>
Is there anything that I am missing here? I have had this problem before and I was unable to fix it.
EDIT: New screenshot showing supersized image
Have you tried
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
It seems like you are struggling with box model sizes
https://www.w3schools.com/css/css3_box-sizing.asp
You have added a width of 95% to the img tag:
<img src="img.jpeg" width="95%">
Change this to 100% or remove and add to your styles eg:
.leftPicture1 img {
width: 100%;
}
Here is the code. Hope it will help you. if any changes please let me know.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
* {
margin: 0;
padding: 0;
}
*,
::after,
::before {
box-sizing: border-box;
}
.logo-wrap {
display: flex;
justify-content: space-between;
}
.Text {
color: #bd8729;
font-family: sans-serif;
}
body {
font-family: serif, sans-serif;
background-color: #F7F6F6;
}
.topnav {
padding: 20px;
}
.content-part {
padding: 20px 0;
display: flex;
width: 100%;
}
.left-part {
margin: 15px 0;
padding: 0 20px;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
.leftSide {
width: 70%;
}
.leftPicture1 {
padding-left: 20px;
padding-bottom: 20px;
}
.leftPicture2 {
padding-left: 20px;
padding-bottom: 20px;
}
.rightSide {
width: 30%;
}
.left-images {
display: flex;
}
.form {
border-radius: 5px;
background-color: #F7F6F6;
padding: 0 20px 20px 20px;
}
.insideForm {
background-color: white;
padding: 10px;
border: black 5px;
}
input[type=text],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: white;
color: #111011;
padding: 12px 20px;
border: #bd8729;
align-items: center;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #bd8729;
}
.rightPicture1 {
padding-left: 20px;
padding-bottom: 20px;
height: auto;
}
.rightPicture2 {
padding-left: 20px;
padding-bottom: 20px;
height: auto;
}
.centerDiv {
position: relative;
text-align: center;
margin-bottom: 20px;
}
.footer {
width: 100%;
height: 80px;
background-color: #303233;
position: relative;
display:flex;
justify-content:space-between;
padding:20px;
}
#media screen and (max-width: 767px) {
.topnav a:not(:first-child) {
display: none;
}
.content-part,.left-images{
display:block;
}
.leftPicture1,.leftPicture2{padding-left:0}
.leftSide,.rightSide{width:100%;}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<div class="logo-wrap">
<img src="https://dummyimage.com/100x50/000000/ffffff.png">
<img src="https://dummyimage.com/100x50/ff00ff/ffffff.png">
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="content-part">
<div class="leftSide">
<div class="centerDiv">
<h2 class="Text"> Experience the best golf and so much more at Portugal's #1 Golf
Resort </h2>
</div>
<img src="http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg" alt="Golf Course showing two ponds" style="width: 100%;">
<div class="left-part">
<div class="centerDiv">
<p class="Text">Ranked at #4 in Golf World's Top 100 Continental Europe 2019 list, Monte Rei is the perfect end
of year
destination, pairing excellent golf and attractive resort experiences.
</p>
</div>
<div class="points-Text">
<ul style="list-style-position: inside">
<li> Award-winning golf on Monte Rei's Signature Jack Nicklaus North Course</li>
<li> Refined dining options, from formal evening dining to relaxed poolside lunches</li>
<li> Activities, from yoga and cycling to guided local tours, ensure that no moment is wasted</li>
<li> Variety of package options available, including other Algarve golf courses</li>
<li> Only 45 minutes from Faro airport</li>
</ul>
</div>
</div>
<div class="left-images">
<div class="leftPicture1">
<img src="http://lorempixel.com/output/nature-q-c-640-480-6.jpg" width="100%">
</div>
<div class="leftPicture2">
<img src="http://lorempixel.com/output/technics-q-c-640-480-5.jpg" width="100%">
</div>
</div>
</div>
<div class="rightSide Text">
<div class="form">
<div class="insideForm">
<form action="/action_page.php">
<div class="centerDiv">
<h2> Find out more today </h2>
</div>
<hr>
<p> Simply enter your details or call Monte Rei’s team on +351 281 950 950. Terms and conditions apply.
</p>
<input type="text" id="name" name="firstname" placeholder="Name">
<input type="text" id="email" name="email" placeholder="Email">
<input type="text" id="phone" name="phone" placeholder="Phone">
<input type="checkbox" name="tsandcs" value="Checked"> Check this box to indicate that you have read and
agree to the terms of the Monte Rei Data Policy<br>
<input type="submit" value="SEND">
</form>
</div>
</div>
<div class="rightPicture1">
<img src="http://lorempixel.com/output/business-q-c-640-480-8.jpg" width="100%">
</div>
<div class="rightPicture2">
<img src="http://lorempixel.com/output/transport-q-c-640-480-3.jpg" width="100%">
</div>
</div>
</div>
<div class="footer">
<img src="logo.png">
<img src="icon.png">
</div>
</body>
</html>
I was coding my website when I realized that my Type to search button is quite high on the Website. Is there a way that I can get that to come down a bit? Here is my code For this project. Also if you see anyway that I can improve this website please tell me, also could you please help give me some tips on how I can make my code neater and more readable. Over all the type to search is the biggest problem to fix but if you see some others please let me know. Thank you!
HTML
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link href="context/styles.css" rel="stylesheet" type="text/css">
<link href="Webfonts/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<div class="navbar">
<ul class="navbarlist">
<li class="navbarimg"><img class="navbarlogo" src="img/LOGO.png"></li>
<li class="navbarelementL">Browse</li>
<li class="navbarelementL">Today's Deals</li>
<li class="navbarelementR">Shopping Cart</li>
</ul>
<div class="searchbox">
<input class="search-txt" type="text" name="" placeholder="Type to Search">
<a class="search-btn" href="#"></a>
<i class="fas fa-search"></i>
</div>
</div>
<div class="banner">
<img class="titleimg" src="img/TITLE.jpg">
</div>
<div class="row">
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
<div class="column">
<img src="img/Grid Panel 1.jpg" style="width:100%">
</div>
</div>
</div>
<div class="bottomnav">
<div class="bottomlogo">
<img class="navbarlogo2" src="img/LOGO.png">
</div>
<div class='nav'>
<div class='left'>
<ul>
<li class="bottomelement">About Us</li>
<li class="bottomelement">Affiliates</li>
</ul>
</div>
<div class='right'>
<ul>
<li class="bottomelement">TOS</li>
<li class="bottomelement">Fourth </li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
/*General*/
h2{
font-family: 'Ubuntu', sans-serif;
justify-content: center;
margin: auto;
}
body{
margin:0;
padding:0;
}
/*Navbar*/
.navbar{
float: left;
width: 100%;
background-color: rgb(248, 138, 180);
}
.navbarlogo{
width: 60px;
height: auto;
}
.navbarlist{
list-style-type:none;
font-family: 'Ubuntu', sans-serif;
}
.navbarelementL{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float: left;
}
.navbarelementL:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
.navbarelementR{
display: inline-block;
margin-right: 10px;
transition-property: all;
transition-duration: 1s;
float:right;
}
.navbarelementR:hover{
display: inline-block;
margin-right: 10px;
font-size: 20px;
}
/*end*/
.navbarimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupnavimg{
display: inline-block;
margin-right: 30px;
float:left;
}
.popupimg{
width: 40px;
height:auto;
}
.searchbox{
position: absolute;
top: 35px;
left: 50%;
transform: translate(-50%,-50%);
background: rgb(255, 255, 255);
height: 50px;
border-radius: 40px;
padding: 5px;
}
.searchbox:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.searchbox:hover > .search-btn{
background: white;
}
.search-btn{
color: black;
float: right;
width: 50px;
height: 50px;
border-radius: 50%;
background: skyblue;
display: flex;
justify-content: center;
align-items: center;
transition: 0.7s;
}
.search-txt{
border:none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.7s;
line-height: 40px;
width: 0;
}
.fas{
position: absolute;
margin-left: 18.0px;
margin-top: 18.5px;
size: 40px;;
}
.titleimg{
width:100%;
}
/*grid1*/
/* Three image containers (use 25% for four, and 50% for two, etc) */
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 10px;
}
body {
margin:0
}
body {
margin:0
}
.bottomnav {
width: 100%;
background-color: rgb(248, 138, 180);
position: relative;
}
.navbarlogo2 {
display: block;
margin-left: auto;
margin-right: auto;
width: 120px;
text-decoration: none;
position: absolute;
filter: brightness(10);
top: 15px;
left: calc(50% - 60px) /*center top left corner then remove half logo width (120px)*/
}
/*bottombar*/
.nav {
display: grid;
grid-gap: 120px;
grid-template-columns: 1fr 1fr;
}
.nav ul {
padding-left: 0;
}
.nav ul li {
list-style: none;
text-align: center;
padding-left: 0;
}
.left,
.right {
flex: 1;
}
.bottomelement{
font-size: 20px;
}
.bottomelement:hover{
font-size: 25px;
transition-duration: 1s;
}
Try adding margin-top to
.search-txt {
//...
margin-top: 7px;
}
Check the fiddle here
To answer your other questions, normally IDE's has formatting options included. Else you can use online sites like cleancss.com for CSS or htmlformatter.com for HTML or beautifier.io for JavaScript.
I am working on a mobile first design approach, so please resize the screen to mobile size or inspect and set to any phone.
I am having trouble getting this form to behave. It won't center and the submit button won't align with the right side of the forms.
And when I switch between phone screens different border edges on the form inputs will be issing. On one screen its the top border for the name input that's missing, on one its all the right borders for each box, etc.
How do you fix this?
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>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</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>×</li>
<li class="nav-item"><a class="side-active" href="#">Home</a></li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</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>
Contact Us
</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>
Its better to use 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>ABOUT US</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>CONTACT US</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>×</li>
<li class="nav-item"><a class="side-active" href="#">Home</a></li>
<li class="nav-item">About</li>
<li class="nav-item">Services</li>
<li class="nav-item">Contact</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>
Contact Us
</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>