Personal portfolio website for Regina Carvalho. Built with Famous.js library.

main.css 6.5KB

    html { background: #fff; } body { margin: 0px; width: 100%; overflow-x: hidden; background-color: white; } .backfaceVisibility { -webkit-backface-visibility: visible; backface-visibility: visible; } /* Layers */ .layer-background { z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url("../content/images/static-bg-002.jpg"); background-repeat: no-repeat; background-size: cover; } .bg_video { background-color: black; } .layer-menu { z-index: 2; position: absolute; margin-top: 15px; } .layer-content { z-index: 3; position: absolute; top: 0; right: 0; bottom: 0; left: 0; max-width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow: hidden; } .Aligner { display: flex; align-items: center; height: 24em; /* 1 */ justify-content: center; height: 100%; } .Aligner-item { flex: 1; max-width: 90%; height: 80%; overflow: hidden; } .Aligner-item--top { align-self: flex-start; } .Aligner-item--bottom { align-self: flex-end; } .Aligner-item--fixed { flex: none; max-width: 50%; } .wallop-slider__item img { display: block; max-height: 100%; max-width: 100%; margin-left: auto; margin-right: auto; } .bg-dark { background-color: black;} /* Lang */ .center-menu { width: 250px; height: 17px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 3; text-align: center; } /* Navigation */ .nav-menu { list-style: none; padding-left: 15px; float: left; } .nav-menu li { padding-left: 0px; margin-top: 2px; } .submenu { float: left; padding-left: 5px; } .btn-menu { color: black; border: none; text-transform: uppercase; background-color: white; font-size: 14px; font-family: Helvetica; text-align: left; font-weight: 600; margin-left: 0px; margin-right: 8px; margin-bottom: 15px; cursor: pointer; text-decoration: none; padding-top: 1px; padding-right: 1px; padding-left: 1px; } .btn-menu:hover { color: white; background-color: black; text-decoration: none; } .btn-slideshow { cursor: pointer; background-color: white; } .btn-slideshow:hover { background-color: #F2F2F2; color: red; } video { height: 100% !important; width: auto !important; } fa-app { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .famous-angular-clipping-container, .famous-angular-container { height: 100%; width: 100%; overflow: hidden; background-color: transparent; } .fixed-top-right { position: fixed; top: 15px; right: 15px; } .work-title { position: fixed; bottom: 30px; text-align: center; width: 100%; color: white; text-transform: uppercase; font-size: 14px; font-family: helvetica; text-align: center; font-weight: 600; text-decoration: none; padding-top: 1px; } .work-description { position: fixed; bottom: 9px; text-align: left; width: 100%; color: white; font-size: 14px; font-family: helvetica; font-weight: 600; text-decoration: none; padding-top: 1px; margin-left: 20px; } .slide-title { color: black; border: none; text-transform: uppercase; background-color: white; font-size: 14px; font-family: helvetica; text-align: center; font-weight: 600; text-decoration: none; padding-top: 1px; } .slide-subtitle { color: black; border: none; background-color: white; font-size: 14px; font-family: helvetica; text-align: center; font-weight: 600; text-decoration: none; padding-top: 1px; } .page { width: 70%; margin-right: auto; margin-left: auto;} .video-page { width: 85%; margin-right: auto; margin-left: auto; } .page h1{ text-align: center; color: black; text-transform: uppercase; margin-left: 0px; margin-right: 8px; margin-bottom: 45px; padding-top: 1px; font-weight: 600; font-family: Helvetica; margin-top: 55px; } .page p { font-weight: 600; font-family: Helvetica; } .page h1 span { background-color: white; } .page .page-content { margin-top: 25px;} .page .page-content p { font-size: 16px; line-height: 22px; margin-top: 7px; margin-bottom: 7px;} .page .page-content p span { background-color: white; padding-top: 1px; padding-left: 1px; padding-right: 1px;} .page .page-content p span a { color: black; text-decoration: underline} .page .page-content p span a:hover { color: white; text-decoration: none; background-color: black; padding-top: 1px;} .page .page-content .poem p { margin-bottom: 20px; } .poem { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; } span.spacer { margin-left: 100px; } .white-bg-text-small { background-color: white; padding: 50px; width: 250px; margin-left: auto; margin-right: auto; } .white-bg-text-medium { background-color: white; padding: 50px; width: 450px; margin-left: auto; margin-right: auto; } .white-bg-text-big { background-color: white; padding: 50px; width: 80%; margin-left: auto; margin-right: auto; overflow: visible; } .white-bg-text-huge { background-color: white; padding: 50px; width: 100%; margin-left: auto; margin-right: auto; overflow: visible; } .page .page-content input, .page .page-content textarea { font-size: 16px; border: none; padding-top: 0px; padding-left: 1px; padding-right: 1px; padding-bottom: 1px; width: 300px; } .page .page-content textarea { width: 500px; } .page .page-content .btn { position: inherit; width: auto; padding-bottom: 1px; padding-top: 2px; } .embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; } .embed-responsive.embed-responsive-16by9 { padding-bottom: 56.25%; } .embed-responsive-item { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } td { padding-right: 5px; } td span { background-color: white; padding-top: 1px; padding-left: 1px; padding-right: 1px; font-family: helvetica; } .page h2 { text-align: center; color: black; margin-left: 0px; margin-right: 8px; margin-top: 25px; margin-bottom: 15px; padding-top: 1px; font-weight: 600; font-family: Helvetica; } .page h2 span { background-color: white; } .bg-text { color: white; font-family: monospace; position: absolute; font-size: 14px; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { border-radius: 0px; } ::-webkit-scrollbar-thumb { border-radius: 0px; background: white; }