99 lines
4.7 KiB
Vue
99 lines
4.7 KiB
Vue
<template>
|
|
<!-- Bannière-->
|
|
<div class="z-20">
|
|
<div class="relative flex flex-col">
|
|
<!-- Social Network-->
|
|
<div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4">
|
|
<div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
|
|
<div class="text-lg">1000+ Abonnés</div>
|
|
<div class="text-sm">500 Contacts en commun</div>
|
|
</div>
|
|
<div class="grid grid-cols-6 md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
|
|
<a href="https://facebook.com" target="_blank"
|
|
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
|
|
<v-icon>mdi-facebook</v-icon>
|
|
</a>
|
|
<a href="https://twitter.com" target="_blank"
|
|
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-400">
|
|
<v-icon>mdi-twitter</v-icon>
|
|
</a>
|
|
<a href="https://instagram.com" target="_blank"
|
|
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-pink-500">
|
|
<v-icon>mdi-instagram</v-icon>
|
|
</a>
|
|
<a href="https://tiktok.com" target="_blank"
|
|
class="transform transition-transform duration-200 hover:scale-110">
|
|
<img src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
|
|
</a>
|
|
<a href="https://youtube.com" target="_blank"
|
|
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-red-500">
|
|
<v-icon>mdi-youtube</v-icon>
|
|
</a>
|
|
<a href="https://yoursite.com" target="_blank"
|
|
class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-gray-500">
|
|
<v-icon>mdi-web</v-icon>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--Banner & user info-->
|
|
<div class="relative">
|
|
<!--Banner-->
|
|
<div>
|
|
<img class="w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
|
|
</div>
|
|
<!--User info -->
|
|
<div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
|
|
<div class="text-white">
|
|
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">Guillaume</div>
|
|
<div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">Mousseau</div>
|
|
<div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">Agence Créative</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions Button & image profile -->
|
|
<div class="w-full ">
|
|
<div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
|
|
<div class=" flex flex-col sm:flex-row items-center sm:justify-between">
|
|
<img
|
|
class=" left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-30"
|
|
:src="profilePicture"
|
|
alt="Profile Picture"
|
|
style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
|
|
<div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
|
|
<button
|
|
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
|
|
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
|
|
</button>
|
|
<button class="text-white py-2 px-4 rounded"
|
|
style="background-color: #333; transition: background-color 0.3s ease;"
|
|
onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
|
|
S'ABONNER
|
|
</button>
|
|
<button
|
|
class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
|
|
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
|
|
</button>
|
|
<button
|
|
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
|
|
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
|
|
let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
|
|
</script>
|
|
|
|
<style scoped>
|
|
.shadow-lg {
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
|
|
}
|
|
</style> |