Trying to create this...
https://i.stack.imgur.com/PMRSI.png
However, I'm unsure of how to achieve it.
<div class="row justify-content-center">
<div class="col-3 me-3" style="background-color: #F1F3F8; border-radius: 10px;">
<div class="row">
<div class="col-6">
<img src="/src/photos/event_upcoming.svg" class="img-fluid mx-auto" />
</div>
<div class="col-6">
<p>Срок обучения<br>6 месяцев</p>
</div>
</div>
</div>
</div>If you need assistance with the CSS output below, feel free to ask any questions
.c-light {
color: #7e8591;
}
.c-black {
color: black;
}<div class="row justify-content-center">
<div
class="col-8 me-8"
style="background-color: #f1f3f8; border-radius: 10px"
>
<div class="row">
<div class="col-4 p-4">
<img src="https://placehold.co/150x150" class="img-fluid mx-auto" />
</div>
<div class="col-8 d-flex align-items-center justify-content-start">
<p class="c-light">
Training Period<br /><span class="c-black">6 months</span>
</p>
</div>
</div>
</div>
</div>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aecc81fb8d9dfcbcfa2bba5be">[email protected]</a>/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6a51faefbbbdad78acbbb7aa">[email protected]</a>/dist/js/bootstrap.min.js"
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
crossorigin="anonymous"
></script>To achieve this, you can follow these steps:
HTML:
<div class="main-card">
<div class="icon-holder">
YOUR ICON
</div>
<div class="title-holder">
<p>Title</p>
<p>Sub-Title</p>
</div>
</div>
CSS
.main-card {
** CSS for the card design here **
**AND**
display: flex;
align-items: center;
}
.title-holder {
display: flex;
flex-direction: column;
}
Here is a url link that I have: I am attempting to extract the main body content of this news page using LXML with xpath: //article, however it seems to include content beyond the body tag As LXML modifies the HTML structure upon initialization, I am see ...
My jQuery mobile app has a requirement to reuse the same content while keeping track of user selections each time it is displayed. I have successfully created the necessary html content and can append it to the page seamlessly. The process goes something ...
I currently have two select tags on my webpage. I want to ensure that only one option can be selected at a time from these two tags. If the user tries to select options from both tags, an error message should be displayed instructing them to choose only on ...
Is there a way to ensure consistent font display across all browsers? I am facing an issue with font consistency on my webpage. While browsers like Internet Explorer Edge and 11, Chrome, and Firefox display the desired font correctly, Internet Explorer 8 ...
I am working on a table row that has the following HTML structure: When the user interacts with the "Name" field, I trigger the "select" event and pass it to the nameDropChanged function. Once I have a reference to this select element, I need to change th ...
I am facing an issue with an uninitialized property in my app.component.ts: color!:string; I am trying to automatically initialize the color property when a radio button is selected: <div> <input type="radio" name="colors" ( ...
My goal is to target an i element using the following XPath: //div[contains(text(), "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32565356564153565341725e5d5d1c515d5f">[email protected]</a>")]//parent//i[contains(@c ...
I need help with positioning a div inside a table cell that has 100% height. How can I align this div to the bottom of the cell? Furthermore, there are other divs within the same cell that I would like to position in the middle and at the top. ...
On the page, I want to display articles with alternating positions - one on the left, the next on the right. In this example, all the articles are currently being displayed twice, both on the left and the right side. How can I ensure that only one instanc ...
I've been working on a script for my school project website that should make buttons play videos, but I'm running into an issue where it only works for the first button (btn). Programming isn't my strong suit, and I put this together based o ...
While this topic is well-known, I have a slightly more complex question regarding it. I have gone through the documentation here. My goal is to display the date in French format (dd/mm/yyyy) and save the value in US format (yyyy-mm-dd). Additionally, I nee ...
Does anyone know how to change the default style for: <input type=checkbox...> I want it to use my own styled pictures instead of the default style. Can anyone help? Thank you! ...
Is there a way to modify the links in this accordion drop menu so that they lead to external HTML pages instead of specific areas on the same page? I've tried various methods but can't seem to achieve it without affecting the styles. Currently, i ...
I've been attempting to incorporate my own font into my website, but despite researching several Stack Overflow articles, I'm facing various browser-specific and path-related issues. Sadly, I haven't been able to successfully display my font ...
I am facing an issue with dynamically created textareas. The content in these textareas is generated dynamically. This is how I retrieve the data and create the textareas dynamically: $(document).ready(function(){ $('#btn').click(function(){ ...
When working with third-party components, you can include their styles by importing their stylesheet into your component or _app.tsx file. For detailed instructions on how to do this, you can refer to Next.js documentation. Another option is to add the sty ...
I'll be brief and direct, so hear me out: When using VW, the font-size changes based on the viewport width. With VH, the font-size adjusts according to the viewport height. Now, I have a question: Is there a way to scale my font-size based on ...
I need help sorting MySQL records in descending order to retrieve the most recent entry. Here are the records stored as strings: 1/2017 1/2018 2/2017 2/2018 3/2017 I specifically want to retrieve the value 1/2018. The entries correspond to each year an ...
In order to make the attribute work in a responsive manner, I believe I need to create a class within the h2 tag. However, I am unsure where the issue lies. Could it possibly be related to the browser? Check out the image below for reference: this is my p ...
I am trying to retrieve a JSON response from the server upon clicking a button and then parse it into a div. However, I am struggling with how to accomplish this. <button type="submit" id="btPay" name="btPay"> Go for Pay ...