im a designer, and im trying to create a pricing table with a custom pricing layout. i have tried to do it with html and css, but i cant find a way to put the "12x" bellow the "R$", and both beside the price "219".
that's the pricing layout that im trying to create
pricing layout that i need to create
i have found ways to use the "R$" beside the price, but the "12x" wont show bellow "R$". only in the line under the price.
You can achieve this by divs and styling them by display: flex
.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>
Related
Hobbyist who really sucks at css.
I have the following three divs:
The problem is, when I click on the middle one, the box grows, and so do the other two boxes:
How do I make boxes start off and stay the same size even after click. The reason the box is growing is do to adding the "arrow-icon"
Code looks like this:
HTML
<section class='modes-flex__options'>
<div class='options'>
<h2 class='options__title'>Options</h2>
<div class='options__item-container'id='1v1' onClick="selectedGameOption(this.id)">
<h3 class='options__item'>Player vs AI (1 v 1) </h3>
<div class='arrow-icon__div'>
<i></i>
</div>
</div>
<div class='options__item-container' id='1v1-tourny' onClick="selectedGameOption(this.id)">
<h3 class='options__item'>Player vs AI (Tournament)</h3>
<div class='arrow-icon__div'>
<i></i>
</div>
</div>
<div class='options__item-container' id='ai-v-ai-tourny' onClick="selectedGameOption(this.id)">
<h3 class='options__item' >AI vs AI (Tournament)</h3>
<div class='arrow-icon__div'>
<i></i>
</div>
</div>
</div>
</section>
CSS
.modes-flex{
display: flex;
margin-top: 3rem;
&__options{
flex:1;
display: flex;
justify-content: end;
}
&__description{
flex:1;
display: flex;
flex-direction: column;
}
}
.options{
margin-right: 5rem;
&__title{
font-size: 1.2rem;
padding-bottom:2rem;
}
&__item{
flex: 1;
padding-right: 5rem;
}
}
.description{
&__title{
font-size: 1.2rem;
padding-bottom:2rem;
}
}
.options__item-container {
padding: 1.5rem 1rem 1.5rem 1rem;
margin-bottom: 2rem;
box-shadow: 0 0 10px lightgrey;
border: 1px solid lightgrey;
display: flex;
align-items: center;
&:hover{
cursor: pointer;
}
}
.arrow-icon__div{
text-align: right;
}
.active-option{
background-color: $dark-navy;
color: white;
}
Tried to set min and max width and was still growing , just want them to stay even width after adding the icon.
You said it: The reason the box is growing is do to adding the "arrow-icon".
In my experience, in these situations, I always added to the default size of the boxes so that when another element (i.e. arrow-icon) is added, it doesn't change the size. (Because there is enough space in the box for arrow-icon to be added). With doing so, all the boxes remain the same through any actions.
I'm trying to replicate a container image-text style for my landing page, but after hours of research I couldn't find any useful example for my problems which seems pretty basic.
Something like this
Is there a name for this type of container/header to look for them? I would love if someone could write a simple example to replicate it, because all of my solutions are not very elegant mainly because I am new to pure CSS (I'm being asked to not use any CSS libraries) I want my landing page to have multiple rows of this containers as this web page (without the animations of course) Overflow Webpage
So far I have tried something like this
HTML
<div class="header_2">
<article>
<h1>Multiples Odontólogos en todo Santiago</h1>
<p>If your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
Únete >
</article>
<span class="helper"></span>
<img src="<%= assetPath('Land1.svg') %>" alt="Odontólogos por todo Santiago">
</div>
CSS
.header_2 {
padding: 10vh 15vw;
background: #def2f1;
text-align: center;
color: #17252a;
}
.header_2 img {
max-height: 30%;
max-width: 30%;
vertical-align: middle;
}
.header_2 article{
text-align: left;
padding-right: 50vw;
}
.header_2 h1 {
font-family: 'Kanit';
color: #17252a;
font-size: 1.7vw;
}
.header_2 p {
font-family: 'Montserrat';
color: #17252a;
font-size: 1vw;
}
.header_2 a {
font-family: 'Montserrat';
color: #3aafa9;
font-size: 1vw;
}
With these results:
My Actual Webpage
I can't set the image and text in the same line and my div is huge. Which is the most elegant and simple solution fr this type of style?
There are a few ways to do this.
Using flex:
Add this code to '.header_2' and adjust your padding-right on .header_2 article:
display: flex;
flex-direction: row;
align-items: center;
Using inline-block:
Add this code to '.header_2 article' and adjust the padding-right you have on this class:
display: inline-block;
width: 40%;
vertical-align: middle;
Using float:
With this option it won't be aligned vertically so depends on what you want.
Add this code to '.header_2 article' and adjust the padding-right you have on this class:
float: left;
|HTML|
<div class="header_2">
<div class="container">
<div class="box-6">
<img src="<%= assetPath('Land1.svg') %>" alt="Odontólogos por todo Santiago">
</div>
<article class="box-6">
<h1>Multiples Odontólogos en todo Santiago</h1>
<p>If your knees aren't green by the end of the day, you ought to seriously re-examine your life.</p>
Únete >
</article>
</div>
|CSS|
.header_2 {
padding: 10vh 15vw;
background: #def2f1;
color: #17252a;
margin:0;
}
.container{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.box-6{
flex: 0 0 50%;
max-width: 50%;
}
I have a design below which I am trying to replicate in HTML and CSS:
Note: I have written text Margin and Padding to make things easy to understand. It will not come in the actual design
At this moment, I am able to get this in my fiddle.
The only thing which is not matching the above design in the fiddle are the paragraphs (eg: Our main goal, Among our biggest, etc) in every box which don't have line break. I am considering boxes as every job-opening with titles (Back-end .., Front-end .., etc) and paragraphs (eg: Our main goal, Among our biggest, etc).
The CSS for every box is:
.firstrow {
display: inline-block;
width: 100%;
}
.firstrow #front-end {
text-align: center;
width: 50%;
height: 250px;
float: left;
background-repeat: no-repeat;
display: flex;
align-items: center;
background-size: 100% 100%;
justify-content: center;
}
Here is a improved version of your code, just using flexbox, without using floats or anything else.
h2 {
text-align: center;
font-size: 2.8rem;
color: #444444;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 5%;
}
.row>div {
padding: 5%;
background: gray;
margin: 15px;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
text-align: center;
flex: 1;
box-sizing:border-box
}
<div class="job-openings">
<h2>Seems Interesting? Apply Now</h2>
<div class="row">
<div id="back-end">
<h3>Back-end Developer</h3>
<p> Our main goal is to build and maintain the online platform and...</p>
</div>
<div id="front-end">
<h3>Front-end Web Developer</h3>
<p>Among our biggest priorities are interface design and user experience...</p>
</div>
<div id="graphics">
<h3>Graphics Designer</h3>
<p> We believe in the power of design. Our designers are motivated, creative and...</p>
</div>
<div id="sales">
<h3>Sales & Marketing</h3>
<p>Our Marketing team is focussed on driving growth and building a brand that customers love...</p>
</div>
</div>
</div>
Op's Comment to answer:
Back-end and front-end will come in one row with graphics designer and
sales and marketing in another row.
Assuming you want to have always 2 rows, then you can use flex:0 50% instead of flex:1, in this case flex: 0 calc(50% - 30px) to take in count the margin
h2 {
text-align: center;
font-size: 2.8rem;
color: #444444;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 5%;
}
.row>div {
padding: 5%;
background: gray;
margin: 15px;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
text-align: center;
flex: 0 calc(50% - 30px);
box-sizing:border-box
}
<div class="job-openings">
<h2>Seems Interesting? Apply Now</h2>
<div class="row">
<div id="back-end">
<h3>Back-end Developer</h3>
<p> Our main goal is to build and maintain the online platform and...</p>
</div>
<div id="front-end">
<h3>Front-end Web Developer</h3>
<p>Among our biggest priorities are interface design and user experience...</p>
</div>
<div id="graphics">
<h3>Graphics Designer</h3>
<p> We believe in the power of design. Our designers are motivated, creative and...</p>
</div>
<div id="sales">
<h3>Sales & Marketing</h3>
<p>Our Marketing team is focussed on driving growth and building a brand that customers love...</p>
</div>
</div>
</div>
Hey guys I'm having a hard time coding row, I can get to split the text, here is my code so far:
.partthree {
display: flex;
flex-wrap: wrap;
margin: 0 90px;
color: aliceblue;
}
.partthree div {
display: inline-block;
flex-grow: 1;
font-family: gotham light;
font-size: 23px;
}
<div class="partthree">
<div class="txt1">
<p>You pick which practice areas you want</p>
</div>
<div class="txt2">
<p>You pick your area by county</p>
</div>
<div class="txt3">
<p>You pick how many leads you want</p>
</div>
</div>
flex-wrap:wrap; might be in the way or to be injected via mediaquerie for small screens if needed.
You can tune children layout also with :
margin and padding
min-width & max-width
.... or else that suits your needs
.partthree {
display: flex;
margin: 0 90px;
color: aliceblue;
}
.partthree div {
display: inline-block;
flex-grow: 1;/* flex:1; would make them equal width */
font-family: gotham light;
font-size: 23px;
/* extra ?*/
margin: 0 0.5em;
border:solid;
text-align:center;
}
body {
background:#555
}
p {
margin:0;
<div class="partthree">
<div class="txt1">
<p>You pick which practice areas you want</p>
</div>
<div class="txt2">
<p>You pick your area by county</p>
</div>
<div class="txt3">
<p>You pick how many leads you want</p>
</div>
</div>
I had been working on this for some days and reading information about display flex, but I'm still having an issue that I can't fix. I have 3 boxes and they have % width and some px separating each others, something like this
[[first box] [second box] [third box]]
so, to do this I used the nth-of-type(3n+2) in order to get all the middle elements and addind the px separation to both sides
each box has two divs, an image(to the left) and a text, but, when the text has at least two lines, the box get missaligned
[[first box] [second box]
[third box]]
and that's not good. So, playing with the styles if I remove the display:flex and the box were aligned, but the text now is not vertical aligned to the middle -.-
.general-cont {
width: 100%;
text-align: center;
}
.each-cont {
width: 32.5%;
display: inline-block;
margin-top: 6px;
}
.each-cont:nth-of-type(3n+2) {
margin-left: 10px;
margin-right: 10px;
}
.img-cont {
float: left;
height: 48px;
display: flex;
align-items: center;
}
.text-cont {
height: 48px;
overflow: hidden;
align-items: center;
text-align: left;
display: flex;
}
<div class="general-cont">
<div class="each-cont">
<a>
<div class="img-cont">
123
</div>
<div class="text-cont">
456
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
ABC
</div>
<div class="text-cont">
DEF
</div>
</a>
</div>
<div class="each-cont">
<a>
<div class="img-cont">
QWE
</div>
<div class="text-cont">
ASD
</div>
</a>
</div>
</div>
You're code is a bit of everything. You shouldn't be combining widths, floats etc when you're using flex. Here's a quick example using your code:
.general-cont {
display: flex;
flex-direction: row;
flex-flow: center;
align-items: stretch;
}
.each-cont {
background: #eee;
margin: 0 10px;
padding: 10px;
}
.img-cont {
display: block;
}
http://codepen.io/paulcredmond/pen/rrRvkk
I would advise reading the guide on CSS tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/