I am using bootstrap-5. I couldn't find it a solution. How can this work for top and bottom, but not for right and left? Can you please help me? Okay as a default, there may be a value for bootstrap, but i am changing it on css. So what I wrote there must have worked I think. How can I get it worked?
#title {
background-color: #ff4c68;
}
.container-fluid {
padding: 3% 15%;
}
h1 {
font-family: 'Montserrat', sans-serif;
line-height: 1.5;
font-size: 3rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Company</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</section>
<!-- Press -->
<section id="press">
<img src="images/techcrunch.png" alt="tc-logo">
<img src="images/tnw.png" alt="tnw-logo">
<img src="images/bizinsider.png" alt="biz-insider-logo">
<img src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
try bootstrap classes such as m-1, px-1, m-2, etc...
<div class="container-fluid px-1 py-3">
or
.container-fluid {
padding: 3% 15% !important;
}
It is because the CSS is not overwriting the default bootstrap css..
So use the code given below and overwrite
#title {
background-color: #ff4c68;
}
.container-fluid {
padding: 3% 15% !important;
}
h1 {
font-family: 'Montserrat', sans-serif;
line-height: 1.5;
font-size: 3rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#900&family=Ubuntu&display=swap" rel="stylesheet">
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Company</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button">Download</button>
<button type="button">Download</button>
</div>
<div class="col-lg-6">
<img src="images/iphone6.png" alt="iphone-mockup">
</div>
</div>
</div>
</section>
<!-- Features -->
<section id="features">
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</section>
<!-- Testimonials -->
<section id="testimonials">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</section>
<!-- Press -->
<section id="press">
<img src="images/techcrunch.png" alt="tc-logo">
<img src="images/tnw.png" alt="tnw-logo">
<img src="images/bizinsider.png" alt="biz-insider-logo">
<img src="images/mashable.png" alt="mashable-logo">
</section>
<!-- Pricing -->
<section id="pricing">
<h2>A Plan for Every Dog's Needs</h2>
<p>Simple and affordable price plans for your and your dog.</p>
<h3>Chihuahua</h3>
<h2>Free</h2>
<p>5 Matches Per Day</p>
<p>10 Messages Per Day</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Labrador</h3>
<h2>$49 / mo</h2>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
<h3>Mastiff</h3>
<h2>$99 / mo</h2>
<p>Pirority Listing</p>
<p>Unlimited Matches</p>
<p>Unlimited Messages</p>
<p>Unlimited App Usage</p>
<button type="button">Sign Up</button>
</section>
<!-- Call to Action -->
<section id="cta">
<h3>Find the True Love of Your Dog's Life Today.</h3>
<button type="button">Download</button>
<button type="button">Download</button>
</section>
<!-- Footer -->
<footer id="footer">
<p>© Copyright 2018 TinDog</p>
</footer>
</body>
</html>
Your code will work in bootstrap version 4. I guess you watched Angela Yu's web bootcamp just add !important the css isn't overwriting the default css
.container-fluid{
padding: 3% 15% !important;
}
Related
I have Blazor Server-side application and I am now testing it on android and ios phones.
I have noticed that the header of the website is not displayed as it does on my desktop.
Here is how my Header looks on my Desktop:
and here is how it looks on my android and ios devices:
Here is my MainLayout.razor code:
#inherits LayoutComponentBase
<div class="main">
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSU"
width="120"
height="95" />
<div class="container">
<a class="navbar-brand" asp-area="" href=".">EEXI</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" href="/About">About</a>
</li>
</ul>
</div>
<div class="dropdown-menu-left">
<img src="https://i.imgur.com/yBzRXgu.png" title="Admin" />
</div>
</div>
</nav>
<div class="content px-4">
#Body
</div>
<footer class="no-print">
<div class="no-print">
<hr />
<p>© 2022 - Dromon Bureau of Shipping - Privacy Policy</p>
</div>
</footer>
</div>
Here is my Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EEXI Calculator</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
<script src="~/JS/JavaScript1.js"></script>
<script src="~/jquery/jquery.js"></script>
<script>
// When the user clicks the button, the page scrolls to the top
function OnScrollEvent() {
document.documentElement.scrollheight = 0;
}
</script>
</body>
</html>
I notice here that there is a menu on my header and I don't know where that comes from. And the button About is missing. And the general view is out of order.
Questions:
Can I make my view the same as the desktop one?
If not, what could I do to make it work?
I have noticed that if I switch on Desktop view from my Andoird (iOS does not switch) everything looks normal. Is there anything I can do to force my app to run on Desktop view all the time? (most optimal solution since it also fixes other minor issues)
Try not using navbar and use just nav:
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="p-3 bg-dark text-white">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<!--Replace with your logo-->
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li>Home</li>
<li>Features</li>
<li>Pricing</li>
<li>FAQs</li>
<li>About</li>
</ul>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
See bootstrap doc
Regarding Questions 3:
I have removed this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
from Host.cshtml and the app opens as a Desktop view only.
I only can see the tab which is I made active by default. But when I click on other tabs, I can't see anything. They just won't open. What's my mistake here? Need your help.
I tried to find the solution on bootstrap documentation, but I didnt come across with something like this.
By the way I am just learning bootstrap. But it's like I am just copying and pasting, is this wrong? How should I learn this? It seems a bit harder than just css. Cause there are many classes that are written by default.. I don't want to memorize. So is it good that I copy and paste when I need?
body .container-fluid {
padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
}
body {
text-align: center;
}
.title-image {
width:100%;
}
.download-button {
margin: 15px 13px;
}
.big-heading {
font-family: "Montserrat", "sans-serif";
font-weight: bold;
font-size: 2.2rem;
line-height:1.5;
margin-top: 70px;
}
.first_part {
color: white;
background-color: #F27E48;
text-align: left;
}
.container-fluid {
padding: 3% 3% 6% 5% !important;
}
.navbar-brand {
font-family: 'Ubuntu', sans-serif;
}
#courses {
padding:50px 100px 50px;
background-color: azure;
}
#courses>p{ /*only for child p of courses id, not grandchild etc */
width:60%;
margin: 18px auto 24px;
}
.card-body p{
text-align: left;
}
#how {
padding:50px 70px 50px;
background-color: rgb(243, 243, 178);
}
#how img {
height:280px;
width:330px;
}
.row div {
margin-top:10px;
}
.outcome {
width:70%;
margin:20px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Science Course Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section class="first_part" >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outcomes">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
<!-- Courses -->
<section id="courses">
<h2>Our Course Options</h2>
<p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>
<div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Online Program</h3>
</div>
<div class="card-body">
<h4>100$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>5 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>Must be finished in 6 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Full Time Program</h3>
</div>
<div class="card-body">
<h4>250$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>20 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>2 months</p>
<button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Part Time Program</h3>
</div>
<div class="card-body">
<h4>175$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>10 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>4 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section id="how">
<h2>How We Work</h2>
<div class="row">
<div class="col-lg-4 col-sm-6">
<p>One-on-one mentorship and guidance.</p>
<img src="coding.jpg" alt="coding-image">
</div>
<div class="col-lg-4 col-sm-6">
<p>Study schedules that fit with your life.</p>
<img src="clock.jpg" alt="coding-image">
</div>
<div class="col-lg-4">
<p>In-person meetups, workshops.</p>
<img src="meetup.jpg" alt="meetup-image">
</div>
</div>
</section>
<!-- Outcomes -->
<section id="outcomes">
<div class="outcome">
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-justified" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ex3-tab-1" data-mdb-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex3-tab-2" data-mdb-toggle="tab" href="#ex3-tabs-2" role="tab" aria-controls="ex3-tabs-2" aria-selected="false">Part Time Program</a>
</li>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex3-tab-3" data-mdb-toggle="tab" href="#ex3-tabs-3" role="tab" aria-controls="ex3-tabs-3" aria-selected="false">Online Program</a>
</li>
</ul>
<!-- Tabs Content-->
<div class="tab-content" id="ex2-content">
<div
class="tab-pane fade show active"
id="ex3-tabs-1"
role="tabpanel"
aria-labelledby="ex3-tab-1"
>
<p>$70,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>80%</p>
<p>Employed in-field within 90 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="ex3-tabs-2"
role="tabpanel"
aria-labelledby="ex3-tab-2"
>
<p>$60,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>75%</p>
<p>Employed in-field within 110 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="ex3-tabs-3"
role="tabpanel"
aria-labelledby="ex3-tab-3"
>
<p>$40,000</p>
<p>Median pay rate graduates reported earning.</p>
<p>65%</p>
<p>Employed in-field within 150 days of graduation.</p>
</div>
</div>
</div>
</section>
</body>
</html>
Example in Bootstrap5 docs says to use: data-bs-toggle, you have data-mdb-toggle. That should fix it for all your nav-links.
<a class="nav-link active" id="ex3-tab-1" data-bs-toggle="tab" href="#ex3-tabs-1" role="tab" aria-controls="ex3-tabs-1" aria-selected="true">Full Time Program</a>
https://getbootstrap.com/docs/5.0/components/navs-tabs/#base-nav
You have not added the javascript to do so.
Add this javascript to your code.
var triggerTabList = [].slice.call(document.querySelectorAll("#ex1 li a"));
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl);
triggerEl.addEventListener("click", function (event) {
event.preventDefault();
tabTrigger.show();
});
});
Documentation: https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior
Codepen: https://codepen.io/manaskhandelwal1/pen/eYdLYdN
The script tag for bootstrap javascript should be added after the body tag and not in the head tag, sometimes this will also create problems.
And you don't have to learn any bootstrap classes, gradually you will learn them automatically.
If you want any other help comment it here I will help you as soon as possible 😃.
Everything is going great, but I don't see this right and left arrors in my slide show. What should I do to fix it? I did the exactly what is in bootstrap documentation. I tried to look at on google, but couldn't find anything related to this issue. I need your help with this issue, please.
(it still doesnt upload my post, so filling the blanks)
body .container-fluid {
padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
}
body {
text-align: center;
}
.title-image {
width:100%;
}
.download-button {
margin: 15px 13px;
}
.big-heading {
font-family: "Montserrat", "sans-serif";
font-weight: bold;
font-size: 2.2rem;
line-height:1.5;
margin-top: 70px;
}
.first_part {
color: white;
background-color: #F27E48;
text-align: left;
}
.container-fluid {
padding: 3% 3% 6% 5% !important;
}
.navbar-brand {
font-family: 'Ubuntu', sans-serif;
}
#courses {
padding:50px 100px 50px;
background-color: azure;
}
#courses>p{ /*only for child p of courses id, not grandchild etc */
width:60%;
margin: 18px auto 24px;
}
.card-body p{
text-align: left;
}
#how {
padding:50px 70px 50px;
background-color: rgb(243, 243, 178);
}
#how img {
height:280px;
width:330px;
}
.row div {
margin-top:10px;
}
.outcome {
width:70%;
margin:20px auto;
background-color: rgb(236, 223, 223) ;
border-radius: 8px;
}
.big {
font-weight: bold;
font-size: 2rem;
font-family: 'Noto Serif', serif;
}
#outcomes {
padding:50px 70px 50px;
}
#outcomes a{
border:1px solid black;
border-radius: 10px;
}
#outcomes a:hover {
color: white;
background-color: gray;
}
.student-image {
height: 350px;
width: 450px;
}
#comments {
padding: 50px 70px 50px;
background-color: azure;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Science Course Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section class="first_part" >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outcomes">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comments">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
<!-- Courses -->
<section id="courses">
<h2>Our Course Options</h2>
<p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>
<div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Online Program</h3>
</div>
<div class="card-body">
<h4>400$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>5 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>6 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Full Time Program</h3>
</div>
<div class="card-body">
<h4>1300$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>20 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>2 months</p>
<button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Part Time Program</h3>
</div>
<div class="card-body">
<h4>700$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>10 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>4 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section id="how">
<h2>How We Work</h2>
<div class="row">
<div class="col-lg-4 col-sm-6">
<p>One-on-one mentorship and guidance.</p>
<img src="coding.jpg" alt="coding-image">
</div>
<div class="col-lg-4 col-sm-6">
<p>Study schedules that fit with your life.</p>
<img src="clock.jpg" alt="coding-image">
</div>
<div class="col-lg-4">
<p>In-person meetups, workshops.</p>
<img src="meetup.jpg" alt="meetup-image">
</div>
</div>
</section>
<!-- Outcomes -->
<section id="outcomes">
<div class="outcome">
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="fulltime-tab" data-bs-toggle="tab" href="#fulltime" role="tab" aria-controls="fulltime" aria-selected="true">Full Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="parttime-tab" data-bs-toggle="tab" href="#parttime" role="tab" aria-controls="parttime" aria-selected="false">Part Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="online-tab" data-bs-toggle="tab" href="#online" role="tab" aria-controls="online" aria-selected="false">Online Program</a>
</li>
</ul>
<!-- Tabs Content-->
<div class="tab-content" id="myTab-content">
<div
class="tab-pane fade show active"
id="fulltime"
role="tabpanel"
aria-labelledby="fulltime-tab"
>
<p class="big">$70,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">80%</p>
<p class="small">Employed in-field within 90 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="parttime"
role="tabpanel"
aria-labelledby="parttime-tab"
>
<p class="big">$60,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">75%</p>
<p class="small">Employed in-field within 110 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="online"
role="tabpanel"
aria-labelledby="online-tab"
>
<p class="big">$40,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">65%</p>
<p class="small">Employed in-field within 150 days of graduation.</p>
</div>
</div>
</div>
</section>
<!-- Comments -->
<section id="comments">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>I took the fulltime program course. It was amazing. Up to date curriculum, and the best instructors in their field</p>
<img src="student1.jpg" class="student-image" alt="student-photo">
<em>Selena, Miami</em>
</div>
<div class="carousel-item">
<p>I took the part time program course, and I got full stack python developer job only in 20 days within graduation.</p>
<img src="student2.jpg" class="student-image" alt="student-photo">
<em>Anna, Moscow</em>
</div>
<div class="carousel-item">
<p>This course made me job ready. Don't waste time with other time wasting courses. This is what you have been looking for!</p>
<img src="student3.jpg" class="student-image" alt="student-photo">
<em>Taylor, Paris</em>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</section>
</body>
</html>
Background colour and button colour are white.
Either add a background color, like this:
#comments {
background-color: #ff0000;
}
Codepen: https://codepen.io/manaskhandelwal1/pen/yLaxyyV
or change the colour of the buttons, like this:
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
For more info: https://stackoverflow.com/a/49017805/11171286
Codepen: https://codepen.io/manaskhandelwal1/pen/qBaMEdK
after creating products using flexbox items, the footer which has a google map location and communication details, it is coming over the flexbox items having product images. I have tried using various solutions like:
1.Giving footer - margin-top:100% or 1000px; working, but issue comes back in Mobile mode.
2.creating display: flex column for all the items inside the body, using nav, main and footer tags(that code is not given here) and giving hem appropriate growth, shrink and basis values. it too didn't work.
reading various solutions from StackOverflow made it clear that using Grid is an effective solution.
I tried this code and it didn't work too. Please giver a feasible solution. Thanks in advance.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>SathaJeevana Ayur Foods</title>
<link rel="shortcut icon" href="C:\Users\Durga siva prasad\Desktop\sathajeevana\images\logo.png" type="image/png" >
<style>
.break {
flex-basis: 100%;
height: 0;
}
html,body{
height: 100%;
}
body{
margin: 0;
}
body {
display: grid;
grid-gap: 10px;
height: 100%;
grid-template-columns:1fr;
grid-template-areas:
"nav"
"main"
"footer";
grid-template-rows: 100px 1fr 80px;
}
nav {
grid-area: nav;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
</style>
</head>
<body >
<a class="navbar-brand"><img src="C:\Users\Durga siva prasad\Desktop\sathajeevana\images\logo.png" type="image/png" height="70" width = "100" ></a>
<div class="collapse navbar-collapse d-flex flex-wrap align-items-center" id="nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item" >
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold px-3" style="color: #008000" href="#">Contact Us</a>
</li>
<li class="nav-item dropdown active" data-toggle="dropdown">
<a class="nav-link font-weight-bold px-3 dropdown-toggle" style="color: #008000" href="#">Products</a>
<div class="dropdown-menu">
<a class="dropdown-item font-weight-bold" style="color: #008000" href="prodcol.html/#foodproducts" target="_self">Food Products</a>
<a class="dropdown-item font-weight-bold" style="color: #008000" href="prodcol.html/#oilproducts" target="_self">Oil Products</a>
</div>
</li>
</ul>
</div>
<main>
<a name="foodproducts"></a>
<div class="d-flex justify-content-around align-items-center flex-wrap" style="height: 500px;">
<div class="p-4 m-2 border border-success ">
<a href="#">
<img src="C:\Users\Durga siva prasad\Downloads\product and ingredients\SaltF.jpg" height="300" width = "200" >
<p class="font-weight-bold text-center" style="color: #008000" >Ayur 2 Salt</p>
</a>
<div class="text-center">
<span><b>₹ 50</b></span><br>
<span>Quantity: 1/2 kg<span><br><br>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
<div class=" p-4 m-2 border border-success ">
<a href="#">
<img src="C:\Users\Durga siva prasad\Downloads\product and ingredients\MilletsF.jpg" height="300" width = "200">
<p class="font-weight-bold text-center" style="color: #008000">Ayur Millet Rice</p>
</a>
<div class="text-center">
<span><b>₹ 50</b></span><br>
<span>Quantity: 1/2 kg<span><br><br>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
<div class="break"></div>
<div class="p-4 m-2 border border-success ">
<a href="#">
<img src="C:\Users\Durga siva prasad\Downloads\product and ingredients\Oil.jpg" height="300" width = "700">
<p class="font-weight-bold text-center" style="color: #008000" >Cooking Oil</p>
</a>
<div class="text-center">
<span><b>₹ 50</b></span><br>
<span>Quantity: 1/2 kg<span><br><br>
<button type="button" class="btn btn-primary">Add to Cart</button>
</div>
</div>
<div class="break"></div>
<div>
</main>
<footer id="footer">
<div class="row">
<div class="col-sm-8" id="map" style="height:400px; background:gray;"></div>
<div class="col-sm-4 " style = " display: flex; align-items: center ; justify-content: center" >
<p class=" font-weight-bold" style="text-align: center ">
<span style="color:green">Plot no: 12,<br>P.S.R. Colony,<br>Vizianagaram - 535002<br><br>
</span>
<span style="color:green">
8340979799 </br>
sathajeevanafoods#gmail.com
</span>
</p>
</div>
</div>
</footer>
<!-- jquery lib-->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!--fontawesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<!--This is used for search icon. Instead putting icon manually it is loaded from fontawesome-->
<!-- MAP scripts -->
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(18.1184,83.41799),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
</body>
Probably it was covered by the main section, try and give the main section z-index of 1 And the footer z-index of 2.
Try it you see it appear some where and think of a logic to push it down. Or in alternative that you may add high margin-top let's say 1000px or anything else, you will see it appear.
It's there but it was overlaped by preceding codes.
Try it
I am attempting a mobile first approach for this website, however, when the side menu pops out after clicking the button only a portion of the menu is underneath the page content while the rest is on top as it should be.
what other options are there to take when trying to troubleshoot a problem like this?
I've tried moving the side menu from the section and placed it underneath, didn't work
I tried using the z-index on the .side-nav class - didn't work
function toggleNav() {
document.getElementById("side-menu").style.width = "50%";
document.getElementById("side-menu").style.display = "block";
document.getElementById("side-hidden").style.width = "50%";
document.getElementById("noScroll").style.overflow = "hidden";
}
function closeSideMenu() {
document.getElementById("side-menu").style.width = "0";
document.getElementById("side-hidden").style.width = "0";
document.getElementById("noScroll").style.overflow = "scroll";
}
.container {
padding: 0 1em;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
/*-- ---------------------------------------------------------------- -->
<!-- NAVIGATION -->
<!-- --------------------------------------------------------------- --*/
.navbar {
background-color: #FFFFFF;
width: 100%;
height: 78px;
border-bottom: 8px solid #CE2026;
}
.navbar-links {
display: none;
}
#logo {
display: none;
}
.open-slide {
float: right;
margin-top: 25px;
margin-right: 20px;
display: block;
}
<!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>
<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>
<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>
</nav>
<header 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="animated fadeInRight href=">Learn More</a>
</div>
</div>
</header>
<main>
<!-- ----------------------------------------------------------------------------------- -->
<!-- RED STRIP -->
<!-- ----------------------------------------------------------------------------------- -->
<section id="red-strip grid" class="grid">
<div class="container">
<div id="strip-1" class="strip-1-center animated slideInUp">
<div class="flex-1">
<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="st-2-center">
<h3 class="st-2-call">Give us a call!</h3>
<h3 class="st-2-number">(360)679-444</h3>
<p class="st-2-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 class="st-2-emailus">
<h4 class="email-us">OR EMAIL US</h4>
<img src="images/email.jpg" alt="email screen on a phone" width="312" height="140">
</div>
</div>
</section>
<!-- ----------------------------------------------------------------------------------- -->
<!-- ICON -->
<!-- ----------------------------------------------------------------------------------- -->
<section id="icons" class="grid">
<div class="container">
<div class="center-3-top">
<div>
<h4 class="">OFFERING YOU THE BEST SOLUTION FOR YOUR PROJECT</h4>
</div>
<div>
<p class="">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">
<i class="fas fa-map-pin fa-2x"></i>
<h2>LOCALLY OWNED</h2>
<p>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">
<i class="fas fa-dollar-sign fa-2x"></i>
<h2>BEST VALUE</h2>
<p>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">
<i class="fas fa-medal fa-2x"></i>
<h2>PROFESSIONALLY QUALIFIED</h2>
<p>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>
<!-- ----------------------------------------------------------------------------------- -->
<!-- PARALAX -->
<!-- ----------------------------------------------------------------------------------- -->
<section id="paralax" class="grid">
<div class="paralax-left">
</div>
<div class="paralax-right">
<h3>Any Project,</h3>
<h3>Any Size</h3>
<div class="strip-4-p">
<p class="p-width">Our shop can handle projects from
<br>small to large. Over that last 30 years we have seen it all and done it all. </p>
<a class="read" href="#">READ MORE</a>
</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 class="container">
<input class="form" type="text" name="name" placeholder="Full name" style="width: 95%; height: 30px"><br>
<input class="form" type="text" name="email" placeholder="Email" style="width: 95%; height: 30px"><br>
<textarea class="form" name="message" placeholder="Message" style="width: 95%; height: 126px"></textarea>
<input type="submit" value="Send">
</form>
</div>
</div>
</section>
</main>
<!-- ----------------------------------------------------------------------------------- -->
<!-- FOOTER -->
<!-- ----------------------------------------------------------------------------------- -->
<footer class="grid">
<div class="footer container">
<div class="footer-item">
<h3>OVER 30 YEARS <br>EXPERIENCE</h3>
<p>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 class="footer-item">
<div class="list">
<h3 class="adjust">OUR SERVICES</h3>
<p>- Deck Work</p>
<p>- Pressure Washing</p>
<p>- Staining</p>
<p>- Doors and Cabinets</p>
<p>- Mill Work Specialists</p>
<p>- Interior/Exterior Painting</p>
</div>
</div>
<div class="footer-item">
<h3 class="adjust">ADDRESS</h3>
<p class="regular">Brushworks NW <br> 691 Oak St. Unit I <br> Oak Harbor, WA 98277
</p><br>
<p>Phone: (360) 679-4444 <br> Fax: (360) 679-5026 <br> Email: bwnwinc#gmail.com</p>
</div>
</div>
<div class="facebook container">
<i class="fab fa-facebook-square fa-2x"></i>
</div>
<div class="copyright">
<p class="center">© 2019 Brushworks Inc. NW <br> Designed by Oak Harbor Web Designs</p>
</div>
</footer>
</body>
</html>
The side menu is supposed to be on top of the content, but a portion of the div is not.