From 345cf662273eb80eea89573f46f9c7f8a1bbbc61 Mon Sep 17 00:00:00 2001 From: Lil-Carpi Date: Mon, 17 Nov 2025 20:00:22 +0100 Subject: [PATCH] =?UTF-8?q?A=C3=B1adido=20el=20archivo=20HTML=20y=20CSS=20?= =?UTF-8?q?inicial=20para=20el=20proyecto=20(plantilla).?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- projecte-final/assets/css/style.css | 228 ++++++++++++++++++++++++++++ projecte-final/index.html | 81 ++++++++++ 2 files changed, 309 insertions(+) create mode 100644 projecte-final/assets/css/style.css create mode 100644 projecte-final/index.html diff --git a/projecte-final/assets/css/style.css b/projecte-final/assets/css/style.css new file mode 100644 index 0000000..0bb6977 --- /dev/null +++ b/projecte-final/assets/css/style.css @@ -0,0 +1,228 @@ +* +{ + padding: 0; + box-sizing: border-box; + list-style: none; +} +body +{ + font-family: 'Manjari', sans-serif; + background: linear-gradient(135deg, #0f172a, #1e293b); + color: white; +} +.navbar +{ + position:fixed; + top: 1rem; + left: 1rem; + right: 1rem; + width: calc(100% -2rem); + padding: 1rem 1.5rem; + border-radius: 20px; + color: white; + z-index: 64; + + backdrop-filter: blur(12px) saturate(180%); + -webkit-backdrop-filter: blur(12px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + + display:flex; + justify-content: space-between; + align-items: center; +} +.logoContainer +{ + display: flex; + justify-content: center; +} + +.logoContainer a +{ + color: white; + font-size: 1.125rem; + font-weight: bold; + margin-right: 1rem; + text-decoration: none; +} +@media (min-width: 768px){ + .logoContainer a + { + font-size: 1.25rem; + } +} + +.navbarLinks +{ + list-style: none; + margin-right: 1rem; + padding: 0; + flex-grow: 1; +} +@media (min-width: 768px){ + .navbarLinks + { + display: flex; + justify-content: flex-end; + align-items: center; + } +} + + +.navbarLinks li +{ + margin-right: 0.5rem; +} +@media (min-width: 768px) { + .navbarLinks li + { + display: inline-block; + margin-right: 1rem; + } +} + +.navbarLinks a +{ + text-decoration: none; + color: white; +} + +.container +{ + max-width: 1200px; + margin: 0 auto; +} + +.footer +{ + bottom: 1rem; + left: 1rem; + right: 1rem; + padding: 1rem; + color: white; + z-index: 50; + border-radius: 20px; + + background: rgba(255, 255, 255, 0.05); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); + + display: flex; + justify-content: center; + align-items: center; +} + +.footerRow +{ + display: flex; + flex-wrap: wrap; +} + +.footerLinks +{ + width: 25%; + padding: 0 15px; +} + +.footerLinks h4 +{ + font-size: 20px; + color: #FFFFFF; + margin-bottom: 25px; + font-weight: 500; + border-bottom: 2px solid #00c3ff; + padding-bottom: 10px; + display: inline-block; +} + +.footerLinks ul li a +{ + font-size: 18px; + text-decoration: none; + color: #bbbbbb; + display: block; + margin-bottom: 15px; + transition: all .3s ease; +} + +.footerLinks ul li a:hover +{ + color:#ffffff; + padding-left: 6px; +} + +.socialLinks a +{ + display: inline-block; + min-height: 40px; + width: 40px; + background-color: rgba(255, 255, 255, 0.2); + margin: 0 10px 10px 0; + text-align: center; + line-height: 40px; + border-radius: 50%; + color: #ffffff; + transition: all .5s ease; +} + +.socialLinks a:hover +{ + background-color: #00C3FF +} + +@media(max-width: 991px) { + .footerRow + { + text-align:center; + } + .footerLinks + { + width: 100%; + margin-bottom: 30px; + } +} + +.creativeCommons +{ + width: 100%; + text-align: center; + margin-top: 2rem; + font-size: 0.875rem; + color: #bbbbbb; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 0.2em; +} + +.creativeCommons a +{ + color: #bbbbbb; + text-decoration: none; + margin: 0 0.2em; + transition: color 0.3s ease; +} + +.creativeCommons a:hover +{ + color: #ffffff; +} + +.creativeCommons img +{ + vertical-align: middle; + max-width: 1em; + max-height: 1em; + margin-left: 0.2em; +} + + +.content { + padding-top: 7rem; + padding-bottom: 30rem; + max-width: 1200px; + margin: 0 auto; +} \ No newline at end of file diff --git a/projecte-final/index.html b/projecte-final/index.html new file mode 100644 index 0000000..98318de --- /dev/null +++ b/projecte-final/index.html @@ -0,0 +1,81 @@ + + + + + + + + + + + + +
+ +
+ +
+

Lorem Ipsum

+
+ + + + + + \ No newline at end of file