Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="wrapper">
- <nav id="nav">
- <ul class="menu">
- <li class="menu__item"><a href="#" class="menu__link">Home</a></li>
- <li class="menu__item"><a href="#" class="menu__link">About</a></li>
- <li class="menu__item"><a href="#" class="menu__link">Blog</a></li>
- <li class="menu__item"><a href="#" class="menu__link">Services</a></li>
- <li class="menu__item"><a href="#" class="menu__link">Contact</a></li>
- </ul>
- </nav>
- <div class="offer-block"></div>
- </div>
- .wrapper{
- max-width: 1170px;
- margin: 0 auto;
- padding: 0 40px;
- .menu{
- display: flex;
- justify-content: center;
- }
- .menu__item{
- margin-left: 10px;
- }
- .menu__item .menu__link{
- display: block;
- background: rgba(0, 0, 0, .3);
- padding: 12px 25px;
- color: #EAD968;
- text-transform: uppercase;
- font-weight: bold;
- letter-spacing: 2px;
- transition: all .3s;
- }
- .menu__item:first-child .menu__link{
- margin-left: 0;
- border-radius: 15px 0 0 0;
- }
- .menu__item:last-child .menu__link{
- margin-left: 0;
- border-radius: 0 0 15px 0;
- }
- .menu__link:hover{
- background: rgba(0, 0, 0, .5);
- }
- .offer-block{
- background: rgba(0, 0, 0, 0.6);
- max-width: 740px;
- margin: 40px auto;
- padding: 20px 30px;
- text-align: justify;
- border: 2px dashed #EAD968;
- }
Add Comment
Please, Sign In to add comment