Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- *-------------------------------------------------------------TIPOGRAFIA-------------------------------------------------------------------------*/
- @font-face {
- font-family: 'robotoregular';
- src: url('roboto-regular-webfont.woff2') format('woff2'),
- url('roboto-regular-webfont.woff') format('woff');
- font-weight: normal;
- font-style: normal;
- }
- @font-face {
- font-family: 'robotobold';
- src: url('roboto-bold-webfont.woff2') format('woff2'),
- url('roboto-bold-webfont.woff') format('woff');
- font-weight: normal;
- font-style: normal;
- }
- /*--------------------------------------------------------------------------TOTAL-----------------------------------------------------------------*/
- *{
- margin: 0;
- padding: 0;
- }
- /*--------------------------------------------------------------------MENU------------------------------------------------------------------------*/
- .um{
- background-color: #333;
- width: 100%;
- height: 1px;
- z-index: 1000;
- position: fixed;
- }
- #logo{
- width: 10%;
- margin-top: 10px;
- margin-left: 50px;
- float: left;
- /* position: relative;*/
- }
- .menu{
- width: 100%;
- height: 48px;
- position: fixed;
- background-color: #333;
- font-family: sans-serif;
- }
- .menu ul{
- list-style: none;
- position: relative;
- }
- .menu ul li{
- width: 150px;
- float: right;
- }
- .menu a{
- padding: 15px;
- display: block;
- text-decoration: none;
- text-align: center;
- background-color: #333;
- color: white;
- }
- .menu ul ul{
- position: absolute;
- visibility: hidden;
- }
- .menu ul li:hover ul{
- visibility: visible;
- }
- .menu a:hover{
- background-color: #f4f4f4;
- color: #555;
- }
- .menu ul ul li{
- float: none;
- border-bottom: solid 1px #f4f4f4;
- }
- label[for="bt_menu"]{
- float: left;
- position: fixed;
- padding: 5px;
- background-color: #333;
- z-index: 1000;
- color: white;
- font-family: sans-serif;
- text-align: center;
- font-size: 20px;
- cursor: pointer;
- width: 20px;
- height: 20px;
- }
- #bt_menu{
- display: none;
- }
- label[for="bt_menu"]{
- display: none;
- }
- @media(max-width: 375px){
- label[for="bt_menu"]{
- display: block;
- }
- #bt_menu:checked ~ .menu{
- margin-left: 0;
- }
- .menu{
- margin-top: 30px;
- margin-left: -100%;
- transition: all .4s;
- }
- .menu ul li{
- width: 100%;
- float: none;
- }
- .menu ul ul{
- position: static;
- overflow: hidden;
- max-height: 0;
- transition: all .4s;
- }
- .menu ul li:hover ul{
- height: auto;
- max-height: 200px;
- }
- .menu a:hover{
- background-color: rgba(163,183,172,5);
- color: black;
- }
- #logo{
- width: 20%;
- background-color:#333;
- z-index: 10000;
- position: fixed;
- margin-top: 10px;
- margin-left: 120px;
- float: left;
- }
- .um{
- background-color: #333;
- width: 100%;
- height: 30px;
- margin-left: 20px;
- position: fixed;
- }
- }
- /*------------------------------CONTAINER--------------------*/
- .imagem1{
- width: 100%;
- height: 800px;
- background-color: red;
- background-image: url('../image/transferir2.png');
- }
- .txtfoto{
- width: 100%;
- height: 350px;
- margin-top: 15px;
- }
- .txt{
- width: 50%;
- height: 350px;
- float: left;
- }
- .fotof{
- background-image: url('../image/calcas2.png');
- width: 50%;
- height: 350px;
- float: right;
- }
- h1{
- font-family: 'robotobold', sans-serif;
- margin-left: 25%;
- }
- p{
- margin-left: 20px;
- margin-right: 20px;
- margin-top: 15px;
- font-family: 'robotoregular', sans-serif;
- }
- .ext{
- width: 100%;
- height: 300px;
- margin-top: 100px;
- }
- .fotoext{
- width: 30%;
- height: 300px;
- float: left;
- background-image: url('../image/3676.png');
- margin-left: 10%;
- }
- .fotoext1{
- width: 30%;
- height: 300px;
- float: left;
- background-image: url('../image/3677.png');
- margin-left: 10%;
- }
- .fotoext2{
- width: 30%;
- height: 300px;
- float: left;
- background-image: url('../image/luz.png');
- margin-left: 10%;
- }
- .fotoext3{
- width: 30%;
- height: 300px;
- float: left;
- background-image: url('../image/som.png');
- margin-left: 10%;
- }
- .txtext{
- width: 40%;
- height: 300px;
- margin-left: 50px;
- margin-top: 100px;
- font-family: 'robotoregular',sans-serif;
- float: left;
- }
- /* Customize the label (the container) */
- .container {
- display: block;
- /* z-index: -1;*/
- position: relative;
- padding-left: 35px;
- margin-bottom: 12px;
- cursor: pointer;
- font-size: 22px;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- /* Hide the browser's default checkbox */
- .container input {
- position: absolute;
- opacity: 0;
- }
- /* Create a custom checkbox */
- .checkmark {
- position: absolute;
- top: 0;
- left: 0;
- height: 25px;
- width: 25px;
- border: solid 1px #333;
- background-color: #eee;
- }
- /* On mouse-over, add a grey background color */
- .container:hover input ~ .checkmark {
- background-color: #ccc;
- }
- /* When the checkbox is checked, add a blue background */
- .container input:checked ~ .checkmark {
- background-color: #2196F3;
- }
- /* Create the checkmark/indicator (hidden when not checked) */
- .checkmark:after {
- content: "";
- position: absolute;
- display: none;
- }
- /* Show the checkmark when checked */
- .container input:checked ~ .checkmark:after {
- display: block;
- }
- /* Style the checkmark/indicator */
- .container .checkmark:after {
- left: 9px;
- top: 5px;
- width: 5px;
- height: 10px;
- border: solid white;
- border-width: 0 3px 3px 0;
- -webkit-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- button{
- background-color: #333;
- width: 10%;
- height: 50px;
- cursor: pointer;
- }
- button a{
- text-decoration: none;
- list-style: none;
- color: white;
- }
- button:hover{
- background-color: darkgray;
- transition: .2s;
- }
- button a:hover{
- color: #333;
- transition: .2s;
- }
- /*-------------------------------FOOTER----------------------*/
- footer{
- width: 100%;
- height: 50px;
- position: absolute;
- margin-top: 1.1%;
- background-color: #333;
- }
- #footertxt{
- color: white;
- font-family: 'robotoregular', sans-serif;
- float: right;
- margin-top: 15px;
- margin-right: 15px;
- }
- .socialBtn{
- height: 35px;
- width: 100%;
- margin: auto;
- padding-top: 5px
- }
- .socialBtn a img{
- margin-left: 10px;
- }
- #facebook{
- background-size: cover;
- width: 30px;
- height: 30px;
- float: left;
- margin-top: 5px;
- margin-left: 50px;
- transition: all 0.4s ease-out;
- }
- #facebook:hover{
- cursor: pointer;
- transform: translateY(-3px);
- box-shadow: 2px 10px 6px 0px rgba(0,0,0,0.4);
- }
- #insta{
- background-size: cover;
- width: 30px;
- height: 30px;
- float: left;
- margin-top: 5px;
- transition: all 0.4s ease-out;
- }
- #insta:hover{
- cursor: pointer;
- transform: translateY(-5px);
- box-shadow: 2px 10px 6px 0px rgba(0,0,0,0.4);
- }
- @media(max-width: 375px){
- footer{
- width: 100%;
- height: 25px;
- position: absolute;
- margin-top: 590px;
- background-color: #333;
- }
- #footertxt{
- color: white;
- font-family: 'robotoregular', sans-serif;
- float: right;
- margin-top: 2px;
- margin-right: 10px;
- font-size: 10px;
- }
- #facebook{
- background-size: cover;
- width: 20px;
- height: 20px;
- float: left;
- margin-top: -2px;
- margin-left: 10px;
- }
- #insta{
- background-size: cover;
- width: 20px;
- height: 20px;
- float: left;
- margin-top: -2px;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement