Which element is necessary to generate black lines within the image ? [![enter image description here][1]][1]
I have already coded but I'm seeking to produce lines similar to the image (between images). What's the process for achieving this? Kindly advise
Here is my code:
By utilizing the ":after" & ":before" selectors, you have the ability to create a line between two images.
.hiw-content .hiw-img img {
width: 100%;
height: auto;
padding: 100px;
}
div#a3:after {
z-index: 999;
content: '';
width: 150px;
background-color: black;
/* left: 0; */
height: 5px;
position: absolute;
right: -80px;
top: 50%;
border-radius: 100px;
}
div#a3:before {
z-index: 999;
content: '';
width: 150px;
background-color: black;
left: -80px;
height: 5px;
position: absolute;
/* right: 50%; */
top: 50%;
border-radius: 100px;
}
div#a3 {
overflow: visible;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">
<div class="col-md-4 col-hiw col-hiw-bottom" id="a4">
<div class="hiw-content">
<div class="hiw-img"><img src=""></div>
<span class="hiw-title">Customer Service</span>
<p class="hiw-content">Let our dedicated customer service team take care of any inquiries</p>
</div>
</div>
<div class="col-md-4 col-hiw col-hiw-bottom" id="a3">
<div class="hiw-content">
<div class="hiw-img"><img src=""></div>
<span class="hiw-title">Order fulfilled</span>
<p class="hiw-content">Once a buyer places an order we’ll take care of order production and shipping.</p>
</div>
</div>
<div class="col-md-4 col-hiw col-hiw-bottom" id="a2">
<div class="hiw-content">
<div class="hiw-img"><img src=""></div>
<span class="hiw-title">Boost your sales</span>
<p class="hiw-content">Use Teesprings Boosted Network, Marketing Tools and Partnership Integrations </p>
</div>
</div>
</div>If you want more effective assistance, please provide a more detailed code snippet. The current code is not very informative. Here is an example of how you can create a simple line (make sure to adjust the margin, height, and width accordingly):
.line {
width: 10rem;
height: 0.3rem;
background: #000;
}<div class="line"></div>Stackers. I am currently the Front End developer for www.PinionLMS.com. Our website is using "Lato," a Google font. The issue we are experiencing is that when you access the site from a Windows (8.1) browser such as Chrome, Firefox, or Internet Explorer ...
I am experiencing an issue with filling out a form. I have attempted the following methods: driver.FindElementByXPath("//div[@id='s_dane_dokumentu-section?grid-1-grid?c_nr_lrn_komunikatu-control?xforms-input-1']").sendkeys "2112345 ...
Is there a way to include an HTML file in my JSON by using the $.get() function or any alternative method? { "user": { "username": $.get('profile.html') } } ...
https://i.sstatic.net/AbqOp.pngThis may appear to be a repetitive question, but I assure you it's not. Despite my efforts on Google, the bug persists. The problem lies in the php script's inability to set the $_POST array to the value passed by ...
Hey there! I have a table that contains some text and I'm looking to shorten the text after it reaches a certain length. I was able to achieve this using the text-overflow property. .overflow { width: 70px; overflow: hidden; text-overflow: elli ...
I'm working on a form and have set up a handler for the submit button like this: $( '#submit_btn' ).click( function( data ){ theForm = document.getElementById( 'realForm' ); theForm.meetingName.value = document.getElement ...
I am trying to achieve a simple task using jQuery. I have a checkbox inside a box, and I want to toggle a class on the box with a transition when the checkbox is checked. However, my code is not working as expected. Here is what I have: $(document).ready( ...
In order to utilize a value from a select box for a PHP function later on the page, I am seeking assistance. Within my index.php file, there is a standard select drop down containing folder names as values and options. After selecting a folder, I aim to e ...
Hello there! I am just starting to learn CSS and HTML, and I have a question. Is it possible for me to use the same CSS styling but have different images inside each of the hexagons? I want to replace the image '' with multiple images without rep ...
Creating a portfolio page at this link (http://198.96.94.51/v2/) and encountering an issue with the navigationMenu. When rapidly clicking on the links on the side, they do not redirect to the correct anchor point (some don't move the page at all). I h ...
Has anyone successfully changed the label position from right side to left? I attempted using float: left but it didn't have any effect. import {Radio } from "semantic-ui-react" <Radio label="in progress" toggle /> https://i.sstatic.net/hNGb6. ...
I'm attempting to create a strikethrough effect for a marker, just like the one shown in the image below. https://i.sstatic.net/2FQkD.png In my efforts to achieve this effect, I have tried wrapping the text within two span elements. The inner span ...
Hello fellow Stackers! I could really use some help with a few IE-specific bugs I've encountered while working on a website for a friend. Check out the Website Here | View the Full CSS File The issue I'm facing is with the Google Webfont Ralewa ...
Imagine a scenario where you are working within an HTML file that you cannot modify, but you have the ability to only edit the CSS through a stylesheet. Is it possible to target an ID within another ID in the same way you can do with classes? #id1 #id2 {s ...
I'm looking to incorporate two distinct blocks of text into a container https://i.stack.imgur.com/6mFZK.png Criteria: Text 1: positioned at the top left corner (85% of box size) Text 2: positioned at the bottom right corner (15% of box size) I&ap ...
I am currently facing an issue while trying to insert a date into a MySQL database through JSP. The date is being accepted using a Bootstrap date picker. However, I am encountering an unparsable date error despite trying to use the 'datetime' dat ...
While working on an ajax call in CodeIgniter using the .ajax function, I encountered a problem. My controller is named Control and it has a function called Login. When I try to execute this code: $.ajax({ url: "Connection/Login", type: " ...
I'm currently working on a user interface where users can drag and drop a box with a red outline to position it on the screen within a black box. See the UI here Alternatively, users can also move the box by adjusting the inputs on the right side. ...
Utilizing the transform property: .parent { display: inline-flex; flex-direction: column; align-items: center; } .first { height: 100px; } .second { height: 100px; transform: translateY(-50%); } <div class="parent"> <div ...
Why is my ng-view HTML displaying as plain text? How can I resolve this issue? I have encountered an error, here is the screenshot for reference: Unfortunately, I am unable to upload images at the moment. ...