Question

Style a blog post with HTML and CSS (you can use the W3C editor to test...

Style a blog post with HTML and CSS (you can use the W3C editor to test it) and then send the code pasted.

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

<!DOCTYPE html>

<html>

<head>

<style>

* {

box-sizing: border-box;

}

body {

font-family: Arial;

padding: 20px;

background: #f1f1f1;

}

.header {

padding: 30px;

font-size: 40px;

text-align: center;

background: white;

}

.leftcolumn {

float: left;

width: 75%;

}

.rightcolumn {

float: left;

width: 25%;

padding-left: 20px;

}

.fakeimg {

background-color: #aaa;

width: 100%;

padding: 20px;

}

.card {

background-color: white;

padding: 20px;

margin-top: 20px;

}

.row:after {

content: "";

display: table;

clear: both;

}

.footer {

padding: 20px;

text-align: center;

background: #ddd;

margin-top: 20px;

}

@media screen and (max-width: 800px) {

.leftcolumn, .rightcolumn {

width: 100%;

padding: 0;

}

}

</style>

</head>

<body>

<div class="header">

<h2>Blog Name</h2>

</div>

<div class="row">

<div class="leftcolumn">

<div class="card">

<h2>TITLE HEADING</h2>

<h5>Title description, Dec 7, 2017</h5>

<div class="fakeimg" style="height:200px;">Image</div>

<p>Some text..</p>

<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

</div>

<div class="card">

<h2>TITLE HEADING</h2>

<h5>Title description, Sep 2, 2017</h5>

<div class="fakeimg" style="height:200px;">Image</div>

<p>Some text..</p>

<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

</div>

</div>

<div class="rightcolumn">

<div class="card">

<h2>About Me</h2>

<div class="fakeimg" style="height:100px;">Image</div>

<p>Some text about me in culpa qui officia deserunt mollit anim..</p>

</div>

<div class="card">

<h3>Popular Post</h3>

<div class="fakeimg">Image</div><br>

<div class="fakeimg">Image</div><br>

<div class="fakeimg">Image</div>

</div>

<div class="card">

<h3>Follow Me</h3>

<p>Some text..</p>

</div>

</div>

</div>

<div class="footer">

<h2>Footer</h2>

</div>

</body>

</html>

Add a comment
Know the answer?
Add Answer to:
Style a blog post with HTML and CSS (you can use the W3C editor to test...
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
  • HTML CSS embedded style sheet

    Write an example of HTML CSS code for an embedded style sheet that configures a class called new that is bold and italic.

  • 1 Mark Learning Outcome(s): Identify most HTML tags and CSS properties and use a text editor...

    1 Mark Learning Outcome(s): Identify most HTML tags and CSS properties and use a text editor to construct the basic HTML and CSS structure for a webpage. Question One Write Step by Step Instruction for creating a new Website. What are the Technologies & Tools needed for creating your Web Site? web design

  • 1. An _____ lets you place all of your CSS style definitions within one file that...

    1. An _____ lets you place all of your CSS style definitions within one file that you then reference from within each of your HTML page files. Group of answer choices external style set external sheet external style sheet external set sheet 2. Why should a designer use an external style sheet? Select all that apply. Group of answer choices One file controls all style elements for the entire website Removes the need to use HTML Make changes quickly External...

  • I need html and CSS code to create an Ice Cream Shop website . Thank you

    I need html and CSS code to create an Ice Cream Shop website . Thank you

  • You will use your text editor to create a table and apply table styles. First, you...

    You will use your text editor to create a table and apply table styles. First, you insert a table element. Next, you add a table caption, table rows, table headers, and table data. Then, you create style rules to format the table. Work with the apply08.html file and the applystyles08.css file. You will also use professional web development practices to indent, space, comment, and validate your code. 3. In the apply08.html file, add a table element within the main element....

  • HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page,...

    HTML/CSS: Modify the table you created in hands-on exercise 8.1 to be centered on the page, use a background color of #CCCC99, and display text in arial or the browser default sans-serif font. Configure this table using CSS instead of obsolete HTML attributes. Place an e-mail link to yourself on the web page. Save the file as mytable.html. HERE IS THE CODE FOR 8.1: <!DOCTYPE html> <html lang="en"> <head> <title>Practice with Tables</title> <meta charset="utf-8"> </head> <body> <table border="1" > <caption>School...

  • Question 1 To remove the underlining from an <a> element, you can use CSS to set...

    Question 1 To remove the underlining from an <a> element, you can use CSS to set its A. text-decoration property to none B. text-decoration property to off C. underline property to none D underline property to off Question 2 You can use the CSS list-style-type property to change A. the bullet style in an unordered list B the number style in an ordered list C the terms style in a description list Dthe bullet or number style in an unordered...

  • Question 1 To remove the underlining from an <a> element, you can use CSS to set...

    Question 1 To remove the underlining from an <a> element, you can use CSS to set its A. text-decoration property to none B. text-decoration property to off C. underline property to none D underline property to off Question 2 You can use the CSS list-style-type property to change A. the bullet style in an unordered list B the number style in an ordered list C the terms style in a description list Dthe bullet or number style in an unordered...

  • HTML and css using notepad++ WHen you run the code, you will see a horizontal menue...

    HTML and css using notepad++ WHen you run the code, you will see a horizontal menue with several options. I want a small horizontal line between each option. I also want that done using div inside a div. Thank you <!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;...

  • make a interactive website from scratch. using code. html, css. I want it to be about...

    make a interactive website from scratch. using code. html, css. I want it to be about people on   Dialysis, and how we can help to make them more comfortable. Thank you for your help.

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
ADVERTISEMENT