navbar.css 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /* шапка сайта: */
  2. .navbar{
  3. width: 100%;
  4. height: 7%;
  5. /*box-shadow - отвечает за тень.
  6. с параметрами:
  7. 0- смещение по х,
  8. 4рх- смещение по у,
  9. 10рх - размытость
  10. rgba - цвет тени, в палитре rgb, последний параметр отвечает за размытие*/
  11. box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
  12. }
  13. .navbar-brand{
  14. height: 70px;
  15. margin: 10px 0px 10px 40px;
  16. }
  17. .navbar .container{
  18. height: inherit; /*высота зависит от родителя, то есть от navbar*/
  19. display: flex;
  20. justify-content: space-between;
  21. }
  22. .navbar-menu{
  23. list-style-type: none;
  24. padding-left: 0;
  25. margin-bottom: 0;
  26. }
  27. .navbar-menu li{
  28. display: inline-block;
  29. margin-right: 10px;
  30. font-size: 30px;
  31. font-family: "Advent Pro", sans-serif;
  32. font-optical-sizing: auto;
  33. font-weight: bold;
  34. }
  35. .navbar-menu li a{
  36. display: inline-block;
  37. color: black;
  38. opacity: 0.5;
  39. text-decoration: none;
  40. padding: 0px 10px;
  41. transition: all .074s ease-in-out;
  42. /* свойство при наведении,выше */
  43. }
  44. .navbar-menu li a:hover{
  45. opacity: 1;
  46. }
  47. .navbar-wrap{
  48. display: flex;
  49. flex-flow: row nowrap;
  50. align-items: center;
  51. }
  52. .login{
  53. font-size: 24px;
  54. font-family: "Advent Pro", sans-serif;
  55. font-optical-sizing: auto;
  56. font-weight: bold;
  57. margin-right: 30px;
  58. margin-left: 30px;
  59. padding: 7px 30px;
  60. background-color:rgb(255, 170, 30);
  61. border-radius: 5px;
  62. color: black;
  63. transition: box-shadow .074s ease, tansform .074s ease;
  64. }
  65. .login:hover{
  66. box-shadow: 0 0 15px 5px rgba(255, 170, 30, 0.3);
  67. transform: scale(1.04);
  68. }