As a designer, I am attempting to craft a pricing table with a unique pricing arrangement. Despite my efforts with HTML and CSS, I am struggling to position the "12x" below the "R$" and have both appear next to the price of "219."
Here is the pricing layout that I am aiming to achieve: desired pricing layout
While I have managed to position the "R$" next to the price, I have not been successful in placing the "12x" below the "R$." It only appears on the line below the price.
To create this layout, you can utilize divs and apply styling using the display: flex property.
.wrapp, .priceWrapp, .firstBlock, .secondBlock{
display: flex;
}
.wrapp{
width: 340px;
}
.wrapp, .firstBlock{
flex-direction: column;
}
.firstBlock, .restPrice{
font-size: 2.5em;
}
.firstBlock{
flex: 1 1 33%;
}
.secondBlock{
flex: 1 1 66%;
display: flex;
}
.fullPrice{
flex: 1 1 77%;
font-size: 10em;
font-weight:600;
line-height: .8em;
}
.restPrice{
flex: 1 1 33%;
}
.info{
padding-top: .5em;
font-size: 1.7em;
text-align: center;
}<div class="wrapp">
<div class="priceWrapp">
<div class="firstBlock">
<div>R$</div>
<div>12x</div>
</div>
<div class="secondBlock">
<div class="fullPrice">219</div>
<div class="restPrice">,91</div>
</div>
</div>
<div class="info">a vista R$ 2.638,90</div>
</div>My website, located at , features a unique design element created using the CSS border-image property and a .png image with a transparent edge, giving the appearance of torn paper on the divs. However, I have encountered an issue specifically on my Android ...
Check out this code snippet: http://jsfiddle.net/YttKb/ In my javascript, I am trying to add a new line of text using utf-8 coding. Which character should I use to make a new line? It seems like \n only creates a line break, not a new line of text. ...
Within my mongo database, there is a document containing a field called reviewText: 'this is line 1\nthis is line 2',. This text was entered by a user in a textarea, hence the presence of \n to represent line breaks. I want to display t ...
JavaScript file to run with npm start: import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router } from 'react-router-dom'; import Routes from './routes'; ReactDOM.render( <R ...
I've been working on a website and encountered an issue with horizontal overflow on Firefox and IE in the last section that contains 3 images, while Chrome seems to display it correctly without any overflow. I used a flexbox for the article area, assu ...
Visit this link for Google Maps A client has reported that the link above is causing an error when opening the maps app. The error message reads: "unsupported link. Google Maps can't open this link." This problem is occurring on a Nexus 7 and Samsu ...
Link to website This final step is all that stands between me and the completion of my website deployment. However, I am faced with a persistent issue that has me stumped. It seems that there is an unexplained margin on the left side of the contact form, ...
My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...
I am facing an issue when trying to append a modal that contains only a transparent gif. The problem arises when the transparent background of the gif is not displayed properly. There seems to be no issue with the transparency settings of the gifs themselv ...
After searching on Stack Overflow, I couldn't find a suitable solution for my problem. I need help with my code that fetches data and sends it to a PHP file to upload files to specific folders and store their links in a database. However, I am encount ...
Using a slider named mySlider or SL_Slider, which is powered by the MooTools library. When on the page with the slider, there is a simple script for the href to call the appropriate slide: <a href="javascript:mySlider.numPress(3);">link</a> ...
Currently, I am developing a feature on a canvas that covers the entire webpage's width and length. In this canvas, I have the ability to create boxes by clicking down anywhere on the canvas, dragging my mouse in any direction, and upon releasing the ...
I have successfully implemented the mat-spinner in my project with configurable changes like color and mode of spinning. However, I am now looking to add an image icon, specifically the logo of a brand or company, inside the spinner. How can I achieve this ...
Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...
I was looking to enhance the command to be more authoritative. <div (click)="lastCall(999)">click me</div> My attempt to utilize Number.MAX_SAFE_INTEGER resulted in an error from my computer stating that it wasn't recognized. As a result ...
Is there a way to vertically align a smaller badge next to the h1 tag, without placing the span tag inside the h1 tag for SEO reasons? Currently, the badge is aligned at the bottom, but I would like it to be in the middle. <link href="https://cdn. ...
Looking for help to implement the hover effect 4 on the following site: . I was able to create a test on JSFiddle, check it out here: https://jsfiddle.net/34aaqh70/ Struggling to make it auto-responsive, any tips would be appreciated. If there's a ...
I have added an anchor link that, when clicked, opens a new window with the specified link. Below is the code I used for this purpose: <a href="javascript:window.open('https://www.remax.fi/fi/kiinteistonvalitys/tietosuojaseloste/', &apos ...
checkout this code snippet - https://jsfiddle.net/johndoe1994/xtu09zz9/ Let me explain the functionality of the code The code contains two containers: .first and .second. The .first container has two default divs with a class of .item. The .second contai ...
In my table, users can select certain rows by using checkboxes. I have implemented some JavaScript functionality that allows them to select each checkbox individually and also use a "Select All" option. Additionally, there is code written to enable the use ...