index.html
unknown
html
a year ago
20 kB
1
Indexable
Never
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The One Records</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" crossorigin="anonymous">
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: white;
margin: 0;
background-color: black;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #00000087;
color: #ffffff;
text-align: center;
padding: 1em;
margin-right: 10%;
margin-left: 10%;
}
.logo img {
max-height: 100px;
max-width: 100%;
}
nav {
display: flex;
}
nav a {
color: white;
text-decoration: none;
padding: 0 1em;
}
nav a:hover {
color: #f4f4f4;
}
header h1 {
font-size: 2.5em;
margin: 0;
}
.container {
max-width: 1100px;
margin: auto;
padding: 2em;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.row {
display: flex;
flex-wrap: initial;
}
.col {
padding: 1em;
margin: 1rem;
min-width: 300px;
}
.card {
background-color: transparent;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 2em;
text-align: center;
height: 383px;
}
.card h3 {
font-size: 1.5em;
}
footer {
background-color: black;
color: #ffffff;
text-align: center;
padding: 2em;
margin-top: 2em;
}
.card-img {
max-width: 100%;
height: auto;
width: 253px;
height: 253px;
object-fit: contain;
}
.card-content {
position: relative;
}
.overlay {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 5px;
padding: 1em;
box-sizing: border-box;
transition: 0.3s;
color:white;
}
.overlay a {
color: #ffffff;
margin: 0 0.5em;
text-decoration: none;
}
.overlay a:hover {
color: #f4f4f4;
}
.overlay .social-media-icons {
display: flex;
justify-content: center;
align-items: center;
margin-top: 1em;
}
.overlay .social-media-icons a {
font-size: 1.5em;
margin: 0 0.5em;
}
.click-me {
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
color: #ffffff;
font-size: 1.5em;
cursor: pointer;
display: none;
}
.social-icons a {
margin-right: 10px;
}
.social-icons a:last-child {
margin-right: 0;
}
.social-icons i {
font-size: 24px;
color: white;
}
.social-icons i:hover {
color: #ff6600;
}
.partner-logos {
display: flex;
overflow-x: scroll;
scroll-behavior: smooth;
white-space: nowrap;
overflow: hidden;
}
.partner-logos img {
height: 100px;
margin-right: 20px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
background-color: transparent;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
z-index: 1;
}
.video-background {
position: absolute;
top: -150px;
left: 0;
width: 100%;
height: 200%;
overflow: hidden;
z-index: -1;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(5px); /* Modificați valoarea "5px" pentru a ajusta intensitatea blurului */
}
#partners {
padding-top:100px;
}
</style>
<script>
let activeOverlay = null;
function showClickMe(artistId) {
const clickMe = document.getElementById(`${artistId}-clickme`);
clickMe.style.display = 'block';
}
function hideClickMe(artistId) {
const clickMe = document.getElementById(`${artistId}-clickme`);
if (clickMe) {
clickMe.style.display = 'none';
}
}
function showOverlay(artistId) {
const overlay = document.getElementById(`${artistId}-overlay`);
const clickMe = document.getElementById(`${artistId}-clickme`);
const card = overlay.parentElement.parentElement;
if (activeOverlay) {
closeOverlay(activeOverlay);
}
openOverlay(overlay, clickMe, card);
}
function openOverlay(overlay, clickMe, card) {
overlay.style.display = 'flex';
clickMe.style.display = 'none';
card.style.height = '530px';
activeOverlay = overlay;
}
function closeOverlay(overlay) {
const clickMe = document.getElementById(`${overlay.id.replace('-overlay', '-clickme')}`);
const card = overlay.parentElement.parentElement;
overlay.style.display = 'none';
clickMe.style.display = 'flex';
card.style.height = '383px';
activeOverlay = null;
}
function onMouseLeaveCard(artistId) {
const overlay = document.getElementById(`${artistId}-overlay`);
if (overlay.style.display === 'none') {
hideClickMe(artistId);
}
}
</script>
</head>
<body>
<header>
<div class="logo">
<img src="./img/logopng.png" alt="Logo-ul The One Records">
</div>
<nav>
<a href="#">Acasă</a>
<a href="#">Artiști</a>
<a href="#">Despre noi</a>
<a href="#">Contact</a>
</nav>
</header>
<section class="container">
<h1>Artistii nostri</h1>
<div class="row">
<!-- Artist 1 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist1')" onmouseout="onMouseLeaveCard('artist1')" onmouseleave="closeOverlay(document.getElementById('artist1-overlay'))">
<img class="card-img" src="./img/andreeabostanica.jpeg" alt="Andreea Bostanica">
<div class="card-content">
<h3>Andreea Bostanica</h3>
<div class="overlay" id="artist1-overlay">
<p>Biografie și detalii despre Andreea Bostanica.</p>
<div class="social-media-icons">
<a href="https://open.spotify.com/artist/35or7yOg8P9nPNTWH4tXyQ" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@andreea_bostanica" target="_blank"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/andreeabostanica/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist1-clickme" onclick="showOverlay('artist1')">Click me</div>
</div>
</div>
</div>
<!-- Artist 2 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist2')" onmouseleave="closeOverlay(document.getElementById('artist2-overlay'))">
<img class="card-img" src="./img/denisa.jpeg" alt="Bubblezz">
<div class="card-content">
<h3>Bubblezz</h3>
<div class="overlay" id="artist2-overlay">
<p>Biografie și detalii despre Bubblezz.</p>
<div class="social-media-icons">
<a href="https://open.spotify.com/artist/7DPg7JINP6AkVlnVA2SrPo" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@denisa__avram" target="_blank"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/denisa__avram/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist2-clickme" onclick="showOverlay('artist2')">Click me</div>
</div>
</div>
</div>
<!-- Artist 3 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist3')" onmouseleave="closeOverlay(document.getElementById('artist3-overlay'))">
<img class="card-img" src="./img/christinne.jpeg" alt="Christinne">
<div class="card-content">
<h3>Christinne</h3>
<div class="overlay" id="artist3-overlay">
<p>Biografie și detalii despre Christinne.</p>
<div class="social-media-icons">
<a href="https://open.spotify.com/artist/198mkUSMN2Z0RcFV5uEtCX" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@iixtinaii1" target="_blank"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/iixtinaii/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist3-clickme" onclick="showOverlay('artist3')">Click me</div>
</div>
</div>
</div>
<!-- Artist 4 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist4')" onmouseleave="closeOverlay(document.getElementById('artist4-overlay'))">
<img class="card-img" src="./img/cristianporcari.jpeg" alt="Christinne">
<div class="card-content">
<h3>Cristian Porcari</h3>
<div class="overlay" id="artist4-overlay">
<p>Biografie și detalii despre Cristian Porcari.</p>
<div class="social-media-icons">
<a href="https://open.spotify.com/artist/2CYdLJs282GH7B65QAZEA7" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@porcaricristian" target="_blank"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/porcaricristian/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist4-clickme" onclick="showOverlay('artist4')">Click me</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Artist 5 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist5')" onmouseleave="closeOverlay(document.getElementById('artist5-overlay'))">
<img class="card-img" src="./img/dael.jpeg" alt="Dael Damsa">
<div class="card-content">
<h3>Dael Damsa</h3>
<div class="overlay" id="artist5-overlay">
<p>Biografie și detalii despre Dael Damsa.</p>
<div class="social-media-icons">
<a href="https://open.spotify.com/artist/5V5HnhQeqQsfxLJEPiggrh" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@daeldamsa" target="_blank"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/daeldamsa/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist5-clickme" onclick="showOverlay('artist5')">Click me</div>
</div>
</div>
</div>
<!-- Artist 6 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist6')" onmouseleave="closeOverlay(document.getElementById('artist6-overlay'))">
<img class="card-img" src="./img/daniela.jpeg" alt="Daniela Matei">
<div class="card-content">
<h3>Daniela Matei</h3>
<div class="overlay" id="artist6-overlay">
<p>Biografie și detalii despre Daniela Matei.</p>
<div class="social-media-icons">
<a href="https://open.spotify.com/artist/1VsC9r36rbheLsiUKlmKHh" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@daniela.matei01" target="_blank"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/daniela.alexandra.matei/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist6-clickme" onclick="showOverlay('artist6')">Click me</div>
</div>
</div>
</div>
<!-- Artist 7 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist7')" onmouseleave="closeOverlay(document.getElementById('artist7-overlay'))">
<img class="card-img" src="./img/dominique.jpeg" alt="Dominique">
<div class="card-content">
<h3>Dominique</h3>
<div class="overlay" id="artist7-overlay">
<p>Biografie și detalii despre Dominique.</p>
<div class="social-media-icons">
<a href="https://open.spotify.com/artist/0D9dCbtblOEZI7t538oQje" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@dominiqueherself" target="_blank"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/dominiqueherself/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist7-clickme" onclick="showOverlay('artist7')">Click me</div>
</div>
</div>
</div>
<!-- Artist 8 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist8')" onmouseleave="closeOverlay(document.getElementById('artist8-overlay'))">
<img class="card-img" src="./img/tanfeelz.jpeg" alt="Tan Feelz">
<div class="card-content">
<h3>Tan Feelz</h3>
<div class="overlay" id="artist8-overlay">
<p>Biografie și detalii despre Tan Feelz.</p>
<div class="social-media-icons">
<a href="https://open.spotify.com/artist/4Y4qoWxVVZifkOcxyR3ZSB" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@tanfeelz.music" target="_blank"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/tanfeelzmusic/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist8-clickme" onclick="showOverlay('artist8')">Click me</div>
</div>
</div>
</div>
</div>
</section>
<section class="container">
<h1>Echipa noastra</h1>
<div class="row">
<!-- Artist 1 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist51')" onmouseleave="closeOverlay(document.getElementById('artist51-overlay'))">
<img class="card-img" src="./img/dael.jpeg" alt="Dael Damsa">
<div class="card-content">
<h3>Dael Damsa</h3>
<div class="overlay" id="artist51-overlay">
<p>Biografie și detalii despre Dael Damsa.</p>
<div class="social-media-icons">
<a href="https://open.spotify.com/artist/5V5HnhQeqQsfxLJEPiggrh" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@daeldamsa" target="_blank"><i class="fab fa-tiktok"></i></a>
<a href="https://www.instagram.com/daeldamsa/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist51-clickme" onclick="showOverlay('artist51')">Click me</div>
</div>
</div>
</div>
<!-- Artist 2 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist21')" onmouseleave="closeOverlay(document.getElementById('artist21-overlay'))">
<!-- <img class="card-img" src="./img/denisa.jpeg" alt="Bubblezz"> -->
<div class="card-content">
<h3>Alexandru Birca</h3>
<div class="overlay" id="artist21-overlay">
<p>Biografie și detalii despre Alexandru Birca.</p>
<div class="social-media-icons">
<!-- <a href="https://open.spotify.com/artist/7DPg7JINP6AkVlnVA2SrPo" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@denisa__avram" target="_blank"><i class="fab fa-tiktok"></i></a> -->
<a href="https://www.instagram.com/alex.mbirca/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist21-clickme" onclick="showOverlay('artist21')">Click me</div>
</div>
</div>
</div>
<!-- Artist 3 -->
<div class="col">
<div class="card" onmouseover="showClickMe('artist31')" onmouseleave="closeOverlay(document.getElementById('artist31-overlay'))">
<!-- <img class="card-img" src="./img/christinne.jpeg" alt="Christinne"> -->
<div class="card-content">
<h3>Dana Rusu</h3>
<div class="overlay" id="artist31-overlay">
<p>Biografie și detalii despre Christinne.</p>
<div class="social-media-icons">
<!-- <a href="https://open.spotify.com/artist/198mkUSMN2Z0RcFV5uEtCX" target="_blank"><i class="fab fa-spotify"></i></a>
<a href="https://www.tiktok.com/@iixtinaii1" target="_blank"><i class="fab fa-tiktok"></i></a> -->
<a href="https://www.instagram.com/dana.rsu/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="click-me" id="artist31-clickme" onclick="showOverlay('artist31')">Click me</div>
</div>
</div>
</div>
</section>
<section id="partners" class="container">
<h1>Partenerii nostri</h1>
<div class="partner-logos">
<img src="https://theonerecords.ro/assets/images/protv-1-240x240.png" alt="PRO TV">
<img src="https://theonerecords.ro/assets/images/voyo-logo-2021-240x240.png" alt="Voyo">
<img src="https://theonerecords.ro/assets/images/fanta-logo-2016-present-1-240x240.png" alt="Fanta">
<img src="https://theonerecords.ro/assets/images/disney-wordmark-240x240.png" alt="Disney">
<img src="https://theonerecords.ro/assets/images/sundayhb-240x240.png" alt="Sunday Habit">
<img src="https://theonerecords.ro/assets/images/logo-stabilo-240x240.png" alt="Stabilo">
<img src="https://theonerecords.ro/assets/images/calvin-klein-logo-240x240.png" alt="Calvin Klein">
<img src="https://theonerecords.ro/assets/images/sprite-logo.svg" alt="Sprite">
<img src="https://theonerecords.ro/assets/images/schwarzkopf-corporate-1-240x240.png" alt="Schwarzkopf">
<img src="https://theonerecords.ro/assets/images/download-240x240.png" alt="Vivien Vance">
<img src="https://theonerecords.ro/assets/images/65385703-3375792095780318-1858449318394986496-n-240x240.jpeg" alt="Diverta">
</div>
</section>
<footer>
<div class="social-icons">
<a href="https://www.instagram.com/the1records/"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/c/TheOneRecords/"><i class="fab fa-youtube"></i></a>
<a href="https://www.tiktok.com/@the1records"><i class="fab fa-tiktok"></i></a>
<a href="https://www.facebook.com/the1records/"><i class="fab fa-facebook"></i></a>
<a href="https://www.linkedin.com/company/the-one-records/"><i class="fab fa-linkedin"></i></a>
</div>
<p>© 2023 The One Records. Toate drepturile rezervate.</p>
</footer>
<script>
const partnerLogos = document.querySelector('.partner-logos');
const firstLogo = partnerLogos.children[0];
function checkScrollEnd() {
if (partnerLogos.scrollLeft + partnerLogos.clientWidth >= partnerLogos.scrollWidth) {
partnerLogos.scrollLeft = 0;
} else {
partnerLogos.scrollLeft += firstLogo.offsetWidth + parseInt(getComputedStyle(firstLogo).marginRight);
}
}
setInterval(checkScrollEnd, 3000);
</script>
<div class="video-background">
<video src="./video/damelo.mp4" autoplay muted loop playsinline></video>
</div>
</body>
</html>