Question

Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different...

  1. Create your own grid-based page using the sample HTML.
  2. Generate a Grid ( Experiment with Different Tools ) http://gridcalculator.dk/
  3. Implement grid on the sample html file using pixels
  4. Convert to a percentage-based grid

HTML


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Out with the old...</title>
<link rel="stylesheet" href="path-to-style.css">
<meta name="description" content="We are going to refine this document down to a good starting point for all html5 projects moving forward.">
<meta name="author" content="ABC">
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div class="container cf">
<header class="primary col-12" role="banner">
<h1>Out with the old...</h1>
<h2>Beginning the transistion to HTML5</h2>
<nav class="primary" role="navigation">
<ul>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</nav>
</header>
<main>
<section id="content" class="col-6">
<article class="post">
<header>
<time datetime="2019-01-31" class="post-date">January 31, 2019</time>
<h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
</header>
<p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
<h2>The Sith Lords</h2>
<p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
<ul>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
</ul>   
<footer class="post-meta"> Post Tags Go here.... </footer>
</article>
<article class="post">
<header>
<time datetime="2019-01-31" class="post-date">January 31, 2019</time>
<h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
</header>
<p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
<h2>The Sith Lords</h2>
<p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
<ul>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
</ul>   
<footer class="post-meta"> Post Tags Go here.... </footer>
</article>
<article class="post">
<header>
<time datetime="2019-01-31" class="post-date">January 31, 2019</time>
<h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
</header>
<p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
<h2>The Sith Lords</h2>
<p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
<ul>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
</ul>   
<footer class="post-meta"> Post Tags Go here.... </footer>
</article>
</section>
<aside role=”complementary”>
<div class="widget">
<h1>Sample Sidebar Item </h1>
<p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
</div>
<div class="widget">
<h1>Sample Sidebar Item </h1>
<p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
</div>
<div class="widget">
<h1>Sample Sidebar Item </h1>
<p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
</div>
</aside>
</main>
<!--#content -->
<footer role="contentinfo" id="colophon">
<p>&copy; 2019 <a href="#">ABC</a></p>
</footer>
</div>
<!--.container -->
</body>
</html>

CSS

/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

/*Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
/* Start of "Micro clearfix" */

.cf { zoom: 1; }
.cf:before, .cf:after {
content: ""; display: table;
}
.cf:after { clear: both; }

/* End of "Micro clearfix" */

.container {
width:960px;
background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/7248/grid-1.png");
margin:20px auto;
border:1px solid black
}

header.primary, footer#colophon{
/*width:920px;*/
width:95.833333333%;
background:grey;
float:left;
/*margin:20px;*/
margin-left:2.083333333%;
}

#content{
/*width:544px;*/
width:56.666666666%;
background:grey;
float:left;
margin-left:2.083333333%;
/*padding:20px;*/
padding:3.676470588%;
  
}

aside{
/*width:356px;*/
width:37.083333333%;
background:grey;
float:left;
margin-left:2.083333333%;
/*padding:20px;*/
padding:5.617977528%;
}

/* utility grid classes */
.col-4{
width:356px;
background:grey;
float:left;
margin-left:20px;
}

.col-6{
width:544px;
background:grey;
float:left;
margin-left:20px;
}

.col-12{
width:920px;
background:grey;
float:left;
margin:20px;
}

0 0
Add a comment Improve this question Transcribed image text
Answer #1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Out with the old...</title>
<link rel="stylesheet" href="path-to-style.css">
<meta name="description" content="We are going to refine this document down to a good starting point for all html5 projects moving forward.">
<meta name="author" content="ABC">
<link rel="shortcut icon" href="/favicon.ico" />
</head>
<body>
<div class="container cf">
<header class="primary col-12" role="banner">
<h1>Out with the old...</h1>
<h2>Beginning the transistion to HTML5</h2>
<nav class="primary" role="navigation">
<ul>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
<li><a href="#">LINK</a></li>
</ul>
</nav>
</header>
<main>
<section id="content" class="col-6">
<article class="post">
<header>
<time datetime="2019-01-31" class="post-date">January 31, 2019</time>
<h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
</header>
<p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
<h2>The Sith Lords</h2>
<p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
<ul>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
</ul>   
<footer class="post-meta"> Post Tags Go here.... </footer>
</article>
<article class="post">
<header>
<time datetime="2019-01-31" class="post-date">January 31, 2019</time>
<h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
</header>
<p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
<h2>The Sith Lords</h2>
<p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
<ul>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
</ul>   
<footer class="post-meta"> Post Tags Go here.... </footer>
</article>
<article class="post">
<header>
<time datetime="2019-01-31" class="post-date">January 31, 2019</time>
<h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
</header>
<p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
<h2>The Sith Lords</h2>
<p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
<ul>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
<li>Hey, Luke! May the Force be with you.</li>
<li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
</ul>   
<footer class="post-meta"> Post Tags Go here.... </footer>
</article>
</section>
<aside role=”complementary”>
<div class="widget">
<h1>Sample Sidebar Item </h1>
<p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
</div>
<div class="widget">
<h1>Sample Sidebar Item </h1>
<p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
</div>
<div class="widget">
<h1>Sample Sidebar Item </h1>
<p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
</div>
</aside>
</main>
<!--#content -->
<footer role="contentinfo" id="colophon">
<p>&copy; 2019 <a href="#">ABC</a></p>
</footer>
</div>
<!--.container -->
</body>
</html>

CSS

/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

/*Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
/* Start of "Micro clearfix" */

.cf { zoom: 1; }
.cf:before, .cf:after {
content: ""; display: table;
}
.cf:after { clear: both; }

