Jump to content

rustamXx

Newbie
  • Posts

    8
  • Joined

  • Last visited

Everything posted by rustamXx

  1. подскажите что не так? отступы ставлю как на макете, а текст прижимается к картинке <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="asecs/css/style.css"> <title>Five Stars Room</title> <link rel="preconnect" href="https://fonts.gstatic.com"> </head> <body> <header> <div class="container"> <div class="top-bar"> <div class="header-inner"> <div class="top-logo" >Logo</div> <nav class="nav"> <a class="link-nav" href="#">Home</a> <a class="link-nav" href="#">About</a> <a class="link-nav" href="#">Team</a> <a class="link-nav" href="#">Portfollo</a> <a class="link-nav" href="#">Contact</a> </nav> </div> </div> </div> <div class="banner"> <div class="container"> <h1 class="intro-title">We Build Awesome Wireframe</h1> <h2 class="top-title">A Template by Your Company</h2> </div> </div> </header> body{ margin: 0; font-family: Pt Sans; font-size: 15px; line-height: 1.6; color: #333; } html{ box-sizing: border-box; } *, *:before, *:after{ box-sizing: inherit; } h1, h2, h3, h4, h5 ,h6{ margin: 0; } /* header */ header{ height: 100vh; } .container{ width: 100%; max-width: 1600px; margin: 0 auto; } .top-bar{ height: 75px; background-color: #2c3e50; } .banner{ width: 100%; height: calc(100% - 75px); background: url(../imgs/1.jpg) top no-repeat; -webkid-background-size: cover; background-size: cover; } /* header-inner */ .header-inner{ width: 100%; max-width: 1170px; margin: 0 auto; height: 75px; display: flex; justify-content: space-between; align-items: center; } .top-logo{ font-size: 30px; color: #fff; text-transform: uppercase; font-weight: 700; } .nav{ font-size: 15px; } .link-nav{ display: inline-block; vertical-align: top; margin: 0 10px; text-decoration: none; color: #7e95ae; transition: 0.2s color; } .link-nav:hover{ color: #fff; } /* title */ .intro-title{ font-size: 45px; font-weight: 100; color: #fff; text-align: center; padding-top: 57px; } .top-title{ font-size: 25px; color: #fff; text-align: center; padding-top: 37px; } /* banner */
  2. Возникала такая проблема блок banner выходит за пределы родителя header(он должен занимать весь экран) Подскажите как сделать так чтобы картинка в блоке banner занимала оставшуюся часть экрана и не вылазила за пределы <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="asecs/css/style.css"> <title>Five Stars Room</title> <link rel="preconnect" href="https://fonts.gstatic.com"> </head> <body> <header> <div class="container"> <div class="top-bar"> <h1>Logo</h1> </div> </div> <div class="banner"> </div> </header> </body> </html> body{ margin: 0; font-family: Pt Sans; font-size: 15px; line-height: 1.6; color: #333; } html{ box-sizing: border-box; } *, *:before, *:after{ box-sizing: inherit; } h1, h2, h3, h4, h5 ,h6{ margin: 0; } /* header */ header{ height: 100vh; } .container{ width: 100%; max-width: 1600px; margin: 0 auto; } .top-bar{ height: 75px; background-color: #2c3e50; } .banner{ width: 100%; height: 100%; background: url(../imgs/1.jpg) top no-repeat; -webkid-background-size: cover; background-size: cover; }
  3. Подскажите что не так с кодом, не могу вставить фон в intro
  4. Как вставить картинку ? должно получиться как на нижней картинке вот мой код <!DOCTYPE html> <html> <head> <title>Испытание 2: слайдер</title> <meta charset="utf-8"> </head> <body> <div class="conteiner"> <div class="content"> <h1>Долго, дорого, скрупулезно</h1> <p>Математически выверенный дизайн для вашего сайта или мобильного приложения.</p> </div> <div class="knopka"> Узнать больше </div> </div> <div class="img"></div> </body> </html> CSS html,body{ margin:0; padding:0; } body{ width:500px; height:300px; font-size:16px; font-family:"Tahoma", sans-serif; line-height:20px; color:black; background:#eeeeee; } .content{ margin-left: 20px; margin-top: 50px; width: 220px; } h1{ font-size: 25px; } .knopka{ border: 1px solid #fb565a; width: 200px; height: 40px; border-radius: 4px; line-height: 40px; margin: 20px; text-align: center; color: white; background-color: #fb565a; text-transform: uppercase; } .img{ background-image: url(/assets/ifmo/slide-bg.png); } и как можно сделать нижней слайдер ?
  5. делал так, к сожалению не помогает
  6. Подскажите как мне сделать подменю как на нижнем скрине( мой вариант верхний) там расстояния между строками меньше чем на моём <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Испытание: многоуровневое меню</title> </head> <body> <ul class="main-menu"> <li class="active"> <a href="/courses">Курсы</a> <ul> <li><a href="/courses/4">Знакомство</a></li> <li><a href="/courses/42">Селекторы</a></li> <li><a href="/courses/45">Позиционирование</a></li> </ul> </li> <li><a href="/demos">Демонстрации</a></li> <li><a href="/public_profiles">Участники</a></li> <li><a href="/achievments">Достижения</a></li> </ul> </body> </html> html, body { margin: 0; padding: 0; } body { width: 280px; min-height: 280px; padding: 10px; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.4; background: #ecf0f1; } ul{ margin: 0; padding: 0; } .active > a{ background-color: #1ABC9C; text-decoration: none; padding-left: 15px; line-height: 40px; color: #FFFFFF; border-bottom: 2px solid #2C3E50; } .main-menu li li { padding-left: 15px; line-height: 40px; background-color: #FFFFFF; width: 190px; } .main-menu > li { background-color: #2980B9; width: 200px; line-height: 40px; border-bottom: 2px solid #2C3E50; } .main-menu > li > a{ color: #FFFFFF; padding-left: 15px } .main-menu li li a{ color: #2980B9 } .main-menu a{ display: block; height: 40px; width: 190px; } .main-menu > li > a{ text-decoration: none; }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy