Arina
Reputation: 63
Content not aligns properly
I need to align content in one of the columns in html like on the picture. But for some reason, even with the right code, it's not working for me. Instead of the content being close to the image, it's away from it. Can anyone tell me where is my error or what I'm doing wrong? Attached below are the code and image of what it should look like. Would appreciate any help! Here is the link to the github and picture:
/* body { padding-top: 70px; } */
html, body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {
}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="pageOne.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
<a href="#" class="navbar-link">Login or Create new account</a>
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="pageTwo.html"><span class="glyphicon glyphicon-user">My Account</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-gift">Wish List</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-arrow-right">Checkout</span></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Art Store</h1>
</div>
<div class="col-md-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Art Work</a></li>
<li><a href="#">Artists</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By <a href="#">Elisabeth Louise Vigée Le Brun</a></p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<a href="images/art/113010.jpg"><img src="images/art/113010-m.jpg" class="img-thumbnail img-responsive" /></a>
</div>
<div class="col-md-7">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-gift">Add to Wish List</span></a>
</button>
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-shopping-cart">Add to Shopping Cart</span></a>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td><a href="#">National Gallery, London</a></td>
</tr>
<tr>
<th>Genres:</th>
<td><a href="#">Realism</a>, <a href="#">Rococo</a></td>
</tr>
<tr>
<th>Subjects:</th>
<td><a href="#">People</a>, <a href="#">Arts</a></td>
</tr>
</table>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText"><a href="#">Artist Holding a Thistle</a></p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText"><a href="#">Self-portrait in a Straw Hat</a></p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">Edit</span></button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right">Checkout</span></button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Caravaggio</a></li>
<li><a href="#">Cezanne</a></li>
<li><a href="#">Matisse</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Picasso</a></li>
<li><a href="#">Raphael</a></li>
<li><a href="#">Van Gogh</a></li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Baroque</a></li>
<li><a href="#">Cubism</a></li>
<li><a href="#">Impressionism</a></li>
<li><a href="#">Renaissance</a></li>
</ul>
</div>
</div>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/116010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/120010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/107010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/106020.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li><a href="#">Delivery Inforomation</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Arrangement in Grey and Black</a></p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>Upvotes: 1
Views: 115
Answers (2)
Saravana
Reputation: 3496
Just separate your bootstrap column become col-md-4,col-md-6,col-md-2 to get visible same line. And also always use the text after the icon <span class="glyphicon glyphicon-gift"></span> Add to Wish List . I hope this solution will be helpful.
/* body { padding-top: 70px; } */
html,
body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
<a href="#" class="navbar-link">Login or Create new account</a>
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="pageTwo.html"><span class="glyphicon glyphicon-user">My Account</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-gift">Wish List</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-arrow-right">Checkout</span></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-sm-8">
<h1>Art Store</h1>
</div>
<div class="col-sm-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Art Work</a></li>
<li><a href="#">Artists</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By <a href="#">Elisabeth Louise Vigée Le Brun</a></p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="images/art/113010.jpg"><img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" /></a>
</div>
<div class="col-md-6">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-gift"></span> Add to Wish List</a>
</button>
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-shopping-cart"></span> Add to Shopping Cart</a>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td><a href="#">National Gallery, London</a></td>
</tr>
<tr>
<th>Genres:</th>
<td><a href="#">Realism</a>, <a href="#">Rococo</a></td>
</tr>
<tr>
<th>Subjects:</th>
<td><a href="#">People</a>, <a href="#">Arts</a></td>
</tr>
</table>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/300" width="41"></a>
<div class="media-body">
<p class="cartText"><a href="#">Artist Holding a Thistle</a></p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="http://via.placeholder.com/300" width="41"></a>
<div class="media-body">
<p class="cartText"><a href="#">Self-portrait in a Straw Hat</a></p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>Edit</button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right"></span>Checkout</button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Caravaggio</a></li>
<li><a href="#">Cezanne</a></li>
<li><a href="#">Matisse</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Picasso</a></li>
<li><a href="#">Raphael</a></li>
<li><a href="#">Van Gogh</a></li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Baroque</a></li>
<li><a href="#">Cubism</a></li>
<li><a href="#">Impressionism</a></li>
<li><a href="#">Renaissance</a></li>
</ul>
</div>
</div>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="http://via.placeholder.com/300" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign"></span>View</button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift"></span>Wish</button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart"></span>Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li><a href="#">Delivery Inforomation</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Arrangement in Grey and Black</a></p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>Upvotes: 0
Nik
Reputation: 1709
With couple of changes to the row - col divs below is the code snippet that might be the solution to you problem. (Though the images are missing, it comes close to screenshot you have posted).
/* body { padding-top: 70px; } */
html,
body {
background-image: url(images/art/stucco/stucco.png);
}
.info {
background-color: #fff;
}
h1 {
font-size: 3em;
font-weight: bold;
}
.price {
color: red;
font-size: 1.4em;
font-weight: bold;
}
.similarTitle {}
.cartText {
font-size: 0.75em;
}
footer {
background-color: #E7E7E7;
}
.tight-form-group {
font-size: 0.9em;
}
#copyrightRow {
background-color: #3A3A3A;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<title>Assignment 1 - Page 1</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="pageOne.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<p class="navbar-text">Welcome to <b>Art Store</b>,
<a href="#" class="navbar-link">Login or Create new account</a>
</p>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav">
<li><a href="pageTwo.html"><span class="glyphicon glyphicon-user">My Account</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-gift">Wish List</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-shopping-cart">Shopping Cart</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-arrow-right">Checkout</span></a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id="logoRow">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Art Store</h1>
</div>
<div class="col-md-4">
<form class="form-inline" role="search">
<div class="input-group">
<label class="sr-only" for="search">Search</label>
<input type="text" placeholder="Search.." class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span> </button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="mainNavigationRow">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Art Work</a></li>
<li><a href="#">Artists</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="container">
<div class="info">
<div class="row">
<div class="col-md-10">
<h2>Self-portait in a Straw Hat</h2>
<p>By <a href="#">Elisabeth Louise Vigée Le Brun</a></p>
</div>
</div>
<div class="row">
<div class="col-md-10">
<div class="row">
<div class="col-md-5">
<a href="images/art/113010.jpg"><img src="images/art/113010-m.jpg" class="img-thumbnail img-responsive" /></a>
</div>
<div class="col-md-7">
<p>The painting appears, after cleaning, to be an authograph replica of a picture, the original of which was painted in Brusseles in 1782 in free imitation of Rubens's 'Chapeau de Paile', which LeBrun had seen in Antwerp. It was exhibited in
Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France.</p>
<p class="price">$700</p>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-gift">Add to Wish List</span></a>
</button>
<button type="button" class="btn btn-default">
<a href="#"><span class="glyphicon glyphicon-shopping-cart">Add to Shopping Cart</span></a>
</button>
<p> </p>
</div>
<div class="panel panel-default">
<div class="panel-heading">Product Details</div>
<table class="table">
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimentions:</th>
<td>98cm x 71cm</td>
</tr>
<tr>
<th>Home:</th>
<td><a href="#">National Gallery, London</a></td>
</tr>
<tr>
<th>Genres:</th>
<td><a href="#">Realism</a>, <a href="#">Rococo</a></td>
</tr>
<tr>
<th>Subjects:</th>
<td><a href="#">People</a>, <a href="#">Arts</a></td>
</tr>
</table>
</div>
</div>
<p> </p>
<h3>Similar Products</h3>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/116010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/120010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/107010.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="images/art/thumbs/106020.jpg" class="img-thumbnail img-responsive" />
<div class="caption">
<p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">View</span></button>
<button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-gift">Wish</span></button>
<button type="button" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-shopping-cart">Cart</span></button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Cart</h3>
</div>
<div class="panel-body">
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText"><a href="#">Artist Holding a Thistle</a></p>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" width="41px"></a>
<div class="media-body">
<p class="cartText"><a href="#">Self-portrait in a Straw Hat</a></p>
</div>
</div>
<strong class="cartText">Subtotal: <span class="text-warning">$1200</span></strong>
<div>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-info-sign">Edit</span></button>
<button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-arrow-right">Checkout</span></button>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Artists</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Caravaggio</a></li>
<li><a href="#">Cezanne</a></li>
<li><a href="#">Matisse</a></li>
<li><a href="#">Michelangelo</a></li>
<li><a href="#">Picasso</a></li>
<li><a href="#">Raphael</a></li>
<li><a href="#">Van Gogh</a></li>
</ul>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Popular Genres</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">Baroque</a></li>
<li><a href="#">Cubism</a></li>
<li><a href="#">Impressionism</a></li>
<li><a href="#">Renaissance</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-info-sign">About Us</span></h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-earphone">Customer Service</span></h4>
<ul class="nav nav-stacked">
<li><a href="#">Delivery Inforomation</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-shopping-cart">Just Ordered</span></h4>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/13030.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Arrangement in Grey and Black</a></p>
<em>5 minutes ago</em>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/116010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<em>5 minutes ago</em>
</div>
</div>
<div class="media">
<a class="pull-left" href="#"><img class="media-object" src="images/art/tiny/113010.jpg" /></a>
<div class="media-body">
<p class="media-heading similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
<em>5 minutes ago</em>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<h4><span class="glyphicon glyphicon-envelope">Contact Us</span></h4>
<form role="form">
<div class="form-group tight-form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter name ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter email ..." />
</div>
<div class="form-group tight-form-group">
<label class="sr-only" for="message">Message</label>
<textarea class="form-control" placeholder="Enter message ..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</div>
</div>
<div id="copyrightRow">
<div class="container">
<div class="row">
<p class="text-muted">All images are copyright to their owners. This is just a hypothetical sitemuted"<span class="pull-right">Ⓒ2014 Copyright Art Store</span></p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>Hope this helps. Don't forget to mark as answer if it helps. (Run the code snippet in full screen mode) Thank you. :)
Upvotes: 2