responsivo telefono

index.html

@@ -17,60 +17,62 @@
  <nav>
  <a href="#musica">Música</a>
  <a href="#videos">Videos</a>
- <a href="#contact">Contacto</a>
+ <!-- <a href="#contact">Contacto</a> -->
  </nav>
  </header>
 
  <div class="main">
  <h1>naranjocalido</h1>
- <div class="iconos">
- <a href="https://open.spotify.com/artist/7qQohj25SVzOjIANr6TvuG?go=1&sp_cid=aedeb04fc4986e54b8a2335f9b47d0b4&t=9&utm_source=embed_player_p&utm_medium=desktop&nd=1&dlsi=e0346ad4232d4fa1" target="_blank">
- <i class="fa-brands fa-spotify"></i>
- </a>
- <a href="https://www.youtube.com/@naranjocalido_" target="_blank">
- <i class="fa-brands fa-youtube"></i>
- </a>
- <a href="https://www.instagram.com/naranjocalido" target="_blank">
- <i class="fa-brands fa-instagram"></i>
- </a>
- <a href="https://www.instagram.com/naranjocalido" target="_blank">
- <i class="fa-brands fa-tiktok"></i>
- </a>
- </div>
  </div>
 
  <div class="player" id="musica"z>
- <iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/7qQohj25SVzOjIANr6TvuG?utm_source=generator" width="70% auto" height="480" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
+ <iframe style="border-radius:12px" src="https://open.spotify.com/embed/artist/7qQohj25SVzOjIANr6TvuG?utm_source=generator" width="70% auto" height="500" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
  </div>
-
+ 
  <div class="videos" id="videos">
- <iframe width="70% auto" min-height="315" src="https://www.youtube.com/embed/Ru27v4kOCvk?si=N6Z0cLeur6Wq9Z-t" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
- <iframe width="70% auto" min-height="315" src="https://www.youtube.com/embed/le9X6PHfd6w?si=EZv8MlBgEWu5D0Hr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+ <iframe width="100%" height="100%" src="https://www.youtube.com/embed/Ru27v4kOCvk?si=N6Z0cLeur6Wq9Z-t" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+ <!-- <iframe width="70% auto" min-height="315" src="https://www.youtube.com/embed/le9X6PHfd6w?si=EZv8MlBgEWu5D0Hr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> -->
  </div>
 
  <video class="video-bg" autoplay muted loop src="assets/Canvas Farmaco 1.mp4" type="video/mp4">
  </video>
-
- <div class="contacto" id="contact">
+ 
+ <!-- <div class="contacto" id="contact">
  <h2>Contacto</h2>
  <p>[email protected]</p>
  <div class="iconos">
  <a href="https://open.spotify.com/artist/7qQohj25SVzOjIANr6TvuG?go=1&sp_cid=aedeb04fc4986e54b8a2335f9b47d0b4&t=9&utm_source=embed_player_p&utm_medium=desktop&nd=1&dlsi=e0346ad4232d4fa1" target="_blank">
  <i class="fa-brands fa-spotify"></i>
-  </a>
-  <a href="https://www.youtube.com/@naranjocalido_" target="_blank">
+ </a>
+ <a href="https://www.youtube.com/@naranjocalido_" target="_blank">
  <i class="fa-brands fa-youtube"></i>
  </a>
  <a href="https://www.instagram.com/naranjocalido" target="_blank">
- <i class="fa-brands fa-instagram"></i>
+  <i class="fa-brands fa-instagram"></i>
  </a>
  <a href="https://www.instagram.com/naranjocalido" target="_blank">
  <i class="fa-brands fa-tiktok"></i>
  </a>
  </div>
- </div>
+ </div> -->
 
- <footer>naranjocalido 2024</footer>
+ <footer>
+ <div class="iconos">
+ <a href="https://open.spotify.com/artist/7qQohj25SVzOjIANr6TvuG?go=1&sp_cid=aedeb04fc4986e54b8a2335f9b47d0b4&t=9&utm_source=embed_player_p&utm_medium=desktop&nd=1&dlsi=e0346ad4232d4fa1" target="_blank">
+ <i class="fa-brands fa-spotify"></i>
+ </a>
+ <a href="https://www.youtube.com/@naranjocalido_" target="_blank">
+ <i class="fa-brands fa-youtube"></i>
+ </a>
+ <a href="https://www.instagram.com/naranjocalido" target="_blank">
+ <i class="fa-brands fa-instagram"></i>
+ </a>
+ <!-- <a href="https://www.instagram.com/naranjocalido" target="_blank">
+ <i class="fa-brands fa-tiktok"></i>
+ </a> -->
+ </div>
+ <p>naranjocalido 2024</p>
+ </footer>
  </div>
  <script src="https://kit.fontawesome.com/3d5877c260.js" crossorigin="anonymous"></script>
 </body>

style.css

@@ -25,15 +25,15 @@ body {
 }
 
 header {
- position: sticky;
- /* width: 100%; */
+ /* position: fixed;
+ width: 100%;
  top: 0;
- /* bottom: 0; */
- /* right: 0; */
- /* left: 0; */
+ bottom: 0;
+ right: 0;
+ left: 0; */
  display: flex;
  justify-content: space-between;
- padding: 3em;
+ padding: 2em;
 }
 
 nav {
@@ -53,9 +53,8 @@ nav {
 
 h1 {
  font-family: instrument serif;
- font-size: 5rem;
+ font-size: 4em;
  font-weight: 500;
-
 }
 
 a {
@@ -64,7 +63,7 @@ a {
 }
 
 .iconos {
- font-size: 2em;
+ font-size: 1em;
  display: flex;
  gap: 1em;
 }
@@ -74,6 +73,18 @@ iframe {
  margin: 6em;
 }
 
+.player {
+ display: flex;
+ justify-content: center;
+ width: 80% auto;
+}
+
+.videos {
+ display: flex;
+ justify-content: center;
+ width: 80% auto;
+}
+
 
 .video-bg {
  position: absolute;
@@ -89,7 +100,12 @@ iframe {
 }
 
 footer {
- padding: 3em;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ /* gap: 0em; */
+ padding: 2em;
 }
 
 i:hover {
@@ -98,4 +114,10 @@ i:hover {
 
 a:hover {
  color: orange;
+}
+
+@media (min-width: 576px) {
+ h1 {
+ font-size: 5rem;
+ }
 }