can I overlap a svg rect shape on line svg shape - html

I am creating a structure by svg shapes. I have overlapped a "rect" shape on "line" shape. What should I do for this?
See attached image
.parking-area {
background: #4c4c4c;
padding: 30px;
}
.circle-green {
height: 40px;
width: 40px;
background: #72ce79;
border: 2px solid white;
border-radius: 100px;
}
.circle-yellow {
height: 40px;
width: 40px;
background: #f9e972;
border: 2px solid white;
border-radius: 100px;
}
.circle-red {
height: 40px;
width: 40px;
background: #da5649;
border: 2px solid white;
border-radius: 100px;
}
.triangle-pink {
height: 0px;
width: 0px;
border-left: 15px solid #4c4c4c;
border-right: 15px solid #4c4c4c;
border-bottom: 40px solid #d400f9;
}
.element-description {
color: white;
font-weight: 500;
}
.parking-area hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 2px solid #909090;
}
.full-width {
width: 100%;
}
.dashed-line-h {
fill: none;
stroke: #7F7D60 !important;
stroke-width: 5;
stroke-miterlimit: 8;
stroke-dasharray: 12, 10;
}
.text-bg {
fill: green;
height: 30px;
width: 20%;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- jQuery library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="container">
<div class="parking-area">
<div class="alement-info">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="circle-green"></div>
</div>
<div class="col-md-10">
<div class="element-description">Option-1
<p>Lorem ipsum dolor sumit
<p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="circle-yellow"></div>
</div>
<div class="col-md-10">
<div class="element-description">Option-2
<p>Lorem ipsum dolor sumit
<p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="circle-red">
</div>
</div>
<div class="col-md-10">
<div class="element-description">Option-3
<p>Lorem ipsum dolor sumit
<p>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-2">
<div class="triangle-pink"></div>
</div>
<div class="col-md-10">
<div class="element-description">Option-4
<p>Lorem ipsum dolor sumit
<p>
</div>
<line style=""></line>
</div>
</div>
</div>
</div>
<hr>
<svg height="60px" width="100%">
<rect x="40%" y="20" class="text-bg"/>
<svg height="60px" width="100%" >
<text x="50%" y="40" alignment-baseline="middle" text-anchor="middle" style="fill:#939393; height: 30px; ">My text</text>
</svg>
</svg>
<svg class="full-width" height="2px">
<line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%" />
</svg>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<!-- /.row -->
<!-- Footer -->
</div>
</body>
</html>


I created my own object because I can't see your svgs in your code. Basically, create a relative container and put the rectangle and hr inside that, then the rectangle is an absolutely positioned element:
.relative {
position: relative;
}
.absolute {
position: absolute;
right: 1em;
top: -1.5em;
background: green;
width: 200px;
height: 50px;
}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">My Website</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="container">
<div class="parking-area">
<div class="alement-info">
<div class="relative">
<div class="absolute"></div>
<hr>
</div>
<svg height="60px" width="100%">
<rect x="40%" y="20" style="fill:green; height: 30px; width:20%; " />
</svg>
<svg class="full-width" height="2px">
<line class="dashed-line-h" x1="100%" y1="0%" x2="0%" y2="00%" />
</svg>
</div>
</div>
</div>
</div>
<!-- /.row -->
<!-- Related Projects Row -->
<!-- /.row -->
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © my website 2017</p>
</div>
</div>
<!-- /.row -->
</footer>
</div>
<!-- /.container -->

Related

How can I put a child div in the top left corner of the document. even above the parents div?

I made 3 columns with the bootstrap framework. In the second column there is a div with some text. I would like to move that div to the top left corner of the document (not on the top left corner of the parent).
I cannot just add a div above the columns or add jquery or javascript because I am using other software. It is very stricted and I can only add custom CSS to it.
An example. The purple div should be on the space of the left arrow:
I tried position absolute but with no success.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4"><h3>Title 1 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3></div>
<div class="col-sm-4" style="background-color:lavender;"><h3>Title 3 - col-sm-4</h3></div>
</div>
</div>
</body>
</html>
.section-topleft{
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
I also do not want position: fixed. I am really curious if this is even possible. If it's not possible it's also fine.
In the real example it does not work yet
Here you can see the css of the div with class "test". The div that should be placed on the top left corner
So here is the code of the HTML from the 3rd row (relevant html):
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
<!-- Nav (Logged in) -->
<div class="main-logo">
<a href="https://google.com">
<img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/df60389c3caec18e6d856beca7c8_logo_black.png">
</a>
</div>
<div class="navi-left">
<ul>
<li class="active">
<a href="/affiliate">
<span id="affiliate-nav-homepage"><span class="default">Home Page</span></span>
</a>
</li>
<li>
<a href="/affiliate/content">
<span id="affiliate-nav-marketing-materials"><span class="default">Marketing Materials</span></span>
</a>
</li>
<li>
<a href="/affiliate/analytics">
<span id="affiliate-nav-analytics"><span class="default">Analytics</span></span>
</a>
</li>
<li>
<a href="/affiliate/invite">
<span id="affiliate-nav-invite-others"><span class="default">Invite Others</span></span>
</a>
</li>
<li>
<a href="/affiliate/children">
<span id="affiliate-nav-your-network"><span class="default">Your Network</span></span>
</a>
</li>
<li>
<a href="/affiliate/subids">
<span id="affiliate-nav-sub-ids"><span class="default">SubIDs/Channels</span></span>
</a>
</li>
<li>
<a href="/affiliate/landing_pages">
<span id="affiliate-nav-landing-pages"><span class="default">Landing Pages</span></span>
</a>
</li>
<li>
<a href="/affiliate/commission_details">
<span id="affiliate-nav-commission-details"><span class="default">Commissions</span></span>
</a>
</li>
</ul>
<ul class="navi-mobile-lower">
<li>
<i>
<hr>
</i>
</li>
<li>
Create Password
</li>
<li>
Update Account Email
</li>
<li>
Update Paypal Email
</li>
<li>
Log Out
</li>
</ul>
</div>
</div>
<div class="col-md-9">
<div class="main-content">
<!-- header -->
<div class="custom-header">
<div class="default-title" id="default-title">
<figure><img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/374c2ace96edb5866ba9e7aa079bbc202232c4e8_Brand%20advocates%20banner%20%283%29.png" data-image="foo"></figure>
</div>
</div>
<div>
<div class="v2-alerts">
</div>
<div class="row">
<div class="col-md-3" style="
position: static;
">
<div class="left-panel">
<div>
<div class="test">
<h1>test</h1>
</div>
<p>We are excited to have you as part of the studio team!</p>
</div>
</div>
</div>
<div class="col-md-9">
<div class="right-panel">
<div id="sharing-div">
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="affiliate-link-title"><span class="default">Your Referral Link</span></span>
</div>
<div class="aff-link">
<span><i>
http://studio.com?afmc=1b
</i></span>
</div>
<div class="row">
<div class="col-md-12">
<div>
<div class="pull-right">
<a class="copy-link" data-clipboard-text="http://studio.com?afc=1b">copy link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sharing-section top-to-bottom">
<div class="row">
<div class="col-md-12">
<div class="title">
<span id="primary-social-links-title"><span class="default">your primary social links</span></span>
<div class="pull-right">
view all links
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="links">
<div class="share-btn">
<a data-share-type="email" data-link-id="9937727" href="/share/email">
<div>
<img src="/assets/primary-email-c415b75ea87907f28155ecb8b66b5fc42686c773f6315e8a9151d8b61dbe385c.png">
</div>
Email
</a>
</div>
<div class="share-btn">
<a href="/share/facebook" target="_blank" data-share-type="facebook" data-link-id="9937727">
<div>
<img src="/assets/primary-facebook-70e1f3176145c920e2423ffe0c06a15eece6e56cd51172582ea4d5571e0b0ab3.png">
</div>
Facebook
</a>
</div>
<div class="share-btn">
<a data-share-type="twitter" data-link-id="9937727" target="_blank" href="/share/tweet">
<div>
<img src="/assets/primary-twitter-2130572d07fd2cd1604a59dd16498c4e267ddf5c8ed1a82fcc826f7c6511dee0.png">
</div>
Twitter
</a>
</div>
<div id="whatsapp_share" class="share-btn">
<a data-share-type="whatsapp" data-link-id="9937727" target="_blank" href="/share/whatsapp">
<div>
<img src="/assets/primary-whatsapp-283a25d6a61b76686118d7f2f5866a0ba21c520ff4404a3b248523b7b7d396bd.png">
</div>
Whatsapp
</a>
</div>
<div id="text_share" class="share-btn">
<a data-share-type="text" data-link-id="9937727" target="_blank" href="/share/text">
<div>
<img src="/assets/primary-sms-2ee17bddcfbb89a98c68fdcf8282df2e5920c135ebe62595e77dc0cfc6a0622c.png">
</div>
Text
</a>
</div>
<div id="linked_in_share" class="share-btn">
<a data-share-type="linkedin" data-link-id="9937727" target="_blank" href="/share/linkedin">
<div>
<img src="/assets/primary-linkedin-5bc3ba7bbfda5051d5d0d82ebc9b397ac17778b21fa7936ba7b0db3bbbc22d92.png">
</div>
LinkedIn
</a>
</div>
<div class="share-btn">
<a ic-action="slideToggle" ic-target="#instagram-sharing-instructions" data-share-type="instagram" data-link-id="9937727" ic-trigger-on="default">
<div>
<img src="/assets/primary-instagram-826dae8b5dbccbce3a5a2e4ed0936c96fb6a24e3eb32006f3e5ebf4c51e9dc32.png">
</div>
Instagram
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="instagram-sharing-instructions" style="display: none;">
<div class="col-md-12">
<div class="fs18">
<span id="affiliate-instagram-sharing-instructions"><span class="default">Instagram Sharing Instructions</span></span>
</div>
</div>
<div class="col-md-12">
<ol>
<li>
<span class="instagram-badge">1</span>
<a class="copy-link" data-clipboard-text="http://studio.com?afmc=1b">copy link</a>
</li>
<li>
<span class="instagram-badge">2</span>
<a id="instagram-launch" class="" href="https://instagram.com/_n/mainfeed/" target="_blank"><span></span><b>Click here to launch Instagram</b></a>
<script>
$(function(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
$("#instagram-launch").attr('href', "instagram://");
} else if(navigator.userAgent.match(/android/i)) {
$("#instagram-launch").attr('href', "intent://instagram.com/_n/mainfeed/#Intent;package=com.instagram.android;scheme=https;end")
} else {
$("#instagram-launch").attr('href', "https://instagram.com/_n/mainfeed/");
$("#instagram-launch").attr('target', "_blank")
}
})
</script>
</li>
<li><span class="instagram-badge">3</span>Paste the link into your Profile, Story or Reels</li>
</ol>
</div>
</div>
</div>
<!--<div class="divider"></div>-->
<div>
<div class="title">
<span id="your-progress-title"><span class="default">Your Progress</span></span>
</div>
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>2</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-visitors-title"><span class="default">Friends have visited us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-sign-up-title"><span class="default">Friends have signed up with us</span></span>
</span>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
<div class="aff-progress-digit">
<b>0</b>
</div>
<div class="aff-progress-label">
<span>
<span id="affiliate-purchase-title"><span class="default">Purchases made by friends</span></span>
</span>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div>
<div class="title">
<span id="affiliate-payments-title"><span class="default">Your Payments</span></span>
</div>
<div class="dash-instructions">
<p>You will receive a 30% commission for each referral. For monthly and annual subscriptions, you will receive recurring commissions as long as the member is subscribed. </p>
</div>
<div class="table-scrollable-wrapper">
<table class="table">
<thead>
<tr>
<th>
<span id="affiliate-payments-compensation"><span class="default">Compensation</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-due"><span class="default">Due</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-upcoming"><span class="default">Upcoming</span></span>
</th>
<th>
<span id="affiliate-payments-commissions-paid"><span class="default">Paid</span></span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td class="text-muted text-center">
<span style="opacity: 0.5;"> nothing to show yet </span>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the css(most of the important css is from bootstrap itself):
body {
background: #ffffff url(https://forge.swap-studio.com/assets/bg-polygon-dd7097463c1102fbf7fe55f6e00595256861740bba73750be91902f955f41f1e.png) no-repeat bottom center; /* fallback for old browsers */
background-size: cover;
background-attachment: fixed;
}
.grad-text {
background: -webkit-linear-gradient(0deg, #555555 0, #555555 70%);
}
a{
color: #002929;
}
/*.aff-link {*/
/*border: 1px solid #002929;*/
/*}*/
/*.aff-link-2 {*/
/*border: 1px solid #cdcdcd;*/
/*}*/
.aff-link-2 .copy-link {
background-color: #cdcdcd;
border: 1px solid #cdcdcd;
}
.aff-link-2 .btn-alt {
color: #cdcdcd !important;
}
.copy-link {
background-color: #002929;
border: 1px solid #002929;
}
.copy-link-wide {
background-color: #002929;
border: 1px solid #002929;
}
.aff-progress b {
color: #002929;
}
.change-url {
color: #002929;
}
.change-url-field .btn {
background-color: #002929;
}
.change-url-field .btn-alt {
/*background-color: #002929;*/
}
.aff-invite input {
border: 1px solid #002929;
}
.dot {
border: (10 / 5) solid #002929;
}
#affiliate-invite-who {
color: #002929;
font-size: 1.2em;
}
.dash-primary-color {
color: #002929 !important;
}
.button-primary {
background-color: #002929;
border: 1px solid #002929;
}
.email-input {
border: 1px solid #002929;
}
.button-primary-fullwidth {
background-color: #002929;
border: 1px solid #002929;
/*border-bottom: 3px solid #cdcdcd >;*/
}
.button-primary-flat-fullwidth {
color: #002929;
border: 1px solid #002929;
}
.comp-stats-figure {
color: #002929;
}
.top-to-bottom {
/*border-width: 6px;*/
/*border-style: solid;*/
/*border-color: #002929;*/
/*-webkit-border-image:*/
/*-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff)) 1 100%;*/
/*-webkit-border-image:*/
/*-webkit-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-moz-border-image:*/
/*-moz-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*-o-border-image:*/
/*-o-linear-gradient(#ffffff, #ffffff) 1 100%;*/
/*border-image:*/
/*linear-gradient(to bottom, #ffffff, #ffffff) 1 100%;*/
/*border-right: 0px;*/
/*border-top: 0px;*/
/*border-bottom: 0px;*/
}
/* Logged in page */
.test{
position: absolute;
background-color:purple;
top: 0;
left: 0;
width:100%;
}

It depends a bit on exactly what you want for other items, but concentrating on the purple-background element it is currently placed relative to the second child of the row element as that is given position: relative by the bootstrap CSS.
This snippet sets that second child to have position: static so the purple element is not positioned relative to it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="./example.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.section-topleft {
position: absolute;
background-color: purple;
color: #ffffff;
width: 100%;
height: 100px;
top: 0;
left: 0;
}
.container-fluid .row :nth-child(2) {
position: static;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-4">
<h3>Title 1 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavenderblush;">
<div class="section-topleft">
<h3>This div should be on the top left corner of the document</h3>
</div>
<h3>Title 2 - col-sm-4</h3>
</div>
<div class="col-sm-4" style="background-color:lavender;">
<h3>Title 3 - col-sm-4</h3>
</div>
</div>
</div>
</body>
</html>

Custom CSS won't override bootstrap

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

Three images line-up

Layout - Line up 3 images in bootstrap grid. .col-sm-3 doesn't help. What am I doing wrong? How to achieve that? I was thinking bootstrap grid makes it perfectly one next to each other with column width. Please help!
.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
#parallax {
/* The image used */
padding-top: 200px;
margin-top: 80px;
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.about {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.lead {
font-family: 'Lato', sans-serif;
}
#portfolio {
height: 500px;
padding-top: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</nav>
<section id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1 class="about">WEB DEVELOPER</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="portfolio">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1>My skillset</h1>
<p class="lead"></p>
<div class="row">
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html">
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
<div class="col-sm-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>

.navbar {
min-height: 80px;
margin-bottom: 0;
}
#btnnavbar {
margin-top: 20px;
}
#btnhome {
margin-top: 16px;
}
#imgbrand {
margin-top: -70px;
margin-left: px;
height: 220px;
width: 280px;
}
#firstpage {
margin-top: 90px;
}
#parallax {
/* The image used */
padding-top: 200px;
margin-top: 80px;
background-image: url("http://res.cloudinary.com/ekilja01/image/upload/v1478121019/Death_to_stock_photography_Vibrant_7_of_10_s50rcs.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
}
.about {
font-family: 'Lato', sans-serif;
font-weight: 700;
}
.lead {
font-family: 'Lato', sans-serif;
}
#portfolio {
height: 500px;
padding-top: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<!-- Navbar style available in Bootstrap framework-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container-fluid">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand " href="http://codepen.io/ekilja01"><img class="img-responsive" id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</nav>
<section id="parallax">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1 class="about">WEB DEVELOPER</h1>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<section id="portfolio">
<div class="row">
<div class="col-lg-12 col-md-12 text-center">
<h1>My skillset</h1>
<p class="lead"></p>
<div class="row">
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/html5_yoj7se.png" alt="html">
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/css3_bso6y6.png" alt="css" />
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127238/js_mnqfxw.png" alt="javascript" />
</div>
<div class="col-sm-3 col-xs-3">
<img src="http://res.cloudinary.com/ekilja01/image/upload/v1478127237/jquery_qkehtt.png" alt="jquery" />
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
this should work

