Hello,
.team-back{
position: relative;
z-index: 2;
left: 1000px;
font-family: PoppinsRegular;
font-size: 10pt;
}
.member-name{
color: white;
}
.member-role{
color: lightblue;
}
.team{
width: auto;
display: flex;
}
.team .member:hover{
transition: 0.5s;
transform: translateY(20px);
.line-below{
width: 180px;
transition: 0.5s
}
}
.member{
transition: 0.5s;
width: 180px;
position: relative;
background: #00000070;
border-radius: 10px;
padding-inline: 20px;
margin-right: 10px;
}
.line-below{
transition: 0.5s;
background: lightblue;
height: 2px;
width: 20px;
}
Zaphiro:
transition: 0.5s
You forgot the semicolon ending on transition: 0.5s; therefor broken CSS.
Even after fixing that line, it still does not load the effect in FiveM. It loads in chrome tho. The effect of that code is when I hover over the “.member” div it makes the “.line-below” stretch out, but it does not. Is like FiveM does not listen to the child element inside of another child.
I would need to see your html code and CSS currently to better help you.
HTML
<!-- ██╗███╗ ███╗██████╗ ██████╗ ██╗ ██████╗ █████╗ ██████╗ ██╗███╗ ██╗ ██████╗
██║████╗ ████║██╔══██╗██╔══██╗ ██║ ██╔═══██╗██╔══██╗██╔══██╗██║████╗ ██║██╔════╝
██║██╔████╔██║██████╔╝██████╔╝ ██║ ██║ ██║███████║██║ ██║██║██╔██╗ ██║██║ ███╗
██ ██║██║╚██╔╝██║██╔══██╗██╔═══╝ ██║ ██║ ██║██╔══██║██║ ██║██║██║╚██╗██║██║ ██║
╚█████╔╝██║ ╚═╝ ██║██║ ██║██║ ███████╗╚██████╔╝██║ ██║██████╔╝██║██║ ╚████║╚██████╔╝
╚════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚═════╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝
-->
<!-- comment this out -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JMRP Loading Screen</title>
<link href="assets/css/style.css" rel="stylesheet">
<script src="assets/js/script.js" defer></script>
</head>
<body>
<video autoplay muted loop class="background-video">
<source src="assets/video/background.webm" type="video/webm">
</video>
<div class="background-blacksource"></div>
<video autoplay loop src="assets/video/dusteffect.mp4" type="video/mp4" class="noise-effect"></video>
<img class="background-image" src="assets/images/background.png" alt="This is the background image">
<audio autoplay loop src="assets/sound/music.mp3"></audio>
<div class="team-back">
<div class="team">
<div class="member">
<h3 class="member-name">fabiio19 | Fabs</h3>
<p class="member-role">!CEO, Director of civilians, Head Developer</p>
<div class="line-below"></div>
</div>
<div class="member">
<h3 class="member-name">fabiio19 | Tex. P</h3>
<p class="member-role">!2102, Co-Owner, Director of LEO</p>
<div class="line-below"></div>
</div>
<div class="member">
<h3 class="member-name">fabiio19 | Fabs</h3>
<p class="member-role">!CEO, Director of civilians, Head Developer</p>
<div class="line-below"></div>
</div>
</div>
</div>
<div class="square">
<div class="left-side-square"></div>
<p class="paragraph-side">JM Roleplay Is A Custom Lore Based vMenu Server With Over 200 Custom Vehicles.</p>
<h1 class="jmrp-title">JMRP</h1>
<h3 class="jmrp-version">v1.3Bruce</h3>
<h2>Tips: <span></span></h2>
<div class="changelog-background">
<div class="chagelog-date">08/13/23</div>
<div class="changelog-text">v1.3Bruce</div>
<p class="paragraph-text">This version includes new cars, bug fixes. We added scully emote.</p>
</div>
<div class="changelog-background">
<div class="chagelog-date">08/13/23</div>
<div class="changelog-text">v1.3Bruce</div>
<p class="paragraph-text">This version includes new cars, bug fixes. We added scully emote.</p>
</div>
<br>
</div>
<div class="inital-square">test</div>
<img class="jmrp-logo" src="assets/images/logo.png" alt="JMRP Logo">
</body>
</html>
CSS
/*
███████╗ ██████╗ ███╗ ██╗████████╗███████╗
██╔════╝██╔═══██╗████╗ ██║╚══██╔══╝██╔════╝
█████╗ ██║ ██║██╔██╗ ██║ ██║ ███████╗
██╔══╝ ██║ ██║██║╚██╗██║ ██║ ╚════██║
██║ ╚██████╔╝██║ ╚████║ ██║ ███████║
╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ╚═╝ ╚══════╝
*/
@font-face {
font-family: JMRP_LOGO_TEXT;
src: url(../fonts/republica_minor.otf);
}
@font-face {
font-family: PoppinsRegular;
src: url(../fonts/Poppins-Regular.ttf);
}
@font-face {
font-family: PoppinsThin;
src: url(../fonts/Poppins-Thin.ttf);
}
@font-face {
font-family: Heydex;
src: url(../fonts/Heydex.ttf);
}
/*
██████╗ ██████╗ ███╗ ██╗████████╗ █████╗ ██╗███╗ ██╗███████╗██████╗
██╔════╝██╔═══██╗████╗ ██║╚══██╔══╝██╔══██╗██║████╗ ██║██╔════╝██╔══██╗
██║ ██║ ██║██╔██╗ ██║ ██║ ███████║██║██╔██╗ ██║█████╗ ██████╔╝
██║ ██║ ██║██║╚██╗██║ ██║ ██╔══██║██║██║╚██╗██║██╔══╝ ██╔══██╗
╚██████╗╚██████╔╝██║ ╚████║ ██║ ██║ ██║██║██║ ╚████║███████╗██║ ██║
╚═════╝ ╚═════╝ ╚═╝ ╚═══╝ ╚═╝ ╚═╝ ╚═╝╚═╝╚═╝ ╚═══╝╚══════╝╚═╝ ╚═╝*/
::-webkit-scrollbar{
display: none;
}
body{
overflow: hidden;
width: 0;
height: 0;
}
*{
margin: 0;
padding: 0;
}
/* ------------ */
@media (min-aspect-ratio: 16/9){
body{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9){
body{
width: auto;
height: 100%;
}
}
.square{
position: relative;
padding-top: 190px;
height: 700px;
width: 600px;
left: -890px;
transform: scale(1.2);
transition: 1s;
z-index: 1;
}
.square.active{
transition: 2s;
position: relative;
height: 700px;
width: 600px;
top: 0px;
left: -690px;
transform: scale(1.2);
transition: 1s;
}
.left-side-square{
position: absolute;
background: black;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
height: 700px;
width: 650px;
opacity: .5;
}
.paragraph-side{
position: absolute;
margin-top: 57%;
margin-left: 48%;
justify-content:end;
font-family: 'PoppinsRegular';
opacity: .6;
width: 700px;
text-align: center;
transform: rotate(-90deg);
color: white;
}
.square:hover{
left: 40px;
.paragraph-side{
transition: 1s;
opacity: 0;
}
}
.square:not(:hover){
.paragraph-side{
transition: 1s;
opacity: .6;
}
}
.jmrp-title {
position: relative;
top: 30px;
font-family: 'JMRP_LOGO_TEXT', cursive;
font-size: 100pt;
color: #add8e680;
text-align: right;
}
.jmrp-version{
position: relative;
top: -30px;
font-family: 'PoppinsThin';
font-size: 30pt;
color: white;
text-align: right;
}
.background-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
}
@media (min-aspect-ratio: 16/9){
.background-video{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9){
.background-video{
width: auto;
height: 100%;
}
}
.noise-effect{
position: absolute;
right: 0;
bottom: 0;
opacity: .4;
z-index: -1;
}
@media (min-aspect-ratio: 16/9){
.noise-effect{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9){
.noise-effect{
width: auto;
height: 100%;
}
}
.background-image{
position: absolute;
right: 0;
bottom: 0;
opacity: .4;
}
.changelog-background{
position: relative;
margin-left: 140px;
width: 450px;
height: 100px;
margin-bottom: 20px;
background: #ffffff40;
border-radius: 10px;
overflow-x: hidden;
}
.changelog-text{
position: relative;
color: white;
font-family: 'PoppinsRegular';
font-weight: 200;
text-align: center;
top: -20px;
}
.paragraph-text{
position: relative;
font-family: 'PoppinsThin';
font-size: 9pt;
text-align: center;
margin-top: -15px;
color: white;
}
.chagelog-date{
position: relative;
color: #ffffff10;
font-family: 'PoppinsThin';
text-align: center;
left: 240px;
top: 40px;
height: 20px;
transform: rotate(90deg);
}
.changelog-background:hover{
transform: translateY(-10%);
transition: 0.5s;
.chagelog-date{
font-family: 'PoppinsRegular';
animation: fadeIn 0.5s;
color: lightblue;
font-weight: 900;
}
background: white;
overflow:visible;
.changelog-text{
color: black;
}
.paragraph-text{
color: black;
font-size: 900;
font-family: PoppinsRegular;
font-weight: 900;
}
}
.changelog-background:not(:hover){
transform: translateY(0%);
transition: 1s;
}
h2 {
position: relative;
font-family: 'Heydex';
opacity: .7;
font-size: 19pt;
color: lightblue;
bottom: 190px;
left: 80px;
}
h2 span::before{
content: "";
right: -7px;
top: 50%;
position: absolute;
height: 30px;
width: 2px;
background: white;
transform: translateY(-45%);
}
h2 span{
position: relative;
color: white;
}
/*
██████╗ ██╗ ██████╗ ██╗ ██╗████████╗ ███████╗██╗██████╗ ███████╗
██╔══██╗██║██╔════╝ ██║ ██║╚══██╔══╝ ██╔════╝██║██╔══██╗██╔════╝
██████╔╝██║██║ ███╗███████║ ██║ ███████╗██║██║ ██║█████╗
██╔══██╗██║██║ ██║██╔══██║ ██║ ╚════██║██║██║ ██║██╔══╝
██║ ██║██║╚██████╔╝██║ ██║ ██║ ███████║██║██████╔╝███████╗
╚═╝ ╚═╝╚═╝ ╚═════╝ ╚═╝ ╚═╝ ╚═╝ ╚══════╝╚═╝╚═════╝ ╚══════╝
*/
.team-back{
position: absolute;
z-index: 2;
left: 890px;
font-family: 'PoppinsRegular';
font-size: 10pt;
padding-top: 980px;
}
.member-name{
color: white;
}
.member-role{
color: lightblue;
}
.team{
width: auto;
display: flex;
}
.team::before{
content: "Our Team |";
height: 35px;
width: 110px;
text-align: center;
font-family: 'PoppinsRegular';
font-weight: 500;
color: lightblue;
font-size: 16px;
position: relative;
margin-right: 20px;
margin-top: 20px;
padding-top: 5px;
margin-bottom: 10px;
background: #00000070;
border-radius: 10px;
}
.team::after{
content: "| Our Team";
height: 35px;
width: 110px;
text-align: center;
font-family: PoppinsRegular;
font-weight: 500;
color: lightblue;
font-size: 16px;
position: relative;
margin-right: 20px;
margin-top: 20px;
padding-top: 5px;
margin-bottom: 10px;
background: #00000070;
border-radius: 10px;
}
.team .member:hover{
transition: 0.5s;
transform: translateY(-20px);
.line-below{
width: 180px;
transition: 0.5s;
}
}
.member{
transition: 0.5s;
width: 180px;
position: relative;
background: #00000070;
border-radius: 10px;
padding-inline: 20px;
margin-right: 10px;
}
.line-below{
transition: 0.5s;
background: lightblue;
height: 2px;
width: 20px;
}
/*----------*/
.jmrp-logo{
position: absolute;
top: 520px;
right: 80px;
opacity: 0;
transition: 3s;
}
.jmrp-logo.active{
top: 40px;
opacity: .4;
}
/*
██╗███╗ ██╗██╗████████╗██╗ █████╗ ██╗ ███████╗ ██████╗ ██╗ ██╗ █████╗ ██████╗ ███████╗
██║████╗ ██║██║╚══██╔══╝██║██╔══██╗██║ ██╔════╝██╔═══██╗██║ ██║██╔══██╗██╔══██╗██╔════╝
██║██╔██╗ ██║██║ ██║ ██║███████║██║ ███████╗██║ ██║██║ ██║███████║██████╔╝█████╗
██║██║╚██╗██║██║ ██║ ██║██╔══██║██║ ╚════██║██║▄▄ ██║██║ ██║██╔══██║██╔══██╗██╔══╝
██║██║ ╚████║██║ ██║ ██║██║ ██║███████╗ ███████║╚██████╔╝╚██████╔╝██║ ██║██║ ██║███████╗
╚═╝╚═╝ ╚═══╝╚═╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝ ╚══════╝ ╚══▀▀═╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚══════╝ */
.inital-square{
position: absolute;
left: -20px;
top: -100px;
width: 1940px;
height: 1180px;
background: black;
transition: 2s;
opacity: 1;
}
.inital-square.active{
position: absolute;
left: -20px;
top: -100px;
width: 1940px;
height: 0px;
background: black;
transition: 2s;
opacity: 1;
}
/*
█████╗ ███╗ ██╗██╗███╗ ███╗ █████╗ ████████╗██╗ ██████╗ ███╗ ██╗███████╗
██╔══██╗████╗ ██║██║████╗ ████║██╔══██╗╚══██╔══╝██║██╔═══██╗████╗ ██║██╔════╝
███████║██╔██╗ ██║██║██╔████╔██║███████║ ██║ ██║██║ ██║██╔██╗ ██║███████╗
██╔══██║██║╚██╗██║██║██║╚██╔╝██║██╔══██║ ██║ ██║██║ ██║██║╚██╗██║╚════██║
██║ ██║██║ ╚████║██║██║ ╚═╝ ██║██║ ██║ ██║ ██║╚██████╔╝██║ ╚████║███████║
╚═╝ ╚═╝╚═╝ ╚═══╝╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝╚══════╝
*/
@keyframes fadeIn {
0%{ color: #ffffff10};
100%{color: #ffffff90};
}
@keyframes fadeInBackground {
0%{opacity: .3};
100%{opacity: 1};
}
Man, I see at least 30+ issues in your CSS and this will not load in a regular browser. Might I suggest using a CSS validator and it should pinpoint all the issues in the CSS. Fix CSS and you should be good.
I have tried putting the child selectors separate but it still does not load in FiveM. It does load on my browser tho. And there is also an extra JS code that I did not include.