How to overlap some divs on another div with img in bootstrap? - html

I want to have image on jumbotron and on this image some buttons from bootstrap and some other divs of course with bootstrap(my calendar). I want to create page full responsive so after version for computers I'm going to create version for mobiles. I wan't it to be something like this http://postimg.org/image/nmdsbws6d/ Thank for all responses
<html>
<head>
<title>calendar</title>
<!--STYLES-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
margin-right:-4px;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<div class="jumbotron" style="background:url() no-repeat scroll center center / cover;">
<div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
<div class="row" style="background:url(<?php echo asset_url();?>media/img/tro.jpg) no-repeat center; height: 100%; width: 100%;">
<!-- now this row is outside img-->
<div class ="col-md-2 calendarbox1">
</div>
<div class ="col-md-1 " >
<img src="<?php echo asset_url();?>media/img/kalendarz/pon.png" style="height: 60px;">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/wto.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/sro.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/czw.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/pia.png" style="height: 60px">
</div>
<div class ="col-md-1 ">
<img src="<?php echo asset_url();?>media/img/kalendarz/sob.png" style="height: 60px">
</div>
<div class ="col-md-1 col-centered">
<img src="<?php echo asset_url();?>media/img/kalendarz/niedz.png" style="height: 60px">
</div>
<div class ="col-md-3 col-centered calendarbox1">
</div>
<!--
<div class="button-container">
<div class="btn btn-default" >Button</div>
<div class="btn btn-default">Button</div>
</div> -->
</div>
</div>
</div>
</body>
</html>


If your just trying to figure out how to get the image as the background. You can add it as a background to the jumbotron itself.
<div class="jumbotron container" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;'">
I edited your code below. The styles aren't exact to the image you posted. But I believe this answers what you asked.
EDIT: Based on your comment below, I have edited the code, this seems closer to what you want.
<html>
<head>
<title>calendar</title>
<!--STYLES-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.js"></script>
<link rel="shortcut icon" type="images/ico" href="media/img/favicon.ico"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.calendarbox{
border: 2px solid gray;
width: 70px;
height: 60px;
}
.calendarbox1{
border: 3px solid ;
display: none;
}
</style>
</head>
<body>
<br><br><br><br>
<center>
<div class="jumbotron" style="background:url(http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg) no-repeat scroll center center / cover;">
<div class="container transparent" style="background-color: rgba(255, 255, 255, 0.6); padding:60px;">
<div class="myimage" style="background:url(http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg) no-repeat scroll center center / cover; height:600px;">
<div class="row">
<div class ="col-md-1 col-centered ">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class="col-md-1 col-centered ">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
<div class ="col-md-1 col-centered">
<div class="calendarbox1"></div>
</div>
</div>
<div class="button-container">
<div class="btn btn-default" >Button</div>
<div class="btn btn-default">Button</div>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Stop sidebar from overlapping sticky footer

I'm working on a site for a class project and everything is working fine except when I tried to make the footer sticky the sidebar overlaps the footer when content is added dynamically.
I have the sidebar height set to 90vh because I could not figure out how to get the background color to take up the full height of the sidebar when there was no content I set the sidebar overflow to auto which was working fine but when I try to make the footer sticky it works find until the content grows to big. Scrollbars do appear but the sidebar overlaps the footer.
Here is the html & css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
.main-image {
background-image: url(../images/crypto.jpg);
background-repeat: no-repeat;
height: 90vh;
max-width: 100%;
clip: rect(0, 400px, 200px, 0);
}
.sidebar {
height: 90vh;
overflow: auto;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Crypto & Cocktails </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" href="./assets/images/favicon.ico">
</head>
<body>
<!-- header -->
<header id="top">
<div class="row">
<div class="col s12 center #26a69a teal lighten-1">
<img src="assets/images/cryptococktailsheader.jpg" class="responsive-img" alt="Crypto & Cocktails" />
</div>
</div>
</header>
<main>
<div class="row">
<!-- sidebar -->
<div class="col s12 l2 #00695c teal darken-3 sidebar">
<span class="flow-text center">
<h5 class="white-text">Search Coinbase</h5>
<form id="coin-search" action="">
<input id="coin-input" type="text" class="white" name="coin-input"
placeholder="Cryptocurrency Ticker">
<button class="btn btn-lg btn-primary submitButton">Search</button>
</form>
</span>
<div id="myCoins" class="col-12"></div>
</div>
<div class="col s12 l10 content">
<div class="row">
<div class="col s12 l3 ">
<h2 id="coin-name"></h2>
<span id="coin-display" class="flow-text"></span>
<h3 id="drinkName"></h3>
<span id="drinkImg"></span>
<a class="right hide-on-med-and-up" href="#top">Back to top</a>
</div>
<div class="col s12 l7 main-image hide-on-small-only"></div>
</div>
</div>
</div>
</main>
<footer class="#26a69a teal lighten-1 center">
<div class="container">
<div class="row">
<div class="col l12">
<h5 class="white-text">Developers - Contact Us</h5>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2021 Copyright
</div>
</div>
</div>
</footer>
</div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Materialize Framewrk -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<!-- Custom Scripts -->
<script src="./assets/scripts/main.js"></script>
<script src="./assets/scripts/cocktail.js"></script>
<script src="./assets/scripts/coinbase.js"></script>
</body>

We just had to add the z-index: 1; to the footer.

Bootstrap - aligning multiple items properly

So I am using Bootstrap panels for my project and I have the design mockup as below:
The Profile text and progress bar should be left aligned while the collapse icon should be right aligned.
This is my markup at the moment:
<div id="panelProfile" role="tab" class="panel-heading">
<h4 class="panel-title">Profile</h4>
<div class="progress body-profile">
<div class="progress-bar">
<div class="progress-filled"></div>
<div data-bind="" class="progress-value"></div>
</div>
</div>
</div>
I tried adding float to both profile text and progress bar but this gives me this:
What is the best way to handle this without declaring expicit values?(Need to be responsive)

Have you tried using a div.row within your div#panelProfile?
<div id="panelProfile" role="tab" class="panel-heading">
<div class="row">
<div class="col-xs-2">
<h4 class="panel-title">Profile</h4>
</div>
<div class="col-xs-8">
<div class="progress body-profile">
<div class="progress-bar">
<div class="progress-filled"></div>
<div data-bind="" class="progress-value"></div>
</div>
</div>
</div>
<div class="col-xs-2">
</div>
</div>
</div>

This code will perfectly work for you.
Add pull-right class in Minus Icon.
Add Pull-left class in Profile
To make View Complete Profile "center" add text-center class
Happy Coding :-)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.progress{
border-radius: 15px;
}
.circle-minus{
width: 5px;
height: 3px;
border: 1px solid black;
border-radius: 50%;
padding: 1px 7px;
font-size: 14px;
}
.panel-heading{
background-color: white ! important;
}
.panel-footer{
background-color: white ! important;
}
body{
padding-top: 15px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="pull-right"> 50% <span class="circle-minus">-</span></div>
<div class="pull-left">Profile </div>
<div>
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</div>
</div>
<div class="panel-body" style="height: 250px;"></div>
<div class="panel-footer"><h5 class="text-center">View Complete Profile</h5></div>
</div>
</div>
</div>
</div>
</body>
</html>

AngularJs - Scroll Top directive only scrolls when you hide div, not when it opens

I made a directive that would scroll to a hidden drop down when "Learn more" was clicked. It seems to only scroll to the div when you click "hide" after it has already been open.
How can I make it scroll when it first drops down?
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Template HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button -->
<a scroll-to-item scroll-to="#myContent" class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed1 = !isCollapsed1">
<small>
<div ng-show="isCollapsed1">
<span class="glyphicon glyphicon-plus" ></span> Learn More
</div>
<div ng-hide="isCollapsed1">
<span class="glyphicon glyphicon-minus"></span> Hide
</div>
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed1" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
Scrolling Directive
app.directive('scrollToItem', function() {
return {
restrict: 'A',
scope: {
scrollTo: "#"
},
link: function(scope, $elm) {
$elm.on('click', function() {
$('html,body').animate({scrollTop: $(scope.scrollTo).offset().top }, 700);
});
}
};
});
App JS
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});

Responsive layout with nested divs using bootstrap

Responsive layout with nested divs using bootstrap
Here my html code
<div class="container-fluid" style="height: 350px;">
<div class="row-fluid clearfix" style="height: 100%">
<div class="col-md-9 column" style="height: 100%;">
<div class="row clearfix" style="height: 50%;">
<div class="col-md-4 column" style="height: 100%;background-color: red">
</div>
<div class="col-md-4 column" style="height: 100%;background-color: green">
</div>
<div class="col-md-4 column" style="height: 100%;background-color: blue">
</div>
</div>
<div class="row clearfix" style="height: 50%;">
<div class="col-md-12 column" style="height: 100%;background-color: pink">
</div>
</div>
</div>
<div class="col-md-3 column" style="height: 100%;background-color: yellow">
</div>
</div>
</div>
output:
while increasing the browser screen width
here the output after increasing
here green and blue colored div missing
my expected output:
Please help me out..

You need to define classes for mobile view as well, otherwise elements can overlap each other. For example:
col-xs-12 col-md-4 column
See the bootply

This is working now, remove clearfix class from row. here is the code
<div class="container-fluid" style="height: 350px;">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row-fluid clearfix">
<div class="col-md-9 column">
<div class="row">
<div class="col-md-4 column" style="height: 150px;background-color: red">
</div>
<div class="col-md-4 column" style="height: 150px; background-color: green">
</div>
<div class="col-md-4 column" style="height: 150px; background-color: blue">
</div>
</div>
<div class="row">
<div class="col-md-12 column" style="height: 150px; background-color: pink">
</div>
</div>
</div>
<div class="col-md-3 column" style="background-color: yellow; height: 300px">
</div>
</div>
</div>

Dileep Kumar Hi there, I striped out most of your code to what is probably only needed.
See if this works for you.
This code has the pink block nest up with the others.
Here is the large view Fiddle. Easier to resize.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.space {
margin-top: 5%;
margin-bottom: 5%;
}
.block-a {
height: 350px;
}
.block-b {
height: 175px;
}
.block-red {
height: 175px;
background-color:#ff1000;
}
.block-darkgreen {
height: 175px;
background-color: green;
}
.block-blue {
height: 175px;
background-color: blue;
}
.block-pink {
height: 175px;
background-color: pink;
}
.block-darkyellow {
height: 350px;
background-color: gold;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container col-lg-12 space"></div>
<div class="container-fluid">
<div class="row-fluid col-md-9 block-a">
<div class="col-xs-12 col-sm-12 col-md-4 block-red"></div>
<div class="col-xs-12 col-sm-12 col-md-4 block-darkgreen"></div>
<div class="col-xs-12 col-sm-12 col-md-4 block-blue"></div>
<div class="col-xs-12 col-sm-12 col-md-12 block-pink"></div>
</div>
<div class="row-fluid col-md-3 block-a">
<div class="col-xs-12 col-sm-12 col-md-12 block-darkyellow"></div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

Well of course the red one will be shown, because you have specified the height of the parent div as 50% and all the three children with height of 100% so the red div, which is the first one, will take up all the height. One solution would be to specify a height of 33.33% on the three divs, when the breakpoint is reached, like:
#media(max-width: 767px) {
.col-md-9 .col-md-4 {
height: 33.33%;
}
}
I'd put some more specific classes to the divs before doing this.

Having issue with image resizing in html when converting to mobile view

