Hello,
I started creating this website (this is my first one) and I am running into a couple of problems. the first being that after i create my events section my bottom navigation and footer keep pasting over my events sections. I tried z-index, having footer at bottom:0, and have changed the height of the body, nothing seems to work.
Also both of my navigation bars will not go all the way to the left and I want them to fill up the whole space. Lastly there are these >>>> that even after I continue to delete them and are not showing up in my html code, they continue showing in my live view. I have no idea how to get rid of them or why they continue to stay there.
Here is a link to the site to show it:
http://127.0.0.1:52524/preview/app/index.html
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>index.html</title>
<link href="style3.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/3b12c77184f12b8ea351bf00b/c8f4b053490f36b3871a0f7de....");</script>
<!--Mailchimp-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header>
<div class="primary_header">
<img src="web header no background.png" width="1500" height="250" alt="">
<img style="float: left" ></div>
</header>
</div>
<div id="navMenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Who We Are</a>
<ul>
<li><a href="#">Our Story</a></li>
<li><a href="#">Mission, Puspose, Core Values</a></li>
<li><a href="#">Meet The Team</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Events</a></li>
</ul>
</li>
<li><a href="#">Industries</a>
<ul>
<li><a href="#">Automotive</a></li>
<li><a href="#">Construction & Related Industries</a></li>
<li><a href="#">Cosmetology</a></li>
<li><a href="#">Environmental</a></li>
<li><a href="#">Healthcare</a></li>
<li><a href="#">Manufacturing & Distribution</a></li>
<li><a href="#">Non-Profits</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Restaurants</a></li>
<li><a href="#">Retail</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Accounting</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Advisory</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Business Packages</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Business Services</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Individuals</a>
<ul>
<li><a href="#">Individual Planning</a></li>
<li><a href="#">Individual Tax</a></li>
</ul>
</li>
<li><a href="#">Payroll</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Start Up Package</a></li>
<li><a href="#">Start Up Services</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
<li><a href="#">Tax Services</a>
<ul>
<li><a href="#">Audits & IRS Issues</a></li>
<li><a href="#">Business Tax</a></li>
<li><a href="#">Individual Tax</a></li>
<li><a href="#">State & Local Tax</a></ul></li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Tools</a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
</ul> <!--End of main ul-->
</div> <!---End of navMenu-->
<!---Search Bar-->
<div id="searchbox">
<form>
<input type="text" name="text" class="search" placeholder="Search Here">
<input type="submit" class="submit" value="search">
</form>
</div>
<!---Slideshow Conatiner-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/image1.jpeg" width="1200" height="400" alt="">
<div class="carousel-caption">
<h3>Caption 1</h3>
<p>Content Goes Here.</p>
</div>
</div>
<div class="item">
<img src="images/image2.jpeg"img_chania2.jpg"" width="1200" height="400"alt="">
<div class="carousel-caption">
<h3>Caption 2</h3>
<p>Content Goes Here.</p>
</div>
</div>
<div class="item">
<img src="images/image3.jpeg" width="1200"height="400" alt="">
<div class="carousel-caption">
<h3>Caption 3</h3>
<p>Content Goes Here.</p>
</div>
</div>
<div class="item">
<img src="images/image4.jpeg" width="1200" height="400" alt="">
<div class="carousel-caption">
<h3>Caption 4</h3>
<p>Content Goes Here.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--end of slider-->
<div class="container4">
<!--Thumbnail columns-->
<div class="wrapper">
<div class="column1" >
<h2>Get To Know Us</h2>
<p>Click below to learn more about who we are and what we stand for </p>
<button type="button" class="btn btn-default">Learn More</button>
</div>
<div class="column2" >
<h2> Business Services</h2>
<p>Click below to learn more about the services we provide to our small businesses and start up companies </p>
<button type="button" class="btn btn-default">Learn More</button>
</div>
<div class="column3">
<h2>Specialized Industries</h2>
<p>Click below to visit the various business industries our firm specializes in </p>
<button type="button" class="btn btn-default">Learn More</button>
</div>
<div class="column4">
<h2>Schedule a Meeting</h2>
<p>Contact us to book an appointment with a member our knowlegdeable and experienced team</p>
<button type="button" class="btn btn-default">Schedule</button>
</div>
</div>
<!---end of wrapper--->
<!----main content--->
<div class="row2">
<div class="column5">
<p class="image_align"><img src="pexels-photo-262508.jpeg" width="300" height="300" style="background-color: white"></p>
<h4>Blog 1 Title</h4>
</div>
<div class="column5">
<p class="image_align"><img src="pexels-photo-262508.jpeg" width="300" height="300" style="background-color: white"></p>
<h4>Blog 2 Title</h4>
</div>
<div class="column5">
<p class="image_align"><img src="pexels-photo-262508.jpeg" width="300" height="300"style="background-color: white" ></p>
<h4>Blog 3 Title</h4>
</div>
<div class="column5">
<p class="image_align"><img src="pexels-photo-262508.jpeg" width="300" height="300" style="background-color: white"></p>
<h4>Blog 4 Title</h4>
</div>
</div>
<div class="row3">
<div class="column6">
<p class="image_align2"><img src="pexels-photo-261949.jpeg" width="300" height="300" style="background-color: white"<a href=""></p>
<h4>Article Title 1</h4>
</div>
<div class="column6">
<p class="image_align2"><img src="pexels-photo-261949.jpeg" width="300" height="300" style="background-color: white"<a href=""></p>
<h4>Article Title 2</h4>
</div>
<div class="column6">
<p class="image_align2"><img src="pexels-photo-261949.jpeg" width="300" height="300" style="background-color: white"<a href=""></p>
<h4>Article Title 3</h4>
</div>
<div class="column6">
<p class="image_align2"><img src="pexels-photo-261949.jpeg" width="300" height="300" style="background-color: white"<a href=""></p>
<h4>Article Title 4</h4>
</div>
</div>
<!---end of main content-->
<!--Events-->
<div class="conatiner3">
<h1>Up-Coming Events</h1>
<button type="button" class="btn btn-default">View More</button>
<div class="row4">
<div class="[ col-xs-12 col-sm-offset-2 col-sm-8 ]">
<ul class="event-list">
<li>
<time datetime="2018-03-01">
<span class="day">01</span>
<span class="month">Mar</span><br>
<span class="year">2018</span>
<span class="time">6-9p.m.</span>
</time>
<img src="event-1597531_1920.jpg" width="200px height=320px">
<div class="info">
<h2 class="title">Event 1</h2>
<p class="desc">In Room 203 Rhode Island College</p>
</div>
</li>
<li>
<time datetime="2018-05-05">
<span class="day">05</span>
<span class="month">May</span><br>
<span class="year">2018</span>
<span class="time">6-9p.m.</span>
</time>
<img src="event-1597531_1920.jpg" width="200px height=320px">
<div class="info">
<h2 class="title">Event 2</h2>
<p class="desc">In Room 203 Rhode Island College</p>
</div>
</li>
<li>
<time datetime="2018-07-10">
<span class="day">10</span>
<span class="month">Jul</span><br>
<span class="year">2018</span>
<span class="time">6-9p.m.</span>
</time>
<img src="event-1597531_1920.jpg" width="200px height=320px">
<div class="info">
<h2 class="title">Event 3</h2>
<p class="desc">In Room 203 Rhode Island College</p>
</div>
</li>
</ul>
</div>
</div>
<!---End of Events--->
</div> <!---end of conatiner4-->
<!---bottom nav--->
<div id="nav2">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Industries</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
<footer>
<div id="footer">
<div class="container2">
<form id="subscribe" action="" method="post">
<h2>Subscribe to Our Free Newsletter </h2>
<p> Subscribe to our mailing list to recieve our FREE Newsletter on the latest tips and news to grow your business</p>
<fieldset>
<input placeholder="First Name" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Last Name" type="text" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Email Address" type="email" tabindex="3" required>
</fieldset>
<fieldset>
<button name="subscribe now" type="subscribe now" id="subscribe-mail" data-submit="...Sending">Subscribe Now</button>
</fieldset>
</form>
</div>
<div class="social">
<h2>Follow Us</h2>
<li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</div>
</div>
</footer>
</html>
CSS:
CSS: @charset "utf-8";
body {
width: 1550px;
height: 6000px;
}
#navMenu {
padding: 0;
margin: 0;
}
#navMenu body {
background: #263b8b;
padding:0;
font-family: 'eb-garamond';
}
#navMenu ul {
list-style: none;
margin-left: 0;
}
#navMenu ul li {
background: #263b8b;
float: left;
padding-right: 0;
position: relative;
z-index: 6000;
}
#navMenu ul a {
display: inline-block;
width: 247px;
height: 60px;
text-align: center;
background: #263b8b;
color: white;
text-decoration: none;
font-size:28px;
}
#navMenu ul a:hover {
background: #c9c7c7;
}
#navMenu li>ul {
display: none;
position: absolute;
left: -15px;
top: 100%;
margin-top: 1px;
}
#navMenu li:hover>ul {
display: block;
}
#navMenu li>ul li {
padding: 0;
padding-top: 1px;
}
#navMenu li>ul li>ul {
left: 100%;
top: 5px;
padding-left:1px;
}
#navMenu li>ul li>ul li {
width: 200px;
}
#navMenu li:hover>a {
background: #263b8b;
color: #00a84e;
}
#searchbox {
background-color:#263B8B;
position: relative;
}
#searchbox form {
width: 1200px;
margin: auto;
margin-top: 5px;
position: relative;
}
.search {
width: 80%;
padding: 10px;
font-size: 20px;
}
.submit {
width: 15%;
padding: 10px;
font-size: 20px;
background: #00a84e;
}263B8B
@media (max-width:900px) {
#searchbox {
width: 50%;
}
}
@media (max-width:600px) {
#searchbox {
width: 100%;
}
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 50%;
margin: auto;
top-margin: 10px;
}
.wrapper {
display: flex;
display: -webkit-flex;
display: -ms
}
.column1 {
float: left;
width: 389px;
height: 215px;
padding: 5px 15px;
text-align: center;
color: white;
max-height: 220px;
max-width: 390px;
background-color: #00A84E;
}
.column1 button {
background:#2638b8;
font-family: "eb-garamond";
font-size: 17px;
color: white;
}
.column1 button:hover {
background: #c9c7c7;
}
.column2 {
float: left;
width: 389px;
height: 215px;
padding: 5px 15px;
text-align: center;
color: white;
max-height: 220px;
max-width: 390px;
background-color: #00A84E;
}
.column2 button {
background:#2638b8;
font-family: "eb-garamond";
font-size: 17px;
color: white;
}
.column2 button:hover {
background: #c9c7c7;
}
.column3 {
float: left;
width: 389px;
height: 215px;
padding: 5px 15px;
text-align: center;
color: white;
max-height: 220px;
max-width: 390px;
background-color: #00A84E;
}
.column3 button {
background:#2638b8;
font-family: "eb-garamond";
font-size: 17px;
color: white;
}
.column3 button:hover {
background: #c9c7c7;
}
.column4 {
float: left;
width: 389px;
height: 215px;
padding: 5px 15px;
text-align: center;
color: white;
max-height: 220px;
max-width: 390px;
background-color: #00A84E;
}
.column4 button {
background:#2638b8;
font-family: "eb-garamond";
font-size: 17px;
color: white;
}
.column4 button:hover {
background: #c9c7c7;
}
}@media (max-width 900px) {
.column {
width: 50%;
}
}
@media (max-width:600px) {
.column1 {
width: 100%;
}
}
.row2 {
width: 100%;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: inline-block
}
.column5 {
width: 25%;
float: left;
font-family:"eb-garamond";
line-height: 24px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
margin-top: 15px;
margin-bottom: 15px;
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
}
.column5:hover {
box-shadow: 5px 8px 16px 0 rgba(0,0,0,0.2);
}
.row3 {
width: 100%;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
display: inline-block
}
.column6 {
width: 25%;
float: left;
font-family:"eb-garamond";
line-height: 24px;
padding-top: 10px;
padding-bottom: 10px;
text-align:center;
margin-top: 15px;
margin-bottom: 15px;
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
}
.column6:hover {
box-shadow: 5px 8px 16px 0 rgba(0,0,0,0.2);
}
.container3 {
font-family: "eb-garamond";
z-index: 6000px;
height: 200px;
}
.event-list {
list-style: none;
font-family: "eb-garamond";
margin: 0;
padding: 0;
margin-top: 20px;
}
.event-list>li {
background-color: white;
box-shadow: 5px 5px 5px 5px #263b8b;
box-shadow: 5px 5px 5px 5px #263b8b;
padding: 0;
margin: 0 0 20px;
}
.event-list>li>time {
display: inline-block;
width: 100%;
background-color: #263b8b;
color: white;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.event-list>li>time>span {
display: none;
}
.event-list>li>time>.day {
display: block;
font-size: 36pt;
font-weight: 100;
line-height: 1;
}
.event-list>li>time>.month {
display: block;
font-size: 24pt;
font-weight: 900;
line-height: 1;
}
.event-list>li>img {
width: 30%;
}
.event-list>li>.info {
padding-top: 5px;
text-align: center;
}
.event-list>li>.info>.title {
font-size: 36pt;
font-weight: 300;
margin: 0;
}
.event-list>li>.info>.desc {
font-size: 18pt;
font-weight: 300;
margin: 0;
}
.conatiner3 button {
background-color: #00a84f;
color: white;
font-size: 18px;
position: relative;
margin-left: 1160px;
}
.container3 button:hover {
background: #c9c7c7;
}
.conatiner3 h1 {
position: relative;
font-family: "eb-garamond";
margin-left: 250px;
margin-top: 30px;
}
#nav2 {
padding: 0;
margin: 0;
z-index: 6000px;
font-family: "eb-garamond";
top: 10px;
}
#nav2 body {
padding: 0;
font-family: "eb-garamond";
}
#nav2 ul {
list-style: none;
}
#nav2 ul li {
float: left;
padding-right: 1px;
position: relative;
z-index: 5000px;
}
#nav2 ul a {
display: block;
width: 245px;
height: 45px;
text-align: center;
background: #263b8b;
color: white;
font-size: 25px;
z-index: 6000px;
}
#nav2 ul a:hover {
background: #00a84e;
}
#footer {
background-color: #c9c7c7;
font-family: "eb-garamond";
margin-top: 55px;
position: relative;
width: 100%;
height: 470px;
bottom: 0;
}
.container2 {
max-width: 620px;
width:100%;
margin:0 auto;
position:relative;
margin-top:58px;
font-family: "eb-garamond";
}
#contact input [type="text"], #conact input [type="email"], #contact button [type="subscribe now"] {
font: 400 12px/16px;
font-family: "eb-garamond";
align-content: center;
}
#subscribe {
background: #263b8b;
padding: 25px;
margin: 50px 0;
}
#subscribe h2 {
color: white;
display: block;
font-size:30px;
font-weight: 400;
text-align:center;
}
#subscribe p {
margin: 5px 0 15px;
display: block;
color: white;
font-size: 15px;
}
fieldset {
border: medium none;
margin: 0 0 10px;
min-width: 100%;
padding: 0;
width: 100%;
}
#subscribe input[type="text"], #subscribe input[type="email"] {
width: 100%;
border: 1px solid #263b8b;
background: white;
margin: 0 0 5px;
padding: 10px;
}
#subscribe input[type="text"]:hover, #subscribe input[type="email"]:hover {
-webkit-transition:border-color 0.3s ease-in-out;
-moz-transition:border-color 0.3s ease-in-out;
transition: boder-color 0.3s ease-in-out;
border:1px solid #c9c7c7;
}
#subscribe button[type="subscribe now"] {
cursor: pointer;
width: 100%;
border: none;
background: #00a84e;
color: white;
margin: 0 0 5px;
padding: 10px;
font-size:20px;
}
#subscribe button[type="subscribe now"]:hover {
background: #c9c7c7;
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#subscribe button[type="subscribe now"]:active {
box-shadow: insert 0 1px 3px rgba(0,0,0,0.5);
}
#subscribe input:focus {
outline: 0;
border: 1px solid ;
}
::-webkit-input-placeholder {
color: black;
}
:-moz-placeholder {
color: black;
}
::-moz-placeholder {
color: black;
}
-ms-input-placeholder {
color: black;
}
.social {
display:flex;
text-align: center;
position: absolute;
bottom: 0.%;
left:75%;
transform:translate(-50%,-50%);
}
.social h2 {
font-family: "eb-garamond";
font-size: 30px;
}
.social li {
margin: 10px;
list-style: none;
font-size: 50px;
transition: .5s;
}
.social li a {
width: 60px;
padding: 16px 0;
}
.social li:nth-child(1) {
color:#2638B8;
}
.social li:nth-child(2) {
color:#2638B8;
}
.social li:nth-child(3) {
color:#2638B8;
}
.social li:nth-child(4) {
color:#2638B8;
}
.social li:hover {
transform:translateY(-8px);
box-shadow: 0 10px 10px rgba(0,0,0,.5);
}
1 Correct answer
5
Replies
AdChoices