Is there a way to include margin or a line similar to the image below?
[![Please refer to the accompanying image][1]][1]
Is there a way to include margin or a line similar to the image below?
[![Please refer to the accompanying image][1]][1]
.circles {
list-style: none;
display: flex;
align-items: center;
flex-direction: column;
padding: 0;
margin: 0;
position: relative;
}
.circles::before {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 5px;
display: block;
content: '';
background: #000;
transform: translateX(-50%);
z-index: -1;
}
.circles>li {
margin-bottom: 15px;
display: flex;
list-style: none;
width: 50px;
height: 50px;
border-radius: 50%;
background: #0392B2;
align-items: center;
justify-content: center;
color: #fff;
font: sans-serif;
font-size: 14px;
}
.circles>li:last-child {
margin-bottom: 0;
}<ul class="circles">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>https://i.sstatic.net/581MT.png
Web Design Tutorial
<div class="container">
<h1 class="circle">1</h1>
<h1 class="line"></h1>
<h1 class="circle">2</h1>
</div>
CSS Code
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.circle {
width:100px;
height:100px;
background-color: blue;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 300;
margin-top: -20px;
margin-bottom: -20px;
}
.line {
width:4px;
height:150px;
background-color: black;
}
I have encountered this data result {"policy":[{"id":"1","policy_name":"Policy 1","description":"Testing","status":"Active","valid_until":"2022-05-18& ...
I will provide detailed descriptions to help explain my issue. Link to CodePen: https://codepen.io/Yosharu/pen/morErw The problem I am facing is that my background (and some other CSS elements) are not loading properly in my code, resulting in a white bac ...
I am working with jQuery Mobile, which automatically generates a lot of the DOM structure. The challenge I am facing is removing radio buttons without having an id for the parent div due to the HTML construction in jQuery Mobile. While I can easily targe ...
Within a single .php file, there is a combination of HTML, PHP, and JavaScript. The JavaScript section is crucial for detecting the browser; if the browser is not Internet Explorer, JavaScript will trigger the HTML block containing PHP. Here is the JavaS ...
When I am building CSS links using a function, the CSS doesn't work unless I add a var_dump at the end. What could I be missing or overlooking? Here is the code snippet: private function buildCssLinks(){ $files = $this->findFiles(dirname(d ...
Is there a way to decrease the transparency of the page contents container background without affecting the opacity of the actual content? <div id="container"> <div id="page contents"> Insert your amazing articles and more here. </ ...
I've been working on a Material-UI Table where I customized the headers and table styles. While testing it locally with yarn start, it looked like this: https://i.stack.imgur.com/7yU2H.png However, when I viewed it on the remote system, it appeared ...
I am trying to dynamically show/hide a tr tag within a table based on the value of a scope variable in the controller. Despite writing the code correctly, I am facing an issue where the "ng-hide" class is automatically added to the tr tag every time it is ...
I am currently seeking a method to replicate the iOS Safari animation that occurs when opening a link in the background (the item jumps up and quickly animates to where it can be accessed) - This same animation is also seen on OSX Safari's "save to re ...
Within different sections of the webpage, I have utilized the following locator (excerpt from HTML): <table id="userPlaylistTable" cellspacing="0" cellpadding="0"> <p class="title"> ABC </p> <p class="title"> DEF </p> ...
I have been attempting to fetch a JSON from a specific URL. Here is my current code snippet: <script> var co2; $(document).ready(function(){ alert("0"); $.getJSON(url,function(result){ var jsonObject = result; alert(result); ...
As I navigate my way through AngularJS, I find myself grappling with the concept of calling a custom method of an object and wonder if there's a simpler approach: https://jsfiddle.net/f4ew9csr/3/ <div ng-app="myApp" ng-controller="myCtrl as myCtr ...
I am facing an issue where my html code for email templates works perfectly on all platforms except for Microsoft Outlook Desktop. The problem lies in the display of product information that is not showing correctly in Outlook. Within my code, I have keys ...
I have successfully created a Google Scripts function that generates an array from a column in a Google Sheet by filtering out any spaces. However, I'm facing a challenge in figuring out how to pass this variable to my HTML form so that I can set up a ...
I'm having an issue with my login page. After implementing Ajax code for the reset password feature, the dropdown menu on the login page doesn't work properly when wrong details are entered and the page reloads. I've tried using the $(' ...
I've been attempting to align certain elements to the right in the navbar using Bootstrap by utilizing mr-auto, but it doesn't seem to be functioning properly. What steps should I take to ensure it works correctly? Below is a snippet of my index. ...
For the boxes I applied borders using "border: 1px solid #f2f2f2" as depicted in the image. The issue is that with 1px solid borders, they overlap each other. Is there a way to use inline borders with CSS instead? Thank you in advance ^_^. border: 1px s ...
I am facing an issue while attempting to modify the source of my HTML image element. Despite using document.getElementId('image') in my code, I am unable to make it work as intended. Surprisingly, there are no errors displayed. Interestingly, whe ...
I'm updating a website design using Bootstrap and I want to create a navbar with a video playing in the background. To ensure that the navbar stays fixed at the top while scrolling, I made it sticky. After testing various methods, I managed to posit ...
Currently experimenting with media queries and trying to make my tags span 100% the width of the device. However, I'm noticing a margin on the right side of my image. I suspect it's due to the padding on the div above, as when I set the padding t ...