What is the best way to arrange four HTML elements in two rows, with two elements on each row?

I'm trying to figure out a way to display a phone icon and number on one line, as well as an email icon and address on another line.

body {
  font-family: 'Open Sans', sans-serif;
  background: #20b2aa;
}

h1 {
  font-size: 40px;
  color: white;
  background: black;
  width: 600px;
  margin: auto;
}

.info {
  background: white;
  width: 600px;
  height: 150px;
  margin: auto;
}

#phoneNumber, #emailAddress {
  padding-top: 5px;
  padding-bottom: 5px;
}

img {
  background: red;
}

p {
  background: green;
}
<h1>Contact Me</h1>
<div class="info">
  <h3>Eugene</h3>
  <img id="phoneImage" src="img/phone.png">
  <p id="phoneNumber">(800) 123-4000</p>
  <img id="envelopeImage" src="img/envelope.png" alt="">
  <p id="emailAddress"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65160a080004010117001616250208040c094b060a08">[email protected]</a></p>
</div>

Check out the screenshot of my current progress below:

htmlcss

Answer №1

To create a visually appealing list with icons and text, you have several options. One approach is to insert an image element (img) within each list item (li). Alternatively, you can take a more CSS-centric approach by using pseudo-elements for the icons. This way, if you need to replicate this format elsewhere, you simply assign a class to the li element.

.contact-info {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-info .phone::before,
.contact-info .email::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 0.25rem;
  vertical-align: middle;
}

.contact-info .phone::before {
  background-image: url( 'http://placehold.it/10x10/fc0' );
}

.contact-info .email::before {
  background-image: url( 'http://placehold.it/10x10/' );
}
<h1>Get in Touch</h1>

<h3>John Doe</h3>
<ul class="contact-info">
  <li class="phone">(800) 123-4567</li>
  <li class="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="44453f5d5456454b47495449541e535f5d">[email protected]</a></li>
</ul>

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

Switch up the background hue of a multi-level dropdown menu in Bootstrap 5

Has anyone attempted to modify the background color in a multi-dropdown menu using Bootstrap 5? You can find the original code here. I am looking to change the background color for visited/active items in a multi-level dropdown menu. The code snippet belo ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to transfer the value of a <span> element to a different <div> using jQuery or JavaScript

Is there a way to move or copy the price and insert it into the <div class="info"> using jQuery? The code I'm currently using is returning an unexpected result of "102030". jQuery(document).ready(function($) { $(document).ready ...

javascripthtmljquery

Left-align the tab elements

I am looking to customize this example for Vertical tabs. Sandbox: https://codesandbox.io/s/v0p58 My goal is to have the tabs aligned on the left side. I attempted to include: alignItems: 'left' tabs: { borderRight: `1px solid ${theme.palet ...

cssreactjsmaterial-ui

The Bootstrap table spills over the edges of the container

I'm currently working on a project where I need to create a table with a grey background, but I am facing an issue where the lines from my table are extending past the div container. I even tried placing it inside a form, but that did not resolve the ...

phphtmlcsstwitter-bootstrap

Ways to adjust the width of the Dialog box in Jquery UI to 60% of the window size

Currently, I am utilizing Jquery UI for a pop-up feature that displays a table populated through an Ajax call. The script implementation is as follows: <script> $(function() { $( "#dialog" ).dialog({ autoOpen: false, show: { ...

javascriptjqueryhtmlcss

Creating Dynamic HTML/DOM in Angular 14: A Guide for Adding New Items to a List

I am currently iterating through a list of items and displaying them within a div element. These items are rendered when the page initially loads. <button (click)="addCut()" mat-raised-button color="primary">Add New Cut</button ...

javascripthtmlangulardom

What techniques can I use to ensure that my website's layout adjusts correctly when resized?

body { padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 16px; box-sizing: border-box !important; } a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-decorat ...

htmlcssflexboxmedia-queries

How can TailwindCSS be used to wrap a nested flexbox at a specific viewport?

Utilizing TailwindCSS, I have the following code snippet: <div class="box-border flex w-auto flex-row gap-2 rounded-2xl border p-4 my-4 mx-4"> <div class="grow-0"> <div class="flex h-full flex-col items-center ...

htmlcssflexboxtailwind-css

Navigating the ropes of push-pull functionality in Bootstrap 5

How can I utilize push and pull in Bootstrap version 5.0.0-beta2? In Bootstrap 3, my code looks like this: <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <d ...

javascripthtmltwitter-bootstrapbootstrap-5

Identify the initial ul element and modify the contents of the li within it, or generate a new li using jQuery's

Is there a way to identify the first, second, or third ul element within a particular div or form? I am looking to modify the li elements in the second ul as soon as a ul is detected on the page. var ulCountFood = $('#nl-form').find('ul&apo ...

javascriptjqueryhtmllistfind

Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

<Popover key={element.id} className={classes.popoverItem} classes={{ paper: classes.paperElement }} open={isOpen} anchorEl={this.myRef.current} anchorOrigin={{ vertical: 'bottom&apo ...

htmlcssreactjsmaterial-ui

On smaller screens in portrait mode, CSS automatically incorporates margin adjustments

Here is the code I am working with: <html> <head> <style> body { margin: auto; width: 720px; } </style> </head> <body> <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ip ...

htmlcss

Integrate a PHP form that includes a redirect feature and an optional opt-in box

I'm a beginner and I'm trying to enhance this code by adding some extra features. When the form is submitted, I want the page to redirect to an external URL like www.google.com The checkbox should be automatically checked and when the client re ...

phphtml

Display Page Separation with JavaScript

I am working on a project where I have created payslips using Bootstrap through PHP. To maintain organization, I am looking to create a new page after every 6 payslips. Below is the code snippet that I am using to generate the payslips: foreach($results a ...

javascriptphpcssbootstrap-4

The CSS rule for @media screen is failing to function properly on mobile devices

Is there a way to hide a specific section of my home page only on smartphones? I've tried using the code below but it's still showing up on my phone. Any advice? @media screen and (max-width: 640px) { #statistics .row { visi ...

htmlcss

What steps can be taken to remove a server-side validation error message once the user has inputted the correct value?

I'm facing an issue with server-side validation messages on my form, which includes fields for Name, Mobile, Email, and Message. While JQuery validation works fine, clearing the error message after user input is causing a problem. Using AJAX to submi ...

phpjqueryjsonajaxhtml

Looking for assistance in translating HTML code into an XpathQueryString?

While following a tutorial by raywenderlich on how to parse HTML in Xcode, I encountered an issue. I was able to parse his website successfully, but I'm struggling with the concept of Xpathquery. All I need is to extract the data from a table. Below i ...

htmliosobjective-c

Is there a way to add default text to a number input field that already has a value?

My current HTML input code is as follows: <input type="number" min="4" max="100" step="1" name="myInput" value="33"> The value of this input field is being populated from a cookie or storage that was set on a previous screen where the user provided ...

htmlcssinput

Tips for maintaining the size of an object while resizing a window

My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. H ...

javascriptjqueryhtmlcss

Utilizing Spring Boot API in conjunction with thymeleaf and bootstrap for seamless email communication

I'm currently developing a spring boot REST API that only exposes the backend logic. One of the functionalities we have is the forgot password feature, which requires sending an email to the user. To achieve this, I have implemented the thymeleaf temp ...

htmlspring-bootbootstrap-4spring-securitythymeleaf