I have such a hat. Grid at 980px . I don’t know if I have the menu right. I’m worried about a username that goes beyond the grid. I also created search and login in separate blocks - is it right or wrong?

enter image description here

 .wrapper { max-width: 980px; max-height: 74px; display: flex; margin: 0 auto; } .logo { padding: 14px 0; } .logo img { width: 154; height: 45px; } .main-mnu { flex-basis: 560px; } .main-mnu ul { margin: 0; padding: 0; text-align: right; } .main-mnu li { list-style-type: none; display: inline-block; padding: 27px 9px; } .main-mnu li a { font-size: 14px; text-transform: uppercase; color: #96a6a7; text-decoration: none; } .search { flex-basis: 74px; height: 74px; background-color: #e2dee0; text-align: center; } .search i { font-size: 24px; color: #fff; padding: 21px 0; } .login { flex-basis: 190px; height: 74px; background-color: #e94e38; } .login i { padding: 26px 0; padding-right: 5px; } .login a { font-size: 18px; color: #fff; text-transform: uppercase; text-decoration: none; padding-left: 10px; } .searchForm { min-height: 449px; position: relative; background-image: url(http://s018.radikal.ru/i524/1701/57/04977bc315b6.jpg); background-repeat: no-repeat; background-size: cover; } .search_bg { width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.7); background-image: url(http://s002.radikal.ru/i198/1701/f6/b574a41380c1.png); background-repeat: no-repeat; background-size: cover; position: absolute; } 
 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <div class="wrapper"> <div class="logo"> <a href="/"> <img src="http://s019.radikal.ru/i601/1701/02/cde15f09e6a3.png" alt=""> </a> </div> <nav class="main-mnu"> <ul> <li><a href="/">Reality</a> </li> <li><a href="/">Living</a> </li> <li><a href="/">Education</a> </li> <li><a href="/">Entetraimtnt</a> </li> <li><a href="/">Mobility</a> </li> </ul> </nav> <div class="search"> <a href="/"><i class="fa fa-search" aria-hidden="true"></i></a> </div> <div class="login"> <a href="/"><i class="fa fa-user" aria-hidden="true"></i> Login</a> </div> </div> <div class="searchForm"> <div class="search_bg"> </div> </div>

  • The second year I make up and still not sure why I started doing it and whether I am doing it right. - DimenSi
  • Everything that works is correct ) - goodalien
  • There is no wrong option, but the purity of the code is another question - Yuri
  • I study. Nobody teaches me. Show me how to. - Slivki show

1 answer 1

one). Write links with title ,
2). Pictures alt prescribe.
3). Where you have search and login , ask icons through pseudo-elements (before, after).
four). It will be logical to ask for a logo through bg (although not everyone does this).
five). body set overflow-x: hidden; because on a small resolution you get horizontal scrolling.
6). "I also rolled out the search and login in separate blocks - is it right or wrong?" I believe that it depends on the situation, it is possible this way and that.
You open the "cool" sites in the browser, look at the code, how it is done there, and learn.
7). Use the validator, you have an error in the .logo img code .logo img .
eight). On the layout, the menu above the picture, on top and on the sides can be seen; and you have the full width and pressed to the top of the page. It is necessary to redo, set bg image body and drop the menu below. You can send me the source (PSD) I will lay out this layout and put it here.

  • Make an adaptive and mobile menu, work with media queries. I don’t see the point of discussing a "login that goes beyond the grid" without a mobile menu.
  • It is necessary to change the bg color of the search and login , or change the color of the logo. With flowers in the layout is completely unfortunate.
  • Your login button clearly does not match the layout. Make PixelPerfect , use for example PerfectPixel by WellDoneCode (plugin for chrome), it is easy to use; and such problems will not arise.
  • I myself am a novice, at the moment I am studying js , we can communicate on Skype and parse jointly assigned tasks, here is my email alexandr.kazakov1@gmail.com