HTML ans CSS Sample Webpage creation Instructions Create a webpage in JSBin. Use
ID: 3788256 • Letter: H
Question
HTML ans CSS Sample Webpage creation
Instructions
Create a webpage in JSBin. Use HTML and CSS to get the layout and styling matching the image below.
Make sure to save your JSBin iterations, using File -> Save Snapshot (Ctrl+S on Windows, Cmd+S on Mac).
Extra information:
You can do it using JSbIn using HTML and CSS. Instead of the empty squares I need an image (random image) there for all four squares.
Please leave your HTML and CSS work using JSbin preferably.
Preferably using JSBin.com to do the codin for how to make that exact website. JSBin is a website that allows you to type your code much easier. If this is not possible you can just do the html on google along with the CSS and leave it as an answer.
This is what JSBin.com looks like.
My homepage Title Title Title Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit, consectetur adipisicing elit, consectetur adipisicing elit sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut labore et dolore magna aliqua ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididumt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetu adipisicing elit, r sed do eiusmod tempor incididunt ut labore et dolore magna aliquaExplanation / Answer
i created 3 html pages so modify the page as you needed.
mainPage.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body{
background-color: blue;
}
h1{
text-align:center;
}
</style>
</head>
<body align="center">
<h1 > My homepage </h1>
<div class="top">
<iframe height="300px" width="300px" src="imgSrc.html" name="iframe_a"> </iframe>
<iframe height="300px" width="300px" src="imgSrc.html" name="iframe_a"></iframe>
<iframe height="300px" width="300px" src="imgSrc.html" name="iframe_a"></iframe> <br>
</div>
<iframe height="190px" width="70%" src="imgSrcBottom.html" name="iframe_b"></iframe>
<p> Add your customized image and data </p>
</body>
</html>
imgSrc.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<body align="center">
<img src="1.jpg" alt="image">
<h3>Tiger</h3>
<p> Add your customized image and data </p>
</body>
</html>
imgSrcBottom.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<body >
<img src="1.jpg" alt="image">
<p> Add your customized image and data </p>
</body>
</html>
NOTE :
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.