Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css?family=Karla');
- * {
- margin: 0;
- padding: 0;
- }
- html {
- font-family: 'Karla', sans-serif;
- }
- body {
- position: relative;
- width: 100%;
- height: 100%;
- }
- .background-wrapper {
- width: 100%;
- height: 100vh;
- background-image: url('../media/squirrel.jpg');
- background-size: cover;
- background-position-x: -110px;
- }
- .background-quisom {
- background-image: url('../media/code.jpg');
- background-size: cover;
- background-position: right;
- }
- .background-objectiu {
- background-image: url('../media/goal.jpg');
- background-size: cover;
- background-position: right;
- }
- .main-post {
- height: 780px;
- margin: 0 5% 0 5%;
- }
- .main-post h1 {
- font-size: 50px;
- color: white;
- padding-top: 90px;
- }
- .main-post p {
- color: white;
- margin-top: 30px;
- }
- .main-post span {
- font-weight: 700;
- }
- nav {
- width: 100%;
- height: 80px;
- line-height: 80px;
- position: fixed;
- z-index: 800;
- background-color: white;
- }
- #logo {
- color: white;
- text-decoration: none;
- font-size: 15px;
- font-weight: 700;
- }
- #logo,
- #responsive,
- #close {
- margin: 0 2%;
- }
- #responsive,
- #close {
- width: 40px;
- height: 40px;
- background-color: #EBECEE;
- float: right;
- margin-top: 20px;
- border-radius: 20px;
- background-image: url('../media/menu.svg');
- cursor: pointer;
- }
- #close {
- display: none;
- z-index: 200;
- position: relative;
- /* <div>Icons made by <a href="https://www.flaticon.com/authors/eleonor-wang" title="Eleonor Wang">Eleonor Wang</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> */
- background-image: url('../media/cancel.svg');
- }
- .language {
- width: 40px;
- height: 40px;
- background-color: #EBECEE;
- background-image: url('../media/spain.svg');
- margin-top: 20px;
- border-radius: 20px;
- cursor: pointer;
- position: absolute;
- display: inline-block;
- right: 7em;
- }
- #ioMenu {
- display: none;
- width: 100%;
- height: 100vh;
- background-color: #181818;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 9;
- }
- #ioMenu li:nth-child(1) {
- padding-top: 60px;
- }
- .languages {
- text-align: center;
- margin-top: 70px;
- }
- .languages img {
- width: 50px;
- margin-right: 10px;
- }
- .landing {
- height: 100vh;
- margin: 0 5% 0 5%;
- /* https://www.pexels.com/photo/bengal-tiger-half-soak-body-on-water-during-daytime-145939*/
- }
- .landing h1 {
- padding-top: 100px;
- font-size: 32px;
- color: white;
- animation-name: moveInLeft;
- animation-duration: 1s;
- }
- .landing p {
- color: white;
- position: relative;
- }
- .godown {
- margin-top: 200px;
- text-align: center;
- animation-name: goDown;
- animation-duration: 1s;
- animation-iteration-count: infinite;
- }
- .godown img {
- width: 60px;
- }
- nav>#logo img {
- width: 40px;
- vertical-align: middle;
- margin: 0 10px;
- }
- nav li {
- display: block;
- text-align: center;
- }
- nav a {
- color: white;
- text-decoration: none;
- font-size: 28px;
- }
- nav a:hover {
- color: #8C8E9F;
- }
- nav>a:nth-child(2) {
- float: right;
- color: white;
- text-decoration: none;
- font-size: 30px;
- line-height: 70px;
- margin: 0 10px;
- }
- p {
- font-size: 20px;
- color: black;
- font-weight: 300;
- }
- /* .frase {
- background-color: black;
- border-radius: 3px;
- padding: 20px;
- margin-top: 20px;
- }
- .frase q, .frase p {
- font-size: 20px;
- }
- .frase p {
- text-align: right;
- } */
- .stats {
- width: 100%;
- height: 1800px;
- background-color: black;
- position: relative;
- }
- .stats h3 {
- color: white;
- text-align: center;
- font-size: 30px;
- padding-top: 40px;
- margin-bottom: 40px;
- }
- .stats p#warn {
- color: white;
- text-align: center;
- }
- .stats p#warn a {
- text-decoration: none;
- color: white;
- border-bottom: 1px dotted white;
- }
- .stats p#warn a:hover {
- color: #8C8E9F;
- }
- .mycards {
- justify-content: center;
- align-items: center;
- display: flex;
- flex-flow: column;
- }
- .card {
- width: 300px;
- height: 250px;
- cursor: pointer;
- margin-bottom: 10px;
- position: relative;
- border-radius: 3px;
- transform-style: preserve-3d;
- }
- .card:hover {
- transform: rotateY(180deg);
- }
- .front,
- .back {
- position: absolute;
- width: 100%;
- height: 100%;
- backface-visibility: hidden;
- }
- .front {
- transform: rotateY(0deg);
- z-index: 1;
- }
- .back {
- transform: rotateY(180deg);
- }
- .card img {
- width: 100%;
- height: 100%;
- position: absolute;
- }
- .title,
- .data {
- position: absolute;
- }
- .title {
- font-size: 20px;
- background-color: rgba(0, 0, 0, .7);
- color: white;
- top: 0;
- }
- .data {
- font-size: 50px;
- text-align: center;
- color: white;
- top: 70px;
- display: block;
- }
- .engagement {
- width: 100%;
- height: 860px;
- background-color: #FFD300;
- position: relative;
- }
- .engagement h1 {
- text-align: center;
- color: black;
- padding-top: 40px;
- font-size: 50px;
- display: block;
- }
- .engagement p {
- color: black;
- margin: 0 5%;
- }
- .engagement p:nth-child(2) {
- margin-top: 20px;
- }
- .engbutton {
- text-align: center;
- margin-top: 100px;
- }
- .engagement a {
- padding: 20px 60px;
- background-color: green;
- color: white;
- text-decoration: none;
- border-radius: 6px;
- }
- footer {
- width: 100%;
- height: 380px;
- max-height: 100vh;
- background-color: #010E28;
- position: absolute;
- }
- .footer-main {
- display: block;
- margin: 0 5% 0 5%;
- padding-top: 50px;
- }
- .sponsors {
- display: block;
- margin-top: 30px;
- text-align: center;
- }
- .sponsors img {
- margin-left: 10px;
- width: 70px;
- }
- .footer-main p,
- span {
- color: white;
- }
- .footer-main img {
- width: 50px;
- margin-bottom: 10px;
- }
- footer img {
- width: 100px;
- vertical-align: middle;
- }
- .social img {
- position: relative;
- left: -10px;
- width: 40px;
- margin-top: 20px;
- margin-left: 10px;
- }
- .goup {
- position: fixed;
- bottom: 100px;
- right: 80px;
- color: white;
- text-decoration: none;
- padding: 30px 20px;
- background-color: black;
- }
- .content {
- margin: 0 auto;
- text-align: center;
- }
- .responsable_wrapper {
- margin-bottom: 2000px;
- }
- .responsable {
- position: relative;
- padding-top: 200px;
- padding-bottom: 200px;
- }
- .responsable h1 {
- text-align: center;
- font-size: 72px;
- color: white;
- position: relative;
- }
- .responsable p {
- text-align: center;
- color: white;
- position: relative;
- }
- eco {
- color: green;
- font-weight: 700;
- }
- #particles-js {
- position: absolute;
- width: 100%;
- height: 100%;
- background-color: #26282C;
- background-repeat: no-repeat;
- background-size: cover;
- background-position: 50% 50%;
- top: 0;
- }
- .responsable_content {
- height: 500px;
- margin: 100px 0 0 0;
- }
- .resitem {
- float: right;
- width: 100%;
- margin-bottom: 40px;
- }
- .resitem h1 {
- font-size: 36px;
- font-weight: 700;
- text-align: center;
- }
- .resitem p {
- margin: 20px 7% 0 7%;
- }
- .resitem img {
- width: 250px;
- margin-left: 20px;
- border-radius: 1000px;
- float: left;
- }
- .contact-form {
- height: 450px;
- background-color: #26282C;
- }
- /* .contact-form h1 {
- color: #4397F5;
- text-align: center;
- font-size: 50px;
- line-height: 100px;
- } */
- /* Form */
- .typeform-widget {
- height: 450px;
- }
- input,
- textarea {
- display: block;
- margin: 0 auto;
- border-radius: 5px;
- margin-top: 10px;
- }
- input,
- textarea {
- width: 400px;
- padding: 10px;
- }
- textarea {
- resize: vertical;
- }
- button {
- padding: 10px;
- margin: 0 auto;
- display: inline-block;
- background: none;
- color: white;
- }
- @media (min-width: 650px) {
- nav {
- background-color: red;
- }
- .main-post p {
- width: 50%;
- }
- .engagement {
- height: 400px;
- }
- .engagement p {
- text-align: center;
- }
- .responsable_wrapper {
- margin-bottom: 340px;
- }
- .resitem img {
- width: 300px;
- }
- }
- @media (min-width: 869px) {
- nav {
- background-color: green;
- }
- #ioMenu {
- height: 100vh;
- }
- .stats {
- height: 950px;
- }
- .bx-wrapper {
- width: 700px;
- }
- .fundaciopuntcat,
- .hosting {
- display: inline-block;
- }
- section.landing {
- margin: 0 15%;
- }
- section.landing h1 {
- padding-top: 200px;
- text-align: center;
- font-size: 40px;
- }
- .background-wrapper {
- background-position-x: 0;
- }
- .main-post {
- height: 800px;
- }
- .mycards {
- flex-flow: row;
- flex-wrap: wrap;
- }
- .card {
- margin-left: 20px;
- margin-bottom: 20px;
- }
- }
- @media (min-width: 1200px) {
- nav {
- background: black;
- }
- body {
- background-size: contain;
- }
- .stats {
- height: 800px;
- }
- .card {
- width: 400px;
- }
- .footer-main>img {
- width: 80px;
- }
- .stats p#warn {
- margin-top: 40px;
- }
- section.landing p {
- text-align: center;
- }
- .engagement {
- height: 400px;
- }
- .resitem h1 {
- text-align: left;
- }
- .resitem img {
- margin-left: 7%;
- margin-right: 40px;
- width: 300px;
- }
- }
- @keyframes moveInLeft {
- 0% {
- opacity: 0;
- transform: translateX(-100px);
- }
- }
- @keyframes goDown {
- 0% {
- transform: translateY(-20px);
- }
- 100% {
- transform: translateY(200px);
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement