Let me proceed by saying that I have searched Google and Stack Overflow to find the answer to this. I have tried many solutions, but none are working.
The main issue right now is the fact that my CSS won't override the Bootstrap CSS in the jumbotron. It won't change the background color, background image or nav bar settings.
I have tried using !important. I have tried calling my stylesheet after calling the bootstrap one. In my current version, I have the #import code to call the Bootstrap CSS at the beginning of my own CSS file. None have worked. For a few items, I changed the bootstrap file, but only for color.
Please help me figure out why my file will not override bootstrap. You can see the site at http://www.dismantledesign.com/testsite2/
The site is incomplete. I just can't proceed with styling until I figure this out.
Sorry if any code ends up missing. SO doesn't always like my pastes from TextWrangler. Feel free to look at it via the source code in the link.
Code below:
#import url("bootstrap.min.css");
body{
font-family: 'Raleway', Helvetica, Arial;
font-size: 16px;
color: #666666;
font-weight: 400;
letter-spacing: 1px;
}
p{
line-height: 20pt;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6{
color: #333333;
text-transform: uppercase;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 700;
}
a{
color: #00acec;
text-decoration: none;
font-family: 'Raleway', Helvetica, Arial;
font-weight: 600;
}
a:hover, a:focus{
color: #5a5e61;
text-decoration: none;
}
.btn-default{
border-radius: 2px;
border: 1px solid #a7adb0;
font-size: 14px;
color: #a7adb0;
font-weight: 700;
text-transform: uppercase;
padding: 11px 20px;
}
.btn-default:hover{
background: #5a5e61;
color: #a7adb0;
}
/*end*/
/*logo*/
.navbar-brand{
width: 174px;
height: 50px;
padding: 0;
margin: 0;
text-indent: -9999px;
}
/*end*/
/*navigation*/
.navbar-default{
background: none;
border: none;
padding: 0 0 60px 0;
}
.navbar-default .navbar-nav>li>a{
font-size: 20px;
font-weight: 600;
text-transform: uppercase;
color: #a7adb0;
padding: 11px 0;
text-align: center;
}
.navbar-default .navbar-nav>li>a:hover[
color: #fff;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
background: none;
outline: 0;
color: #fff;
}
.navbar-toggle{
border: none;
margin-top: 0;
margin-right: 0;
width:32px;
height: 32px;
text-align: center;
}
.navbar-default .navbar-collapse{
border: none;
background: rgba(0,0,0,0.1) !important;
border-radius: 2px;
box-shadow: none;
}
.jumbotron{
background: #363737 url("img/tempjumbotron.jpg") no-repeat;
background-size: cover;
max-height: 800px;
padding: 60px 0;
margin: 0;
}
/*end*/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!--Hey, this is the CC title!-->
<title>Contra Coda Media | Audio | Photo | Video</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--This is where the CSS comes from. -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo5.png"></a>
</div>
<!-- Collect Nav Content -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div><!--END NAVBAR COLLAPSE-->
</nav>
<div class="row text-center">
<h1>THIS IS CONTRA CODA</h1>
<h3>where the music never ends</h3>
LEARN MORE
</div>
</div>
</div>
<!--END JUMBOTRON-->
<div class="whatsnew">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/levelup.jpg" alt="">
</div>
<div class="item">
<img class="img-responsive" src="img/heartwhole.jpg" alt="">
</div>
</div>
</div>
</div>
<!--END WHATS NEW-->
<div class="services">
<div class="container">
<div class="row">
<div class="services-audio text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-headphones"> </span>
<h4>AUDIO</h4>
<p>We believe in good, thoroughly crafted recording and mixing with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-photo text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-camera"> </span>
<h4>PHOTO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
<div class="services-video text-center">
<div class="col-md-4">
<span style="font-size: 30px" class="glyphicon glyphicon-facetime-video"> </span>
<h4>VIDEO</h4>
<p>We believe in good, thoroughly crafted recording with great care in order to achieve a high-quality result.</p>
learn more
</div>
</div>
</div>
</div>
</div>
<!--END SERVICES-->
<div class="clients">
<div class="heading">
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<h1>Clients</h1>
</div>
<div class="col-md-6 text-center">
see more
</div>
</div>
</div>
</div>
<!--END HEADING-->
<div class="gallery">
<!--GALLERY START-->
<div class="galleryinner">
<img src="img/clients/ivey.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>IVEY</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/rufus.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RUFUS DAWKINS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/seddymac.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>SEDDY MAC</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/lomax.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>MELISSA LOMAX</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/jeremy.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>JEREMY WILLIAMS</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/echoing.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>WHEN ALL KEPT ECHOING</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
<div class="galleryinner">
<img src="img/clients/delisle.jpg" alt="" class="img-responsive" />
<div class="caption">
<div class="captionheading">
<h4>RAISTLIN DELISLE</h4>
<small>see more</small>
</div>
<div class="btn-group btn-trigger">
Link
More
</div>
</div>
<!--END CAPTION-->
</div>
<!--END GALLERY INNER-->
</div>
<!--END GALLERY-->
</div>
<!---END CLIENTS-->
<div class="firstcontact">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="email text-center">
<span style="font-size: 30px" class="glyphicon glyphicon-envelope"> </span>
<h5>EMAIL</h5>
<p>layne#contracoda.com</p>
</div>
</div>
<div class="col-md-8">
<div class="social text-center">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-twitter"> </span>
<span class="icon-sprite sprite-soundcloud"> </span>
</div>
</div>
</div>
</div>
</div>
<!---END FIRST CONTACT-->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<div class="copyright">
<small>© 2017 CONTRA CODA MEDIA</small>
</div>
</div>
<div class="col-md-6 text-center">
<div class="design">
<small>WEB DESIGN BY DISMANTLE DESIGN</small>
</div>
</div>
</div>
</div>
</footer>
<!---END CLIENTS-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
On line 82 you are using a square bracket [ instead of an squiggle {, swap this and it will work:
.navbar-default .navbar-nav>li>a:hover {
This basically makes everything after the error not work, thus why your background wont change :) Also your background image will not change unless it looks the line looks like this (line 110):
background: #363737 url(../img/tempjumbotron.jpg) no-repeat;
Koda
Related
I've been working on a website using Bootstrap 4 where there are three images inside a .row div. The problem I'm having, however, is that I want all the images to have the same height, so I created my own class where I set height: 20% and width: auto The images look exactly how I want them to, however, for each image a certain amount of pixels are added under that div and it sets a huge gap between the section that has the images and the section that follows it. I was wondering what would be a way to avoid this from happening since I don't want to keep that gap between both sections. Here's a fiddle with what I'm talking about https://jsfiddle.net/wxg51v5x/ (Comment out the images to see the difference in action). Thanks!
EDIT: Included the code itself.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: auto;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
The problem was coming from your program-logo class and the large images.
I used the img-fluid class for the images as well as the px-5 class for the third image and also re-arranged things a little bit by using the container class instead of container-fluid and nesting images into their own row-column pairs for easier manipulation using Bootstrap 4 native classes alone (without any custom css).
Also note: I added the background color classes (bg-warning and bg-secondary) just to see what's happening and commented out some your other stuff that was unnecessary in my option. Feel free to adjust that as needed.
I only dealt with the upper section and the spacing underneath because that was your question. But you might want to do some adjustments for the bottom section because that container-fluid doesn't make it look good on wide 4K screens.
Here's the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container bg-warning" id="programs">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<!--
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
-->
<h3 class="font-heavy mt-3">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/2%20CITE_CITE%20Logo%20C.png" alt="Caribbeans In Tech + Entrepreneurship" />
</div>
</div>
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 offset-2 offset-md-1 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/bwn4.png" alt="Build With, Not For" />
</div>
</div>
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid px-5" src="https://illicitmind.com/static/img/Gsd-Logo.png" alt="Get Shit Done" />
</div>
</div>
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
<!-- </div>-->
</div>
<div class="container-fluid bg-secondary" id="formula">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
<!-- </div>-->
</div>
The space you are talking about is coming because you use .program-logo width:auto; i changed the property and the space is gone i did it in below code you should try it.
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 col-sm-12">
<img height="20%" width="auto" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: 40%;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
i'm getting horizontal scroll bar when resizing the browser to 796px or less i'v tried to delete the sections one by one to find which one gives that issue but it didn't resolve it then i tried to delete some code starting from section products-4 to the end of the code and it's solved then i started to delete the sections one by one from products-4 to the end but that didn't help i don't know what's the link between them to make that scroll appear and when try to test using google chrome device toolbar it gives white space on the right side with mobile screen resolution so i'v tried to delete any css code has any relationship with size for products-4 or for any other section below it but nothing happened so i hope you guys can help me to find where the problem is
/* Products-4 */
#products-4{
background-color: #000;
margin-top:20px;
color:darkred;
}
#products-4 img{
border:1px solid white;
border-radius:10px;
padding:5px;
}
.col-centered{
float: none;
margin: 0 auto;
}
#products-4 h2 {
text-align:center;
}
#products-4 p{
text-align:center;
}
/* Team */
#team h2{
text-align:center;
}
#team{
text-align:center;
}
#team img{
border:1px solid black;
}
/* Contact */
#contact{
background-color: #000;
}
#contact .container{
height:500px;
}
.tab-content{
padding:50px;
border:1px solid white;
}
.tab-content .tab-content-inside{
padding:50px 0;
}
.tab-content .tab-content-inside a{
color:white;
text-decoration: none;
}
.tab-content .tab-content-inside .btn{
margin-top:30px;
}
.tab-content .tab-content-inside .btn-info{
margin-left:50px;
}
.tab-content .tab-content-inside .btn-info a{
padding-right:10px;
padding-left:10px;
}
.nav-tabs li a{
background-color: transparent !important;
color:red;
}
.nav-tabs .active a{
color:white !important;
}
.nav-tabs .active a:hover{
color:cornflowerblue !important;
}
.nav-tabs li a:hover{
background-color:white !important ;
color:cornflowerblue;
transition : all 1s;
-webkit-transition : all 1s;
-moz-transition : all 1s;
-o-transition : all 1s;
}
<!-- Strart of products-4 -->
<section id="products-4">
<div class="container">
<div class="row">
<h1 class="text-center">More Products</h1>
<div class="row">
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-centered">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
</div>
</div>
</section>
<!-- End of Products-4-->
<!--Start of Team -->
<section id="team">
<div class="container">
<div class="row">
<h1>Our Team</h1>
<div class="col-md-4 col-md-offset-2">
<img src="img/face.png" class="img-circle" alt="">
<h2>The Manager</h2>
<p>Any pragraph here</p>
</div>
<div class="col-md-4">
<img src="img/face.png" class="img-circle" alt="">
<h2>The Sales Man</h2>
<p>Any pragraph here</p>
</div>
</div>
</div>
</section>
<!-- End Of Team -->
<!-- Start of contact -->
<section id="contact">
<div class="container">
<div class="row">
<h1>Contact Us</h1>
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#e-mails">E-mails</a>
</li>
<li>
<a data-toggle="tab" href="#phones">Phones</a>
</li>
<li>
<a data-toggle="tab" href="#address">Address</a>
</li>
<li>
<a data-toggle="tab" href="#social">Social Networks</a>
</li>
</ul>
<div class="tab-content">
<div id="e-mails" class="tab-pane fade in active">
<div class="tab-content-inside text-center">
<h1>Feel Free To Text Us Any Time Using This E-Mails</h1>
<div class="tab-content-content">
<button type="button" class="btn btn-primary">
<span class="fa fa-envelope-o fa-2x">
Manager
</span>
</button>
<button type="button" class="btn btn-info">
<span class="fa fa-envelope-o fa-2x">
Sales
</span>
</button>
</div>
</div>
</div>
<div id="phones" class="tab-pane fade">
All Phones Goes here
</div>
<div id="address" class="tab-pane fade">
Address Comes here
</div>
<div id="social" class="tab-pane fade">
Social Addresses goes here
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of contact-->
I have implemented tabs using uib-tabset. There is issue with alignment of tab.
As you can see in below image, my 'Current' tab is shifted to left and it is moving out of card leaving uncomfortable space between 'Current' and 'Upcoming'.
I want both tabs to aligned perfectly with card.
Is there any way?
I have tried changing CSS in a lot of ways (.nav-tabs especially) but no luck.
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="card" style="margin-left:3%;margin-right:3%" ng-controller="AppointmentsCtrl">
<uib-tabset active="active">
<div class="row">
<div class="col-xs-6 nav nav-tabs">
<uib-tab index="0" heading="Current"> <!-- -->
<ul class="list-group">
<li class="list-group-item">
<!-- <div id="accordion" role="tablist" aria-multiselectable="true"> -->
<div class="panel panel-default" style="border-color: white;">
<div class="panel-heading" role="tab" id="headingOne"
style="background-color: #686868; margin-top: 5%;">
<div class="row">
<div class="col-xs-2">
<div class="myimage">
<img id="image" src="img/Calender.png"
style="width: 30px; height: 30px;"></img>
<p id="text">26</p>
</div>
</div>
<div class="col-xs-8">
<p class="panel-title" data-toggle="collapse"
data-parent="#accordion"
ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
aria-controls="collapseOne"
style="color: white; font-size: 15px">
Monday, 26 Sep 2016<br> 02:00 PM
</p>
</div>
<div class="col-xs-2">
<a data-toggle="collapse" data-parent="#accordion"
ng-click="isCollapsed = !isCollapsed" aria-expanded="true"
aria-controls="collapseOne"><img id="arrow"
src="img/Down_Arrow.png" style="width: 30px; height: 30px;"></img></a>
</div>
</div>
</div>
<div id="collapseOne" uib-collapse="isCollapsed"
class="panel-collapse collapse" role="tabpanel"
aria-labelledby="headingOne"
style="background-color: #d5d5d5;">
<div class="row">
<div class="col-xs-6 col-sm-offset-1">
<h5 style="color: #696969; margin-top: 5%;">Visitor
Name</h5>
<h5 style="color: #000; font-weight: bold;">Subodh
Bagade</h5>
<h5 style="color: #696969;">Purpose</h5>
<h5 style="color: #000; font-weight: bold;">Sales
Meeting</h5>
</div>
<div class="col-xs-6">
<img src="img/Gray_User.png"
style="margin-top: 10%; width: 110px; height: 100px;"></img>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-4">
<!-- <a ng-href="#/viewdetails/appointmentId={{appointment.appointmentId}}"> -->
<a ng-href="#/viewdetails/appointmentId=1"> <img
src="img/more.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
<div class="col-xs-4">
<!-- <a ng-href="#/edit/appointmentId={{appointment.appointmentId}}"> -->
<a ng-href="#/edit/appointmentId=1"> <img
src="img/Edit_White.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
<div class="col-xs-4">
<a ng-href="#" onClick="confirm('Are you sure?')"> <img
src="img/Delete.png" style="width: 30px; height: 30px;"></img>
</a>
</div>
</div>
</div>
</div>
<!-- </div> -->
</li>
</ul>
<!-- --> </uib-tab>
</div>
<div class="col-xs-6 nav nav-tabs">
<uib-tab index="1" heading="Upcoming">
<p>Some text here.</p>
</uib-tab>
</div>
</div>
</uib-tabset>
</div>
</div>
</div>
</div>
A part of my CSS:
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs>li {
/* float: left; */
margin-bottom: -1px;
background-color:#E9880A;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 0.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
this looks more like alignment issue. Once you align the tabs individually it should work fine. I was able to get it aligned by adjusting the tabs individually.
I am having trouble with the layout of my HTML & CSS site.
There are meant to be 4 boxes under the top image, At the moment there are only 3. I would like them to be spread out evenly across the page. The one that isn't visible is history of gaming, I believe that for some reason it is underneath the image...
here is the code:
.jumbotron h1 {
color: #ffffff;
font-size: 150px;
font-family: Sans-serif;
font-weight: bold;
text-align: center;
margin-top: 0px;
}
.jumbotron {
background-image: url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
position: absolute;
left: 0px;
top: 100px;
height: 350px;
display: block;
}
.nav li {
display: inline;
text-align: center;
color: #ff0000;
font-size: 50px;
bottom: 350px;
padding-left: 35px;
font-family: Sans-serif;
}
.page ul {
color: #000000;
font-size: 20px;
font-family: Calibri;
padding-left: 75px;
.page ul li {
display: inline;
}
.page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="home.css">
<title>Gaming T,N & B</title>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Gaming: Then, Now & Beyond</h1>
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li>History of Gaming
</li>
<li>Atari
</li>
<li>Other Games
</li>
<li>Future
</li>
</ul>
</div>
</div>
<div class="img">
<a target="_blank" href="history.png">
<img src="history.png" alt="The History of Gaming" width="300" height="200">
</a>
</div>
<div class="desc">
<div class="page">
<div class="container">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="atari.jpg">
<img src="atari.jpg" alt="Atari" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>Learn more about Atari
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="xbox_ps1.jpg">
<img src="xbox_ps1.jpg" alt="Other Games" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>Learn more about other games
</p>
</div>
</div>
</div>
<div class="img">
<a target="_blank" href="future_ocu.jpg">
<img src="future_ocu.jpg" alt="Future Gaming" width="600" height="400">
</a>
<div class="desc">
<div>
<h3>Future</h3>
<ul>
<li>Gaming in society</li>
<li>Who is driving who?</li>
<li>CrowdFunding</li>
</ul>
<p>Learn about future gaming
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<iframe width="1150" height="315" src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=1" style="border:5px dotted red">
</iframe>
</body>
</html>
Many Thanks
Adam
Bootstrap Example
Someone suggested to use bootstrap, so I created a simple example for you. I hope it is close to what you are looking for.
body {height 100%;
background:
url("http://www.designbolts.com/wp-content/uploads/2013/02/Rough-horizonal-lines-Grey-Seamless-Pattern-For-Website-Background.jpg");
}
.navbar {
margin: 0;
}
div.container {
width: 100%;
padding: 0;
text-align: center;
}
div.container>div.jumbotron {
color: white;
background-image:
url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
text-shadow: black 2px 2px 8px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some Title</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">History of Gaming</li>
<li>Atari</li>
<li>Other Games</li>
<li>Future</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Gaming: Then, Now & Beyond</h1>
<p>Some extra text</p>
</div>
</div>
<article class="container">
<section class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn
more about other games</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading">YouTube Video</div>
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="1150" height="315"
src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=0">
</iframe>
</div>
</div>
</section>
</article>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous" type="text/javascript"></script>
<!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">
<link rel="stylesheet" href="home.css">
<title>Gaming T,N & B</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<style>
body {height 100%;
background:
url("http://www.designbolts.com/wp-content/uploads/2013/02/Rough-horizonal-lines-Grey-Seamless-Pattern-For-Website-Background.jpg");
}
.navbar {
margin: 0;
}
div.container {
width: 100%;
padding: 0;
text-align: center;
}
div.container>div.jumbotron {
color: white;
background-image:
url('http://i118.photobucket.com/albums/o117/Shawnthebro/bandicam2014-03-2311-20-03-210_zpse7f7712f.jpg');
text-shadow: black 2px 2px 8px;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Some Title</a>
</div>
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">History of Gaming</li>
<li>Atari</li>
<li>Other Games</li>
<li>Future</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Gaming: Then, Now & Beyond</h1>
<p>Some extra text</p>
</div>
</div>
<article class="container">
<section class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Atari</h3>
<ul>
<li>40 years of fun</li>
<li>Who is Nolan Bushnell</li>
<li>Bought & Sold</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>Other Games</h3>
<ul>
<li>PC</li>
<li>Xbox</li>
<li>PlayStation</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/othergames.html">Learn
more about other games</a>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img
src="http://images5.fanpop.com/image/photos/28000000/randomised-random-28065165-1024-819.jpg"
alt="...">
<div class="caption">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>
<a
href="file:///Users/AdamMahmoud/Documents/School/Year%2010/IT/website_name/hog.html">Learn
more about the history of gaming</a>
</p>
</div>
</div>
</div>
</section>
<section class="panel panel-default">
<div class="panel-heading">YouTube Video</div>
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="1150" height="315"
src="http://www.youtube.com/embed/X1tBEKFYKJg?autoplay=0">
</iframe>
</div>
</div>
</section>
</article>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous" type="text/javascript"></script>
</body>
</html>
You have a div class "img" for the three boxes below the jumbotron. each has a div class "desc" inside it. for the history of gaming, you need to nest the "desc" class div inside the "img" class div, as such:
<div class="img">
<a target="_blank" href="history.png">
<img src="history.png" alt="The History of Gaming" width="300" height="200">
</a>
<div class="desc">
<div class="page">
<div class="container">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
</div>
what you posted has the desc class div outside the first img class div.
table{
TABLE-LAYOUT:FIXED;
border:solid;
width:100%;
}
td{
padding:5px;
width:25%;
border:solid grey
}
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>veryveryverylongtest</td>
</tr>
</table>
My first answer. I'm quite inexperienced at answering questions
I'm not sure if this is intended, but there are no closing curly brackets for .page a .page a {
color: #000000;
font-size: 15px;
font-family: Calibri;
padding-left: 70px;
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
Also, <div class="desc">
<div class="page">
<div class="container">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
should be in the same <div> as the image. Something like this: <div class="img">
<a target="_blank" href="history.png">
<img src="history.png" alt="The History of Gaming" width="300" height="200">
</a>
<div class="desc">
<div class="page">
<div class="container">
<h3>History of Gaming</h3>
<ul>
<li>What is gaming?</li>
<li>Pong</li>
<li>Technology Boom</li>
</ul>
<p>Learn more about the history of gaming
</p>
</div>
</div>
</div>
</div>This aligns the four boxes (add padding to move them down afterwards if you want)
I edited it because I think there was a badge for doing so.
I am trying to apply background image to cover whole page. Could someone tell me what I did wrong? My background image does not cover the entire page. Here is the page:
http://codepen.io/aitruong/pen/mVmKYR
.my-photo{
margin-top: 20px;
}
p{
padding-top: 40px;
}
hr{
width: 200px;
}
.navbar{
margin-left:128px;
margin-right: 128px;
}
.social-icon{
margin-left:350px;
margin-top:40px;
}
.text{
margin-left: 365px;
margin-top: 50px;
font-size: 40px;
font-family:Tangerine;
}
#language-text{
font-family:Tangerine;
font-size: 35px;
margin-left: 300px;
padding-top: 0px;
}
i{
color: #e67200;
}
#android-app {
margin-left : 90px;
}
footer p,a{
margin-left: 0px;
color:#666600
}
#background{
}
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container--fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
<div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10"><p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p></div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3><br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div><br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
</div>
</div>
</body>
you probably need this in addition to your existing CSS:
body { background-size: cover; }
There are two mistakes in your code:
body { background-size: cover; }
Is missing. But in addition you will need to put your section3 element inside of the background div. Otherwise the background will stop right before section 3
</div><!-- This is your end of <div id="background"> -->
<div id="section3"> <!-- this is a new section outside of the background element -->
Try applying this:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: intial;
}
Set your background like this
background: #ffffff url(bg.jpg) repeat;
for example for the body, set your css
body { background: #ffffff url(your_bg.jpg) repeat; }
The structure of the HTML document is also invalid. Use the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Ai Truong Personal's Website</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#css").load(function(evt){
$(this).fadeIn();
});
$("#html").load(function(evt){
$(this).fadeIn("slow");
});
$("#js").load(function(evt){
$(this).fadeIn(5000);
});
$("#python").load(function(evt){
$(this).fadeIn(4000);
});
$("#java").load(function(evt){
$(this).fadeIn(2000);
});
});
</script>
<style>
body {
position: relative;
font-family: Open Sans;
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #6a5750;}
#section2 {padding-top:0px;height:500px;color: #fff; background-color: #f6f1ed;}
#section3 {padding-top:0px;height:300px;color: #fff; background-color: #b5a397;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container--fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><i class="fa fa-user"> </i> About</li>
<li><i class="fa fa-pencil-square-o"> </i> Portfolio</li>
<li><i class="fa fa-envelope-o"></i> Contact</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="background">
<div id="section1" class="container">
<div class="row">
<div class="col-xs-2"><img class=" img-responsive img-circle my-photo" src="https://media.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAMcAAAAJGVhNmJlMDc1LTQyNDMtNDIyMS1iNDY0LTBjMWZhZjNhYjJkZA.jpg" width="100%"/> </div>
<div class="col-xs-10">
<p>Coding is my passion. I always enjoyed science, math, and technical things as a kid, but I didn't get into software engineering until I was in college. After seeing how much I enjoyed it, I decided to major in software engineering from San Jose State University. </p>
</div>
</div>
<hr>
<p id="language-text"> I am using these languages to build awsome websites and mobile applications </p>
<div class="social-icon">
<img id="css" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_css.png" width="90px"/>
<img id="html" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_html.png " width="90px"/>
<img id="js" style="display:none" src=" http://findicons.com/files/icons/2420/coded/128/page_javascript.png" width="90px"/>
<img id="python" style="display:none" src="http://findicons.com/files/icons/2420/coded/128/page_python.png " width="90px"/>
<img id="java" style="display:none" src=" http://findicons.com/files/icons/1861/xml_docs_x_tended/128/crystal_java.png" width="68px"/>
</div>
</div>
<div id="section2" class="container">
<h3 style="color:black; text-align:center; margin-top:40px; font-size:30px; color:#666600; font-family:Open Sans">Some of my Work</h3>
<br>
<div class="row">
<div class="col-sm-4">
<p class="showcase-text" style="color:black; color:#996600">Restaurant Search Engine /Python,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpa1/v/t1.0-9/3770_978599402188642_2191270248423594345_n.jpg?oh=86221d05f2f6e383cd0a423b818c8072&oe=570442D5" class="img-responsive" style="width:100%; height:320px" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:black; margin-left:60px;color:#996600">Photo Sharing Android Application/Java</p>
<img id="android-app" src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xap1/v/t1.0-9/6841_978599355521980_5665277873740762854_n.jpg?oh=734e2b545542a741571fb453c32ec53c&oe=5713AF11" class="img-responsive" style="width:55%" alt="Image">
</div>
<div class="col-sm-4">
<p class="showcase-text" style="color:#996600">Dating Profile Form/ Javascript,CSS,Html</p>
<img src="https://scontent.fsnc1-1.fna.fbcdn.net/hphotos-xpf1/v/t1.0-9/10653399_978601942188388_4779088688053733024_n.jpg?oh=988e3678bcec712fbc580d4d34327998&oe=5713D704" class="img-responsive" width="100%" alt="Image" >
</div>
</div>
<br>
</div>
</div>
<div id="section3" class="container">
<p class="text"> Ways to contact me:</p>
<div class="social-icon">
<img src="https://cdn1.iconfinder.com/data/icons/social-networks-3/512/linkedin-128.png" width="70px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/github-128.png " width="87px"/>
<img src="https://cdn4.iconfinder.com/data/icons/bettericons/354/send-mail-circle-128.png" width="73px"/>
</div>
</div>
<!-- Footer -->
<footer class="container-fluid bg-4 text-center">
<p > Theme Made By Ai Truong © 2016</p>
</footer>
</body>
</html>
Replace your following CSS:
#background{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
}
With:
body{
background-image: url('http://slodive.com/wp-content/uploads/2011/09/textured-backgrounds/wrinkled-paper.jpg');
background-repeat: repeat;
}
Tryed with:
#ImageBackground {
background-size: cover;
Width: 100%;
Height: auto;
}
Else you can try with:
#ImageBackground {
Width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}