Jump to content

matiasnegro

Members
 View Profile  See their activity

  • Posts

    24

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

matiasnegro's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. matiasnegro
    Thanks! It worked!
  2. matiasnegro
    Hello, My name is Matías and I'm from Argentina. I have this problem: everytime I try to make an HTML/CSS design and I use the structure: "<img src="/images/1.jpg>" (for example) the picture doesn't appear, even though the directory is correctly named. The folder "images" is inside the folder where the main page I'm working on is. I end up having to upload the pictures to an online server in order to work correctly everytime. It's quite annoying. Does anyone else have this problem?
  3. matiasnegro
    Hello. I'm looking for an accurate HTML+CSS previewer in Visual Studio Code. I've already installed Live Preview (https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server) and HTML Preview (https://marketplace.visualstudio.com/items?itemName=tht13.html-preview-vscode) but they don't represent CSS proportions precisely. Sometimes I code pages that look good on the preview but horrible on the actual browser. This becomes increasingly annoying when I want to create responsive CSS designs. Does anyone know another way of previewing what your page is going to look like? Even if it's not in Visual Studio Code.
  4. matiasnegro
    Solution found! I simply had to change the body height to auto in the media query n.n
  5. matiasnegro
    Hello, and good night! I'm doing a Front End Mentor Challenge and it requires for me to make a responsive flexbox design. The problem is: when I change the flexbox-direction to columns, the whole page breaks. The content in the main container just overflows the viewport. Does anybody know why or how to fix it? Here's the code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <title>Frontend Mentor | 3-column preview card component</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&display=swap" rel="stylesheet"> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <style> * {margin: 0; padding: 0; box-sizing: border-box;} .attribution {font-size: 11px; text-align: center; position: absolute; bottom: 2px;} .attribution a {color: hsl(228, 45%, 44%);} html {height: 100%;} body {display: flex; height: 100%; align-items: center; justify-content: center; background-color: hsl(0, 0%, 95%);} .maincontainer {display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: left; padding-top: 10%; padding-bottom: 7%; padding-right: 10%; padding-left: 10%; height: 100%; width: 100%;} .sedans {background-color: hsl(31, 77%, 52%); height: 100%; border-top-left-radius: 10px; border-bottom-left-radius: 10px;; padding-left: 5%; padding-right: 5%; padding-top: 5%; padding-bottom: 0%;} .suvs {background-color: hsl(184, 100%, 22%); height: 100%; padding-left: 5%; padding-right: 5%; padding-top: 5%; padding-bottom: 0%;} .luxury {background-color: hsl(179, 100%, 13%); height: 100%; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding-left: 5%; padding-right: 5%; padding-top: 5%; padding-bottom: 0%;} .title {font-family: 'Big Shoulders Display', cursive; color: hsl(0, 0%, 95%); font-size: 30px; padding-top: 7%;} .text {color: hsl(0, 0%, 100%, 0.75); padding-top: 40px; font-family: 'Lexend Deca', sans-serif; font-size: 15px; padding-bottom: 70%;} .button {font-family: 'Lexend Deca', sans-serif; background-color: hsl(0, 0%, 95%); width: 120px; display: flex; text-align: center; justify-content: center; align-items: center; border-radius: 15px; height: 35px; bottom: 20%; position: fixed;} .button a {text-decoration: none;} .sedans .button:hover {background-color: hsl(31, 77%, 52%); border-style: solid; border-color: white;} .suvs .button:hover {background-color: hsl(184, 100%, 22%); border-style: solid; border-color: white;} .luxury .button:hover {background-color: hsl(179, 100%, 13%); border-style: solid; border-color: white;} .sedans .button a:hover {color: white;} .suvs .button a:hover {color: white;} .luxury .button a:hover {color: white;} .sedans .button a {color: hsl(31, 77%, 52%);} .suvs .button a {color: hsl(184, 100%, 22%);} .luxury .button a {color: hsl(179, 100%, 13%);} .image {height: 50px;; width: auto;} @media screen and (max-width: 375px) { .maincontainer {flex-direction: column;} } </style> </head> <body> <div class="maincontainer"> <div class="sedans"> <div class="image"><img src="https://i.ibb.co/QC2KfjT/icon-sedans.png"></div> <div class="title">SEDANS</div> <div class="text">Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</div> <div class="button"> <a href="blank">Learn More</a> </div> </div> <div class="suvs"> <div class="image"><img src="https://i.ibb.co/P1yyLW5/icon-suvs.png"></div> <div class="title">SUVs</div> <div class="text">Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</div> <div class="button"> <a href="blank">Learn More</a> </div> </div> <div class="luxury"> <div class="image"><img src="https://i.ibb.co/1d624Ty/icon-luxury.png"></div> <div class="title">LUXURY</div> <div class="text">Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</div> <div class="button"> <a href="blank">Learn More</a> </div> </div> </div> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Matías Edgardo Negro</a>. </div> </body> </html>
  6. matiasnegro
    So I finally figured it out. If the html element is not set to "height:100%", then you NEED to have the div in 100vh somehow. BUT if you set the html element height to 100%, then the body element height to 100% and apply flex in the body element, then you can set the height of the div to 100% without problem. Here's the code, maybe it is more clear like this. Thanks dsonesuk for answering: <!DOCTYPE html> <html> <head> <title>Estructura HTML Prototípica</title> <meta charset="UTF-8"> <meta name="keywords" content="keyword1, keyword2, keyword3"> <meta name="description" content="Descripción del contenido de la página"> <meta name="author" content="Nombre del dueño de la página"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> <style> * {margin: 0; padding: 0; box-sizing: border-box;} html {height: 100%;} body {background-color: red; display: flex; height: 100%; align-items: center; justify-content: center;} .primero {background-color: black; color: white; display: flex; height: 100px; width: 100px; align-items: center; justify-content: center;} .segundo {background-color: white; color: orange; text-align: center; height: 20px;} </style> </head> <body> <div class="primero"> <div class="segundo"> <p>Hola</p> </div> </div> </body> </html> And here it is, applied to the code I posted first: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Poppins&display=swap" rel="stylesheet"> <title>Frontend Mentor | NFT preview card component</title> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <style> * {margin: 0; padding: 0; box-sizing: border-box;} html {height: 100%;} body {background-color: hsl(217, 54%, 11%); font-size: 18px; color: hsl(215, 51%, 70%); font-family: Outfit, sans-serif; align-items: center; height: 100%;} .containergeneral {display: flex; height: 100%; width: 100%; align-items: center; justify-content: center;} .container {background-color: hsl(216, 50%, 16%); border-radius: 15px; height: auto; width: 420px; padding: 30px;} .mainimage--center {display: grid; place-items: center; height: 50px;} .mainimage img {width: 100%; border-radius: 10px;} h2 {color: white; padding-top: 15px; padding-bottom: 3px; font-weight: 300;} .collection {padding-bottom: 15px; padding-top: 15px; font-weight: 400;} main ul {display:flex; align-items: center; justify-content: space-between; padding: 2px 0px; border-bottom: 1px solid; list-style-type: none; padding-bottom: 20px; padding-top: 0px; font-weight: 600;} main ul span {color: hsl(178, 100%, 50%);} .creationby {width: 100%; display: flex; padding-top: 15px;} .creationby p {padding-left: 15px; padding-top: 9px; font-weight: 0;} .creationby img {width: 40px; height: 40px; border: 2px solid hsl(0, 0%, 100%); border-radius: 30px; vertical-align: baseline;} .creationby span {color: white;} .attribution {font-size: 11px; position: fixed; bottom: 5px; display: flex; width: 100%; align-items: center; justify-content: center;} .attribution a { color: hsl(228, 45%, 44%);} </style> </head> <body> <div class="containergeneral";> <div class="container"> <div class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></div> <h2>Equilibrium #3429</h2> <p class="collection">Our Equilibrium collection promotes balance and calm.</p> <main> <ul> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /><span>0.041 ETH</span></li> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li> </ul> </main> <div class="creationby";> <img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar"> <p>Creation of <span>Jules Wyvern</span></p> </div> </div> </body> </div> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Matías Edgardo Negro</a>. </div> </html>
  7. matiasnegro
    I'm doing this NFT Preview Card Front End Mentor Challenge and I had to horizontally and vertically center the main container of the page. I ended up copy-pasting code from someone else who uploaded his solution to github and I kept coding. In his code, he used flex and assigned 100vh height to the whle body of the page. I have now finished the challenge but I've just realized I don't understand how that part of the code works. The code I'm refering to is this: body {background-color: hsl(217, 54%, 11%); font-size: 18px; color: hsl(215, 51%, 70%); font-family: Outfit, sans-serif; display: flex; height: 100vh; width: 100%; align-items: center; justify-content: center; overflow: hidden;} .container {background-color: hsl(216, 50%, 16%); border-radius: 15px; height: auto; width: 420px; padding: 30px;} If I change the units of "height" (from vh to px, for example) of the body, everything stops being vertically centered all of a sudden. I've also tried deleting the "flex" and "height" properties from the body and assigning the same properties and values to the container inside of the body, but everything breaks when I do that. body {background-color: hsl(217, 54%, 11%); font-size: 18px; color: hsl(215, 51%, 70%); font-family: Outfit, sans-serif;} .container {background-color: hsl(216, 50%, 16%); border-radius: 15px; display: flex; height: 100vh; width: 100%; align-items: center; justify-content: center; overflow: hidden;} And I don't understand why or how these things happen. Can someone explain it to me? I'm open to using an alternative too if it works. The entire code is here: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Poppins&display=swap" rel="stylesheet"> <title>Frontend Mentor | NFT preview card component</title> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <style> * {margin: 0; padding: 0; box-sizing: border-box;} body {background-color: hsl(217, 54%, 11%); font-size: 18px; color: hsl(215, 51%, 70%); font-family: Outfit, sans-serif; display: flex; height: 100vh; width: 100%; align-items: center; justify-content: center; overflow: hidden;} .container {background-color: hsl(216, 50%, 16%); border-radius: 15px; height: auto; width: 420px; padding: 30px;} .mainimage--center {display: grid; place-items: center; height: 50px;} .mainimage img {width: 100%; border-radius: 10px;} h2 {color: white; padding-top: 15px; padding-bottom: 3px; font-weight: 300;} .collection {padding-bottom: 15px; padding-top: 15px; font-weight: 400;} main ul {display:flex; align-items: center; justify-content: space-between; padding: 2px 0px; border-bottom: 1px solid; list-style-type: none; padding-bottom: 20px; padding-top: 0px; font-weight: 600;} main ul span {color: hsl(178, 100%, 50%);} .creationby {width: 100%; display: flex; padding-top: 15px;} .creationby p {padding-left: 15px; padding-top: 9px; font-weight: 0;} .creationby img {width: 40px; height: 40px; border: 2px solid hsl(0, 0%, 100%); border-radius: 30px; vertical-align: baseline;} .creationby span {color: white;} .attribution {font-size: 11px; text-align: center; position: fixed; bottom: 5px;} .attribution a { color: hsl(228, 45%, 44%);} </style> </head> <body> <div class="container"> <div class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></div> <h2>Equilibrium #3429</h2> <p class="collection">Our Equilibrium collection promotes balance and calm.</p> <main> <ul> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /><span>0.041 ETH</span></li> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li> </ul> </main> <div class="creationby";> <img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar"> <p>Creation of <span>Jules Wyvern</span></p> </div> </body> </div> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Matías Edgardo Negro</a>. </div> </html>
  8. matiasnegro
    Okay, so I finally could do it. I was adding width:100% to the container of the image, not the image itself. All I had to do was this: .mainimage img {width: 100%; border-radius: 10px;} Thanks to all of you for helping me Here's the entire code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Poppins&display=swap" rel="stylesheet"> <title>Frontend Mentor | NFT preview card component</title> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <style> * {margin: 0; padding: 0; box-sizing: border-box;} body {background-color: hsl(217, 54%, 11%); font-size: 18px; color: hsl(215, 51%, 70%); font-family: Outfit, sans-serif; display: flex; height: 100vh; width: 100%; align-items: center; justify-content: center; overflow: hidden;} .container {background-color: hsl(216, 50%, 16%); border-radius: 15px; height: auto; width: 420px; padding: 30px;} .mainimage--center {display: grid; place-items: center; height: 50px;} .mainimage img {width: 100%; border-radius: 10px;} h2 {color: white; padding-top: 15px; padding-bottom: 3px; font-weight: 300;} .collection {padding-bottom: 15px; padding-top: 15px; font-weight: 400;} main ul {display:flex; align-items: center; justify-content: space-between; padding: 2px 0px; border-bottom: 1px solid; list-style-type: none; padding-bottom: 20px; padding-top: 0px; font-weight: 600;} main ul span {color: hsl(178, 100%, 50%);} .creationby {width: 100%; display: flex; padding-top: 15px;} .creationby p {padding-left: 15px; padding-top: 9px; font-weight: 0;} .creationby img {width: 40px; height: 40px; border: 2px solid hsl(0, 0%, 100%); border-radius: 30px; vertical-align: baseline;} .creationby span {color: white;} .attribution {font-size: 11px; text-align: center; position: fixed; bottom: 5px;} .attribution a { color: hsl(228, 45%, 44%);} </style> </head> <body> <div class="container"> <div class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></div> <h2>Equilibrium #3429</h2> <p class="collection">Our Equilibrium collection promotes balance and calm.</p> <main> <ul> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /><span>0.041 ETH</span></li> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li> </ul> </main> <div class="creationby";> <img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar"> <p>Creation of <span>Jules Wyvern</span></p> </div> </body> </div> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Matías Edgardo Negro</a>. </div> </html>
  9. matiasnegro
    Could you write the code you used? Marking what you changed for it to work
  10. matiasnegro
    I did what you said but the result is the same, the image still "escapes" its container. I was able to solve the avatar problem though. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <title>Frontend Mentor | NFT preview card component</title> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <style> * {margin: 0; padding: 0; box-sizing: border-box;} body {background-color: hsl(217, 54%, 11%); font-size: 18px;} .container {background-color: hsl(216, 50%, 16%); border-radius: 15px; width: 40%; height: auto; margin: auto; padding: 10px;} ul {display:flex; align-items: center; justify-content: space-between; padding: 2px 0px; border-bottom: 1px solid; list-style-type: none;;} .mainimage {display: block; margin-left: auto; margin-right: auto; max-width: 99%; width: 99%; height: auto;} aside img {width: 30%; height: 30%; border: 2px solid hsl(0, 0%, 100%); border-radius: 30px;} .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } </style> </head> <body> <div class="container"> <article class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></article> <h2>Equilibrium #3429</h2> Our Equilibrium collection promotes balance and calm. <main> <ul> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /> 0.041 ETH</li> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li> </ul> </main> <ul> <li><aside><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar"></aside></li> <li><p>Creation of Jules Wyvern</p></li> </ul> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>. </div> </div> </body> </html>
  11. matiasnegro
    Thanks so much!!
  12. matiasnegro
    I'm in the middle of my first Front End Mentor Challenge, the NFT card preview one. I'm trying to make the main image centered inside its main container and the avatar small and rounded. In order to achieve the first task, I've set the main image display to auto and the right and left margins to 0, like this lesson here explains: https://www.w3schools.com/css/css_align.asp but when I load the page, the image "leaves" its container for some reason. As for the avatar, I've reduced its size and put a white border around it But the resizing doesn't work and the border looks bigger than the image when I load the page. Misteriously, on my Visaul Studio Code preview, everything looks good. I don't know why either. Does anyone know how to fix it? Here's a screenshot of the problematic images: Here's how it looks on my VSC preview: Here's my code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device --> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <title>Frontend Mentor | NFT preview card component</title> <!-- Feel free to remove these styles or customise in your own stylesheet 👍 --> <style> * {margin: 0; padding: 0; box-sizing: border-box;} body {background-color: hsl(217, 54%, 11%); padding: 1.25rem; font-size: 18px;} .container {background-color: hsl(216, 50%, 16%); border-radius: 15px; width: 40%; height: 40%; margin: auto; padding: 1.25rem;} ul {display:flex; align-items: center; justify-content: space-between; padding: 2rem 0; border-bottom: 1px solid; list-style-type: none;;} .mainimage {display: block; margin-left: auto; margin-right: auto; max-width: 100%;} .avatar {width: 3.5rem; border: 2px solid hsl(0, 0%, 100%); border-radius: 50%; margin-right: 1rem;} .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } </style> </head> <body> <div class="container"> <article class="mainimage"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-equilibrium.jpg?raw=true" alt="nft"></article> <h2>Equilibrium #3429</h2> Our Equilibrium collection promotes balance and calm. <main> <ul> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-ethereum.svg" alt="" /> 0.041 ETH</li> <li><img src="https://raw.githubusercontent.com/SankThomas/nft-preview-card-component/03a6e5d2ba3b87732ca16ec9a3003fd0ff3ab9f3/images/icon-clock.svg" alt="" /> 3 days left</li> </ul> </main> <aside class="avatar"><img src="https://github.com/SankThomas/nft-preview-card-component/blob/main/images/image-avatar.png?raw=true" alt="avatar"></aside> <p>Creation of Jules Wyvern</p> <div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>. </div> </div> </body> </html>
  13. matiasnegro
    Great, guys. Thanks for the tips and suggestions, everything worked! But, how do I make the buttons in the navbar "touch" the left border of the navbar? Right now, there's an undesired blank space between the first button (Link 1) and the border of the container.
  14. matiasnegro
    Hello everyone! I'm practicing flexbox and there's a weird space between my Header and the Navigation Bar that I didn't put (at least intentionally) there and I don't know where it came from. Does anybody know? Besides, I'd like to make the text in the middle box (The one that says "Lorem ipsum") start at the top-left of the container. Also, there's a weird space in between each button in the navigation bar, I don't want those spaces there. I'd like the butons to "touch" each other. How can I achieve that? <!DOCTYPE html> <html> <head> <title>Estructura HTML Prototípica</title> <meta charset="UTF-8"> <meta name="keywords" content="keyword1, keyword2, keyword3"> <meta name="description" content="Descripción del contenido de la página"> <meta name="author" content="Nombre del dueño de la página"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/x-icon" href="/images/favicon.ico"> <style> body {background-color: black;} h1 {background-color: orangered; text-align: center; color: white; padding: 30px; border: purple; border-style: solid;} .navbar {display: flex; align-items: flex-start; background-color: green; border-style: solid; border-color: purple; padding: 10px; margin: 5px;} nav a {background-color: blue; padding: 5px; border-style: solid; border-color: tomato;} nav a:hover {background-color: white; color: red;} .flex-container {display:flex; flex-direction: row; background-color: purple; justify-content: center;} .flex-container > div {background-color: orange; color: white; margin: 10px; padding: 20px; font-size: 30px;} @media (max-width: 800px) {.flex-container {flex-direction: column;}} footer {background-color: tomato; text-align: center; color: white; padding: 5px;} </style> <body> <h1>Header</h1> <div class="navbar"> <nav> <a>Link 1</a> <a>Link 2</a> <a>Link 3</a> </nav> </div> <div class="flex-container"> <div style="flex-grow: 2,5">1</div> <div style="flex-grow: 5; text-align: center; "> <p>Lorem ipsum</p></div> <div style="flex-grow: 2,5";>3</div> </div> <footer>Todos los derechos reservados. 2021.</footer> </body> </html>
  15. matiasnegro
    Oh, sorry, I didn't get you at first. It works now, thanks so much!
×
×
  • Create New...