I'm using tailwind css, but I want to import some cards that I saw in a video. I know that I can use in class the after: attribute by tailwind, but its a waste of time when I already have it on css.
This cards are working perfectly without tailwind, but when I add the tailwind CSS a part of the :after is not working. I tried adding !important to the attributes but it still doesn't work.
How it shows with tailwind:
How it shows without tailwind:
My code:
.container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
transform: skewY(-10deg);
}
.container .card {
position: relative;
width: 300px;
height: 400px;
background: white;
transition: 0.5s;
}
.container .card:before {
content: "";
position: absolute;
top: -15px;
left: 0;
width: 100%;
height: 15px;
background-color: #ddc700;
transform-origin: bottom;
transform: skewX(45deg);
transition: 0.5s;
}
.container .card:after {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 15px;
height: 50%;
background-color: #ddc700;
transform-origin: left;
transform: skewY(45deg);
transition: 0.5s;
border-bottom: 200px solid #d9d9d9;
}
.container .card:hover {
transform: translateY(-40px);
}
.container .card .imgBx {
position: relative;
width: 300px;
height: 200px;
background-color: #c6b200;
display: flex;
align-items: center;
flex-direction: column;
}
.container .card .imgBx img {
max-width: 100px;
}
.container .card .imgBx h3 {
position: relative;
color: black;
margin-top: 10px;
}
.container .card .content {
position: relative;
width: 100%;
height: 200px;
padding: 20px;
color: black;
background: white;
text-align: center;
}
.container .card .content:before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 400px;
background: linear-gradient(transparent, transparent, gray);
transform-origin: bottom;
transform: skewX(45deg);
transition: 0.5s;
z-index: -1;
}
.container .card:hover .content:before {
transform: translateY(40px) skewX(45deg);
filter: blur(5px);
opacity: 0.5;
}
.container .card:nth-child(1) {
z-index: 3;
}
.container .card:nth-child(2) {
z-index: 2;
}
.container .card:nth-child(3) {
z-index: 1;
}
#media (max-width: 414px) {
body {
overflow: auto;
}
.card {
width: 80%;
margin-bottom: 50px;
}
.container {
padding-top: 200px;
position: relative;
left: 15%;
top: 80%;
}
.container .card {
padding-bottom: 40px;
}
.container .card:hover {
transform: translateY(-25px);
}
}
<head>
<!-- Styles -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex flex-col h-screen bg-black">
<div class="flex justify-center items-center text-center min-h-screen align-middle py-5 mb-3">
<div class="container">
<div class="card">
<div class="imgBx">
<h3>PUMP & DUMP</h3>
<br/>
<img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
cupiditate ullam animi fuga impedit odio dignissimos ab cum?
</div>
</div>
<div class="card">
<div class="imgBx">
<h3>PREVENTAS</h3>
<br/>
<img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
cupiditate ullam animi fuga impedit odio dignissimos ab cum?
</div>
</div>
<div class="card">
<div class="imgBx">
<h3>PASIVOS</h3>
<br/>
<img src="https://i.gyazo.com/4f57be20b3be56b44ee2e6f1f13f4bc4.png" alt=""/>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quidem
cupiditate ullam animi fuga impedit odio dignissimos ab cum?
</div>
</div>
</div>
</div>
</body>
</html>
Your problem is the height was only 50%
You need to make it like this
.container .card:after {
content: "";
position: absolute;
top: -15px;
left: -15px;
width: 15px;
height: 100%; /*Should change here from 50% to 100%*/
background-color: #ddc700;
transform-origin: left;
transform: skewY(45deg);
transition: 0.5s;
border-bottom: 200px solid #d9d9d9;
}
Related
I was wondering how would I get the boxes not to clash with one another in mobileview.
I have included all the code into mobile view, but certain boxes clash with one another how do I get it not to clash? I have how ever tried using just one line of code but it still would clash into one another.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
.scroll-parent {
position: relative;
width: 100vw;
height: 20rem;
overflow-x: hidden;
}
.scroll-element {
width: inherit;
height: inherit;
position: absolute;
left: 0%;
top: 0%;
animation: primary 15s linear infinite;
}
#keyframes primary {
from {
left: 0%;
}
to {
left: -100%;
}
}
.primary {
animation: primary 15s linear infinite;
}
.secondary {
animation: secondary 15s linear infinite;
}
#keyframes primary {
from {
left: 0%;
}
to {
left: -100%;
}
}
#keyframes secondary {
from {
left: 100%;
}
to {
left: 0%;
}
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.wrapper .carousel{
display: flex;
justify-content: space-between;
padding: 0 30px;
}
.wrapper .card{
background: #e74c3c;
line-height: 250px;
text-align: center;
color: #fff;
font-size: 90px;
width: 280px;
font-weight: 600;
margin: 20px 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,.2);
pointer-events: none;
}
.wrapper .card{
display: flex;
justify-content: space-around;
position: relative;
left: 185px;
animation: carousel 5s linear infinite;
}
.carousel .card .cards{
overflow: hidden;
}
.carousel .card.cards-2{
background: #3498db;
}
.carousel .card.cards-3{
background: #16a085;
}
.carousel .card.cards-4{
background: #2c3e50;
}
.carousel .card.cards-5{
background: #630460;
}
#media only screen and (max-width: 800px){
.scroll-parent {
position: relative;
width: 100vw;
height: 20rem;
overflow-x: hidden;
}
.scroll-element {
width: inherit;
height: inherit;
position: absolute;
left: 0%;
top: 0%;
animation: primary 15s linear infinite;
}
#keyframes primary {
from {
left: 0%;
}
to {
left: -100%;
}
}
.primary {
animation: primary 15s linear infinite;
}
.secondary {
animation: secondary 15s linear infinite;
}
#keyframes primary {
from {
left: 0%;
}
to {
left: -100%;
}
}
#keyframes secondary {
from {
left: 100%;
}
to {
left: 0%;
}
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.wrapper .carousel{
display: flex;
justify-content: space-between;
padding: 0 30px;
}
.wrapper .card{
background: #e74c3c;
line-height: 250px;
text-align: center;
color: #fff;
font-size: 90px;
width: 280px;
font-weight: 600;
margin: 20px 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,.2);
pointer-events: none;
}
.wrapper .card{
display: flex;
justify-content: space-around;
position: relative;
left: 185px;
animation: carousel 5s linear infinite;
}
.carousel .card .cards{
overflow: hidden;
}
.carousel .card.cards-2{
background: #3498db;
}
.carousel .card.cards-3{
background: #16a085;
}
.carousel .card.cards-4{
background: #2c3e50;
}
.carousel .card.cards-5{
background: #630460;
}
}
<div class="scroll-parent">
<div class="scroll-element primary">
<div class="wrapper">
<div class="carousel">
<div class="card cards-1">A</div>
<div class="card cards-2">B</div>
<div class="card cards-3">C</div>
<div class="card cards-4">D</div>
<div class="card cards-5">E</div>
</div>
</div>
</div>
<div class="scroll-element secondary">
<div class="wrapper">
<div class="carousel">
<div class="card cards-1">A</div>
<div class="card cards-2">B</div>
<div class="card cards-3">C</div>
<div class="card cards-4">D</div>
<div class="card cards-5">E</div>
</div>
</div>
</div>
</div>
I have a simple jQuery modal. It works well, but I can't set it horizontally middle. I've tried many approach, but it not centering anyway. It creates problem when I want to use "max-width: 400". It create problem and go on one side. I want to make it like bootstrap modal. Max-width: 400 and will be centered horizontally also. Please look at my code.
// common close button
$('.mi-modal-toggle').click(function() {
$(this).closest(".mi-modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
.mi-modal {
position: fixed;
z-index: 10000; /* 1 */
top: 0;
left: 0;
visibility: hidden;
height: 100%;
box-sizing: border-box;
padding: 10%;
width: 80%; /* 94% + 3% +3% = 100% */
max-width: 400px;
}
.mi-modal.modal-visible {
visibility: visible;
}
.mi-modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.4);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
box-sizing: border-box;
}
.mi-modal.modal-visible .mi-modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 3em;
width: 100%;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
margin: auto auto !important;
}
.mi-modal-transition {
transition: all 0.4s;
transform: translateY(-10%);
opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
transform: translateY(0);
opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
padding: 1em;
}
.mi-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
margin: -0.5rem -0.5rem -0.5rem auto;
color: #aaa;
background: #edcfa5;
border: 0;
font-size: 20px;
font-weight: 700;
position: absoloute;
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.3em;
color: #000;
border: 0;
border-radius: 0.25rem;
opacity: .5;
}
.mi-modal-close:hover {
color: #777;
}
.mi-modal-heading {
font-size: 1.125em;
margin: 0px 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mi-modal-content>*:first-child {
margin-top: 0;
}
.mi-modal-content>*:last-child {
margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content {
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center; /* justify-content: flex-end; */
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer>* {
margin: 0.25rem;
}
<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>
<div class="mi-modal" data-modal-id="modal1">
<div class="mi-modal-overlay mi-modal-toggle"></div>
<div class="mi-modal-wrapper mi-modal-transition">
<div class="mi-modal-header">
<h2 class="mi-modal-heading">This is a modal</h2>
<button class="mi-modal-close mi-modal-toggle">×</button>
</div>
<div class="mi-modal-body">
<div class="mi-modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
</div>
</div>
<div class="modal-footer">
<button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
<button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Instead of wrestling with margin and padding for centering, just use the standard left position and -50% x-axis translation.
// common close button
$('.mi-modal-toggle').click(function() {
$(this).closest(".mi-modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
html,
body {
margin: 0;
padding: 0;
}
.mi-modal {
position: fixed;
z-index: 10000;
top: 0;
visibility: hidden;
height: 100%;
box-sizing: border-box;
width: 100%;
}
.mi-modal.modal-visible {
visibility: visible;
}
.mi-modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.4);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
box-sizing: border-box;
}
.mi-modal.modal-visible .mi-modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 3em;
width: 100%;
max-width: 400px;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
left: 50%;
transform: translateX(-50%);
}
.mi-modal-transition {
transition: all 0.4s;
transform: translate(-50%, -10%);
opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
transform: translate(-50%, 0);
opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
padding: 1em;
}
.mi-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
margin: -0.5rem -0.5rem -0.5rem auto;
color: #aaa;
background: #edcfa5;
border: 0;
font-size: 20px;
font-weight: 700;
position: absoloute;
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.3em;
color: #000;
border: 0;
border-radius: 0.25rem;
opacity: .5;
}
.mi-modal-close:hover {
color: #777;
}
.mi-modal-heading {
font-size: 1.125em;
margin: 0px 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mi-modal-content>*:first-child {
margin-top: 0;
}
.mi-modal-content>*:last-child {
margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content {
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
/* justify-content: flex-end; */
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer>* {
margin: 0.25rem;
}
<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>
<div class="mi-modal" data-modal-id="modal1">
<div class="mi-modal-overlay mi-modal-toggle"></div>
<div class="mi-modal-wrapper mi-modal-transition">
<div class="mi-modal-header">
<h2 class="mi-modal-heading">This is a modal</h2>
<button class="mi-modal-close mi-modal-toggle">×</button>
</div>
<div class="mi-modal-body">
<div class="mi-modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
</div>
</div>
<div class="modal-footer">
<button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
<button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
For center alignment of modal add the following css code
.mi-modal.modal-visible {
margin: auto;
inset: 0;
}
.mi-modal-wrapper.mi-modal-transition {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
// common close button
$('.mi-modal-toggle').click(function() {
$(this).closest(".mi-modal").toggleClass('modal-visible');
});
// explicit button per modal
$('.mi-modal-toggle').on('click', function(e) {
var modalid = $(this).data("modal-id");
$(`.mi-modal[data-modal-id='${modalid}']`).toggleClass('modal-visible');
});
.mi-modal {
position: fixed;
z-index: 10000; /* 1 */
top: 0;
left: 0;
visibility: hidden;
height: 100%;
box-sizing: border-box;
padding: 10%;
width: 80%; /* 94% + 3% +3% = 100% */
max-width: 400px;
}
.mi-modal.modal-visible {
visibility: visible;
}
.mi-modal-overlay {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: hsla(0, 0%, 0%, 0.4);
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.3s, opacity 0.3s;
box-sizing: border-box;
}
.mi-modal.modal-visible .mi-modal-overlay {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 3em;
width: 100%;
background-color: #fff;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
margin: auto auto !important;
}
.mi-modal-transition {
transition: all 0.4s;
transform: translateY(-10%);
opacity: 0;
}
.mi-modal.modal-visible .mi-modal-transition {
transform: translateY(0);
opacity: 1;
}
.mi-modal-header,
.mi-modal-content {
padding: 1em;
}
.mi-modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative;
background-color: #fff;
box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.06);
border-bottom: 1px solid #e8e8e8;
}
.mi-modal-close {
margin: -0.5rem -0.5rem -0.5rem auto;
color: #aaa;
background: #edcfa5;
border: 0;
font-size: 20px;
font-weight: 700;
position: absoloute;
box-sizing: content-box;
width: 1em;
height: 1em;
padding: 0.3em;
color: #000;
border: 0;
border-radius: 0.25rem;
opacity: .5;
}
.mi-modal-close:hover {
color: #777;
}
.mi-modal-heading {
font-size: 1.125em;
margin: 0px 8px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mi-modal-content>*:first-child {
margin-top: 0;
}
.mi-modal-content>*:last-child {
margin-bottom: 0;
}
.mi-modal.modal-scroll .mi-modal-content {
max-height: 60vh;
overflow-y: scroll;
}
.mi-modal.modal-scroll .mi-modal-wrapper {
position: absolute;
z-index: 9999;
top: 2em;
left: 50%;
width: 32em;
margin-left: -16em;
background-color: #CDf;
box-shadow: 0 0 1.5em hsla(0, 0%, 0%, 0.35);
box-sizing: border-box;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center; /* justify-content: flex-end; */
padding: 0.75rem;
border-top: 1px solid #dee2e6;
border-bottom-right-radius: calc(0.3rem - 1px);
border-bottom-left-radius: calc(0.3rem - 1px);
}
.modal-footer>* {
margin: 0.25rem;
}
.mi-modal.modal-visible {
margin: auto;
inset: 0;
}
.mi-modal-wrapper.mi-modal-transition {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
<button class="mi-modal-toggle" data-modal-id="modal1">Show modal</button>
<div class="mi-modal" data-modal-id="modal1">
<div class="mi-modal-overlay mi-modal-toggle"></div>
<div class="mi-modal-wrapper mi-modal-transition">
<div class="mi-modal-header">
<h2 class="mi-modal-heading">This is a modal</h2>
<button class="mi-modal-close mi-modal-toggle">×</button>
</div>
<div class="mi-modal-body">
<div class="mi-modal-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eum delectus, libero, accusantium dolores inventore obcaecati placeat cum sapiente vel laboriosam similique totam id ducimus aperiam, ratione fuga blanditiis maiores.</p>
</div>
</div>
<div class="modal-footer">
<button class="mi-btn btn-danger mi-ripple mi-ripple-light mi-modal-toggle">No</button>
<button class="mi-btn btn-info mi-ripple mi-ripple-light">Confirm</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am creating a resume site, and I ran into a problem that the navigation bar blocks the title, that is, it looks like this https://prnt.sc/ggkfkwSV8KUp, and I need so https://prnt.sc/oX0Hw2G_d_xk.
I tried to indent, but the navbar follows this title and obscures it all the time, no matter how indented I am, how can I fix this? I added code here, (yes, the styles here are not very, not adapted, I know) I removed a lot of code, left only two sections to show, but the fact is that it doesn’t work like mine, more precisely in a small form works like mine, but if you expand it to the whole page, then the navbar does not block the title, but it fits a little, but it can still be shown using this example.
body {
margin: 0;
}
.header {
position: fixed;
width: 100%;
height: 50px;
background: #212121;
z-index: 2;
}
h1 {
margin: 50px;
margin-top: 1px;
float: left;
font-family: cursive;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 50px;
}
.navbar {
text-transform: uppercase;
line-height: 18px;
height: 50px;
float: right;
}
li {
display:inline-block;
margin:0;
text-transform:uppercase;
}
li:after {
display: block;
content: '';
border-bottom: 1px solid aqua;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
li:hover::after {
transform: scaleX(1);
}
.button {
text-decoration: none;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: cursive;
margin: 10px;
cursor: pointer;
font-size: 20px;
transition: 0.5s;
background-size: 200% auto;
}
.button:hover {
background-position: right center;
}
.my-photo {
position: relative;
border-radius: 50%;
height: 180px;
width: 180px;
padding: 0;
margin-top: 300px;
object-fit: cover;
z-index: -1;
margin-left: 700px;
margin-top: 150px;
}
.h2 {
font-size: 50px;
background: #19CFB1;
background: linear-gradient(to right, #19CFB1 0%, #C978CF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
font-family: cursive;
}
#text {
background: #1338CF;
background: linear-gradient(to right, #1338CF 0%, #CF70AF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 50px;
margin: 0;
font-size: 25px;
text-align: center;
font-family: cursive;
}
.home-image {
position: absolute;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
z-index: -1;
margin-bottom: -10px;
background-image: url("./img/foto-mustang-6-shelby-gt500_01.jpg")
}
.home-image::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
background-color: rgba(0,0,0,0.7);
}
blockquote {
text-align: center;
margin: 0;
color: white;
padding: 30px 30px 30px 60px;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: Arial;
color: #CBDDE7;
font-size: 50px;
position: absolute;
left: 362px;
top: 596px;
z-index: -1;
}
blockquote p {
font-style: italic;
font-size: 20px;
margin-top: 130px;
}
.about {
padding: 20px 0;
}
#about{
width: 1300px;
height: 687px;
padding: 0 80px;
margin: auto;
}
.title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 26px;
padding-bottom: 20px;
font-family: cursive;
z-index: -1;
}
.title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #111;
transform: translateX(-50%);
}
.title::after {
content: "who i am";
font-family: 'Ubuntu', sans-serif;
position: absolute;
bottom: -8px;
left: 50%;
font-size: 20px;
color: crimson;
padding: 0 5px;
background: #fff;
transform: translateX(-50%);
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
}
.image {
height: 500px;
width: 350px;
margin-left: 5px;
margin-top: 50px;
object-fit: cover;
border-radius: 15px;
}
.column-right {
width: 55%;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
text-align: justify;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/icon.png" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<title>CV</title>
</head>
<body>
<header class="header">
<ul class="navbar">
<li>Home</li>
<li>About Me</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<h1>My CV</h1>
</header>
<section class="home" id="home">
<div class="wrapper">
<div class="home-header home-header-small">
<div class="home-image"></div>
<div class="container">
<div class="content-center">
<div class="profile-image">
<img src="" class="my-photo"/>
</div>
<div class="h2">Lorem ipsum</div>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<footer>— <cite>Lorem ipsum</cite></footer>
</blockquote>
</div>
</div>
</section>
<section class="about" id="about">
<h2 class="title">About me</h2>
<div class="content">
<img src="" class="image"/>
<div class="column-right">
<div class="text">Lorem ipsum</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore?</p>
</div>
</div>
</section>
Another options is to use
.header {
position: sticky;
top: 0;
}
/* or, instead*/
.navbar {
position: sticky;
top: 0;
}
body {
margin: 0;
}
.header {
position: sticky;
top: 0px;
width: 100%;
height: 50px;
background: #212121;
z-index: 2;
}
h1 {
margin: 50px;
margin-top: 1px;
float: left;
font-family: cursive;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
margin-top: 50px;
}
.navbar {
text-transform: uppercase;
line-height: 18px;
height: 50px;
float: right;
}
li {
display:inline-block;
margin:0;
text-transform:uppercase;
}
li:after {
display: block;
content: '';
border-bottom: 1px solid aqua;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
li:hover::after {
transform: scaleX(1);
}
.button {
text-decoration: none;
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: cursive;
margin: 10px;
cursor: pointer;
font-size: 20px;
transition: 0.5s;
background-size: 200% auto;
}
.button:hover {
background-position: right center;
}
.my-photo {
position: relative;
border-radius: 50%;
height: 180px;
width: 180px;
padding: 0;
margin-top: 300px;
object-fit: cover;
z-index: -1;
margin-left: 700px;
margin-top: 150px;
}
.h2 {
font-size: 50px;
background: #19CFB1;
background: linear-gradient(to right, #19CFB1 0%, #C978CF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
font-family: cursive;
}
#text {
background: #1338CF;
background: linear-gradient(to right, #1338CF 0%, #CF70AF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 50px;
margin: 0;
font-size: 25px;
text-align: center;
font-family: cursive;
}
.home-image {
position: absolute;
background-size: cover;
background-position: center center;
width: 100%;
height: 100vh;
z-index: -1;
margin-bottom: -10px;
background-image: url("./img/foto-mustang-6-shelby-gt500_01.jpg")
}
.home-image::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0; left: 0;
background-color: rgba(0,0,0,0.7);
}
blockquote {
text-align: center;
margin: 0;
color: white;
padding: 30px 30px 30px 60px;
font-family: 'Lato', sans-serif;
font-weight: 300;
}
blockquote:before {
content: "\201C";
font-family: Arial;
color: #CBDDE7;
font-size: 50px;
position: absolute;
left: 362px;
top: 596px;
z-index: -1;
}
blockquote p {
font-style: italic;
font-size: 20px;
margin-top: 130px;
}
.about {
padding: 20px 0;
}
#about{
width: 1300px;
height: 687px;
padding: 0 80px;
margin: auto;
}
.title {
position: relative;
text-align: center;
font-size: 40px;
font-weight: 500;
margin-bottom: 26px;
padding-bottom: 20px;
font-family: cursive;
z-index: -1;
}
.title::before {
content: "";
position: absolute;
bottom: 0px;
left: 50%;
width: 180px;
height: 3px;
background: #111;
transform: translateX(-50%);
}
.title::after {
content: "who i am";
font-family: 'Ubuntu', sans-serif;
position: absolute;
bottom: -8px;
left: 50%;
font-size: 20px;
color: crimson;
padding: 0 5px;
background: #fff;
transform: translateX(-50%);
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
}
.image {
height: 500px;
width: 350px;
margin-left: 5px;
margin-top: 50px;
object-fit: cover;
border-radius: 15px;
}
.column-right {
width: 55%;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 18px;
text-align: justify;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="./img/icon.png" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<title>CV</title>
</head>
<body>
<header class="header">
<ul class="navbar">
<li>Home</li>
<li>About Me</li>
<li>Portfolio</li>
<li>Contact Me</li>
</ul>
<h1>My CV</h1>
</header>
<section class="home" id="home">
<div class="wrapper">
<div class="home-header home-header-small">
<div class="home-image"></div>
<div class="container">
<div class="content-center">
<div class="profile-image">
<img src="" class="my-photo"/>
</div>
<div class="h2">Lorem ipsum</div>
<p id="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<footer>— <cite>Lorem ipsum</cite></footer>
</blockquote>
</div>
</div>
</section>
<section class="about" id="about">
<h2 class="title">About me</h2>
<div class="content">
<img src="" class="image"/>
<div class="column-right">
<div class="text">Lorem ipsum</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit minus impedit maxime, quae soluta quis cumque perferendis! Doloribus quaerat, placeat iste facere, aspernatur ex cum veritatis laudantium, officia, non porro exercitationem incidunt quis dolore? Officia ex accusamus expedita optio, voluptatem minus? In maiores omnis aperiam earum ab molestiae beatae laborum blanditiis incidunt, delectus dolor, id voluptates optio aspernatur aliquam saepe atque labore?</p>
</div>
</div>
</section>
I am trying to have this sort of this effect. I created an image wrapper and then I created a price tag div which is a child of it. I have set the border-left and border-bottom to a certain amount pixels and then I changed the border-left color to transparent. It creates a triangle similar to above, but when I write something inside the price tag div it just overwrites its part.
#accomodation {
min-height: 1000px;
text-align: center;
padding-top: 100px;
}
#accomodation .head-text {
font-size: 40px;
}
#accomodation .hotel-card .image-wrapper {
width: 100%;
/* overflow: hidden; */
position: relative;
}
#accomodation .hotel-card .image-wrapper img {
width: 100%;
}
#accomodation .hotel-card .image-wrapper .price-tag {
position: absolute;
bottom: 0px;
right: 0;
border-left: 150px solid transparent;
border-bottom: 150px solid #d46e4e;
z-index: 90;
opacity: 0.7;
transition: 0.2s;
color: red;
font-size: 30px;
}
#accomodation .hotel-card .image-wrapper:hover .price-tag {
transform: scale(1.1);
transform-origin: bottom right;
}
<section id="accomodation">
<h3 class="head-text">
Luxury Accomodation
</h3>
<p class="caption-text text-muted">
Duis metus sem, aliquet vitae mi eget, vehicula vehicula enim. In consectetur velit <br> lectus sollicitudin.
</p>
<div class="container mt-5">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="hotel-card">
<div class="image-wrapper">
<img src="../../photos/hotels/1-accomodation.jpg" alt="">
<div class="price-tag">
<span>900</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
If you just want to nest the price tag in the triange:
..
<div class="price-tag">
<span class="price-val">900</span>
</div>
..
.price-tag .price-val {
position: relative;
top: 100px;
}
You should try using transform: rotate() property to get the desired result. Try this code.
#accomodation {
min-height: 1000px;
text-align: center;
padding-top: 100px;
}
#accomodation .head-text {
font-size: 40px;
}
#accomodation .hotel-card .image-wrapper {
width: 100%;
position: relative;
overflow: hidden;
}
#accomodation .hotel-card .image-wrapper img {
width: 100%;
display: block;
}
#accomodation .hotel-card .image-wrapper .price-tag {
position: absolute;
bottom: -100px;
right: -100px;
z-index: 90;
opacity: 0.7;
transition: 0.2s;
color: red;
font-size: 30px;
height: 200px;
width: 200px;
transform: rotate(-45deg);
background: #d46e4e;
}
#accomodation .hotel-card .image-wrapper .price-tag span {
transform: rotate(45deg);
display: inline-block;
margin: 20px;
}
#accomodation .hotel-card .image-wrapper:hover .price-tag {
transform: scale(1.1) rotate(-45deg);
}
In the snippet below, I have assigned a max-width of 400px to the tooltip. It width it has is much less than that. Why doesn't the tooltip have 400px width?
I do not want to explicitly assign it 400px as width because if the content is low, it should have 120px as the width (which is the min-width).
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
.select {
position: relative;
height: 30px;
background: black;
color: white;
padding: 10px 20px;
line-height: 30px;
}
.tooltip {
display: none;
}
.tooltip:after {
position: absolute;
bottom: 100%;
left: 100%;
margin-bottom: 30px;
margin-left: -20px;
display: block;
content: attr(title);
background: red;
color: white;
line-height: 16px;
font-size: 14px;
padding: 12px;
min-width: 120px;
max-width: 400px;
}
.tooltip:before {
position: absolute;
bottom: 100%;
left: 100%;
content: '';
height: 0;
width: 0;
border-top: 6px solid red;
border-bottom: 6px solid transparent;
border-left: 9px solid red;
border-right: 9px solid transparent;
margin-left: -20px;
margin-bottom: 21px;
}
.tooltip.active {
display: block;
}
<div class="select">
<div class="tooltip active" title="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora quam, voluptatem aliquam quos, soluta nostrum repellat unde magni voluptatibus placeat vitae numquam voluptatum ab temporibus id illo. Voluptatem, iusto, incidunt?"></div>
I have a tooltip
</div>