i have 2 spans within a span to center next to eachother, class inside_span up and inside_span down, they are aligned to the left of the pulse_result_format span, i have tried margin: 0 auto on the pulse result format span, does not work, and display: inline-block;
HTML:
<div class="pulse_votes_container thumb1">
<span class="pulse_vote_buttons">
</span>
<span class="pulse_result_format">
<span class='inside_span up'>{up}</span>
<span class='inside_span down'>{down}</span>
</span>
</div>
CSS:
.inside_span {
display: inline-block;
width:40%;
border-radius: 3px 3px 3px 3px;
margin: 10% auto 0px 0px;
float:left;
}
.down {
background-color:#FF6E25;
}
.up {
background-color: rgb(70, 136, 71);
}
.pulse_result_format {
display: inline-block;
float: left;
width: 100%;
text-align: center;
font-weight: bold;
color: rgb(255, 255, 255);
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
}
.pulse_votes_container {
width:100%;
height:100%;
display: inline-block;
text-align: center;
}
Remove the float:left from .inside_span
.inside_span {
display: inline-block;
width:40%;
border-radius: 3px 3px 3px 3px;
margin: 10% auto 0px 0px;
}
jsFiddle example
Related
I'm looking to make div.box and button.navBtn responsive.
Currently when the page is resized to 871px width, the buttons instantly stack on top of each other and the long div.box is squished until it clashes into the buttons. The "final look" (around 500px wide) doesn't even look that bad honestly and is the ideal way this window would look on smaller screens. I'm just trying to make the transition to that size nicer.
Preferably I'd like the buttons to resize themselves gradually with div.box until they hit a certain width and then stack on top of each other however I can't figure out how to apply the correct media query to do this. I feel as if my divider is causing some type of issue a well with spacing but I'm not entirely sure. It does have some whitespace I can't get rid of and is set to 2em width.
I'm also not sure why div.main stops resizing once you hit around 495px width. I'm gonna make sure I use Bootstrap or something next time to avoid this...
Any help would be appreciated. Here's a big snippet of code:
html {
min-height: 100%;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll;
}
h1 {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
font-size: 3.5em;
margin-top: 0px;
margin-bottom: 10px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
color: rgb(250, 250, 250);
display: flex;
font-size: 1.7em;
justify-content: center;
padding-top: 5px;
margin-bottom: 16px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a {
color: rgb(250, 250, 250);
}
ul {
padding-left: 0px;
}
li {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
list-style: none;
font-size: 1.5em;
margin-bottom: 5px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button {
background: rgba(0, 0, 0, 0);
background-image: url(Pictures/blank.png);
color: #a5afaa;
border: 3.5px solid transparent;
border-radius: .6em;
padding: 2.8em;
/* transition: all 0.2s; */
background-repeat: no-repeat;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em #fff8cc;
cursor: url('Pictures/glove-lg.png'), auto;
}
.main {
border: solid 2px #939388;
border-radius: 10px;
background-image: url(Pictures/texture.png);
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
}
.inner {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
margin: 20px;
}
.decoration {
outline: 2px solid rgba(128, 128, 128, 0.4);
outline-offset: -5px;
border-radius: 10px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}
.box {
background-color: #080824;
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
border-radius: 3px;
margin: 30px;
padding: 1px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.navHome {
display: inline-block;
position: relative;
margin-top: 15px;
}
.navBtn {
border: solid 2px #939388;
background-image: none;
background-color: #0f0f3d;
width: 25em;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}
.navText {
color: white;
font-family: 'Lora', serif;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 0em;
}
.divider {
display: inline-block;
width: 2em;
height: auto;
}
.aboutText {
color: white;
font-family: 'Lora', serif;
font-size: 1.5em;
text-align: center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 1.5em;
}
#about {
padding-top: 25px;
}
#homeList {
margin-bottom: 0px;
}
#homeBox {
padding: 30px;
padding-top: 20px;
}
#media screen and (max-width: 992px) {
h1 {
text-align: center;
padding: 3px;
}
}
<body>
<div class="wrapper">
<div class="main">
<div class="decoration">
<div id="about">
<h1>I mean, it kinda works...</h1>
<ul id="homeList">
<li>Long List Item #1</li>
<li>Long List Item #2</li>
</ul>
<div id="innerHome" class="inner">
<div id="homeBox" class="box">
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">About</div>
</button>
</a>
<div class="divider"></div>
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">Items</div>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
For the buttons to resize themselves you can't give them an explicit width like you do in .navBtn. You need to make them have a certain percentage of the parent and when they hit their minimal witdh they wrap.
Without that change the best that can be done is making the parent smaller when the elements wrap like so:
#homeBox {
width: min-content;
}
#media (min-width: 992px) {
#homeBox {
width: auto;
}
}
html {
min-height: 100%;
}
body {
display: flex;
justify-content: center;
font-family: 'Lora', serif;
margin: .8em;
background-color: #151b20;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
overflow-y: scroll;
}
h1 {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
font-size: 3.5em;
margin-top: 0px;
margin-bottom: 10px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
color: rgb(250, 250, 250);
display: flex;
font-size: 1.7em;
justify-content: center;
padding-top: 5px;
margin-bottom: 16px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
a {
color: rgb(250, 250, 250);
}
ul {
padding-left: 0px;
}
li {
color: rgb(250, 250, 250);
display: flex;
justify-content: center;
list-style: none;
font-size: 1.5em;
margin-bottom: 5px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button {
background: rgba(0, 0, 0, 0);
background-image: url(Pictures/blank.png);
color: #a5afaa;
border: 3.5px solid transparent;
border-radius: .6em;
padding: 2.8em;
/* transition: all 0.2s; */
background-repeat: no-repeat;
}
button:hover {
border-color: #fff8cc;
box-shadow: 0em 0em 1em 0em #fff8cc;
cursor: url('Pictures/glove-lg.png'), auto;
}
.main {
border: solid 2px #939388;
border-radius: 10px;
background-image: url(Pictures/texture.png);
background-color: #0f0f3de8;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
margin-top: 20px;
}
.inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 20px;
}
.decoration {
outline: 2px solid rgba(128, 128, 128, 0.4);
outline-offset: -5px;
border-radius: 10px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
}
.box {
background-color: #080824;
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.6);
border-radius: 3px;
margin: 30px;
padding: 1px;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.navHome {
margin-top: 15px;
display: inline-block;
position: relative;
}
.navBtn {
border: solid 2px #939388;
background-image: none;
background-color: #0f0f3d;
box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
/* max-width: 25em; */
width: 25em;
}
.navText {
color: white;
font-family: 'Lora', serif;
font-size: 2em;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 0em;
}
.divider {
display: inline-block;
width: 2em;
height: auto;
}
.aboutText {
color: white;
font-family: 'Lora', serif;
font-size: 1.5em;
text-align: center;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 1.5em;
}
#about {
padding-top: 25px;
}
#homeList {
margin-bottom: 0px;
}
#homeBox {
padding: 30px;
padding-top: 20px;
}
#homeBox {
width: min-content;
}
#media (min-width: 992px) {
#homeBox {
width: auto;
}
}
#media screen and (max-width: 992px) {
h1 {
text-align: center;
padding: 3px;
}
}
<body>
<div class="wrapper">
<div class="main">
<div class="decoration">
<div id="about">
<h1>I mean, it kinda works...</h1>
<ul id="homeList">
<li>Long List Item #1</li>
<li>Long List Item #2</li>
</ul>
<div id="innerHome" class="inner">
<div id="homeBox" class="box">
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">About</div>
</button>
</a>
<div class="divider"></div>
<a href="" class="navHome">
<button class="navBtn">
<div class="navText">Items</div>
</button>
</a>
</div>
</div>
</div>
</div>
</div>
Problem :
To make a vertical line which separates two objects but it won't appear because it doesn't have height although I added height: 100%.
Why isn't it filling up the space from the top to the bottom of my
div? Is it because .card-body has height: auto?
Tried Cases :
I already tried adding width, disabling flex-box but nothing of that worked, but if I add a specific height to my .card-body it works.
Do you
know a solution how it could work without adding a specific height?
.card {
margin-bottom: 30px;
}
.card > .card-header {
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
margin-bottom: 6px;
}
.card > .card-header.light {
color: #fff;
}
.card > .card-body {
background-color: #fff;
border-radius: 12px;
padding: 24px;
-webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
}
.card > .card-body.server-status {
display: flex;
align-items: center;
}
.card > .card-body.server-status > .counter {
width: 50%;
font-weight: 500;
color: #95a0b7;
font-size: 32px;
display: flex;
flex-direction: column;
align-items: center;
}
.card > .card-body.server-status > .counter > span {
font-size: 15px!important;
color: #0d2c4a!important;
text-transform: capitalize;
}
<div class="card">
<div class="card-header light">
Active Services
</div>
<div class="card-body server-status">
<div class="counter">
7/9
<span>
Servers running
</span>
</div>
<div style="border-left:1px solid #0d2c4a;height:100%;"></div>
<div class="chart">
</div>
</div>
</div>
You need to make it stretch since your flex container is align-items: center
You can remove the height 100%, I added a class to the divider, it comes down to this
.divider {
align-self: stretch;
}
If you did not have the align center, it would of worked by default because the align items defaults to stretch but since you changed it to center and your divider has no content so the line does not show. Setting the divider itself to stretch again solves the problem and no need for the extra css
.card {
margin-bottom: 30px;
}
.card>.card-header {
font-weight: 500;
text-transform: uppercase;
font-size: 15px;
margin-bottom: 6px;
}
.card>.card-header.light {
color: #fff;
}
.card>.card-body {
background-color: #fff;
border-radius: 12px;
padding: 24px;
-webkit-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
box-shadow: -2px 4px 34px 1px rgba(0, 0, 0, 0.15);
}
.card>.card-body.server-status {
display: flex;
align-items: center;
}
.card>.card-body.server-status>.counter {
width: 50%;
font-weight: 500;
color: #95a0b7;
font-size: 32px;
display: flex;
flex-direction: column;
align-items: center;
}
.card>.card-body.server-status>.counter>span {
font-size: 15px!important;
color: #0d2c4a!important;
text-transform: capitalize;
}
.divider {
align-self: stretch;
}
<div class="card">
<div class="card-header light">
Active Services
</div>
<div class="card-body server-status">
<div class="counter">
7/9
<span>
Servers running
</span>
</div>
<div class="divider" style="border-left:1px solid #0d2c4a;"></div>
<div class="chart"></div>
</div>
</div>
Also you can add this css property to your css ...
.counter{
border-right: 1px solid black;
}
Instead of using a <div>, try using an <hr> and rotating it with css. Something along the lines of:
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
transform: rotate(90deg);
}
See this documentation for help: https://www.w3schools.com/tags/tag_hr.asp
I'd like to have a button at the bottom of a table, in the middle of the bottom of the table, centered. I did add left:30% and right:30% so the button locates at the middle, however, I noticed in Chrome this get rendered differently than Safari or Firefox, in Chrome, the percentages are not the same, thus the button ends up a little more to the left than right, and not centered/middled. Try it below.
How can I get this to work the same in Chrome too? Why are the percentages rendered differently, what's the best technique to centre this element that needs to be in absolute positioning?
.panel {
background-color: #fff;
border-radius: 10px;
padding: 15px 25px;
position: relative;
width: 100%;
z-index: 10;
}
.table {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02);
display: flex;
flex-direction: column;
height:350px;
background:lightblue;
}
.table * {
text-align: center;
}
.contact-button {
bottom: -25px;
background: #f9f9f9;
border-radius: 10px;
left: 30%;
right: 30%;
margin: 0 auto;
position:absolute;
}
.btn {
display: inline-block;
padding: 8px 32px;
cursor: pointer;
text-align: center;
vertical-align: middle;
white-space: nowrap;
outline: none;
line-height: inherit;
background-color: white;
border: 1px solid black;
color: black;
font-size: 14px;
letter-spacing: 2px;
}
<div class="panel table">
<button class="btn contact-button">CONTACT MORE INFO</button>
</div>
You can just move the button from the div and create something like this
<div class="panel table"></div>
<div class="wrapper">
<button class="btn contact-button">CONTACT MORE INFO</button>
</div>
This way you don't have to use position:absolute; you can just use
display:flex;
justify-content:center;
If you want more support for older browser versions, please check this article
Check the example below
.panel {
background-color: #fff;
border-radius: 10px;
position: relative;
width: 100%;
z-index: 10;
}
.table {
box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.08), 0px 20px 31px 3px rgba(0, 0, 0, 0.09), 0px 8px 20px 7px rgba(0, 0, 0, 0.02);
display: flex;
flex-direction: column;
height: 350px;
background: lightblue;
}
.table * {
text-align: center;
}
.contact-button {
bottom: -25px;
background: #f9f9f9;
border-radius: 10px;
left: 30%;
right: 30%;
margin: 0 auto;
}
.btn {
display: inline-block;
padding: 8px 32px;
cursor: pointer;
text-align: center;
vertical-align: middle;
white-space: nowrap;
outline: none;
line-height: inherit;
border: 1px solid black;
color: black;
font-size: 14px;
letter-spacing: 2px;
}
.wrapper {
display: flex;
justify-content: center;
}
body {
margin: 0;
}
<div class="panel table">
</div>
<div class="wrapper">
<button class="btn contact-button">CONTACT MORE INFO</button>
</div>
You can use this also it may help you without changing much things:
.contact-button {
background: #f9f9f9;
border-radius: 10px;
margin: 0 auto;
margin-top:370px;
}
have a look on this bin: https://jsbin.com/gipibecedu/edit?html,css,output
I've this code :
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
}
<span>
<p>25</p>
<p>08</p>
</span>
I want to make a perfect circle on my span. I try a border-radius: 50%; but it does not work.
Thanks for the help !
You can do this by giving the span a fixed width and height:
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
<span>
<p>25</p>
<p>08</p>
</span>
You need a predefined width and height on the span to be able to make it round.
span p {
margin: 0;
}
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width:40px;
height:40px;
padding-left:10px;
box-sizing: border-box;
}
<span>
<p>25</p>
<p>08</p>
</span>
add line-height and width:
span {
background-color: #F00;
display: inline-block;
border-radius: 50%;
width: 50px;
line-height: 25px;
text-align: center;
}
Use this code.
HTML:
<span>
<p>25</p>
</span>
<span>
<p>08</p>
</span>
CSS:
span {
background-color: red;
display: inline-block;
border-radius: 50%;
width: 50px;
height: 50px;
text-align: center;
}
border-radius: 50% and padding
document.addEventListener('DOMContentLoaded', () => {
let el = document.querySelector('#wrapper .container');
setTimeout(() => (el.style.marginTop = '20px'), 500);
}, false);
#wrapper {
display: flex;
justify-content: center;
}
#wrapper .container {
display: flex;
flex-direction: column;
align-items: center;
padding: 6px 16px;
font-family: sans-serif;
font-size: 15px;
font-weight: 500;
border-radius: 50%;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
transition: margin-top 650ms ease-out, box-shadow 120ms, transform 120ms;
will-change: margin-top, box-shadow, transform;
user-select: none;
cursor: pointer;
}
#wrapper .container:hover:not(:active) {
box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.1),
0 2px 10px 0px rgba(0, 0, 0, 0.08),
0 0px 10px 0px rgba(0, 0, 0, 0.08);
}
#wrapper .container:active {
transform: scale(1.4) translateY(5px);
box-shadow: 0 9px 11px -5px rgba(0, 0, 0, 0.2),
0 18px 28px 2px rgba(0, 0,0 , 0.14),
0 7px 34px 6px rgba(0, 0, 0, 0.12);
}
<div id="wrapper">
<div class="container">
<span>10</span>
<span>3</span>
</div>
</div>
It looks like you incorrectly nested paragraph elements inside of span, which is against HTML5 spec, as span is being defined there as an element, which Content Model is described as Phrasing Content, and that:
Most elements that are categorized as Phrasing Content can only contain elements that are themselves categorized as phrasing content, not any flow content.
And because paragraph element doesn't belong to Phrasing Content list, you can use div instead of span for this purpose, only if you care to be semantically correct.
So coming back to your problem, it can be rewritten as so:
HTML:
<div>
<p>25</p>
<p>08</p>
</div>
CSS:
p {
margin: 0;
text-align:center;
}
div {
background-color: red;
display: inline-block;
border-radius: 50%;
width:50px;
height:50px;
line-height:25px;
}
Where general rule for achieving the circle by using border radius set to 50%, is that you need to make sure that content of such element has the same width and height. You can get that by fixing these values in your css.
Here is JsFiddle presenting that.
I'd like to place a seconf line of text below the word "State". For some reason the second line of text ("of mind" in red) is placed way below the circle. Do you know what is causing this huge gap and how to fix it? Use of was not appropriate? Thanks
http://jsfiddle.net/7txCN/26/
HTML
<div class="circle text color-2 color2-box-shadow">
State<br> <span>of Mind</span>
</div>
CSS:
.circle {
border-radius: 50%;
float: left;
display: inline-block;
margin-right: 20px;
/* text styling */
font-size: 45px;
width: 220px;
height: 220px;
color: #FFF; border: 2px solid #fff;
line-height: 220px;
text-align: center;
font-family: Arial;
}
.color-1 { background: #DD4814;}
.color-2 { background: #AEA79F; }
.color-3 { background: #5E2750; }
.color1-box-shadow { box-shadow: 0px 0px 1px 1px #DD4814 }
.color2-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F }
.color3-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 }
.circle span {
color: red;
font-size: 22px;
}
I would suggest a slightly improved structure without any bare text nodes.
JSfiddle
HTML
NB. No break tags needed.
<div class="circle text color-2 color2-box-shadow">
<div class="text-wrap">
<span>State</span>
<span>of Mind</span>
</div>
</div
With this CSS
.circle {
border-radius: 50%;
float: left;
display: inline-block;
margin-right: 20px;
/* text styling */
font-size: 45px;
width: 220px;
height: 220px;
color: #FFF;
border: 2px solid #fff;
text-align: center;
font-family: Arial;
position: relative;
}
.color-1 {
background: #DD4814;
}
.color-2 {
background: #AEA79F;
}
.color-3 {
background: #5E2750;
}
.color1-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}
.color2-box-shadow {
box-shadow: 0px 0px 1px 1px #AEA79F
}
.color3-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}
.text-wrap {
position: absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
.text-wrap span {
display: block;
}
.circle span:nth-child(2) {
color: red;
font-size: 22px;
}
The line-height vertical center technique doesn't work with multiple lines of text.
If the height and width of the circle are fixed, then create some of the height with the top and bottom padding to center the text in the middle.
The <br> can be removed if the span is given display: block.
Working Example
.circle {
border-radius: 50%;
float: left;
display: inline-block;
margin-right: 20px;
/* text styling */
font-size: 45px;
width: 220px;
height: 80px;
padding: 70px 0;
color: #FFF;
border: 2px solid #fff;
text-align: center;
font-family: Arial;
}
.color-1 {
background: #DD4814;
}
.color-2 {
background: #AEA79F;
}
.color-3 {
background: #5E2750;
}
.color1-box-shadow {
box-shadow: 0px 0px 1px 1px #DD4814
}
.color2-box-shadow {
box-shadow: 0px 0px 1px 1px #AEA79F
}
.color3-box-shadow {
box-shadow: 0px 0px 1px 1px #5E2750
}
.circle span {
color: red;
font-size: 22px;
display: block
}
<div class="circle text color-2 color2-box-shadow">
State <span>of Mind</span>
</div>
This may help:
.circle {
border-radius: 50%;
float: left;
display: inline-block;
margin-right: 20px;
/* text styling */
font-size: 45px;
width: 220px;
height: 220px;
color: #FFF; border: 2px solid #fff;
line-height: 100px;
text-align: center;
font-family: Arial;
}
.color-1 { background: #DD4814;}
.color-2 { background: #AEA79F; }
.color-3 { background: #5E2750; }
.color1-box-shadow { box-shadow: 0px 0px 1px 1px #DD4814 }
.color2-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F }
.color3-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 }
.circle span {
color: red;
font-size: 22px;
}
<div class="circle text color-2 color2-box-shadow">
State<br> <span>of Mind</span>
</div>