rustamXx
-
Posts
8 -
Joined
-
Last visited
rustamXx's Achievements
Explorer (1/14)
0
Reputation
-
подскажите что не так? отступы ставлю как на макете, а текст прижимается к картинке <!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 */
-
Большое спасибо помогло
-
Возникала такая проблема блок 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; }
-
-
Подскажите что не так с кодом, не могу вставить фон в intro
-
Как вставить картинку ? должно получиться как на нижней картинке вот мой код <!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); } и как можно сделать нижней слайдер ?
-
делал так, к сожалению не помогает
-
Подскажите как мне сделать подменю как на нижнем скрине( мой вариант верхний) там расстояния между строками меньше чем на моём <!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; }