/* End of "Micro clearfix" */

.container {
width:960px;
background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/7248/grid-1.png");
margin:20px auto;
border:1px solid black
}

header.primary, footer#colophon{
/*width:920px;*/
width:95.833333333%;
background:grey;
float:left;
/*margin:20px;*/
margin-left:2.083333333%;
}

#content{
/*width:544px;*/
width:56.666666666%;
background:grey;
float:left;
margin-left:2.083333333%;
/*padding:20px;*/
padding:3.676470588%;
  
}

aside{
/*width:356px;*/
width:37.083333333%;
background:grey;
float:left;
margin-left:2.083333333%;
/*padding:20px;*/
padding:5.617977528%;
}

/* utility grid classes */
.col-4{
width:356px;
background:grey;
float:left;
margin-left:20px;
}

.col-6{
width:544px;
background:grey;
float:left;
margin-left:20px;
}

.col-12{
width:920px;
background:grey;
float:left;
margin:20px;
}

Add a comment
Know the answer?
Add Answer to:
Create your own grid-based page using the sample HTML. Generate a Grid ( Experiment with Different...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions
  • Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we ...

    Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we talked about fluid and fixed layouts. If I was given the below code. Does that fluid or fixed layouts, and how did you indicate that? Explain your answer <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Mount Olympus News</title> <style type="text/css"> #wrapper {             width: 960px;             outline: #ff7900 2px dashed; } #main {             float: left;             width: 650px;             margin: 0 20px;            ...

  • Kindly assist in fixing the error i got when I pasted my codes to validate it....

    Kindly assist in fixing the error i got when I pasted my codes to validate it. The error is in bold. Error: Table column 2 established by element th has no cells beginning in it. From line 53, column 25; to line 55, column 40 <tr> <th colspan="2"> <!DOCTYPE HTML> <html lang="en"><!-- language is English-->    <head>    <meta charset="utf-8"/>    <title>DA Website</title>    <link rel="stylesheet" type="text/css" href="styles.css" />    </head>    <body>    <div id="wrapper">    <!-- start html...

  • Hello, I was wondering if you could possibly think of ways to improve my home page then I would l...

    Hello, I was wondering if you could possibly think of ways to improve my home page then I would like you to do so. I know it could be better. Thank you. index.html <!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"> <title>Untitled Document</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <link href="style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <nav class="navbar...

  • Form for a user to enter billing and shipping information. A checkbox that when clicked copies...

    Form for a user to enter billing and shipping information. A checkbox that when clicked copies all of the billing information to the shipping information. A submit button that, when clicked, will make sure that all text fields have had data entered into them. Create your own validation in for the fields, No automatic browser validation. JavaScript/HTML <!DOCTYPE html> <html lang="en"> <head> </head> <body>    <div class="container">       <header>          <h1>                      </h1>       </header>       <nav>          <ul>...

  • Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to...

    Hello, I am designing a website for my class. I am using HTML/CSS/Jscript. I need to have my text in the body, white. All text and the picture centered but how do I have margins on the left and right side?. I have a figcaption and I dont know have to place it under the picture but I am having a hard time. Can you help me? Thank you! HTML <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"...

  • Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page:...

    Path of Light Yoga Chapter 7 Please help!! Here is my code for the index page: <html lang="en"> <head> <title>Path of Light Yoga Studio</title> <link rel="stylesheet" href="yoga.css" /> </head> <body> <div id="wrapper"> <header> <h1>Path of Light Yoga Studio</h1> </header> <nav> <a href="index.html">Home</a> &nbsp; <a href="classes.html">Classes</a> &nbsp; <a href="schedule.html">Schedule</a> &nbsp; <a href="contact.html">Contact</a> </nav> <main> <img class="floatleft" src="yogadoor2.jpg" alt="yogadoor2" height="300px" width="250px"> <h2>Find Your Inner Light</h2> <p> Path of Light Yoga Studio provides all levels of yoga practice in a tranquil, peaceful environment....

  • Please edit and add all the code needed to make the images side by side and to put the buttons in...

    Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.html <!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"> <title>Untitled Document</title> <!-- Bootstrap -->    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">    <link href="style.css" rel="stylesheet" type="text/css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header>    <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE...

    How do I get my HTML and CSS to look similar to this mockup? HTML: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>nitro site</title>     <link href="css/main.css" rel="stylesheet"/> </head> <body>     <header class="header">     <section class="navlist">         <img class="logo" src="assets/logobeans.png"/>         <h2 class="headertitle">nitro</h2>     <nav>         <ul>             <li><a href="index.html" target="_parent">About</a></li>             <li><a href="/html/menu.html" target="_blank">Menu</a></li>             <li><a href="/html/menu.html">Shop Now</a></li>         </ul>     </nav>     </section>     <section class="headerContainer">         <h1 class="heading">Nitro Coffee</h1>         <p class="productDesc">Coffee is a brewed drink prepared from roasted coffee beans, the seeds of berries from certain Coffea species.</p>...

  • This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in...

    This assignment require using different Bootstrap classes for styling. I have used some "class=" (bootstrap) in code, but they don't work. In HTML, we need to add < link > to display bootstrap, but I don't know what to do in PHP. <?php $servername = "fdb29.awardspace.net"; $username = "3515976_assignment9"; $password = "Becky516."; $database = "3515976_assignment9"; $port = "3306"; // Create connection $dbconn = mysqli_connect($servername, $username, $password, $database, $port); if($dbconn){ }else{ die("Connection Failed: ".mysqli_connect_error()); } $myQuery = "SELECT p_name, p_desc, p_img,...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT