I'm unsure of the steps to take to complete this task. Thank you

Make sure to create a container DIV with the CSS class of "menu". Inside this .menu DIV, there should be 4 additional DIV elements, each having a class of "item".

Every .item DIV needs to have an IMAGE element that displays a placeholder image from , and also include a PARAGRAPH with a class of "mdc-typography--headline6".

I've included the code below, but commented out the actual placeholder images since I'm unable to post them at the moment. Any help would be greatly appreciated!

<div class="item">

            <!--<img src="https://via.placeholder.com/150" />-->

      <p1 class="mdc-typograpy--headline6"></p1>
    </div>

    <div class="item">

      <!--  <img src="http://via.placeholder.com/150"/> --->

      <p1 class="mdc-typograpy--headline6"></p1>
    </div>

    <div class="item">

        <!--<img src="http://via.placeholder.com/150"/>--->

      <p1 class="mdc-typograpy--headline6"></p1>
    </div>

    <div class="item">

        <!--<img src="http://via.placeholder.com/150"/>--->

      <p1 class="mdc-typograpy--headline6"></p1>
    </div>
  </div>
htmlcss

Answer №1

Here's the corrected code snippet: <p> instead of <p1>

<div class="menu">
   <div class="item">
      <img src="https://via.placeholder.com/150"/> 
      <p class="mdc-typograpy--headline6"></p>
   </div>

   <div class="item">
      <img src="https://via.placeholder.com/150"/> 
      <p class="mdc-typograpy--headline6"></p>
   </div>

   <div class="item">
      <img src="https://via.placeholder.com/150"/> 
      <p class="mdc-typograpy--headline6"></p>
   </div>

   <div class="item">
      <img src="https://via.placeholder.com/150"/> 
      <p class="mdc-typograpy--headline6"></p>
   </div>
</div>

Answer №2

It seems like you are having trouble formatting your paragraphs correctly. Remember to start a paragraph with <p> and close it with </p>. For headers, use <h1> at the beginning and </h1> at the end.

<html>
<head>
</head>
<body>
<div class="item">

    <img src="http://via.placeholder.com/150"/> 

  <p >mdc-typograpy--headline6</p>
</div>

<div class="item">

   <img src="http://via.placeholder.com/150" > 
   <p>mdc-typograpy--headline6</p>
</div>

<div class="item">

    <img src="http://via.placeholder.com/150"/>

  <p >mdc-typograpy--headline6</p>
</div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Support for a few breakpoints within Bootstrap

I am tasked with creating only 2 breakpoints for a specific application. These 2 breakpoints are <=768 for mobile and >=1280 for desktop. (No Tablet breakpoint) How do I adjust the $grid-breakpoints to accommodate this setup? I think it should be d ...

csstwitter-bootstrapsassbootstrap-4

What steps can I take to set a default value for a select tag if the option value is not a specific value?

<select name="corequisite"> <option value="" selected="selected">No Corequisite</option>'; $res = mysqli_query("SELECT * FROM course"); while($row = mysqli_fetch_array($res)){ echo'<option value="'.$row['Code&ap ...

phphtmlmysql

The page displays a pair of vertical scrolling bars

My webpage is displaying two scrollbars on the right side of the browser, but I only want one scrollbar. Can anyone help me fix this issue? Thank you for any assistance. html, body { margin: 0; background-image: url("images/background.png"); ...

htmlcss

What could possibly be the issue here? The error message I received is: "Error: INSERT INTO.... Unknown column 'jon' in 'field list'"

When attempting to input form data into my database, I encountered two distinct errors. Initially, an error related to SQL syntax appeared: "Error: INSERT INTO movie (firstname, surname, phonenumber, email, movie, session, day) values(jon, doe, <a href ...

phphtmlmysqldatabasephpmyadmin

"In Internet Explorer, the option tag can be set to display as either block or

Here is an updated issue related to my previous question. I currently have a flawless code (DEMO) that works perfectly in Chrome and Firefox. However, it does not function properly in Internet Explorer. This is because IE does not support the use of displ ...

javascriptjqueryhtmlcssinternet-explorer

the php renderer fails to take into account the styles

Trying to convey this as clearly as possible. I have the variables below: $name = main channel and $childs = sub channels. When I remove the childs from the HTML, only the main channel shows up - which is expected. However, when attempting to style the su ...

phphtmlcss

Is Your Website Sluggish because of an Excessive Amount of JavaScript on Page

After finally resolving some of the Javascript issues I was facing, I have streamlined my code to utilize just one library now, which is a huge improvement from how chaotic it was before. However, I have noticed a slight delay in the page load time, and I ...

javascriptjqueryhtmlaudiolightbox

Steps for arranging text in a dropdown list option

How can I format 3 words in a dropdownlist option so they are aligned properly? eg. <option value="1">ABCDE - ALPHA</option <option value="2">1234 - NUMERIC</option> <option value="3">ABC123 - ALPHANUMERIC</option> I woul ...

cssalignment

Assistance with HTML Design

Can someone please assist me with HTML styling? Here is the situation: <div id="hidden" style="display: none;"> <label>URL:</label> <input type="text" name="url" size="50"/><br/> <input type="button" id="button2" value="U ...

html

Combining dropdowns, nav-pills, and separate links in Bootstrap 4 to create a seamless horizontal layout

Trying to achieve a layout in Firefox where everything is displayed in one single horizontal row. This includes the label Dropdown, dropdown box itself, bootstrap nav-pills menu, and separate link. Code snippet: (jsfiddle: https://jsfiddle.net/aq9Laaew/16 ...

csshtmlbootstrap-4

`Adjusting video frame on canvas`

When I capture video from a user's camera and display it in a 1:1 square, I encounter an issue when trying to draw the picture to a canvas. The image is not drawn in the same location on the canvas. How can I resolve this problem? To see a live examp ...

javascripthtmltypescript

Difficulty with the width of the HTML5 video player frame

My website features multiple user-submitted videos with different content, resulting in varying frame widths and heights. For instance: (Video 1) - Frame width: 1280. (Video 2) - Frame width: 480. Frame height: 360. The issue arises when a video with a ...

javascripthtmlcssvideo

AngularJS inputs using ng-model should be blank when in the pristine state

Check out this input element within an HTML form: <input ng-model="amount" /> Currently, the input displays as $scope.amount = 0 in the controller. I want to start with a blank input field instead. This way, users can easily input data without havi ...

htmlbindinginputangularjs

Is there a way to programmatically retrieve the SVG rendered by D3?

I'm working on a project with a page that utilizes javascript to render a map in SVG using d3. My goal is to automatically obtain a copy of the HTML + SVG generated by this page. Simply curling the server does not work as it only returns the HTML befo ...

javascripthtmlsvgd3.jszombie.js

Varying hero background images for desktop and mobile users

My website features a hero section with a background image and a title. The image size is 1920x500px. https://i.sstatic.net/4zUY2.jpg <section class="bgimage d-flex align-items-center " style="background-image:linear-gradient(rgba(0, 0, ...

htmlcssbootstrap-4responsive-design

How to place a div within another div without using absolute positioning

I've been searching for a solution to this issue, but nothing seems to be working. I want the inner div to be positioned at the bottom of the outer div, with a 5px margin separating them. However, using absolute positioning disrupts the width and cent ...

jqueryhtmlcss

Aligment issues in columns on Bootstrap 5

I currently have a layout using Bootstrap 5 with multiple rows and columns. My goal is to have the columns aligned within each row, but I am experiencing issues where some borders are not lining up correctly with the columns. .VI-border { border-t ...

htmlcssbootstrap-5

Manipulating video volume using JavaScript injection

My web page includes a video, and I have successfully used JavaScript injection to control the play/pause functionality. Now, I am looking to also adjust the volume based on percentage. How can I create a function that decreases or increases the volume acc ...

javascripthtmljavascript-injection

Creating a Unique Header Navigation Menu on Your WordPress Premium Theme

I recently faced an issue with my premium WordPress theme's navigation menu on the header. Whenever I clicked on it, it wouldn't redirect to the intended page. After some troubleshooting in the Google Chrome element editor, I managed to solve the ...

phphtmlcsswordpress

Transfer your WAMP HTML/CSS/JS to Node effortlessly and seamlessly

If there is an HTML file along with its associated CSS, JS, and image files in Wamp, what is a fast method to serve this using Node.js? Let's say the file is index.html. ...

htmlnode.js