HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids and have come across a snag. I need this:
To look more like this....
It does not really need to be perfect as far as scaling, at this point I just want the yellow box in the corner with borders like the pic. Also the original pic has white borders that we are ignoring.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="css/styles.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<!-----TOP ROW----->
<div class="row my-row">
<div class="col-3 top-left">
1
</div>
<!-----BORDER VERT------------>
<div class="row my-row-borderh">
<div class="col-1 border-vert"></div>
</div>
<!---------TOP RIGHT---------------->
<div class="col-9 top-right">2</div>
</div>
<div class="row my-row-mid">
<div class="col-12 border-horz"></div>
</div>
<!-------BOTTOM ROW-------->
<div class="row my-row-2">
<div class="col-3 bottom-right">3</div>
<!-----BORDER VERT------------>
<div class="row my-row-borderh">
<div class="col-1 border-vert"></div>
</div>
<!--------------4--------------->
<div class="col-7 bottom-middle">4</div>
<!-----BORDER VERT------------>
<div class="row my-row-borderh-2">
<div class="col-1 border-vert"></div>
<div class="col-2 bottom-corner-tp">5</div>
</div>
<div class="col-2 bottom-corner-bt">6</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS
-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
CSS
body{
background-color: #ddd;
}
.container{
height: 380px;
width: 655px;
background: #fff;
}
.top-right{
color: #000;
background-color: #d72e35;
}
.my-row{
height: 45%;
}
.my-row-2{
height: 50%;
}
.my-row-borderh{
height: 100%;
}
.my-row-borderh-2{
height: 40%;
}
.top-left{
background-color: #fdf4db
}
.bottom-right{
background-color: #327bd1;
}
.bottom-middle{
background-color: #fdf4db;
}
.border-vert{
background-color: #000;
}
.border-horz{
background-color: #000;
height: 20px;
}
.bottom-corner-tp{
background-color: #fdf4db;
height: 40%;
}
.bottom-corner-bt{
background-color: #f9d649;
height: 50%;
}
Homework Answers
Dear Student ,
As per the requirement submitted above , kindly find the below solution.
Here a new web page with name "home.html" is created, which contains following code.
home.html :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="css/styles.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<!-----TOP ROW----->
<div class="row my-row">
<div class="col-3 top-left">
1
</div>
<!-----BORDER VERT------------>
<div class="row my-row-borderh">
<div class="col-1 border-vert"></div>
</div>
<!---------TOP RIGHT---------------->
<div class="col-9 top-right">2</div>
</div>
<div class="row my-row-mid">
<div class="col-12 border-horz"></div>
</div>
<!-------BOTTOM ROW-------->
<div class="row my-row-2">
<div class="col-3 bottom-right">3</div>
<!-----BORDER VERT------------>
<div class="row my-row-borderh">
<div class="col-1 border-vert"></div>
</div>
<!--------------4--------------->
<div class="col-6 bottom-middle">4</div>
<!-----BORDER VERT------------>
<div class="row my-row-borderh">
<div class="col-1 border-vert"></div>
</div>
<!-- column third in last row -->
<div class="col-3">
<!-- divide column into two equal rows -->
<!-- row1 -->
<div class="row my-row">
<div class="col-12 bottom-corner-tp">5</div>
</div>
<!-- border horizontal -->
<div class="row my-row-mid">
<div class="col-12 border-horz"></div>
</div>
<!-- row 2 -->
<div class="row my-row">
<div class="col-12 bottom-corner-bt">6</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS
-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
*****************************************
styles.css :
body{
background-color: #ddd;
}
.container{
height: 380px;
width: 655px;
background: #fff;
}
.top-right{
color: #000;
background-color: #d72e35;
}
.my-row{
height: 45%;
}
.my-row-2{
height: 50%;
}
.my-row-borderh{
height: 100%;
}
.my-row-borderh-2{
height: 40%;
}
.top-left{
background-color: #fdf4db
}
.bottom-right{
background-color: #327bd1;
}
.bottom-middle{
background-color: #fdf4db;
}
.border-vert{
background-color: #000;
}
.border-horz{
background-color: #000;
height: 20px;
}
.bottom-corner-tp{
background-color: #fdf4db;
height:100%;
}
.bottom-corner-bt{
background-color: #f9d649;
height: 100%;
}
======================================================
Output : Open page in the browser and will get the screen as shown below
Screen 1 : Home.html
NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.
Add Answer to:
HTML/CSS/ Bootstrap grids to create image
I am attemted to recreate a photo using bootstrap grids...
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html>...
Hi Expert I need to make a html checkout page link from product page <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="./bootstrap/js/bootstrap.js"></script> <meta charset="UTF-8"> <title>Perry Gerry Mobile Cellular</title> </head> <body> <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 bg-white border-bottom shadow-sm"> <h5 class="my-0 mr-md-auto font-weight-normal">Perry Gerry Mobile Cellular</h5> <nav class="my-2 my-md-0 mr-md-3"> <a class="p-2 text-dark" href="index.html">Home</a> <a class="p-2 text-dark" href="about.html">About Us</a> <a class="p-2 text-dark" href="products.html">Products</a> <a class="p-2 text-dark"...
I'm having trouble to link the .js file to the html so changes for the html...
I'm having trouble to link the .js file to the html so changes for the html to be made in the .js file <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>:JavaScript, HTML and jQuery</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- this is so I don't have to give you a separate CSS file --> <style> .hidden {display: none;} .menu { width: 100px;} </style> </head> <body> <div class="container"> <h1>Assignment 2: JavaScript, HTML and jQuery</h1> <p>To complete this...
Look at the following illustrated output for an HTML and a css given below <!DOCTYPE html>...
Look at the following illustrated output for an HTML and
a css given below
<!DOCTYPE html>
<head>
<title>TABLE with STYLE
SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage
original" />
<link rel = "stylesheet"
href="GoDaddy_assignment_1.css">
<body>
<img src= "GoDaddy.png"/>
<p>Welcome
to:<strong>webhamster.com</strong></br>
This web page is
parked<strong>Free</strong>courtesy of
<a class="aclass1" href
="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class
="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2"
href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<button>Search Ads</button>
</body>
</html>
“
QUESTION continued Given the corresponding css
file
.aclass1{color:purple;}...
Trying to understand java script.. The code provided prints out a game board of cells that...
Trying to understand java script.. The code provided prints out
a game board of cells that are 10 x 10. I currnetly
have it printed out so that it will print out pink squares. how can
i create a click even on any of the pink squares that when they are
clicked it will turn the square black... then any
square that is black when it is clicked it will change back to the
color pink
html/js code and css...
In my HTML and CSS project I want to apply a picture to the bottom right...
In my HTML and CSS project I want to apply a picture to the bottom right corner... can I get help on how to do this (ie code and a good example)? Here is a sample of my css code: CSS: html { background: url(jb_back2.png) center center / cover no-repeat fixed; } body { max-width: 960px; margin-left: auto; margin-right: auto; /*display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex;*/ display: flex; ...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i...
HTML css When i refresh the page, the picture doesnt move at all for #i1 i have width and height but the pictuers doesn't move please fix it. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> <style> body{ background-color:#FFA07A; } #h1{ color:white; text-decoration:none; padding:30px; } #h2{ color:white; text-decoration:none; padding:30px; } #navbar1{ background-color:grey; text-align:center; font-size:35px; height:100%px; border:1px solid black; position:absolute; text-decoration:none; margin-left:300px; } #h3{ color:white; text-decoration:none; padding:30px; } #b1{ background-color:grey; font-size:30px; } i1{ width:10px; height:20px; } </style> <body> <div...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code...
As part of this assignment we are using the base Gallery HTML and writing JavaScript code that will: 1) preload the images provided to us, 2) Create rollover functionality for each of the thumbnails in your image gallery 3) Use appropriate images found in the images folder. 4) Write developer comments to describe the variables being declared and explain the functions and logical blocks of JavaScript code pertaining to the gallery. I know it has to be an external JS...
How do i make my html show 10 results per page, and how do i make...
How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...
I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...
I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...
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"...
Look at the following illustrated output for an HTML and
a css given below
<!DOCTYPE html>
<head>
<title>TABLE with STYLE
SHEET</title>
<meta charset="utf-8" />
<meta name="description" content="Godaddy Webpage
original" />
<link rel = "stylesheet"
href="GoDaddy_assignment_1.css">
<body>
<img src= "GoDaddy.png"/>
<p>Welcome
to:<strong>webhamster.com</strong></br>
This web page is
parked<strong>Free</strong>courtesy of
<a class="aclass1" href
="https://www.godaddy.com">GoDaddy.com</a></p>
<h1>Want to buy<span class
="span2">webmaster.com ?</span></h1>
<div class ="div1">
<a class ="aclass2"
href="https://www.godaddy.com">Learn How</a>
</div>
</hr>
<button>Search Ads</button>
</body>
</html>
“
QUESTION continued Given the corresponding css
file
.aclass1{color:purple;}...
Trying to understand java script.. The code provided prints out
a game board of cells that are 10 x 10. I currnetly
have it printed out so that it will print out pink squares. how can
i create a click even on any of the pink squares that when they are
clicked it will turn the square black... then any
square that is black when it is clicked it will change back to the
color pink
html/js code and css...
Most questions answered within 3 hours.
-
Tennis champion Maria Sharapova is capable of serving a tennis
ball at 126 mph.
b) What...
asked 1 minute ago -
The electric potential V in the space between the plates of a
given vacuum tube is...
asked 10 minutes ago -
The Hydroboration-Oxidation of an Alkene to Yield 1-Octanol.
1-octene to 1-octanol using BH3-THF
What might be...
asked 15 minutes ago -
You draw and keep a single bill from a hat that contains a
$11, $55, $20...
asked 32 minutes ago -
Write a Java program that has the following methods:
findSum - a method that takes in...
asked 33 minutes ago -
A coffee cup calorimeter initially contains 135g of water at
22.0oC. Calcium chloride (21.0g) at the...
asked 36 minutes ago -
A patient is having a magnetic resonance imaging scan (an MRI)
and has neglected to remove...
asked 38 minutes ago -
A student takes a multiple-choice test that has 10 questions.
Each question has two choices. The...
asked 1 hour ago -
Willie Keeler has a lifetime batting average of 0.341. Assume
that Willie Keeler came to bat...
asked 1 hour ago -
Which of the following has the highest boiling point?
A) 0.5m NaCl
B) 0.5m C6H12O6
C)...
asked 1 hour ago -
12. A firm is producing at an output level where
AR = MC > AC >...
asked 1 hour ago -
Radovilsky Manufacturing Company, in Hayward, California,
makes flashing lights for toys. The company operates its production...
asked 1 hour ago