I have just started learning front-end web development. I was working on my portfolio mockup and I am having issues with image sizing. I am using bootstrap framework. When i use an image with img-responsive class, the height and width of the image I upload are set automatically. Since I wanted to set the height myself, I changed the height of the image (in css file). However, now when i reduce my browser's width in order to see how my portfolio will look when in mobile view, the width resizes but the height remains the same. This makes the image look disproportional. How can i fix this? If I don't use custom height, everything is fine in mobile view.

this worked for me in my google chrome browser. As far as the mobile view and other devices this meta tag helps "meta name="viewport" content="width=device-width, initial-scale=1.0" (refer to the meta tag in my html head element)
hr {
border-style: solid;
border-width: 1px;
width: 100%;
}
.featured-work {
color: #BCBBBB;
}
.font {
font-family: 'Lato', sans-serif;
font-weight: 100;
font-size: 60px;
}
.font1 {
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: 20px;
}
.footer-title-fonts {
color: #747704;
}
.name {
margin-top: 66px;
}
.ulogo {
margin-top: 40px;
}
.multiple-borders {
box-shadow: 0px 0px 0px 7px black;
}
.multiple-borders1 {
box-shadow: 0px 0px 0px 7px blue;
}
.multiple-borders2 {
box-shadow: 0px 0px 0px 7px red;
}
.multiple-borders3 {
box-shadow: 0px 0px 0px 7px green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container"> <!-- start of container class -->
<div class="row"> <!-- start of row class -->
<!-- udacity logo -->
<div class="col-md-6">
<img class="ulogo" src="images/logo.jpg" alt="udacity logo">
</div>
<!-- end of udacity logo -->
<!-- start of name div -->
<div class="col-md-6">
<h1 class="font name text-uppercase text-right">Jane Doette</h1>
<h5 class="font1 text-uppercase text-right">Front-end ninja</h5>
</div>
<!-- end of name div -->
</div> <!-- end of row class -->
<hr>
<!-- main image -->
<div class="row">
<div class="col-md-12">
<img class="img-responsive multiple-borders" src="http://placekitten.com/1170/500" alt="filler image">
</div>
</div>
<!-- end of main image -->
<!-- bottom 3 images -->
<div class="row"> <!-- start of row class -->
<div class="col-md-12">
<h3 class="featured-work">Featured Work</h3>
</div>
<!-- First Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders1" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Applify</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Appify/</h6>
</div>
<!-- End of frst Image -->
<!-- Second Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders2" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Sunflower</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Sunflower/</h6>
</div>
<!-- End of second Image -->
<!-- Third Image -->
<div class="col-md-4">
<img src="http://placekitten.com/550/400" class="img-responsive multiple-borders3" alt="filler image">
<h2 class="footer-title-fonts text-center text-uppercase">Bokeh</h2>
<h6 class="footer-title-fonts text-center">https://github.com/udacity/Bokeh/</h6>
</div>
<!-- End of Third Image -->
<!-- end of bottom 3 images -->
</div> <!-- end of row class -->
</div> <!-- end of container class -->
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap_css/bootstrap.min.css">
<link rel="stylesheet" href="Custom_css/P1.css" media="screen" title="no title" charset="utf-8">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300' rel='stylesheet' type='text/css'>
<title>Project 1</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<img class="top-image" src="images/udacity.png" width="200px" class="img-responsive" alt="Responsive image">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="text-thin">Jiwanjot Singh</h1>
<h4>Front-end Ninja</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/mainimage.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>Featured Work</h2>
</div>
</div>
<div class="row">
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/arcade.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">ArcadeDemo</h3>
<p>https://github.com/udacity/ArcadeDemo/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/alarm.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">AlarmMe</h3>
<p>https://github.com/udacity/AlarmMe/</p>
</div>
<div class="col-md-4 text-center">
<img class="img-responsive" src="images/bokeh.jpg" alt="Placehold Image" />
<h3 class="text-uppercase">Bokeh</h3>
<p>https://github.com/udacity/Bokeh/</p>
</div>
</div>
</body>
</html>