I'm learning css(scss) and i've problem with stylistic my text.
How i can get text in one line and how to center icon from fontawsome to the text?
main {
overflow: hidden;
opacity: 0.6;
.icons {
display: block;
position: relative;
font-size: 3rem;
opacity: 1;
.fire {
color: red;
display: flex;
padding-top: 5%;
padding-left: 3%;
position: absolute;
margin-top: 10%;
p {
padding-left: 5%;
display: flex;
color: blanchedalmond;
}
}
}
}
Related
Two issues-
I built a react sidebar, and for some reason whenever toggling it, the bar is behind the page's background image. I tried putting z-index: -1; on the background image, but then the image disappears (though the side bar finally shows again.) I have messed around with "position", with no success either. How can I get my sidebar to go over my background image?
The other issue is that whenever toggling the sidebar, it cover the navbar's title. Any suggestions on how to get my navbar's title to move to the side when the sidebar is being toggled?
enter image description here
enter image description here
.navbar {
align-items: center;
background-color: #060b26;
color: white;
display: flex;
height: 80px;
justify-content: start;
text-align: right;
}
.title {
margin-left: 20px;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
position: absolute;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
align-items: center;
background-color: #060b26;
display: flex;
height: 80px;
justify-content: start;
position: absolute;
width: 100%;
}
span {
margin-left: 16px;
}
.backgroundImage {
background-image: url('assets/dog.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: blur(2px);
height: 100vh;
width: 100%;
}
.dashboardButton {
background: linear-gradient(
#fd585c,
#ec7278,
#ff5b69
);
border-radius: 8px;
color: #f5f5f5;
display: grid;
font-style: "Poppins", sans-serif;
height: 80px;
left: 43%;
letter-spacing: 3px;
margin: auto;
place-items: center;
position: absolute;
text-decoration: none;
top: 55%;
width: 200px;
}
.welcomeHeader {
color: #fd585c;
display: center;
font-size: 375%;
left: 25%;
position: absolute;
top: 35%
}
.welcomeDescription {
color: #f5f5f5;
font-size: 125%;
left: 20%;
position: absolute;
top: 47%;
}
I ended up putting:
backgroundImage {
z-index: 1;
}
nav-menu.active {
z-index: 2;
}
That solved the issue!
I have some trouble with bootstrap carousel. I cannot remove blue under lines.
Can someone help me? It's not text decoration (text-decoration: none; doesn't work).
.carousel {
width: 100%;
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-decoration: none !important
}
.carousel-inner,.carousel,.carousel-indicators {
text-decoration: none;
box-shadow: none;
}
.carousel-indicators {
bottom: -150px;
text-decoration: none !important
}
.section1-text {
line-height: 1.55;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
width: 100%;
text-decoration: none !important
}
.section1-text p {
color: white;
font-size: 25px ;
margin-bottom: 30px;
width: 80%;
z-index: 2;
}
I have a div appearing on top of an image when I hover the image itself. The div contains two divs (buttons) that also have a :hover that changes their color and sets the cursor to the pointer.
The issue is the hovering on the button doesn't trigger the hover.
Also, it seems that hovering on the image at the bottom where the btn_container will appear doesn't trigger to first :hover and doesn't make the btn_container appear.
//HTML
<div class="container">
<img src="src">
<div class="btn_container">
<div class=" btn">
<p>Select</p>
</div>
<div class="btn">
<p>Preview</p>
</div>
</div>
//SCSS
.container {
position: relative;
width: 100%;
img {
width: 100%;
height: auto;
}
.btn_container {
position: absolute;
width: 100%;
height: 40px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
display: none;
position: absolute;
}
img:hover + .btn_container,
.btn_container > * {
display: flex;
border: none;
text-align: center;
justify-content: space-around;
}
.btn {
padding: 6px 12px;
height: 14px;
background: var(--yellow-medium);
border-radius: 8px;
display: flex;
justify-content: space-evenly;
align-items: center;
color: var(--white);
font-family: roboto;
&:hover {
cursor: pointer;
background: var(--red);
color: var(--white);
}
}
}
Preview, button hovering not working:
If I force the hover on the img using the inspector, the button hovering seems to work:
The problem is in classes img:hover + .btn_container and .btn_container > *.
Here is the updated scss:
.container {
position: relative;
width: 100%;
img {
display: block;
width: 100%;
height: auto;
border: 0;
}
&:hover .btn_container {
display: flex;
}
.btn_container {
position: absolute;
bottom: 0;
left: 0;
display: none;
align-items: center;
justify-content: space-around;
width: 100%;
height: 40px;
text-align: center;
background-color: var(--dark-purple-trans);
border: none;
}
.btn {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 14px;
padding: 6px 12px;
color: var(--white);
font-family: roboto;
background-color: var(--yellow-medium);
border-radius: 8px;
cursor: pointer;
&:hover {
color: var(--white);
background-color: var(--red);
}
}
}
You can view it in action here: Codepen
I tried using opacity instead of display to toggle visibility of the btn_container and added a hover to btn_container and it seemed to work: https://jsfiddle.net/pr8dxe2g/1/
.btn_container {
width: 500px;
height: 100px;
background-color: var(--dark-purple-trans);
bottom: 0;
left: 0;
align-items: center;
opacity: 0;
position: absolute;
}
img:hover + .btn_container,
.btn_container:hover,
.btn_container > * {
display: flex;
opacity: 1;
border: 1px solid blue;
text-align: center;
justify-content: space-around;
}
There may be some issue with your current code with the fact that the the img div has a higher stack-order if the display is set to none initially, however I am not certain so if anyone knows I would like to know why this is the case as well.
I'm writing a document in Typora and I need a paragraph break whitch is a line with text in the middle. The whole document should be exportable to pdf.
result
I currently tried this, but it doesn't work when exporting to pdf:
h3 {
color: #015573;
text-align: center;
font-size: 0.8em;
position: relative;
margin:0;
text-transform: uppercase;
}
h3 span {
background-color: white;
padding: 0 0.3em;
}
h3:before{
content:"";
display: block;
position: absolute;
z-index:-1;
top: 50%;
width: 100%;
border-bottom: 2px solid #015573;
}
Try using below code. It's working fine. You can export to pdf with no problems. I did not use the background-color: white; property because the background color is white by default of any exported pdf. BTW, if you are using a dark theme for Typora, you can specify that property. It won't affect the exported style in the pdf file.
h3 {
color: #015573;
text-align: center;
font-size: 0.8em;
text-transform: uppercase;
overflow: hidden;
}
h3:before,
h3:after {
content: "";
display: inline-block;
height: 2px;
position: relative;
vertical-align: middle;
width: 50%;
background-color: #015573;
}
h3:before {
right: 0.5em;
margin-left: -50%;
}
h3:after {
left: 0.5em;
margin-right: -50%;
}
<h3>Heading</h3>
This is how exported pdf looks like:
.fancy {
line-height: 0.5;
text-align: center;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-bottom: 1px solid black;
top: 0;
width: 600px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<p class="fancy"><span>A fancy subtitle</span></p>
I want to create a button which changes on hover. Here you can check it: https://drive.google.com/file/d/1fIcil2Xyky8DC2NRcfZBKXCMHk9gpat2/view?usp=sharing.
Here you can see my attempt: https://codepen.io/koravski/pen/BEvKRP
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: absolute;
color: #fff;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:hover {
width: 50px;
height: 5px;
margin-top: 40px;
}
<div class="txt">Call to action</div>
<div class="box"></div>
The problem is that when I hover it, it starts looping. It should be on the red rectangle so it won't loop.
If you have any suggestions it will be nice.
Thanks.
It's not quite clear what effect you are after but you're changing the size so when it shrinks you're not hovering on it any more.
I'd suggest a transform instead (two actually, one for the size and another for the position).
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: absolute;
color: #fff;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.box:hover {
transform: translateY(40px) scale(.1);
}
<div class="txt">Call to action</div>
<div class="box"></div>
There are other issues but it depends on what this actually supposed to do.
In fact, you can do this with a single div.
html,
body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position: relative;
color: #fff;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
transition: all 1s;
}
.txt:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
z-index: -1;
transition: all 1s;
}
.txt:hover:before {
transform: translateY(40px) scale(.1);
}
<div class="txt">Call to action</div>
This is happening because whenever the button shrinks, your mouse is no longer hovering over it, so the animation comes back up and hits the box (causing it to trigger once again. I'd suggest using a pseudo element -
.box::before {
background-color: red;
content: '';
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
transition: all 1s;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.box:hover.box::before {
width: 50px;
height: 5px;
}
https://codepen.io/aedenmurray/pen/XQodQj
Here is an idea using background animation where you will need only one element:
body {
display: flex;
justify-content: center;
align-items: center;
font-family: 'Lato', sans-serif;
}
.txt {
color: #fff;
padding:20px 50px;
background-image:linear-gradient(red,red);
background-size:100% 100%;
background-position:bottom center;
background-repeat:no-repeat;
transition:1s;
}
.txt:hover {
background-size:20% 5%;
color:#000;
}
<div class="txt">Call to action</div>
I would wrap your .box and .txt in a container, and then when that container is hovered, do the transition. That way, your hover area isn't being resized - instead the contents are.
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.txt {
position:absolute;
color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
}
.box {
width: 200px;
height: 50px;
background-color: red;
transition: all 1s;
}
.container {
position: relative;
}
.container:hover > .box {
width: 50px;
height: 5px;
margin-top: 40px;
}
<div class="container">
<div class="txt"> Call to action</div>
<div class="box"></div>
</div>
View Updated CodePen
The trick is to apply the :hover to a surrounding element.
So you keep hovering over the element and just the included block will change.
FYI:
translate3d is used for better performance than normal translateX.
You could improve the code further. The red element could be a ::before element, and you might want to attach :focus, too for better accessibility. And maybe use a button element.
html, body {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: #333;
font-family: 'Lato', sans-serif;
}
.btn {
position: relative;
}
.btn-txt {
color: #fff;
text-align: center;
vertical-align: middle;
position: relative;
padding: 20px 30px;
}
.btn-box {
background-color: red;
transition: all 1s;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
}
.btn:hover .btn-box {
width: 50px;
height: 5px;
transform: translate3d(50px, 0, 0);
top: auto;
}
<div class="btn">
<div class="btn-box"></div>
<div class="btn-txt">Call to action</div>
</div>