I need two texts to be stacked like this using CSS:
I tried this code:
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.special-order>span {
display: inline-block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.special-order>span {
background: #000000;
color: #f58220;
display: block;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
I’m getting some space between the two texts. Help me with this.
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
span.special {
background: #000000;
color: #f58220;
display: block;
font-weight: 700;
line-height: 1.3;
padding: 0 4px;
border: 1px solid white;
border-radius: 2px;
}
.order {
display: inline-block;
font-weight: 600;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1;
border-radius: 1px;
}
<div class="sp-order">
<span class="special">Special </span>
<span class="order">Order</span>
</div>
You can try this :
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span:first-child {
display:block;
letter-spacing: 1px;
font-weight: 700;
padding: 0 2px;
background: #f58220;
color: #FFFFFF;
line-height: 1.2;
}
.sp-order>span:last-child {
background: #000000;
color: #f58220;
padding: 0 2px;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
Just change your second CSS selector to .sp-order>span
.sp-order {
position: absolute;
text-align: center;
bottom: 25px;
z-index: 999;
left: 25px;
text-transform: uppercase;
}
.sp-order>span {
background: #000000;
color: #f58220;
display: block;
padding: 2px 12px;
}
.sp-order>span:nth-child(2) {
background: #ddd;
color: #fa0;
}
<div class="sp-order">
<span>Special </span>
<span>Orders</span>
</div>
Related
I have a grid layout of cards. When I upload photos to a product card, there are several times that the entire format of the card is damaged. That is, no labels, the name, the description of the product and some other things are not visible.
I am attaching 2 screenshots (one without and one with photos)
.bg-color {
background-color: #eee;
padding: 60px 0;
}
.containers {
width: 90%;
margin: 0 auto;
}
.title {
margin-bottom: 50px;
padding-bottom: 40px;
text-align: center;
position: relative;
}
.title::before {
content: '';
width: 200px;
height: 3px;
background-color: #dbdbdb;
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
}
.title::after {
content: '\f005';
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #dbdbdb;
width: 50px;
height: 20px;
text-align: center;
line-height: 20px;
position: absolute;
bottom: 10%;
left: 10%;
/* background-color: #eee;
*/
transform: translateX(-50%);
font-size: 16px;
}
.title p {
color: #999;
font-style: italic;
font-weight: 700;
margin: 0;
}
.title h1 {
font-size: 44px;
color: #131313;
font-weight: 900;
text-transform: capitalize;
}
.title h1 span {
color: #fa0;
}
.my-card {
transition: all .2s ease-in-out;
border-radius: 3px;
}
.card-main {
position: relative;
}
.price {
position: absolute;
background: #fa0;
font-weight: 700;
color: #ffff;
text-align: center;
display: block;
text-transform: uppercase;
height: 30px;
width: 50px;
border-radius: 0 15px 15px 0;
line-height: 30px;
font-style: italic;
left: -9px;
top: 30px;
}
.price::after {
border-top: 6px solid #c80;
content: '';
position: absolute;
bottom: -6px;
left: 0;
border-left: 8px solid transparent;
border-right: 0px solid transparent;
}
.label {
position: absolute;
top: 10px;
/* bottom: 104px;
*/
left: -9px;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
z-index: 2;
line-height: 100%;
color: #ffff;
border-radius: 3px;
padding: 5px 8px;
}
.label-green {
background: #5cb85c;
}
.label2 {
position: absolute;
top: 10px;
/* bottom: 104px;
*/
right: -9px;
font-size: 10px;
font-weight: 400;
text-transform: uppercase;
z-index: 2;
line-height: 100%;
color: #ffff;
border-radius: 3px;
padding: 5px 8px;
}
.label-red {
background: #C5312D;
}
.image img {
width: 100%;
height: 100%;
position: center;
}
.cart-line {
height: 2px;
background: #f1f1f1;
}
.cart-item {
text-align: center;
line-height: 45px;
background: #fa0;
/* background: rgb(199, 136, 53);
*/
transition: all 0.4s ease-in-out;
position: relative;
top: -30px;
}
.cart-item ul {
padding: 0;
margin: 0;
}
.cart-item ul li {
display: inline-block;
list-style-type: none;
position: relative;
font-size: 25px;
}
.cart-item ul li::after {
content: '';
width: 1px;
height: 18px;
background: rgba(255, 255, 255, .15);
position: absolute;
left: -2px;
top: 10px;
}
.my-card:hover .cart-item {
opacity: 1;
top: 0;
}
.item-container {
position: absolute;
right: -40px;
top: 10px;
z-index: 4;
transition: 0.6s;
opacity: 0;
}
.p {
border: 1px solid rgb(233, 233, 233);
border-radius: 2px;
height: 40px;
width: 40px;
cursor: pointer;
}
.p img {
width: 100%;
height: 100%;
opacity: 0.8;
}
.p img:hover {
opacity: 1;
}
.my-card:hover .item-container {
opacity: 1;
right: 10px;
}
.content {
padding: 16px 0;
text-align: center;
}
.content mat-card-title {
font-size: 16px;
color: #555;
font-weight: 700;
text-transform: capitalize;
transition: all .3s;
}
.content mat-card-title:hover {
color: #fa0;
text-decoration: none;
}
.content p {
margin-bottom: 0;
}
.content .description {
font-size: 15px;
color: #fa0;
font-weight: 500;
font-style: italic;
margin-right: 6px;
}
<section class="bg-color">
<div class="containers">
<mat-grid-list [cols]="breakpoint" rowHeight="500px" (window:resize)="onResize($event)">
<mat-grid-tile *ngFor="let item of pagedList">
<div>
<mat-card class="my-card">
<div class="card-main">
<div *ngIf="item.buy_price != 0">
<div class="label label-green">Buy NOW</div>
<div class="price">{{item.buy_price | currency:'EUR':true}}</div>
</div>
<div *ngIf="item.seller == username">
<div class="label2 label-red">My item</div>
</div>
<!-- Small images -->
<div class="item-container">
<div *ngIf="item.images.length!==0">
<div *ngFor="let image of item.images">
<div class="p"><img [src]="'data:image/jpeg;base64,' + image.imageByte" alt="item"> </div>
</div>
</div>
</div>
<!-- 1st image -->
<div class="image">
<div *ngIf="item.images.length==0">
<img src="/assets/images/no_image_found.jpg" alt="image">
</div>
<div *ngIf="item.images.length!=0">
<img [src]="'data:image/jpeg;base64,' + item.images[0].imageByte" alt="image">
</div>
</div>
<div class="cart-line"></div>
<div class="cart-item">
<ul>
<li><a routerLink="/item-detail/{{item.id}}"><i class="bi-basket"></i></a></li>
</ul>
</div>
</div>
<div class="content">
<mat-card-title>{{item.name.length>34?item.name.substring(0,30)+ "...":item.name}}</mat-card-title>
<p><span class="description">{{item.description.length>34?item.description.substring(0,30)+ "...":item.description}}</span></p>
</div>
</mat-card>
</div>
</mat-grid-tile>
</mat-grid-list>
</div>
</section>
I am trying to create a progress bar with multiple money til current date based on this UX sample
So far, I am able to display the first circle. Here's an output output of my code:
HTML:
<div class={`col-md-12`}>
<h3 class="line-bottom mt-0">Money Earned to Date</h3>
<div class="row">
<div class="col-md-6">
<div class="progress">
<div class="progress-bar" style="width: 12%; background: #ed687c;">
<span class="progress-icon fa fa-dollar-sign" style="color: #707070; border-color: #707070;"></span>
<div class="progress-value">$100</div>
</div>
</div>
</div>
</div>
</div>
CSS
.progressbar-title {
font-size: 14px;
color: #848484;
text-transform: capitalize;
}
.progress {
height: 30px;
overflow: visible;
background: #f4bc25;
margin-top: 25px;
margin-bottom: 40px;
border-radius: 20px;
border: 1px solid #707070;
}
.progress .progress-bar {
position: relative;
}
.progress .progress-icon {
width: 55px;
height: 53px;
line-height: 47px;
border-radius: 50%;
font-size: 20px;
position: absolute;
top: -14px;
right: 0;
padding: 0 19px;
background: #fff;
border-width: 3px;
border-style: solid;
color: #707070;
}
.progress-value {
font-size: 15px;
color: #000;
position: absolute;
top: 45px;
right: 11px;
}
Can someone please help me finish the remaining parts on the UX?
if you want to make more circles dynamically you have to make it with Javacript but if you want it static (with only 5 circles) then here you go :
.row,.progress{ position: relative;width: 100%;}
.progress-bar{position:relative;background: #f6ba2b;height: 24px; border-radius:36px}
.progress-bar > .offCircle{
position:absolute;width:100%;
height:100%;
/* background:red; */
}
.progress:after,
.progress-bar:before,
.progress-bar:after,
.progress-bar > .offCircle:before,
.progress-bar > .offCircle:after
{
position:absolute;
color: #707070;
top: 0;
width:33px;
height: 33px;
background:#fff;
margin-top: -7.5px;
margin-top: -6.5px;
border-radius:36px;
border: 2px solid #707070;
text-shadow: 0 0 0px black;
line-height: 2.2;
text-align: center;
}
.progress-bar > .offCircle:before{
content: '$\A 100';
left:1.67%;
}
.progress-bar > .offCircle:after{
content: '$\A 500';
left:8.33%;
}
.progress-bar:before{
content: '$$\A 1000';
left:16.67%;
}
.progress-bar:after{
content: '$$\A 2500';
left:41.76%;
}
.progress:after{
content: '$$\A 5000';
left:83.33%;
}
<div class="row">
<div class="col-md-6">
<div class="progress">
<div class="progress-bar">
<span class="offCircle"></span>
<div class="progress-value fa fa-dollar-sign"></div>
</div>
</div>
</div>
</div>
to make it animate add css transition for the effect, you have to calculate specific value as % and pass it to a Progress-bar with javascript, you can do it in many ways.
I was finally able to complete the rest of the parts on my own.
See screenshot
In case if anyone is interested, here's the complete code:
HTML:
<div class="col-md-12">
<h3 class="heading">Money Earned to Date</h3>
<div class="row">
<div class="col-md-10">
<div class="checkout-wrap">
<ul class="checkout-bar">
<li class="visited first">
$100
</li>
<li class="previous first">$500</li>
<li class="active">
$1,000
<div class="progress-bar" style="width: 85%; background: #cc504c;"></div>
<div class="progress-value">$1,500</div>
</li>
<li class="next">$2,500</li>
<li>$5,000</li>
</ul>
<h2 class="currentMoney">$1,500.00</h2>
</div>
</div>
</div>
</div>
CSS
#-webkit-keyframes myanimation {
from {
left: 0%;
}
to {
left: 50%;
}
}
h1 {
text-align: center;
font-family: "PT Sans Caption", sans-serif;
font-weight: 400;
font-size: 30px;
padding: 20px 0;
color: #777;
}
.checkout-wrap {
color: #444;
font-family: "PT Sans Caption", sans-serif;
margin: 40px auto;
max-width: 1200px;
position: relative;
}
ul.checkout-bar {
margin: 0 20px;
}
ul.checkout-bar li {
color: #444;
display: block;
font-size: 16px;
font-weight: 600;
padding: 14px 20px 14px 80px;
position: relative;
}
ul.checkout-bar li:before {
background: #fff;
border: 2px solid #707070;
border-radius: 50%;
color: #707070;
font-size: 20px;
font-weight: 700;
left: 20px;
line-height: 37px;
height: 35px;
position: absolute;
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
top: 4px;
width: 35px;
z-index: 2;
}
ul.checkout-bar li.active {
color: #444;
font-weight: bold;
padding-left: 10px;
letter-spacing: 1px;
}
ul.checkout-bar li.active:before {
background: #fff;
z-index: 3;
border-color: #707070;
color: #707070;
}
ul.checkout-bar li.visited {
background: #ECECEC;
color: #444;
z-index: 3;
padding-left: 10px;
letter-spacing: 1px;
}
ul.checkout-bar li.visited:before {
background: #fff;
z-index: 3;
border-color: #707070;
color: #707070;
}
ul.checkout-bar li:nth-child(1):before {
content: "$";
}
ul.checkout-bar li:nth-child(2):before {
content: "$";
}
ul.checkout-bar li:nth-child(3):before {
content: "$$";
}
ul.checkout-bar li:nth-child(4):before {
content: "$$";
}
ul.checkout-bar li:nth-child(5):before {
content: "$$";
}
ul.checkout-bar a {
color: #444;
font-size: 16px;
font-weight: 600;
text-decoration: none;
padding-left: 10px;
letter-spacing: 1px;
}
ul.checkout-bar li.active .progress-value{
width: 50px;
height: 25px;
font-size: 16px;
font-weight: 600;
color: #f4bc25;
line-height: 25px;
border-radius: 4px;
position: absolute;
top: -113px;
right: -23px;
letter-spacing: 1px;
}
ul.checkout-bar li.active .t_progress-bar:after{
content: "\F3C5";
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: -88px;
right: -10px;
font-size: 25px;
font-weight: 700;
color: #f4bc25;
}
.finances .checkout-wrap .currentMoney {
text-align: right;
padding-top: 100px;
font-size: 35px;
color: #f4bc25;
letter-spacing: 1px;
}
#media all and (min-width: 800px) {
.checkout-bar li.active:after {
-webkit-animation: myanimation 3s 0;
background-size: 35px 35px;
background-color: #f4bc25;
content: "";
height: 28px;
width: 50%;
left: 50%;
position: absolute;
top: -50px;
z-index: 0;
}
.checkout-wrap {
margin: 80px auto 0 auto
}
ul.checkout-bar {
background-size: 35px 35px;
background-color: #fff;
border-radius: 15px;
height: 30px;
margin: 0 auto;
padding: 0;
position: absolute;
width: 100%;
border: 1px solid #000;
}
ul.checkout-bar:before {
background-size: 35px 35px;
background-color: #f4bc25;
border-radius: 15px;
content: " ";
height: 28px;
left: 0;
position: absolute;
width: 10%;
}
ul.checkout-bar li {
display: inline-block;
margin: 50px 0 0;
padding: 0 0 0 20px;
text-align: center;
width: 17%;
}
ul.checkout-bar li:before {
height: 55px;
width: 55px;
left: 40%;
line-height: 55px;
position: absolute;
top: -65px;
z-index: 1;
}
ul.checkout-bar li.visited {
background: none;
}
ul.checkout-bar li.visited:after {
background-size: 35px 35px;
background-color: #f4bc25;
content: "";
height: 28px;
left: 50%;
position: absolute;
top: -50px;
width: 100%;
z-index: 1;
}
}
I am having trouble aligning my div so it doesn't push content below down, somehow if the asset name is more than one row, it will push down the metadata description down one row, I have tried positioning and flow and it seems now working, could some one please take a look to see what I have done wrong?
CSS
.port-container {
width: 490px;
height: 166px;
margin: 0px 0px 20px 0px;
float: left;
}
.port-container .port-image-link {
position: relative;
left: 10px;
}
.port-container .port-metadata-text {
padding: 50px 12px 10px 50px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-size: 12px;
position: absolute;
margin-top: -180px;
margin-left: 173px;
z-index: 8;
line-height: 17px;
}
.port-container .port-image-link .port-text-link {
cursor: pointer;
width: 220px;
top: 138px;
position: relative;
text-decoration: none;
z-index: 9;
}
.port-container .port-image-link a {
text-decoration: none;
}
.port-container .port-image-link a span.port-text-link {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
line-height: 17px;
position: relative;
top: -170px;
font-size: 12px;
text-decoration: none;
padding: 9px 50px 0px 0px;
font-weight: bold;
cursor: pointer;
left: 220px;
display: block;
}
.port-container .port-image-link a:hover span.port-text-link {
cursor: pointer;
text-decoration: underline;
}
HTML
<div class="port-container">
<div class="port-image-link">
%asset_thumbnail%<span class="port-text-link">%asset_name%</span>
<div class="port-metadata-text">%asset_metadata_DC.Description%</div>
</div>
</div>
I am trying to place content-desc div to the bottom of content-box-inner but it's not placing there, it's going just after the image:
.content-box-inner {
position: relative;
display: inline-block;
width: 360px;
height: 460px;
background-color: #fff;
margin-right: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.content-box-inner > img {
width: 200px;
margin-top: 10px;
border: 1px solid #ddd;
padding: 8px;
}
.content-title {
position: relative;
height: 35px;
background-color: #FFB400;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}
.content-title > p {
text-align: center;
line-height: 35px;
font-family: verdana;
color: #222;
font-weight: bold;
letter-spacing: 0.02em;
text-transform: capitalize;
}
.content-desc {
position: relative;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
.content-desc > p {
font-family: verdana;
letter-spacing: 0.04em;
font-size: 15px;
padding: 8px;
}
<div class="content-box-inner">
<div class="content-title">
<p>text</p>
</div>
<img src="img.jpg">
<div class="content-desc">
<p>some text</p>
</div>
</div>
Does anyone know, what I did wrong in my CSS?
Have you tried using position: absolute;? adding position: absolute; bottom: 0; should fix your issues.
Change
.content-desc {
position: relative;
...
}
to
.content-desc {
position: absolute;
...
}
you will want your .content-desc to be set to absolute positioning:
.content-box-inner {
position: relative;
display: inline-block;
width: 360px;
height: 460px;
background-color: #fff;
margin-right: 10px;
border: 1px solid #ddd;
overflow: hidden;
}
.content-box-inner > img {
width: 200px;
margin-top: 10px;
border: 1px solid #ddd;
padding: 8px;
}
.content-title {
position: relative;
height: 35px;
background-color: #FFB400;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3)
}
.content-title > p {
text-align: center;
line-height: 35px;
font-family: verdana;
color: #222;
font-weight: bold;
letter-spacing: 0.02em;
text-transform: capitalize;
}
.content-desc {
position: absolute;
height: 50px;
bottom: 0;
left: 0;
right: 0;
}
.content-desc > p {
font-family: verdana;
letter-spacing: 0.04em;
font-size: 15px;
padding: 8px;
}
see link to fiddle here: https://jsfiddle.net/john_h/w05hwuxp/
I can't make my background only in my text..allways go futher until the end of the screen.
Any idea what i'm doing wrong?
Here's my HTML:
<div class="textSlide">
<span id="firstTitle">We help you find everyone you</span>
<span id="secondTitle">need to get you started.</span>
<span id="thirdTitle">Look Ouch is an online meeting point where all kinds</span>
<span id="fourthTitle">of artists can unite to make ideas happen.</span>
</div>
Here's my CSS:
.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: block; padding: 5px; }
.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }
FIDDLE
Change the display: block, to display: inline-block;
http://jsfiddle.net/w456u/1/
.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: inline-block; padding: 5px; }
.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }