I have a text ("Bokdeko") that with a size of 20px is fine, but if I modify the font size to 30px it gets misaligned as you can see in the images:
with 20px: https://postimg.cc/75bSFGnR
with 30px: https://postimg.cc/0M1mKt1g
As you can see, the text "Bokdeko" appears scrolled down in the second image, which is the one with a font size of 30px.
this is the css and html code that I have.
the css file:
#import url(https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans+Narrow&display=swap);
.icono
{
width:30px;
height:20px;
}
.nav-section .row {
height: 30px;
align-items: center;
}
.contenedor{
width:485px;
height:540px;/*tamaño alto foto*/
margin :auto;
}
.slick-prev:before, .slick-next:before {
color:black !important;
}
.titulo{
font-family: 'Oranienbaum', serif;
font-size: 30px;
}
the html file:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK REL=StyleSheet HREF="css/bootstrap.css" TYPE="text/css">
<link rel="stylesheet" href="estilos_menu.css">
<link rel="stylesheet" href="estilos.css">
<style>
.icono
{
width:30px;/*tama�o del icono*/
height:20px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row nav-section" >
<div class="col-sm-12 col-lg-2 bg-secondary my-auto" style="z-index:3;">
<!--<div class="hamburguer">-->
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-4">
<div>
<ul class="nav">
<li><img class="icono" src="hamburguer.png">
<ul>
<li>Tienda
<ul>
<li>Ver todo</li>
<li>Armarios</li>
<li>Sillas</li>
<li>Sillones</li>
<li>Sofás</li>
<li>Mesas</li>
<li>Mesillas y cajoneras</li>
<li>Lámparas</li>
</ul>
</li>
<li>Blog
<ul>
<li>Estilo minimalista</li>
<li>Estilo nórdico</li>
<li>Estilo retro</li>
<li>Estilo rústico</li>
<li>Estilo clásico</li>
<li>Espacios exteriores</li>
<li>Fusión de estilos</li>
<!--</li>-->
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div> <!-- div col-->
<div class="col-8 titulo bg-info">
BOKDEKÓ
</div>
</div>
</div>
<div class="col-sm-10 col-lg-5 bg-danger my-auto" >
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-2">
Cuenta
</div>
<div class="col-2">
Registrarse
</div>
<div class="col-8">
Busca productos
<input type=text name=buscar size='12' maxlength='15' value='' style="padding-top:1px;padding-bottom:1px;font-size:9px;">
</div>
</div>
</div><!--div col-->
<div class="col-sm-12 col-lg-5 bg-info my-auto"><!--align-self-center-->
<div class="row" style="margin-top:30px !important;margin-bottom:30px !important;">
<div class="col-3 ">
Mi lista
</div>
<div class="col-3 bg-success">
Carrito
</div>
<div class="col-6 bg-warning">
Hola
</div>
</div>
</div> <!--div col-->
</div> <!--div row-->
</div>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/jquery-3.5.1.slim.min.js" type="text/javascript"></script>
<script src="js/utilidades.js" type="text/javascript"></script>
</body>
</html>
Related
[Screenshot of white space under div]
[1]: https://i.stack.imgur.com/cO7TV.jpg
I can't work out why this white space is visible, I am a newbie to coding and would greatly appreciate any help possible. I have tried googling the answer but have had no luck!
body{ background: rgb(245,245,245); color: green; font-size: 25px; font-family: Helvetica; margin: 0; padding: 0; outline: none; border: 0; display: flex; } .card { font-weight: lighter; text-align: center; color: white; background: rgb(50, 50, 50); margin: 0; padding: 20px; }
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Luke's first project</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link href='https://fonts.googleapis.com/css?family=Bellota' rel='stylesheet'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container-fluid p-0">
<div class="row">
<div class="col">
<div id="banner">
<h1>Welcome to my first project</h1>
<p>This is where I will be learning new skills and putting them into practice!</p>
<p>
Start now
</p>
</div>
</div>
<div class="row no-gutters">
<div class="col">
<div class="card">
<h2>Awesome</h2>
<p>Thanks for visiting</p>
</div>
</div><div class="col">
<div class="card">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="footer">
<p>Thank you for looking through my work and a special thanks to ©Le Wagon for teaching me!</p>
<ul class="list-inline">
<li class="list-inline-item"><i class="fab fa-youtube"></i></li>
<li class="list-inline-item"><i class="fab fa-facebook"></i></li>
<li class="list-inline-item"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item"><i class="fab fa-github"></i></li>
</ul>
</div>
</div>
</div>
</div></div>
</body>
</html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container-fluid bg-dark text-white">
<div class="row">
<div class="col-sm p-3 text-center">
<h3>Awesome</h3>
<p>Thanks for visiting</p>
</div>
<div class="col-sm p-3 text-center">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>
You can use the piece of code above.
I hope my answer will help you.
I dont have all your code, but I think it is because you have an h2 tag in the first card-section and then a h3 in the next. Try and change to both h2 or h3 and see if the whitespace dissapears.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="row no-gutters">
<div class="col">
<div class="card">
<h3>Awesome</h3>
<p>Thanks for visiting</p>
</div>
</div>
<div class="col">
<div class="card">
<h3>Brilliant</h3>
<p>Hope you're impressed</p>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li{
height: 64px;
background-color:pink;
}
.a{
height: 64px;
}
.ab{
display: flex;
direction: row;
align-items: center;
}
}
.b{
display: flex;
direction: row-reverse;
align-items: center;
}
.secondli{
margin-top: 20px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-6 col-6" >
<p>mwiiwiw</p>
<ul>
<li>
<div style="width: 100%">
<span>Xyz</span>
<span>sjfoeij</span>
</div>
<div class="row a">
<div class="col-12 col-md-8 ab" style="background-color: aqua;">
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b"style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</li>
<li class="secondli">
<div class="row a">
<div class="col-12 col-md-8 ab" >
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-4 b" >
<span>11</span>
</div>
</div>
</li>
</ul>
</body>
</html>
How can I display all the values at the center of the row?And the div with spans value Xyz is not taking width same as row below it.And also the second row is not taking width same as row above?
How can I achieve that using bootstrap and Css. Can we add two li and a row inside li or we will have to add container as well inside
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
div{
height: 80px;
text-align: center;
padding-top: 30px;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-sm-6" >
<p>mwiiwiw</p>
<div class="row">
<div class="col-sm-8" style="background-color: aqua;">
<span class="b">XYZ</span>
</div>
<div class="col-sm-4 b"style="background-color: yellow;" >
<span>Sjfoeij</span>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="background-color: blue;">
<span class="b">ABC</span>
</div>
<div class="col-sm-4 b"style="background-color: red;" >
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-sm-8" style="background-color: aqua;" >
<span class="b">ABC</span>
</div>
<div class="col-sm-4" style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</body>
</html>
As per your comment #irkhaladkar below is the code snippet:
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li{
/*height: 64px;
background-color:pink;*/
}
.pink{background:pink;}
.h-64{height:64px}
.a{
height: 64px;
}
.ab{
display: flex;
direction: row;
align-items: center;
}
}
.b{
display: flex;
direction: row-reverse;
align-items: center;
}
.secondli{
margin-top: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container" >
<div class="row">
<div class="col-md-6 col-6" >
<p>mwiiwiw</p>
<ul>
<li>
<div class="row pink">
<span class="col-12 col-md-6">Xyz</span>
<span class="col-12 col-md-6">sjfoeij</span>
</div>
<div class="row h-64">
<div class="col-12 col-md-6 ab" style="background-color: aqua;">
<span class="b">ABC</span>
</div>
<div class="col-12 col-md-6 ab"style="background-color: yellow;" >
<span>11</span>
</div>
</div>
</li>
<li class="secondli">
<div class="row h-64 pink">
<div class="col-12 col-md-6 ab" >
<span class="">ABC</span>
</div>
<div class="col-12 col-md-6 ab" >
<span>11</span>
</div>
</div>
</li>
</ul>
Good day, slight issue here, I cannot seem place all three of my images in the same row together, can anyone help solve the issue? the first is in one row, then the second and third overlap each other. I have already used bootstrap's 12 column grid but the other 2 just kept going down a row. Also, is there a bootstrap code where the image adjusts to the row? thank you for reading.
heres a js fiddle link: https://jsfiddle.net/wxofr2ae/5/
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">
<title>Homepage</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="img/link_health.jpg" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="img/link_wellness.jpg" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
</body>
</html>
CSS:
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 300px;
height: 300px;
}
Okay! I just solve your problem by doing just 3 steps:
Step 1: add the closing tag for the <div class="box"> of the BEAUTY block.
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you forgot this closing tag -->
Step 2: remove a redundant </div> tag of the <div class="container"> block
Step 3: change the css class, make width: 100%, this step will solve the image overlap:
.bhw_link {
width: 100%;
height: 300px;
}
You missed closing div <div class="box"> and change css of
.bhw_link {
width: 100%;
height: auto;
}
#media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
.bhw_link {
width: 100%;
height: auto;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MWC</a>
</div>
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>FAQ</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link"></div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>HEALTH</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
<div class="col-sm-4">
<div class="box">
<h2>WELLNESS</h2>
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bhw_link">
</div>
</div>
</div>
</div>
</div>
<div class="legend">
<span class="key-container">.container</span>
<span class="key-row">.row</span>
<span class="key-col">.col-*</span>
<span class="key-box">.box (custom)</span>
</div>
It's just because you ommitted the closing tag
<div class="col-sm-4">
<div class="box">
<h2>BEAUTY</h2>
<img src="img/link_beauty.jpg" class="bhw_link">
</div> <!-- you omitted this closing tag-->
</div>
Try class "img-responsive" for your image tag if you want to scale the image to the parent element or just set it to width 100% because the image is already inside the grid system of bootstrap
this is my code. Materialize.showStaggeredList() not firing on button click.
when i try to click button i want sign up link on side of the browser window but the button click is not firing. I have seen the docs of Materialize and work accordingly but failed. Any help
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
html
{
height: 100%;
background: url(Images/234.jpg) no-repeat center center;
background-size: cover;
}
</style>
<title>HelpingO</title>
<link rel="stylesheet" href="materialize/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="materialize/css/materialize.css" />
<script src="materialize/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<nav style="background-color:#554253">
<div class="navbar-wrapper">
<a href="#" class="brand-logo col s2 left-align">
<img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" />
HelpingO</a>
<ul class="right hide-on-med-and-down">
<li>Contact</li>
<li>Services</li>
<li>About Us</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Home</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="navbar-wrapper col s3">
<div class="col s12 m12 l12 right-align">
Click Me </div>
</div>
</nav>
<ul id="staggered-test" class="right">
<li style="opacity:0"><i class="material-icons">email</i></li>
<li style="opacity:0"><i class="material-icons">web</i></li>
<li style="opacity:0"><i class="material-icons">android</i></li>
</ul>
<div class="container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2>
<div class="row center">
<h5 class="header col s12 dark">Want to pay less when flying to India?</h5>
</div>
<div class="row center">
Get Started
</div>
<br><br>
</div>
</div>
</div>
</body>
<html>
It looks like you have declared your scripts in the wrong order. Materialize uses jQuery so it needs to be loaded first -
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="materialize/js/materialize.min.js"></script>
Then to get your staggered list to work you'll need to change materialize to Materialize (note the capital "M") -
Click Me </div>
In full (working) -
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
html {
height: 100%;
background: url(Images/234.jpg) no-repeat center center;
background-size: cover;
}
</style>
<title>HelpingO</title>
<link rel="stylesheet" href="materialize/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.js"></script>
</head>
<body>
<nav style="background-color:#554253">
<div class="navbar-wrapper">
<a href="#" class="brand-logo col s2 left-align">
<img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" /> HelpingO
</a>
<ul class="right hide-on-med-and-down">
<li>Contact</li>
<li>Services</li>
<li>About Us</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>Home</li>
</ul>
<i class="material-icons">menu</i>
</div>
<div class="navbar-wrapper col s3">
<div class="col s12 m12 l12 right-align">
Click Me </div>
</div>
</nav>
<ul id="staggered-test" class="right">
<li style="opacity:0"><i class="material-icons">email</i></li>
<li style="opacity:0"><i class="material-icons">web</i></li>
<li style="opacity:0"><i class="material-icons">android</i></li>
</ul>
<div class="container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2>
<div class="row center">
<h5 class="header col s12 dark">Want to pay less when flying to India?</h5>
</div>
<div class="row center">
Get Started
</div>
<br><br>
</div>
</div>
</div>
</body>
<html>
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>