impts
-
Posts
6 -
Joined
-
Last visited
1 Follower
impts's Achievements
Newbie (1/7)
0
Reputation
-
The problem is the following, I have a static header and when the user scrolls down, I want it to be fixed and when it goes back up, it goes back to being static. Below are the classes. #header { box-sizing: border-box; width: 100%; position: static; top: 0; height: 50px; padding: 1rem; display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-bottom: 1px solid #ddd; } .header { position: fixed; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(7px); }
-
How to make a text card responsively with images that are positioned to the right in an aligned way and with a certain distance from each one? Title and subtitle on the left different logos on the right apply responsiveness <section class="artx-product-2-bar"> <div class="artx-product-2-container"> <div class="artx-product-2-text"> <h1>Lorem Inpsum</h1> <h3>Inpsum Inpsum.</h3> </div> <div class="artx-product-2-img"> <div class="img-card"> <img src="https://seeklogo.com/images/P/psg-fc-logo-BABEB8FE66-seeklogo.com.png" alt=""/> <img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Daxx-company-logo-250px.png" alt=""/> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/Toss-logo.png/1280px-Toss-logo.png" alt=""/> <img src="https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-250.png" alt=""/> <img src="http://assets.stickpng.com/images/602e373fd9ced200045a579a.png" alt=""/> <img src="https://a.espncdn.com/i/teamlogos/soccer/500/18481.png" alt=""/> <img src="https://images.squarespace-cdn.com/content/v1/534671c6e4b0d9cd6f4770fd/1543512341154-QZQ4FAWK0WWEL9L9GP11/cub-logo-250px.png" alt=""/> <img src="https://images.squarespace-cdn.com/content/v1/602acbf2610d6f1042ea80b5/1617788587912-IMX3LKDVK32Q9KWW6OG2/LRB+Logo+250px.png" alt=""/> <img src="https://vipart.com.br/loja/image/cache/catalog/LOGO/250px-Google_Drive_logo-500x500.png" alt=""/> <img src="https://mlm2beeftytq.i.optimole.com/wKUcILA-E8h0YnJc/w:250/h:250/q:auto/https://www.serviceexpert.fr/wp-content/uploads/2020/11/logo-apple-250px.png" alt=""/> </div> </div> </div> </section> .artx-product-2-bar { width: 100%; height: auto; display: flex; justify-content: center; align-items: center; } .artx-product-2-container { }
-
How do I solve the alignment problem if I want to increase, for example, the size of the logo to 36px (20px is normal alignment, but if it increases, it is misaligned, the same goes for the magnifying glass and the bag). The same goes for when I reduce the screen in responsive mode. Image of problem 1 attached. The second question, is when I click on the hamburger and the responsive menu goes down in black, how do I replace the black logo for a white logo and the same goes for the bag? (I left the logo with a white background for you to understand). Image of problem 2 attached. ________________ HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Apple (Brasil)</title> <link rel="stylesheet" href="css/style.css" /> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> </head> <body> <header class="header"> <div class="header-container"> <!-- NAV LIST MOBILE--> <ul class="nav-mobile"> <li class="nav-item" style="padding-left: 10px;"> <a href="#" class="nav-hamburguer"> <div class="hamburguer"></div> </a> </li> <li class="nav-item" style="z-index: 999;"> <a href="#" class="nav-logo"> <img src="https://svgshare.com/i/ddE.svg" class="logo" style="width: 20px;" /> </a> </li> <li class="nav-item" style="padding-right: 10px;"> <a href="#" class="nav-bag"> <img src="https://svgshare.com/i/de7.svg" style="width: 20px";/> </a> </li> </ul> <ul class="nav-list-mobile"> <li class="nav-item-mobile"> <input type="text" class="search" placeholder="Search apple.com" /> </li> <li class="nav-item-mobile"> <a href="#" class="nav-link-mobile">Mac</a> </li> <li class="nav-item-mobile"> <a href="#" class="nav-link-mobile">iPad</a> </li> <li class="nav-item-mobile"> <a href="#" class="nav-link-mobile">iPhone</a> </li> <li class="nav-item-mobile"> <a href="#" class="nav-link-mobile">Watch</a> </li> <li class="nav-item-mobile"> <a href="#" class="nav-link-mobile">TV</a> </li> <li class="nav-item-mobile"> <a href="#" class="nav-link-mobile">Music</a> </li> <li class="nav-item-mobile"> <a href="#" class="nav-link-mobile">Suporte</a> </li> </ul> <!-- NAV LIST DESKTOP--> <ul class="nav-list-desktop"> <li class="nav-item"> <a href="#" class="nav-logo"> <img src="https://svgshare.com/i/ddE.svg" style="width: 36px;" /> </a> </li> <li class="nav-item"> <a href="#" class="nav-link">Mac</a> </li> <li class="nav-item"> <a href="#" class="nav-link">iPad</a> </li> <li class="nav-item"> <a href="#" class="nav-link">iPhone</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Watch</a> </li> <li class="nav-item"> <a href="#" class="nav-link">TV</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Music</a> </li> <li class="nav-item"> <a href="#" class="nav-link">Suporte</a> </li> <li class="nav-item"> <a href="#" class="nav-search"> <img src="https://svgshare.com/i/ddY.svg" style="width: 20px;" /> </a> </li> <li class="nav-item" style="padding-right: 10px;"> <a href="#" class="nav-bag"> <img src="https://svgshare.com/i/de7.svg" style="width: 20px;" /> </a> </li> </ul> </div> </header> <section class="iphonese"> <div class="container-iphonese"> <div class="container-title-iphonese"> <h1>iPhone SE</h1> <h3> É muito iPhone por menos. </h3> <p> <a href="" class="link">Saiba mais</a> <a href="" class="link">Comprar</a> </p> </div> <div class="container-img-iphonese"> <a href="https://ibb.co/ZfKcCk7"><img src="https://i.ibb.co/6ybD5fL/iphonese.png" alt="iphonese" /></a> </div> </div> </section> <script src="js/script.js"></script> </body> </html> CSS * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { width: 100%; height: 100vh; background-color: #fafafa; } a { display: block; text-decoration: none; } .header { width: 100%; height: 35px; position: fixed; top: 0; z-index: 999; background-color: white; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .header-container { max-width: 820px; margin: 0 auto; padding: 5px 0px; } .nav-list-desktop { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .nav-link { color: #000; display: block; padding: 5px 10px; font-size: 11px; opacity: 1; -webkit-transition: 0.5s ease; transition: 0.5s ease; } .nav-link:hover { opacity: 0.5; } .nav-mobile { display: none; } .nav-list-mobile { display: none; } @media (max-width: 768px) { .nav-list-desktop { display: none; } .nav-mobile { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .hamburguer { width: 25px; height: 25px; position: relative; z-index: 900; } .hamburguer:after { content: ""; position: absolute; top: 38%; left: 23%; width: 55%; height: 4%; background-color: #000; -webkit-transition: 1s ease; transition: 1s ease; } .hamburguer:before { content: ""; position: absolute; top: 63%; left: 23%; width: 55%; height: 4%; background-color: #000; -webkit-transition: 1s ease; transition: 1s ease; } .hamburguer.hamburguer-active { width: 25px; height: 25px; position: relative; } .hamburguer.hamburguer-active:after { content: ""; position: absolute; top: 50%; left: 23%; width: 55%; height: 4%; -webkit-transform: rotate(225deg); transform: rotate(225deg); background-color: #fff; } .hamburguer.hamburguer-active:before { content: ""; position: absolute; top: 50%; left: 23%; -webkit-transform: rotate(-405deg); transform: rotate(-405deg); width: 55%; height: 4%; background-color: #fff; } .logo { background-color: white; } .nav-list-mobile { width: 100%; height: 0; position: fixed; top: -1100%; z-index: 0; opacity: 0.5; background-color: #000; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 40px 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-transition: 0.85s cubic-bezier(0.25, 0.7, 0.6, 1); transition: 0.85s cubic-bezier(0.25, 0.7, 0.6, 1); } .nav-list-mobile.active { top: 0; height: 100vh; opacity: 1; } .nav-item-mobile { width: 100%; margin: 5px 0px; } .nav-link-mobile { display: block; color: #d6d6d6; width: 100%; padding-top: 10px; border-top: 1px solid #333; font-size: 11px; opacity: 1; -webkit-transition: 0.5s ease; transition: 0.5s ease; } .nav-link-mobile:hover { opacity: 0.7; } .search { width: 100%; height: 25px; border-radius: 5px; border: 0; padding: 0px 10px; background-color: #1f1f1f; outline: none; color: #888; } } /* IPHONE SE */ .iphonese { width: 100%; height: 70vh; padding-top: 50px; margin: 5px 0px; background-color: #131313; } @media screen and (max-width: 780px) { .iphonese { height: 55vh; } } .container-iphonese { max-width: 820px; height: 100%; margin: 20px auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .container-title-iphonese h1 { color: #fafafa; font-size: 48px; text-align: center; letter-spacing: -2px; } .container-title-iphonese h3 { color: #fafafa; font-size: 24px; text-align: center; font-weight: normal; letter-spacing: -1px; } .container-title-iphonese p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10px 0px; } .link { display: block; margin: 0px 20px; color: #1f97ff; -webkit-transition: 0.5s ease; transition: 0.5s ease; opacity: 1; position: relative; } .link:after { content: ">"; position: absolute; top: 0; right: -13px; } .link:hover { opacity: 0.9; text-decoration: underline; } .container-img-iphonese img { width: 100%; } JAVASCRIPT $(document).ready(function () { $(".hamburguer").click(function () { $(this).toggleClass("hamburguer-active"); $(".nav-list-mobile").toggleClass("active"); }); });
-
So, what's the easiest way to create a structure like the attached photo? Can anyone sketch something to explain? I tried with flexbox and grid but I had a hard time as I needed to keep spaces between each black border field. the red borders would be the column and inside the black area.
-
Thank you, it helped! But what do you think of my html and css, is it good? Can you improve on something?
-
Another thing I'd like to ask, can I clean up my code and make it smarter and simpler? (I'm new to html/css, so I'd like to hear from someone more experienced). html <section class="content-product-1"> <div class="content"> <div class="content-item item-1"> <span class="text-gradient-blue-gray-gray-red-red">Lorem Ipsum Lorem Ipsum.</span> </div> <div class="content-item item-2"> <span class="text-subtitle-black">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span> </div> <div class="content-item item-3"> <a href="">Info ></a> <a href="">Buy >/a> </div> <div class="content-item item-4"> <img src="https://visualstudio.microsoft.com/wp-content/uploads/2021/10/Share-more-than-screens.png"> </div> </div> </section> css .content-product-1 { display: flex; flex-direction: column; justify-content: center; align-items: center; } .content { max-width: 800px; } .content .item-3 { display: flex; align-items: center; justify-content: center; gap: 2rem; } .content .item-4 img { max-width:800px; } .content-item { text-align: center; margin-top: 1rem; } .content-item a { text-decoration: none; color: deepskyblue; font-size: 14px; } .content-item a:hover { text-decoration: underline; } .text-gradient-blue-gray-gray-red-red { display: block; background-image: linear-gradient(90deg,#038ff4 25%,#3d4e59 42%,#3d4e59 57%,#ad003a 75%,#ad003a); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 48px; font-weight: 600; line-height: unset!important; -webkit-transition: font-size .3s ease; -moz-transition: font-size .3s ease; -o-transition: font-size .3s ease; transition: font-size .3s ease; } .text-subtitle-black { font-size: 18px; } @media (max-width: 800px) { .text-gradient-blue-gray-gray-red-red { font-size: 32px; } .text-subtitle-black { font-size: 14px; } .content-item a { text-decoration: none; color: deepskyblue; font-size: 12px; } }
