Struggling to align an image to the right of the content area, inspired by this Dribble shot.
Check out the inspiration here
This is what I've come up with so far:
Link to my progress on CodePen
.content {
position: relative;
}
.bg-image {
position: relative;
top: 350px;
left: 450px;
height: 350px;
z-index: 2;
}
However, floating the image or using top and left properties seems to distort the layout. Any suggestions?
After making adjustments to the bg-image class style, I observed the following outcomes. If you encounter a different issue, please provide more detailed information.
https://i.sstatic.net/bBH0j.png
body {
background-color: white;
color: #1d2331;
}
.bg-image {
float: right !important;
width: 100%;
position: relative;
height: auto;
margin-right: -40% !important;
}
a.nav-link,
a.navbar-brand {
color: #1d2331;
}
a i {
color: #c9327b;
}
form .btn {
background-color: #1d2331;
color: #f3f1fe;
}
.action-call {
min-height: 35vh;
}
.feature {
background-color: #f3f1fe;
min-height: 56vh;
}
.feature .icon-link {
text-decoration: none;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f5979a9a818681879485b5c0dbc5dbc7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-md mt-4">
<div class="container-fluid mx-5">
<a class="navbar-brand" href=""> <i class="bi bi-app-indicator me-2"></i> <strong>Fincy App</strong></a>
<div class="vr ms-0"></div>
<div class="dropdown">
<button class="btn dropdown-toggle" type=" button" id="personalbtn" data-bs-toggle="dropdown"
aria-expanded="false"><strong>Personal</strong></button>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item me-4">
<a class="nav-link" href="#"><strong>Download</strong></a>
</li>
<li class="nav-item me-4"><a class="nav-link" href="#"> <strong>Plans</strong></a></li>
<li class="nav-item me-4"><a class="nav-link dropdown-toggle" href="#"> <strong>Product </strong></a>
</li>
</ul>
<form class="ms-5">
<button class="btn btn-outline-success px-5" type="submit">Login</button>
</form>
</div>
</nav>
</header>
<article class="content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
<section class="mx-5 action-call d-flex align-items-center ">
<div class="container-fluid">
<div class="row t-row">
<h1> <strong>Send money <br>abroad more faster</strong></h1>
<div class="sendnow"></div>
</div>
</div>
</section>
<section class="feature d-flex align-items-center">
<div class="container-fluid">
<div class="mx-5 row b-row">
<div class="d-flex justify-content-start">
<div class="col-3 me-3">
<i class="fs-2 bi bi-shield-shaded"></i>
<h5> <strong>Safety guarantee</strong></h5>
<p>We ensure that your money will be 100% safe with our guarantee</p>
<a href="#" class="icon-link"> <strong>Read more</strong><i class="bi bi-chevron-right text-primary"></i>
</a>
</div>
<div class="col-3 me-3">
<i class="fs-2 bi bi-credit-card-2-front-fill"></i>
<h5> <strong>Send money in minutes</strong></h5>
<p>Your money will be sent even faster than with your blue wallet</p>
<a href="#" class="icon-link"> <strong>Send money now</strong><i
class="bi bi-chevron-right text-primary"></i> </a>
</div>
</div>
</div>
</div>
</section>
</article><img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div> I made changes to the html structure and incorporated a bootstrap display (d-flex) class in the following way.
Updated HTML layout:
<div class="d-flex mt-5">
<div class="col-3 ">
.....
</div>
<div class="col-3">
.....
</div>
<div class="col-6 content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
</div>
</div>
The corresponding CSS styling:
.content {
position: relative;
}
.bg-image {
position: relative;
top: -310px;
left: 160px;
height: 500px;
}
Access the code on codepen: https://codepen.io/pinapelkod/pen/RwLJJNm
I am currently using a standard HTML table to showcase data pulled from an API. <table style="width:100%"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td&g ...
Recently, I incorporated a select element into an Angular component. Upon loading the component in the browser and selecting a value from the list, I noticed these specific messages appearing in the console: onChange started onChange completed I find it p ...
I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...
I am currently attempting to display a select box with scrolling on an iOS iPad mini. Issue: The options are not appearing inside the select box, instead they are overflowing outside of it in the popover. CSS .indicators_geography { font-size: 12px; ...
I'm working with Flask and facing a challenge in displaying a dynamic list of items across multiple pages, as the list can potentially contain over 1000 items. Inside app.py, I've set up a route like this: @app.route('/displayitems') ...
Currently, I am working on creating a responsive menu. The structure of my menu is set up as follows: HTML: <ul id="top-menu"> <li class="active"> <a href="#">HOME</a> </li> <li> <a href="#div2">ABOUT</ ...
Currently, I have 4 dropdown menus where I can choose various options related to health procedures: Area, specialty, group, and subgroup. Whenever I select a subgroup, it dynamically displays the procedures on the page. However, the issue I am facing is th ...
My current task involves locating the exact coordinates of the word "The" within this Wikipedia page once it has been displayed, similar to the coordinates provided by Chrome's developer tools. See a screenshot of developer options here. <div>Th ...
I'm attempting to reconstruct the WhateverOrigin service, which can be found at this link: Nevertheless, when I try running it in my web browser, this code that functioned perfectly with WhateverOrigin no longer functions properly with my imitation s ...
Having trouble with jQuery and rotation effects on an image? I have a solution for you. The image should rotate while toggling at the same time, but there's a twist - on the first click, it won't rotate but will still toggle. From the second clic ...
Upon user input in the form on my web application, an scp and ftp process is initiated that takes around 2-3 minutes to complete. The result page consequently experiences a similar delay in loading. To enhance user experience and provide real-time updates ...
Having trouble with this issue for 48 hours straight. Every time I attempt to click a button in the top bar, there is no animation. The intended behavior is for the width to increase and the left border color to change to green, but that's not what&ap ...
<div class="details"> <p><b>Compatibility:</b> All versions</p> <p><b>Category:</b> Entertainment</p> <p><b>Updated:</b> Apr 2, 2014</p> <p><b>Version ...
My setup includes two monitors: one is 24" and the other is my laptop's 12.5" screen. I have a red box (div) in my web application that displays full height on the larger monitor, but only partially on the smaller one. I'm puzzled as to why it s ...
Instead of solving my problem, I am seeking guidance on it: I have a project to create an Avatar maker in C# using a vast collection of categorized images. The concept is simple, but I lack experience in image manipulation through code, so I need some ad ...
Click here to view the example on CodePen $('.ui.sidebar').sidebar({ context: $('.bottom.segment') }) .sidebar('attach events', '.menu .item'); I am currently trying to replicate this specific functiona ...
For my responsive design project, I am implementing a menu that switches to a menu button when the width is less than or equal to 768px. Currently, I am using jQuery to dynamically adjust the height of the menu when the menu button is clicked. The jQuery ...
Currently, I am facing an issue with writing a script to manage web pages containing multiple elements. Upon clicking on one of these elements, it should open a new window. However, my current script is struggling to identify the element correctly. I requi ...
I am having issues with my input buttons not triggering my functions. Can anyone provide some insight into this problem? <div id="windowBar"> <h3>Imagine you were a superhero...</h3> <input id="WindowClose" type="button" onclick=" ...
Recently, I've been working on a project with Tailwind CSS. I encountered an issue when trying to implement a custom font using @font-face. Despite placing the font file in public/assets/font directory, it still doesn't seem to load properly. Her ...