From 1de41b6989008980d858f42666cf28410cc17501 Mon Sep 17 00:00:00 2001
From: Xaloc <xaloc@tutanota.com>
Date: Wed, 28 Feb 2024 14:26:42 +0100
Subject: [PATCH] afegir estil i peu

---
 index.html |  5 ++++-
 style.css  | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 style.css
diff --git a/index.html b/index.html
index fa32804..1a189d1 100644
--- a/index.html
+++ b/index.html
@@ -5,12 +5,14 @@
 		<meta name="author" content="Xaloc">
 		<meta name="viewport" content="width=device-width, initial-scale=1"/>
 		<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
+		<link rel="stylesheet" href="style.css">
 		<link rel="stylesheet" href="player.css">
 		<title>Ràdios</title>
 		<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
 	</head>
 	
 	<body>
+		<h2>Miniweb per escoltar la ràdio</h2>
 		<h3>Ràdios Lliures i comunitàries</h3>
 		<p>
 			<button onClick='vallekas.play()'>Radio Vallekas</button>
@@ -68,7 +70,8 @@
 		</div>
 
 	
-	
+		<footer>
+			Fet amb <i class="fa fa-heart"></i> per <a href=https://fedi.xaloc.space/xaloc> Xaloc</a>. El codi font i la llicència <a href=https://git.xaloc.space/xaloc/radio/> aquí</a>.
 	<script src='script.js'></script>
 	<script src="player.js"></script>
 	</body>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0168eb3
--- /dev/null
+++ b/style.css
@@ -0,0 +1,54 @@
+body {
+  margin: 0 auto;
+  max-width: 42em;
+  background: #3B3C36;
+  color: #E5E4E2;
+  font-family: sans-serif;
+  font-size: 1.4rem;
+  text-align: center;
+}
+
+button {
+    background-color: #C8A2C8;
+    color: black;
+    text-align: center;
+    font-size: 1.2rem;
+    margin: 2px 2px 2px 2px;
+    border: none;
+    border-radius: 12px;
+    transition-duration: 0.4s;
+}
+
+button:hover {
+    background-color: #8A5D8A;
+}
+
+button:active {
+  background-color: #8A5D8A;
+  transform: translateY(4px);
+}
+
+a:link{
+    color: #C8A2C8;
+}
+
+a:visited{
+    color: #c1d9f0;
+}
+
+a:hover{
+    color: #8A5D8A;
+}
+
+a:active{
+    color: #8A5D8A;
+}
+
+
+footer {
+  text-align: center;
+  font-size: 0.9em;
+  border-top: 2px solid white;
+  margin-top: 2rem;
+  padding: 1rem;
+}
