What is the best way to achieve this layout using HTML?

[Beginner in Web Design] I am currently experimenting with creating a layout similar to the one shown here: https://i.sstatic.net/j70FD.png Here is what I have attempted so far:

.inner,
.outer {
    position: relative;
}
.dash {
    border: 0;
    border-top: 1px dashed #cfcfcf;
}
.vertical-line {
    width: 2px;
    height: 100px;
    background: 100% #4a90e2;
    margin: 0 auto;
}
.outer {
    width: 10px;
    height: 10px;
    border: 1px solid #4a90e2;
    border-radius: 50%;
}
.inner {
    background-color: #4a90e2;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border: 1px solid #4a90e2;
    border-radius: 50%;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Opportunity</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    </head>
    <body>
        <div>
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h1 style="font-size:15px;padding-top:34px;font-family:Lato, sans-serif;font-weight:bold;">HOW YOU CAN REACH MICHAEL</h1>
                        <hr style="max-width:60px;height:8px;max-height:8px;margin-left:1px;">
                    </div>
                    <div class="col-lg-5" style="margin-top:34px;margin-right:40px;">
                        <div class="row rounded" style="background-image: linear-gradient(-140deg, #2217A4 0%, #8326B8 100%);">
                            <div class="col" style="padding-top:5px;">
                                <h5 style="font-size:10px;color:rgb(255,255,255);font-family:Lato, sans-serif;font-weight:bold;margin-top:1px;">Reach out to Philip, for an introduction</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-lg-1" style="padding-right:0px;padding-left:0px;padding-top:12px;"><img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="rounded pull-right" style="min-width:50px;max-width:50px;">
                        <div class="vertical-line" style="margin-right:24px;"></div>
                        <div class="outer" style="margin-right:0px;padding-right:0px;">
                            <div class="inner" style="padding-right:-3px;"></div>
                        </div>
                    </div>
                    <div class="col" style="padding-top:12px;">
                        <h5 style="font-size:15px;margin-bottom:0px;font-family:Lato, sans-serif;font-weight:bold;">John Doe (You)</h5>
                        <h5 style="color:#797979;font-size:15px;font-family:Lato, sans-serif;">Founder at ESOP International</h5>
                        <hr class="dash" style="margin-top:45px;">
                    </div>
                    <div class="col-md-6"></div>
                </div>
                <div class="row">
                    <div class="col-md-6"></div>
                    <div class="col-md-6"></div>
                </div>
                <div class="row">
                    <div class="col-md-6"></div>
                    <div class="col-md-6"></div>
                </div>
                <div class="row">
                    <div class="col-md-6"></div>
                    <div class="col-md-6"></div>
                </div>
            </div>
        </div>
    </body>
</html>

Seeking assistance from anyone who can help with:

  1. Aligning vertical and horizontal 'lines' between cols

  2. Adding a rectangle on the right side of the layout?

csshtmltwitter-bootstrapbootstrap-4

Answer №1

I've implemented the new layout following your image structure and integrated Bootstrap into the code snippet below. It is my hope that this solution meets your needs.

* {
    box-sizing: border-box;
    position: relative;
    font-family: Lato, sans-serif;
}

.combo-box h5 {
    background-image: linear-gradient(-140deg, #2217A4 0%, #8326B8 100%);
    font-size: 11px;
    color: rgb(255, 255, 255);
    font-family: Lato, sans-serif;
    font-weight: bold;
    padding: 10px 10px;
    text-align: center;
    border-radius: 3px;
}

.combo-box h3 {
    font-size: 15px;
    font-family: Lato, sans-serif;
    font-weight: bold;
    position: relative;
}

.combo-box h3::after {
    position: absolute;
    content: "";
    width: 70px;
    background-color: rgba(0, 0, 0, 0.1);
    height: 1px;
    bottom: -8px;
    left: 0;
}

.combo-box {
    padding: 0 25px;
}

.combo-box ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.combo-box ul:last-child:before {}

.combo-box ul::before {
    position: absolute;
    content: "";
    background: #4b90e2;
    width: 1px;
    height: 100%;
    left: 30px;
}

.combo-box ul li {
    position: relative;
    margin: 0 0 0;
    padding: 0 0 0;
    list-style: none;
}


<!-- Rest of the code remains unchanged -->

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container my-5">
    <div class="combo-box">
        <div class="row">
            <div class="col-md-7">
                <h3>HOW YOU CAN REACH MICHAEL</h3>
            </div>
            <div class="col-md-5">
                <h5>Reach out to Philip, for an introduction</h5>
            </div>
        </div>

        <!-- Additional UI elements here -->

    </div>
</div>

Answer №2

I have experimented with modifying the structure, take a look at the pen.

I utilized position: absolute; for positioning the line and round dot.

Please review and feel free to ask if you have any questions.

.inner,
.outer {
  position: relative;
}
.dash {
  border: 0;
  border-top: 1px dashed #cfcfcf;
}
.vertical-line {
  width: 2px;
  height: 100px;
  background: 100% #4a90e2;
  margin: 0 auto;
}
.outer {
  width: 10px;
  height: 10px;
  border: 1px solid #4a90e2;
  border-radius: 50%;
}
.inner {
  background-color: #4a90e2;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border: 1px solid #4a90e2;
  border-radius: 50%;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Opportunity</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,700i,900">
    <link rel="stylesheet" href="assets/css/styles.min.css">
</head>

<body>
    <div>
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1 style="font-size:15px;padding-top:34px;font-family:Lato, sans-serif;font-weight:bold;">HOW YOU CAN REACH MICHAEL</h1>
                    <hr style="max-width:60px;height:8px;max-height:8px;margin-left:1px;">
                </div>
                <div class="col-lg-5" style="margin-top:34px;margin-right:40px;">
                    <div class="row rounded" style="background-image: linear-gradient(-140deg, #2217A4 0%, #8326B8 100%);">
                        <div class="col" style="padding-top:5px;">
                            <h5 style="font-size:10px;color:rgb(255,255,255);font-family:Lato, sans-serif;font-weight:bold;margin-top:1px;">Reach out to Philip, for an introduction</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-lg-1" style="padding-right:0px;padding-left:0px;padding-top:12px;"><div style="
    position: relative;
    display: inline-block;
"><img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="rounded pull-right" style="min-width:50px;max-width:50px;">
                    <div class="vertical-line" style="position: absolute;left: 50%;margin-left: -1px;"></div>
                    <div class="outer" style="margin-right:0px;padding-right:0px;position: absolute;left: 50%;transform: translateX(-50%);top: 85px;z-index: 9;background-color: white;">
                        <div class="inner" style="padding-right:-3px;"></div>
                  </div></div></div>
                <div class="col" style="padding-top:12px;">
                    <h5 style="font-size:15px;margin-bottom:0px;font-family:Lato, sans-serif;font-weight:bold;">John Doe (You)</h5>
                    <h5 style="color:#797979;font-size:15px;font-family:Lato, sans-serif;">Founder at ESOP International</h5>
                    <hr class="dash" style="margin-top:45px;">
                </div>
                <div class="col-md-6"></div>
            </div>
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
            <div class="row">
                <div class="col-md-6"></div>
                <div class="col-md-6"></div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
</body>

</html>

For more details, you can access the CodePen through this link.

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

Updating text color in JavaFX for a textarea

I'm having trouble getting this to work. After checking the CSS analyzer in the scene builder, it seems that changing the text color in a textarea requires something like this: .text-area .text { -fx-fill: #1e88e5; -fx-font-size: 32px; } How ...

cssjavafx

Continuous scroll notification within the fixed menu until reaching the bottom

I'm looking to achieve a scrolling notification message that stays fixed at the bottom of a top-fixed menu while the body content continues to scroll normally. Here's an example in this fiddle: HTML: <div class="menu-fixed">I am a fixed me ...

javascriptjqueryhtmlcss

What is the method for displaying map tooltips by default rather than on mouseover?

Currently, I have a script set up to display a map with two markers. Whenever I hover over one of the markers, a popup tooltip appears with location information. My question is, how can I make the information appear by default without needing to hover ov ...

javascriptjqueryhtmlcssgoogle-maps

It's proving difficult for me to align my header and navbar on the same line

Recently, I've delved into the world of HTML/CSS and encountered a challenge. My goal is to align my header (containing an h1 tag) and navbar on the same line. Ideally, the header should float left with the navbar positioned closely to its left. Howev ...

htmlcss

Smooth scrolling feature malfunctioning in mobile view

While working on my website, I noticed that the smooth-scroll feature works perfectly on desktop browsers. However, on mobile devices, when I click on a link, it does not scroll to the correct position. It always ends up much lower than expected. Any idea ...

javascripthtmlcssbootstrap-4

`How to implement text that changes dynamically within images using HTML and PHP`

I'm working on a PHP website with Codeigniter and I have a requirement to insert HTML text into an image fetched from a database. The content of the text will vary based on different profiles. Below is the image: The text "$40" needs to be dynamic. H ...

javascriptphphtmlcodeigniter

Incorporating the use of font color in CSS styles and

I am creating a newsletter template using foundation. Within the table, there are 2 <th> elements containing the content "Reservationnumber" and "23425-FF3234". I have multiple instances of these <th>. I want to apply a colored font to them. Wh ...

htmlcss

Issue with Modal Box: Datepicker not Displaying Correctly

I have implemented a modal box in my webpage. When I click on a text field where a datepicker is added, it does not display anything. However, when inspecting the element using Chrome's developer tools, I can see that the 'hasDatepicker' cla ...

jquerycssdatepickermodal-dialog

There appears to be an issue with the onmousemove function

I am currently troubleshooting an issue with a script that I wrote for my button. Interestingly, the code works flawlessly when I test it on CodePen, but I encountered an error when I attempted to run it in VSCode. Even after trying to recreate the script ...

javascripthtmlcss

Is it possible to trim a video using HTML code?

I am trying to find a way to crop a video using HTML 5. <video id="glass" width="640" height="360" autoplay> <source src="invisible-glass-fill.mp4" type="video/mp4"> </video> Currently, the video has a resolution of 640x360. However ...

javascriptjqueryhtmlhtml5-video

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

javascripthtml

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

javascripthtmlcssreactjs

Incorporating JavaScript and Alpine.js to Monitor and Log Changes in Input Range Values

I have developed a basic app that logs the input range value to the console when the range input changes. Interestingly, it works flawlessly when I slide the slider left and right with my cursor. However, when I programmatically change the value using Ja ...

javascripthtmlalpine.js

Designing Material UI Button Styles

Hello, I recently started using Material UI and I'm facing some challenges in styling the components. Right now, I'm working on a sign-in page and trying to position the Submit button all the way to the bottom right corner. Any help or advice wou ...

cssreactjsmaterial-ui

.mouseleave() triggers when exiting a designated boundary area

I'm attempting to implement a roll-up feature for a div when the mouse is over another div. The issue I'm facing is that the roll-up div closes even if the mouse just exits through the bottom border. Is there a way to achieve this using JavaScrip ...

javascriptjqueryhtmlcss

Issue with the alignment of form input fields and buttons in Mozilla Firefox

Fixing Form Field Alignment Issue in Firefox After encountering and solving a form field alignment issue myself, I realized that the problem persisted in Firefox while displaying correctly in Chrome. Here's how I resolved it, although I am open to mo ...

csssymfonylesstwigstyling

What is the solution for setting a regular height to a Bootstrap select when no option is currently selected?

On my webpage, I am incorporating bootstrap select and I want it to be empty initially with a value of "" when the page first loads. This is essential because it is a required field, so if a user attempts to submit the form without making a selec ...

htmltwitter-bootstrapbootstrap-select

When a user clicks on an anchor tag, close the current window, open a new window, and pass the

I have a scenario where I have an anchor tag that triggers the opening of a window on click. In this newly opened window, there is a table with a column containing another anchor tag. Here is what I am trying to achieve: Code for the anchor tag: functio ...

javascriptphpjqueryhtml

Issues with Angular and Bootstrap: ng-hide functionality not functioning correctly

I am struggling to grasp the concept of the ng-show angular directive as it is not functioning correctly for me. Despite following some examples I found online, I cannot seem to change the boolean value in the controller like they suggest. Instead of using ...

javascriptjqueryangularjstwitter-bootstrap

Angular2 data binding does not update when properties change

I'm struggling to establish the connection between the fields and the component in order for them to update when the properties change in OnDataUpdate(). The field "OtherValue" successfully binds two ways with the input field, and the "Name" field di ...

htmltypescriptangular