In this page, you must integrate 2 Google fonts (see page 137 in the book). Be s
ID: 3728735 • Letter: I
Question
In this page, you must integrate 2 Google fonts (see page 137 in the book). Be sure to use the appropriate
for the fonts.
3. Project 3 at the end of chapter 7 (pages 319–320) provides instructions/guidance for implementing this layout in Bootstrap. The various labels in the diagram refer to the class names within Bootstrap
For every page, the links for home must go to index.html, links to About Us to about.html, Art Works to work.html, and Artists to artists.html.
Notice the form in the bottom right of the footer. This must be a functioning form in that it must use http://www.randyconnolly.com/tests/process.php as its action. The same applies to the search at the top right side of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Personal Statement</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
</nav>
<script src="script/jquery-3.3.1.js"></script>
<script src="script/bootstrap.js"></script>
<script src="script/script.js"></script>
</body>
</html>
<title>Chapter5</title>
<!-- Custom styles for this template -->
<link href="assign2.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav >
<ul >
<li><a href="#"> My Account</a></li>
<li><a href="#"> Wish List</a></li>
<li><a href="#"> Shopping Cart</a></li>
<li><a href="#"> Checkout</a></li>
</ul>
</nav>
</div> <!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
<form >
<label for="search">Search</label>
<input type="text" placeholder="Search" name="search">
<link href="fonts" ref="glyphicons-halflings-regular.eot"/>
<button type="submit"></button>
</form>
</div> <!-- end logoRow -->
<div id="mainNavigationRow" >
<nav >
<ul >
<li ><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Art Works</a></li>
<li><a href="#">Artists</a></li>
<li >
<a href="#" >Specials </a>
<ul >
<li><a href="#">Special 1</a></li>
<li><a href="#">Special 2</a></li>
</ul>
</li>
</ul>
</nav>
</div> <!-- end mainNavigationRow -->
</header>
<h2>Self-portrait in a Straw Hat</h2>
<p>By <a href="#">Louise Elisabeth Lebrun</a></p>
<img src="images/113010.jpg" class="img-thumbnail img-responsive" alt="Self-portrait in a Straw Hat"/>
<p>
The painting appears, after cleaning, to be an autograph replica of a picture, the original of which was painted in Brussels in 1782 in free imitation of Rubens's 'Chapeau de Paille', 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 >
<button type="button" >
<a href="#"> Add to Wish List</a>
</button>
<button type="button" >
<a href="#"> Add to Shopping Cart</a>
</button>
</div>
<p> </p>
<div >
Product Details
<table >
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimensions:</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>
<p> </p>
<h3>Similar Products </h3>
<div >
<img src="images/thumbs/116010.jpg" alt="..." >
<div >
<p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<button type="button" > View</button>
<button type="button" > Wish</button>
<button type="button" > Cart</button>
</div>
</div>
<div >
<img src="images/thumbs/120010.jpg" alt="..." >
<div >
<p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
<button type="button" > View</button>
<button type="button" > Wish</button>
<button type="button" > Cart</button>
</div>
</div>
<div >
<img src="images/thumbs/107010.jpg" alt="..." >
<div >
<p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
<button type="button" > View</button>
<button type="button" > Wish</button>
<button type="button"> Cart</button>
</div>
</div>
<div >
<img src="images/thumbs/106020.jpg" alt="..." >
<div >
<p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
<button type="button" > View</button>
<button type="button" > Wish</button>
<button type="button" > Cart</button>
</div>
</div>
<h3 >Cart </h3>
<div>
<a href="#">
<img src="images/tiny/116010.jpg" alt="..." width="32">
</a>
<p ><a href="#">Artist Holding a Thistle</a></p>
<a href="#">
<img src="images/tiny/113010.jpg" alt="..." width="32">
</a>
<p ><a href="#">Self-portrait in a Straw Hat</a></p>
<strong class="cartText">Subtotal: <span >$1200</span></strong>
<div>
<button type="button" > Edit</button>
<button type="button" > Checkout</button>
</div>
<div >
<h3 >Popular Artists</h3>
<ul >
<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 >
<h3 >Popular Genres</h3>
<ul >
<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>
<footer>
<h4> About Us</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>
<h4> Customer Service</h4>
<ul >
<li><a href="#">Delivery Information</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
<h4> Just Ordered</h4>
<div>
<a href="#">
<img src="images/tiny/13030.jpg" alt="...">
</a>
<p> <a href="#">Arrangement in Grey and Black</a></p>
<em>5 minutes ago</em>
</div>
<div >
<a href="#">
<img src="images/tiny/116010.jpg" alt="...">
</a>
<p ><a href="#">Artist Holding a Thistle</a></p>
<em>11 minutes ago</em>
</div>
<div >
<a class="pull-left" href="#">
<img src="images/tiny/113010.jpg" alt="...">
</a>
<p class="similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
<em>23 minutes ago</em>
</div>
</div>
<h4> Contact us</h4>
<form >
<label for="name">Name</label>
<input type="text" name="email" placeholder="Enter name ...">
<label for="email">Email</label>
<input type="email" name="email" placeholder="Enter email ...">
<label for="email">Email</label>
<textarea rows="3" placeholder="Enter message ..."></textarea>
<button type="submit">Submit</button>
</form>
<div id="copyrightRow">
<p>All images are copyright to their owners. This is just a hypothetical site
<span >© 2014 Copyright Art Store</span></p>
</div>
</footer>
</body>
</html>
Explanation / Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Rammetto+One" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Personal Statement</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">More</a></li>
</ul>
</div>
</nav>
<script src="script/jquery-3.3.1.js"></script>
<script src="script/bootstrap.js"></script>
<script src="script/script.js"></script>
</body>
</html>
<title>Chapter5</title>
<!-- Custom styles for this template -->
<link href="assign2.css" rel="stylesheet">
</head>
<body>
<header>
<div id="topHeaderRow" >
<nav >
<ul >
<li><a href="#"> My Account</a></li>
<li><a href="#"> Wish List</a></li>
<li><a href="#"> Shopping Cart</a></li>
<li><a href="#"> Checkout</a></li>
</ul>
</nav>
</div> <!-- end topHeaderRow -->
<div id="logoRow" >
<h1>Art Store</h1>
<form action="http://www.randyconnolly.com/tests/process.php" method="GET">
<label for="search">Search</label>
<input type="text" placeholder="Search" name="search">
<link href="fonts" ref="glyphicons-halflings-regular.eot"/>
<button type="submit"></button>
</form>
</div> <!-- end logoRow -->
<div id="mainNavigationRow" >
<nav >
<ul >
<li ><a href="index.html">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="work.html">Art Works</a></li>
<li><a href="artists.html">Artists</a></li>
<li >
<a href="#" >Specials </a>
<ul >
<li><a href="#">Special 1</a></li>
<li><a href="#">Special 2</a></li>
</ul>
</li>
</ul>
</nav>
</div> <!-- end mainNavigationRow -->
</header>
<h2>Self-portrait in a Straw Hat</h2>
<p>By <a href="#">Louise Elisabeth Lebrun</a></p>
<img src="images/113010.jpg" class="img-thumbnail img-responsive" alt="Self-portrait in a Straw Hat"/>
<p>
The painting appears, after cleaning, to be an autograph replica of a picture, the original of which was painted in Brussels in 1782 in free imitation of Rubens's 'Chapeau de Paille', 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 >
<button type="button" >
<a href="#"> Add to Wish List</a>
</button>
<button type="button" >
<a href="#"> Add to Shopping Cart</a>
</button>
</div>
<p> </p>
<div >
Product Details
<table >
<tr>
<th>Date:</th>
<td>1782</td>
</tr>
<tr>
<th>Medium:</th>
<td>Oil on canvas</td>
</tr>
<tr>
<th>Dimensions:</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>
<p> </p>
<h3>Similar Products </h3>
<div >
<img src="images/thumbs/116010.jpg" alt="..." >
<div >
<p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
<button type="button" > View</button>
<button type="button" > Wish</button>
<button type="button" > Cart</button>
</div>
</div>
<div >
<img src="images/thumbs/120010.jpg" alt="..." >
<div >
<p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
<button type="button" > View</button>
<button type="button" > Wish</button>
<button type="button" > Cart</button>
</div>
</div>
<div >
<img src="images/thumbs/107010.jpg" alt="..." >
<div >
<p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
<button type="button" > View</button>
<button type="button" > Wish</button>
<button type="button"> Cart</button>
</div>
</div>
<div >
<img src="images/thumbs/106020.jpg" alt="..." >
<div >
<p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
<button type="button" > View</button>
<button type="button" > Wish</button>
<button type="button" > Cart</button>
</div>
</div>
<h3 >Cart </h3>
<div>
<a href="#">
<img src="images/tiny/116010.jpg" alt="..." width="32">
</a>
<p ><a href="#">Artist Holding a Thistle</a></p>
<a href="#">
<img src="images/tiny/113010.jpg" alt="..." width="32">
</a>
<p ><a href="#">Self-portrait in a Straw Hat</a></p>
<strong class="cartText">Subtotal: <span >$1200</span></strong>
<div>
<button type="button" > Edit</button>
<button type="button" > Checkout</button>
</div>
<div >
<h3 >Popular Artists</h3>
<ul >
<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 >
<h3 >Popular Genres</h3>
<ul >
<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>
<footer>
<h4> About Us</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>
<h4> Customer Service</h4>
<ul >
<li><a href="#">Delivery Information</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Terms and Conditions</a></li>
</ul>
<h4> Just Ordered</h4>
<div>
<a href="#">
<img src="images/tiny/13030.jpg" alt="...">
</a>
<p> <a href="#">Arrangement in Grey and Black</a></p>
<em>5 minutes ago</em>
</div>
<div >
<a href="#">
<img src="images/tiny/116010.jpg" alt="...">
</a>
<p ><a href="#">Artist Holding a Thistle</a></p>
<em>11 minutes ago</em>
</div>
<div >
<a class="pull-left" href="#">
<img src="images/tiny/113010.jpg" alt="...">
</a>
<p class="similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
<em>23 minutes ago</em>
</div>
</div>
<h4> Contact us</h4>
<form action="http://www.randyconnolly.com/tests/process.php" method="POST">
<label for="name">Name</label>
<input type="text" name="name" placeholder="Enter name ...">
<label for="email">Email</label>
<input type="email" name="email" placeholder="Enter email ...">
<label for="message">Message</label>
<textarea rows="3" name="message" placeholder="Enter message ..."></textarea>
<button type="submit">Submit</button>
</form>
<div id="copyrightRow">
<p>All images are copyright to their owners. This is just a hypothetical site
<span >© 2014 Copyright Art Store</span></p>
</div>
</footer>
</body>
</html>
**************************
Google Fonts used:
Font family used in "Art Store":
Rammetto One
Font Family used in Copyright statement in footer:
Open Sans Condensed
I haved added links to index.html, artists.html and work.html
Search form uses GET action and Contact form uses a POST action for its functioning.
Hopefully, this is all you asked for !
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.