Multirim – Desenvolvimento de Front-End

por | Front-End, Web

Desenvolvimento de projeto Front-End para o site da Multirim na empresa Unu.

Trecho do CSS que dá estilo aos blocos do topo:

.et_monarch .et_social_autowidth li{right: -55px !important;}
#main-header{top:0 !important; background-color: rgba(0, 0, 0, 0.2) !important;border-top:none !important;}
#main-header.et-fixed-header, .single #main-header, .category #main-header {background-color: #FFF !important; border-top:none !important;}
.home #page-container, .single #page-container, .category #page-container {margin:0 !important; padding-top:100px !important}
#page-container {margin:0 !important; padding-top:0px !important}
.et_pb_fullwidth_header .header-content {}
#top-header {width: 300px !important; max-width: 300px; top:55px !important; right:9% !important; left:auto !important; background:none !important;}
#top-header.et-fixed-header {top:25px !important;}
#top-header .et-social-icons li {margin-top: -2px !important;margin-left: 2px !important;}
#top-header .et-social-icon a:before {padding: 8px;text-align: center;background: #A4822F;display: block;font-size: 14px; max-height: 30px;overflow: hidden;}
.et-social-instagram a.icon::before {content: "\e09a";}
.et-social-youtube a.icon::before {	content: "\e0a3";}
.et-social-whatsapp a.icon::before {font-family:FontAwesome !important; content: "\f232"; font-size:15px;}
.et-social-whatsapp:hover > a.icon > span{background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute;  z-index: 1; width: 120px;top: 100%;left: 50%;margin-left: -60px; display:block;}
.et_pb_section_video_bg {width: 100% !important}
.videoDestaque {padding-bottom: 0 !important; background:url('imagens/novideobg.jpg');}
.et_header_style_left .logo_container {padding-left: 10%;}
#et-top-navigation{transition:none; padding-left: 300px !important; float: none !important}
#main-header > .container.clearfix.et_menu_container {height:90px !important;}
#main-header > .container.clearfix.et_menu_container > .logo_container #logo {-webkit-filter: brightness(0) invert(1);filter: brightness(0) invert(1);-ms-filter:brightness(0) invert(1); max-height: 80% !important}
#main-header.et-fixed-header > .container.clearfix.et_menu_container > .logo_container #logo, .single #main-header > .container.clearfix.et_menu_container > .logo_container #logo, .category  #main-header > .container.clearfix.et_menu_container > .logo_container #logo {max-height: 80%;margin-top: 0px; filter: none; -webkit-filter: none;-ms-filter: none;}
#main-header.et-fixed-header > .container.clearfix.et_menu_container {height: 90px !important;}
.et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {padding: 20px 0 90px 26% !important;}
nav#top-menu-nav {margin-top: 20px;}
#top-menu a {text-transform:uppercase;}
.et-fixed-header #top-menu li li a {color: #FFF !important;}
.et-fixed-header #top-menu li li a:hover {opacity:0.9 !important;}
#top-menu .menu-item-has-children > a:first-child::after, #et-secondary-nav .menu-item-has-children > a:first-child::after {position: absolute;	top: 0;	right: -26px;font-family: "ETmodules" !important;font-size: 16px;font-weight: 800;content: "3";	padding: 0 8px;}
@media screen and (min-width: 981px) {	
.et-fixed-header #top-menu li.current-menu-item > a {color: #fff !important;}
}
#et-top-navigation nav a{color: #FFF !important;padding: 0 0 5px 0 !important;font-weight: bold; margin: 0 22px 2px 12px;}
#et-top-navigation nav > ul > li:hover > a{opacity:1 !important; color: white !important; /*border-bottom: 2px solid  !important; transition: 0.5s ease;*/}
#et-top-navigation nav > ul > li > a:before {content: '';position: absolute;bottom: 0;left: 0;width: 0%;border-bottom: 2px solid #E7B408;transition: 0.4s;}
#et-top-navigation nav > ul > li:hover > a:hover:before {width: 100%;}
#et-top-navigation nav > ul > li.current-menu-item > a {opacity:1 !important; color: white !important;}
#et-top-navigation nav > ul > li.current-menu-item > a:before {width: 100%;}
.nav li ul {position: absolute;padding: 30px 0; z-index: 0; width: 100% !important; background:none !important; box-shadow: none !important; border: none !important}
#top-menu li li {padding: 0 !important;}
#top-menu li li a {width: 200px;padding: 6px 8px !important;background: #E7B408 !important;margin: 2px 0 !important;text-align: center;font-size: 11px;}
#top-menu li li a:hover {color: white !important;}
#top-menu li .menu-item-has-children > a:first-child::after {top: 6px !important;right: -5px !important;content: "5" !important;}
.nav li li ul {z-index: 1000;top: -30px;left: 200px;padding-left: 5px;}
.et-fixed-header #top-menu li li.current-menu-item > a {    color: #fff !important;}
.et-fixed-header #et-top-navigation nav > ul > li:hover > a {color: #E7B408 !important;}
.single #main-header #et-top-navigation nav > ul > li > a, .category #main-header #et-top-navigation nav > ul > li > a {color: #000 !important;}
#top-menu{font-size:0;}
#top-menu li{padding-right:0 !important;}
.et-fixed-header #et-top-navigation {padding-top: 20px !important;}
#et-top-navigation nav > ul > li:after{position: absolute; top: 0; right: 0; font-size:14px; content:"•"; color:#CCC;}
#et-top-navigation nav > ul > li:last-child:after{display:none !important;}
.toposociais {float: right !important;right: 20% !important;-ms-transform: scale(0.8) !important;-webkit-transform: scale(0.8) !important;transform: scale(0.8) !important;top: 25px !important;position: fixed !important;z-index: 999999999 !important;}
body.admin-bar .toposociais {top: 58px !important;}