Pages sons
This commit is contained in:
parent
148b240bb7
commit
838201bb58
51
assets/front.html
Normal file
51
assets/front.html
Normal file
@ -0,0 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LOOP</title>
|
||||
<base href="./">
|
||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="stylesfront.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<div class="music-list">
|
||||
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/muddy_files.html" class="music-card">
|
||||
<img src="muddyfiles.jpg" alt="muddyfiles">
|
||||
<div class="music-info">
|
||||
<h3>Muddy Files</h3>
|
||||
<p>Ely</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/hell_even.html" class="music-card">
|
||||
<img src="helleven.jpg" alt="helleven">
|
||||
<div class="music-info">
|
||||
<h3>Hell Even</h3>
|
||||
<p>Ely feat. Jenny</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/hell_even.html" class="music-card">
|
||||
<img src="stamina.jpg" alt="stamina">
|
||||
<div class="music-info">
|
||||
<h3>Stamina</h3>
|
||||
<p>Corb Nurk</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Ajoute autant de titres que nécessaire -->
|
||||
</div>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
31
assets/hell_even.html
Normal file
31
assets/hell_even.html
Normal file
@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LOOP</title>
|
||||
<base href="./">
|
||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="styleshe.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<h1>Let your favorite songs play on LOOP.</h1>
|
||||
|
||||
|
||||
<div class="login-container">
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
assets/logo.png
Normal file
BIN
assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
@ -12,7 +12,7 @@
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="file:///C:/Users/elyko/Desktop/loop/index.html"><img src="images/logo.png" class="logo"></a>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
<h1>Let your favorite songs play on LOOP.</h1>
|
||||
@ -21,8 +21,8 @@
|
||||
<div class="login-container">
|
||||
<input type="text" placeholder="Username" required>
|
||||
<input type="password" placeholder="Password" required>
|
||||
<button>Log In</button>
|
||||
</div>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/front.html" class="button">Log In</a>
|
||||
</div>
|
||||
|
||||
<h2>Don't have an account ?<a href="" class="orange"> Sign up now.</a> </span></h2>
|
||||
|
||||
23
assets/muddy_files.html
Normal file
23
assets/muddy_files.html
Normal file
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LOOP</title>
|
||||
<base href="./">
|
||||
<script src="https://kit.fontawesome.com/96dcb489df.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="stylesmf.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<a href="file:///home/devel/Desktop/loop-code/assets/main.html"><img src="logo.png" class="logo"></a>
|
||||
</header>
|
||||
|
||||
|
||||
<script src="script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
0
assets/muddy_files.js
Normal file
0
assets/muddy_files.js
Normal file
BIN
assets/paradisev2.mp3
Normal file
BIN
assets/paradisev2.mp3
Normal file
Binary file not shown.
@ -1,3 +0,0 @@
|
||||
body{
|
||||
background-color: red;
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
|
||||
.logo{
|
||||
margin-top: 40px;
|
||||
max-width: 180px;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -73,7 +73,6 @@ h2 {
|
||||
text-align: center
|
||||
}
|
||||
|
||||
/* Champs de texte */
|
||||
.login-container input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
@ -83,8 +82,7 @@ h2 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Bouton */
|
||||
.login-container button {
|
||||
.button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color:#ffa600;
|
||||
@ -94,9 +92,10 @@ h2 {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-container button:hover {
|
||||
.button:hover {
|
||||
background-color: #dd3000;
|
||||
}
|
||||
|
||||
|
||||
90
assets/stylesfront.css
Normal file
90
assets/stylesfront.css
Normal file
@ -0,0 +1,90 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom, #ffa600, #dd3000);
|
||||
}
|
||||
|
||||
/* Structure de base */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: flex-start; /* Aligne à gauche */
|
||||
align-items: center; /* Centré verticalement si tu ajoutes du texte à côté */
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Style du logo */
|
||||
.logo {
|
||||
width: 120px; /* Ajuste la taille selon ton design */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Responsive pour smartphone */
|
||||
@media (max-width: 768px) {
|
||||
.logo {
|
||||
width: 100px; /* Un peu plus petit sur mobile si nécessaire */
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.music-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.music-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
transition: background-color 0.3s, transform 0.2s;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.music-card:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.music-card img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.music-info {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.music-info h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.music-info p {
|
||||
margin: 5px 0 0;
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
109
assets/styleshe.css
Normal file
109
assets/styleshe.css
Normal file
@ -0,0 +1,109 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
@media (min-width: 768px) { /* Écran plus large (tablette, PC) */
|
||||
.container {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
/* Par défaut, style mobile */
|
||||
body {
|
||||
font-size: 16px;
|
||||
background: linear-gradient(to bottom, #585858, #000000);
|
||||
display: grid;
|
||||
place-items: center; /* Centre horizontalement et verticalement */
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Quand l'écran est large (ex : tablette ou ordinateur) */
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.logo{
|
||||
margin-top: 40px;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.logofront{
|
||||
max-width: 130px;
|
||||
margin-right: 700px;
|
||||
margin-bottom: 880px;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ffffff;
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #ffffff;
|
||||
font-size: 40%;
|
||||
}
|
||||
|
||||
.orange {
|
||||
color: #ffa600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.orange:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 30px;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.login-container input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color:#ffa600;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #dd3000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
42
assets/stylesmf.css
Normal file
42
assets/stylesmf.css
Normal file
@ -0,0 +1,42 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(to bottom, #316997, #18344b);
|
||||
}
|
||||
|
||||
/* Structure de base */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: flex-start; /* Aligne à gauche */
|
||||
align-items: center; /* Centré verticalement si tu ajoutes du texte à côté */
|
||||
padding: 10px 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Style du logo */
|
||||
.logo {
|
||||
width: 120px; /* Ajuste la taille selon ton design */
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Responsive pour smartphone */
|
||||
@media (max-width: 768px) {
|
||||
.logo {
|
||||
width: 100px; /* Un peu plus petit sur mobile si nécessaire */
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user