How do I do layout like this in HTML?What are valid values for the id attribute in HTML?How to horizontally center a <div>?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?HTML 5: Is it <br>, <br/>, or <br />?How to create an HTML button that acts like a link?How to disable resizable property of textarea?Why does HTML think “chucknorris” is a color?Textarea too large for page?
Why are there few or no black super GMs?
Why a binary file is not shown as 0 and 1?
Is Error correction and detection can be done with out adding extra bits?
What would be the safest way to drop thousands of small, hard objects from a typical, high wing, GA airplane?
Is the Münchhausen trilemma really a trilemma?
Pauli exclusion principle - black holes
How would you say "Sorry, that was a mistake on my part"?
Is straight-up writing someone's opinions telling?
Last-minute canceled work-trip mean I'll lose thousands of dollars on planned vacation
Arithmetics in LuaLaTeX
Is it possible to have two words with the same particle in a sentence?
What could make large expeditions ineffective for exploring territory full of dangers and valuable resources?
Naming your baby - does the name influence the child?
Zhora asks Deckard: "Are you for real?". Was this meant to be significant?
Cauchy reals and Dedekind reals satisfy "the same mathematical theorems"
Why did my "seldom" get corrected?
Exporting animation to Unity
"Je suis petite, moi?", purpose of the "moi"?
Not able to find the "TcmTemplateDebugHost" process in Attach process, Even we run the Template builder
Strategy to pay off revolving debt while building reserve savings fund?
Which modern firearm should a time traveler bring to be easily reproducible for a historic civilization?
I have found a mistake on someone's code published online: what is the protocol?
Software need db owner permission to master database (sql2016)
Was Apollo 13 radio blackout on reentry longer than expected?
How do I do layout like this in HTML?
What are valid values for the id attribute in HTML?How to horizontally center a <div>?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?HTML 5: Is it <br>, <br/>, or <br />?How to create an HTML button that acts like a link?How to disable resizable property of textarea?Why does HTML think “chucknorris” is a color?Textarea too large for page?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
-4
[Web design noob]
I'm trying to create layout like below:
Here's what I have tried 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>Can anyone please help me in
Aligning vertical and horizontal 'lines' in between
colsAdding rectangle like on right side of layout?
html css html5 twitter-bootstrap bootstrap-4
edited Mar 26 at 10:06
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
asked Mar 26 at 9:47
Mayur BhangaleMayur Bhangale
1923 silver badges15 bronze badges
add a comment |
-4
[Web design noob]
I'm trying to create layout like below:
Here's what I have tried 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>Can anyone please help me in
Aligning vertical and horizontal 'lines' in between
colsAdding rectangle like on right side of layout?
html css html5 twitter-bootstrap bootstrap-4
edited Mar 26 at 10:06
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
asked Mar 26 at 9:47
Mayur BhangaleMayur Bhangale
1923 silver badges15 bronze badges
add a comment |
-4
-4
-4
[Web design noob]
I'm trying to create layout like below:
Here's what I have tried 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>Can anyone please help me in
Aligning vertical and horizontal 'lines' in between
colsAdding rectangle like on right side of layout?
html css html5 twitter-bootstrap bootstrap-4
edited Mar 26 at 10:06
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
asked Mar 26 at 9:47
Mayur BhangaleMayur Bhangale
1923 silver badges15 bronze badges
[Web design noob]
I'm trying to create layout like below:
Here's what I have tried 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>Can anyone please help me in
Aligning vertical and horizontal 'lines' in between
colsAdding rectangle like on right side of layout?
.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>.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>html css html5 twitter-bootstrap bootstrap-4
html css html5 twitter-bootstrap bootstrap-4
edited Mar 26 at 10:06
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
asked Mar 26 at 9:47
Mayur BhangaleMayur Bhangale
1923 silver badges15 bronze badges
edited Mar 26 at 10:06
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
asked Mar 26 at 9:47
Mayur BhangaleMayur Bhangale
1923 silver badges15 bronze badges
edited Mar 26 at 10:06
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
edited Mar 26 at 10:06
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
edited Mar 26 at 10:06
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
1,4792 gold badges8 silver badges19 bronze badges
asked Mar 26 at 9:47
Mayur BhangaleMayur Bhangale
1923 silver badges15 bronze badges
asked Mar 26 at 9:47
Mayur BhangaleMayur Bhangale
1923 silver badges15 bronze badges
asked Mar 26 at 9:47
Mayur BhangaleMayur Bhangale
1923 silver badges15 bronze badges
1923 silver badges15 bronze badges
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
1
I have changed the layout based on your image structure. Include bootstrap and try the below code. I hope this solution will be helpful.
*
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;
.combo-box .img img
width: 60px;
.combo-box .profile-desc h4
font-size: 15px;
font-weight: 600;
margin: 0 0 0;
.combo-box .profile-desc small
color: #888;
.combo-box li.left
display: flex;
.combo-box ul li.right::after
position: absolute;
content: "";
width: 12px;
height: 12px;
border: 1px solid #4b90e2;
border-radius: 50%;
left: 25px;
top: 40%;
background: #fff;
padding: 2px;
.combo-box ul li.right:before
border-top: 2px dashed #ccc;
position: absolute;
content: "";
left: 30px;
width: 85%;
top: 50%;
.combo-box .inner-desc
display: flex;
.combo-box ul li.right .inner-desc:before
position: absolute;
content: "";
left: 28px;
background: #4b90e2;
width: 6px;
height: 6px;
border-radius: 50%;
top: 47%;
z-index: 9;
.combo-box ul li.right
text-align: right;
.combo-box ul li.right p
margin-left: auto;
text-align: right;
font-size: 12px;
display: inline-block;
background: #f8f8f8;
border: 1px solid #e6e6e6;
padding: 5px 8px;
margin-bottom: 0;
line-height: 18px;
border-radius: 3px;
<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>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
</ul>
</div>
</div>answered Mar 27 at 3:26
SaravanaSaravana
1,9652 gold badges6 silver badges23 bronze badges
add a comment |
0
I have tried by changing some of the structure
have a look at the pen.
I have used the positioning by position: absolute; of the line and round dot.
Please check and ask if any query
.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>Here's a link to a CodePen
edited Mar 26 at 10:34
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
answered Mar 26 at 10:10
Joykal InfotechJoykal Infotech
1,5881 gold badge5 silver badges17 bronze badges
Thanks! Any suggestions on aligning border?
– Mayur Bhangale
Mar 26 at 10:12
1
that can also be achieved by absolute but that won't be a proper and appropriate approach. Try without using bootsrap grid and making your customised grid or flexbox [more on flexbox] (css-tricks.com/snippets/css/a-guide-to-flexbox)
– Joykal Infotech
Mar 26 at 10:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55354047%2fhow-do-i-do-layout-like-this-in-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I have changed the layout based on your image structure. Include bootstrap and try the below code. I hope this solution will be helpful.
*
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;
.combo-box .img img
width: 60px;
.combo-box .profile-desc h4
font-size: 15px;
font-weight: 600;
margin: 0 0 0;
.combo-box .profile-desc small
color: #888;
.combo-box li.left
display: flex;
.combo-box ul li.right::after
position: absolute;
content: "";
width: 12px;
height: 12px;
border: 1px solid #4b90e2;
border-radius: 50%;
left: 25px;
top: 40%;
background: #fff;
padding: 2px;
.combo-box ul li.right:before
border-top: 2px dashed #ccc;
position: absolute;
content: "";
left: 30px;
width: 85%;
top: 50%;
.combo-box .inner-desc
display: flex;
.combo-box ul li.right .inner-desc:before
position: absolute;
content: "";
left: 28px;
background: #4b90e2;
width: 6px;
height: 6px;
border-radius: 50%;
top: 47%;
z-index: 9;
.combo-box ul li.right
text-align: right;
.combo-box ul li.right p
margin-left: auto;
text-align: right;
font-size: 12px;
display: inline-block;
background: #f8f8f8;
border: 1px solid #e6e6e6;
padding: 5px 8px;
margin-bottom: 0;
line-height: 18px;
border-radius: 3px;
<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>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
</ul>
</div>
</div>answered Mar 27 at 3:26
SaravanaSaravana
1,9652 gold badges6 silver badges23 bronze badges
add a comment |
1
I have changed the layout based on your image structure. Include bootstrap and try the below code. I hope this solution will be helpful.
*
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;
.combo-box .img img
width: 60px;
.combo-box .profile-desc h4
font-size: 15px;
font-weight: 600;
margin: 0 0 0;
.combo-box .profile-desc small
color: #888;
.combo-box li.left
display: flex;
.combo-box ul li.right::after
position: absolute;
content: "";
width: 12px;
height: 12px;
border: 1px solid #4b90e2;
border-radius: 50%;
left: 25px;
top: 40%;
background: #fff;
padding: 2px;
.combo-box ul li.right:before
border-top: 2px dashed #ccc;
position: absolute;
content: "";
left: 30px;
width: 85%;
top: 50%;
.combo-box .inner-desc
display: flex;
.combo-box ul li.right .inner-desc:before
position: absolute;
content: "";
left: 28px;
background: #4b90e2;
width: 6px;
height: 6px;
border-radius: 50%;
top: 47%;
z-index: 9;
.combo-box ul li.right
text-align: right;
.combo-box ul li.right p
margin-left: auto;
text-align: right;
font-size: 12px;
display: inline-block;
background: #f8f8f8;
border: 1px solid #e6e6e6;
padding: 5px 8px;
margin-bottom: 0;
line-height: 18px;
border-radius: 3px;
<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>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
</ul>
</div>
</div>answered Mar 27 at 3:26
SaravanaSaravana
1,9652 gold badges6 silver badges23 bronze badges
add a comment |
1
1
1
I have changed the layout based on your image structure. Include bootstrap and try the below code. I hope this solution will be helpful.
*
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;
.combo-box .img img
width: 60px;
.combo-box .profile-desc h4
font-size: 15px;
font-weight: 600;
margin: 0 0 0;
.combo-box .profile-desc small
color: #888;
.combo-box li.left
display: flex;
.combo-box ul li.right::after
position: absolute;
content: "";
width: 12px;
height: 12px;
border: 1px solid #4b90e2;
border-radius: 50%;
left: 25px;
top: 40%;
background: #fff;
padding: 2px;
.combo-box ul li.right:before
border-top: 2px dashed #ccc;
position: absolute;
content: "";
left: 30px;
width: 85%;
top: 50%;
.combo-box .inner-desc
display: flex;
.combo-box ul li.right .inner-desc:before
position: absolute;
content: "";
left: 28px;
background: #4b90e2;
width: 6px;
height: 6px;
border-radius: 50%;
top: 47%;
z-index: 9;
.combo-box ul li.right
text-align: right;
.combo-box ul li.right p
margin-left: auto;
text-align: right;
font-size: 12px;
display: inline-block;
background: #f8f8f8;
border: 1px solid #e6e6e6;
padding: 5px 8px;
margin-bottom: 0;
line-height: 18px;
border-radius: 3px;
<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>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
</ul>
</div>
</div>answered Mar 27 at 3:26
SaravanaSaravana
1,9652 gold badges6 silver badges23 bronze badges
I have changed the layout based on your image structure. Include bootstrap and try the below code. I hope this solution will be helpful.
*
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;
.combo-box .img img
width: 60px;
.combo-box .profile-desc h4
font-size: 15px;
font-weight: 600;
margin: 0 0 0;
.combo-box .profile-desc small
color: #888;
.combo-box li.left
display: flex;
.combo-box ul li.right::after
position: absolute;
content: "";
width: 12px;
height: 12px;
border: 1px solid #4b90e2;
border-radius: 50%;
left: 25px;
top: 40%;
background: #fff;
padding: 2px;
.combo-box ul li.right:before
border-top: 2px dashed #ccc;
position: absolute;
content: "";
left: 30px;
width: 85%;
top: 50%;
.combo-box .inner-desc
display: flex;
.combo-box ul li.right .inner-desc:before
position: absolute;
content: "";
left: 28px;
background: #4b90e2;
width: 6px;
height: 6px;
border-radius: 50%;
top: 47%;
z-index: 9;
.combo-box ul li.right
text-align: right;
.combo-box ul li.right p
margin-left: auto;
text-align: right;
font-size: 12px;
display: inline-block;
background: #f8f8f8;
border: 1px solid #e6e6e6;
padding: 5px 8px;
margin-bottom: 0;
line-height: 18px;
border-radius: 3px;
<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>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
</ul>
</div>
</div>*
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;
.combo-box .img img
width: 60px;
.combo-box .profile-desc h4
font-size: 15px;
font-weight: 600;
margin: 0 0 0;
.combo-box .profile-desc small
color: #888;
.combo-box li.left
display: flex;
.combo-box ul li.right::after
position: absolute;
content: "";
width: 12px;
height: 12px;
border: 1px solid #4b90e2;
border-radius: 50%;
left: 25px;
top: 40%;
background: #fff;
padding: 2px;
.combo-box ul li.right:before
border-top: 2px dashed #ccc;
position: absolute;
content: "";
left: 30px;
width: 85%;
top: 50%;
.combo-box .inner-desc
display: flex;
.combo-box ul li.right .inner-desc:before
position: absolute;
content: "";
left: 28px;
background: #4b90e2;
width: 6px;
height: 6px;
border-radius: 50%;
top: 47%;
z-index: 9;
.combo-box ul li.right
text-align: right;
.combo-box ul li.right p
margin-left: auto;
text-align: right;
font-size: 12px;
display: inline-block;
background: #f8f8f8;
border: 1px solid #e6e6e6;
padding: 5px 8px;
margin-bottom: 0;
line-height: 18px;
border-radius: 3px;
<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>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
</ul>
</div>
</div>*
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;
.combo-box .img img
width: 60px;
.combo-box .profile-desc h4
font-size: 15px;
font-weight: 600;
margin: 0 0 0;
.combo-box .profile-desc small
color: #888;
.combo-box li.left
display: flex;
.combo-box ul li.right::after
position: absolute;
content: "";
width: 12px;
height: 12px;
border: 1px solid #4b90e2;
border-radius: 50%;
left: 25px;
top: 40%;
background: #fff;
padding: 2px;
.combo-box ul li.right:before
border-top: 2px dashed #ccc;
position: absolute;
content: "";
left: 30px;
width: 85%;
top: 50%;
.combo-box .inner-desc
display: flex;
.combo-box ul li.right .inner-desc:before
position: absolute;
content: "";
left: 28px;
background: #4b90e2;
width: 6px;
height: 6px;
border-radius: 50%;
top: 47%;
z-index: 9;
.combo-box ul li.right
text-align: right;
.combo-box ul li.right p
margin-left: auto;
text-align: right;
font-size: 12px;
display: inline-block;
background: #f8f8f8;
border: 1px solid #e6e6e6;
padding: 5px 8px;
margin-bottom: 0;
line-height: 18px;
border-radius: 3px;
<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>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
<li class="right">
<div class="inner-desc">
<p>Lorem Ipsum is simply dummy text of
<br>typesetting industry. </p>
</div>
</li>
</ul>
<ul>
<li class="left">
<div class="img mr-3">
<img src="https://cdn.pixabay.com/photo/2018/08/28/12/41/avatar-3637425_960_720.png" class="img-fluid">
</div>
<div class="profile-desc">
<h4>John Doe (You)</h4>
<small>Founder at ESOP International</small>
</div>
</li>
</ul>
</div>
</div>answered Mar 27 at 3:26
SaravanaSaravana
1,9652 gold badges6 silver badges23 bronze badges
edited Mar 27 at 3:38
answered Mar 27 at 3:26
SaravanaSaravana
1,9652 gold badges6 silver badges23 bronze badges
answered Mar 27 at 3:26
SaravanaSaravana
1,9652 gold badges6 silver badges23 bronze badges
answered Mar 27 at 3:26
SaravanaSaravana
1,9652 gold badges6 silver badges23 bronze badges
1,9652 gold badges6 silver badges23 bronze badges
add a comment |
add a comment |
0
I have tried by changing some of the structure
have a look at the pen.
I have used the positioning by position: absolute; of the line and round dot.
Please check and ask if any query
.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>Here's a link to a CodePen
edited Mar 26 at 10:34
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
answered Mar 26 at 10:10
Joykal InfotechJoykal Infotech
1,5881 gold badge5 silver badges17 bronze badges
Thanks! Any suggestions on aligning border?
– Mayur Bhangale
Mar 26 at 10:12
1
that can also be achieved by absolute but that won't be a proper and appropriate approach. Try without using bootsrap grid and making your customised grid or flexbox [more on flexbox] (css-tricks.com/snippets/css/a-guide-to-flexbox)
– Joykal Infotech
Mar 26 at 10:19
add a comment |
0
I have tried by changing some of the structure
have a look at the pen.
I have used the positioning by position: absolute; of the line and round dot.
Please check and ask if any query
.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>Here's a link to a CodePen
edited Mar 26 at 10:34
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
answered Mar 26 at 10:10
Joykal InfotechJoykal Infotech
1,5881 gold badge5 silver badges17 bronze badges
Thanks! Any suggestions on aligning border?
– Mayur Bhangale
Mar 26 at 10:12
1
that can also be achieved by absolute but that won't be a proper and appropriate approach. Try without using bootsrap grid and making your customised grid or flexbox [more on flexbox] (css-tricks.com/snippets/css/a-guide-to-flexbox)
– Joykal Infotech
Mar 26 at 10:19
add a comment |
0
0
0
I have tried by changing some of the structure
have a look at the pen.
I have used the positioning by position: absolute; of the line and round dot.
Please check and ask if any query
.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>Here's a link to a CodePen
edited Mar 26 at 10:34
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
answered Mar 26 at 10:10
Joykal InfotechJoykal Infotech
1,5881 gold badge5 silver badges17 bronze badges
I have tried by changing some of the structure
have a look at the pen.
I have used the positioning by position: absolute; of the line and round dot.
Please check and ask if any query
.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>Here's a link to a CodePen
.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>.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>edited Mar 26 at 10:34
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
answered Mar 26 at 10:10
Joykal InfotechJoykal Infotech
1,5881 gold badge5 silver badges17 bronze badges
edited Mar 26 at 10:34
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
edited Mar 26 at 10:34
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
edited Mar 26 at 10:34
Ali Heikal
1,4792 gold badges8 silver badges19 bronze badges
1,4792 gold badges8 silver badges19 bronze badges
answered Mar 26 at 10:10
Joykal InfotechJoykal Infotech
1,5881 gold badge5 silver badges17 bronze badges
answered Mar 26 at 10:10
Joykal InfotechJoykal Infotech
1,5881 gold badge5 silver badges17 bronze badges
answered Mar 26 at 10:10
Joykal InfotechJoykal Infotech
1,5881 gold badge5 silver badges17 bronze badges
1,5881 gold badge5 silver badges17 bronze badges
Thanks! Any suggestions on aligning border?
– Mayur Bhangale
Mar 26 at 10:12
1
that can also be achieved by absolute but that won't be a proper and appropriate approach. Try without using bootsrap grid and making your customised grid or flexbox [more on flexbox] (css-tricks.com/snippets/css/a-guide-to-flexbox)
– Joykal Infotech
Mar 26 at 10:19
add a comment |
Thanks! Any suggestions on aligning border?
– Mayur Bhangale
Mar 26 at 10:12
1
that can also be achieved by absolute but that won't be a proper and appropriate approach. Try without using bootsrap grid and making your customised grid or flexbox [more on flexbox] (css-tricks.com/snippets/css/a-guide-to-flexbox)
– Joykal Infotech
Mar 26 at 10:19
Thanks! Any suggestions on aligning border?
– Mayur Bhangale
Mar 26 at 10:12
Thanks! Any suggestions on aligning border?
– Mayur Bhangale
Mar 26 at 10:12
1
1
that can also be achieved by absolute but that won't be a proper and appropriate approach. Try without using bootsrap grid and making your customised grid or flexbox [more on flexbox] (css-tricks.com/snippets/css/a-guide-to-flexbox)
– Joykal Infotech
Mar 26 at 10:19
that can also be achieved by absolute but that won't be a proper and appropriate approach. Try without using bootsrap grid and making your customised grid or flexbox [more on flexbox] (css-tricks.com/snippets/css/a-guide-to-flexbox)
– Joykal Infotech
Mar 26 at 10:19
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55354047%2fhow-do-i-do-layout-like-this-in-html%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