line hover is not working and footer is not 100%

in this the line hover which i have given to a tag is not working.even when when i give hover to li its not working.at the last my footer in which i have set width to 100% is not taking full width.may i know why and wats the fault in my coding.
body {
margin: 0px;
}
#wrapper {
width: 100%;
height: auto;
margin: 0px;
background-color: orange;
}
#header {
width: 100%;
height: 50px;
position: fixed;
background-color: black;
right: 0px;
z-index: 100;
}
#header {
top: 0;
}
#footer {
left: 0;
right: 0;
z-index: : 100;
width: 100%;
height: 50px;
background-color: black;
color: white;
}
#footer img {
float: right;
margin: 5px;
padding: 5px;
}
.company {
width: 50%;
height: 60px;
color: white;
float: left;
text-align: center;
padding: 15px;
}
#navbar {
height: 60px;
width: 50% background-color: black;
color: white;
float: left;
overflow: hidden;
}
ul li {
display: block;
position: relative;
padding: 10px 15px;
float: left;
}
ul li a {
color: white;
}
#navbar a:hover {
border-bottom: 2px solid red;
}
.active {} #myCarousel {
background-color: white;
height: 370px;
width: 100%;
float: left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
height: 15%;
margin: auto;
background-color: white;
}
.thumbnail {
height: 300px;
width: 300px;
padding: 25px auto;
margin: 5px;
}
#con {
width: 100%;
height: 300px;
padding-bottom: 15px;
}
.contact {
width: 60%;
height: 300px;
background-color: grey;
padding: 100px 25px;
float: left;
}
.enquiry {
width: 40%;
height: 300px;
background-color: seagreen;
float: left;
padding-left: 5px;
}
input[type=text]:focus {
border: 3px solid red;
}
input[type="text"] {
margin: 0 0 15px 0;
}
<!doctype html>
<html>
<head>
<title>student</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
#media only screen and (max-device-width:320px) #media only screen and (min-width:321px) and (max-device-width:480px) #media only screen and (min-width:768px) and (max-device-width:1024px) #media only screen and (min-device-width:1224px)
</head>
<body>
<div id="wrapper">
<!--start wrapper-->
<div id="header">
<!--start header-->
<div class="company">
<!--start company-->
ABC PVT LIMITED
</div>
<!--end company-->
<div class="navbar">
<!--start nav-->
<ul>
<li><a class="active" href="home.html" />Home</li>
<li><a href="about.html" />About us</li>
<li><a href="services.html" />Services</li>
<li><a href="products.html" />Products</li>
<li><a href="contact.html" />Contact us</li>
</ul>
</div>
<!--end nav-->
</div>
<!--end header-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--carasel start-->
<!-- 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>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<!--start carosel inner-->
<div class="item active">
<img src="../task/photo/h.jpg" alt="Home">
<div class="carousel-caption">
<h3>Home</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/as.jpg" alt="About us">
<div class="carousel-caption">
<h3>About Us</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/s.jpg" alt="Services">
<div class="carousel-caption">
<h3>Services</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/p.jpg" alt="Products">
<div class="carousel-caption">
<h3>Products</h3>
</div>
</div>
<div class="item">
<img src="../task/photo/c.jpg" alt="Contact us">
<div class="carousel-caption">
<h3>Contact Us</h3>
</div>
</div>
</div>
<!--carosel inner end-->
<!-- 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 carosel-->
<div class="container-fluid text-center bg-grey">
<!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong>
</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong>
</p>
</div>
</div>
</div>
<!--end boxes-->
<div id="con">
<!--start con-->
<div class="contact">
<!-- start contact-->
<h1>Address</h1>
<p><span class="glyphicon glyphicon-map-marker"></span>
Abc private limited no54,2ndstreet, madipakkam, chennai-67.
</p>
<p><span class="glyphicon glyphicon-envelope"></span> ABCPVT#gmail.com</p>
</div>
<!--end contact-->
<div class="enquiry">
<!--start enquiry-->
<h1>Enquiry Form</h1>
<table border="0" align="center">
<form name="form" action="email.php" id="form" method="post">
<tr>
<tr>
<td>Name</td>
<td>
<input name="name" placeholder="Name" type="text" value="">
</td>
</tr>
<<tr>
<td>Email</td>
<td>
<input name="email" placeholder="Email" type="text" value="">
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input name="phone" placeholder="phonenumber" type="text" value="">
</td>
</tr>
<tr>
<td>Message</td>
<td>
<textarea name="msg" placeholder="Type your text here..."></textarea>
</td>
</tr>
<td colspan="2" style="text-align:center">
<input id="send" name="submit" type="submit" value="Submit">
</td>
</tr>
</form>
</table>
</div>
<!--end enquiry-->
</div>
<!--end con-->
<div id="footer">
<!--start footer-->
copyrights © to WWW.abcpvt.com
<img src="../task/photo/fb.png" alt="fb" />
<img src="../task/photo/ln.png" alt="tweet" />
<img src="../task/photo/tw.png" alt="linkedin" />
</div>
<!--end footer-->
</div>
<!--end wrapper-->
</body>
</html>

The reasons for the footer not been 100%.
Its 100% per say but it becomes more than 100% after adding padding:10px;. To solve this you have to options. Its either you use width:100%; and add no padding, or you add padding and use display:block; instead of width:100%;
Secondly, you have a closing div missing for the box.
You have
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div><!--end boxes-->
Instead of:
<div class="container-fluid text-center bg-grey"><!--boxes-->
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\i.jpg" alt="Innovation">
<p><strong>Innovation</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\cr.png" alt="Creative">
<p><strong>Creativity</strong></p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="D:\task\photo\po.jpg" alt="Positive">
<p><strong>Positivity</strong></p>
</div>
</div>
</div><!-- this is the missing closing div-->
</div><!--end boxes-->
Then lastly. You have to take away float:left; from the footer and use clear:both; instead. Doing this you will notice you have a better result.

I have a HTML & CSS layout issue

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.