Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* font-family: 'Open Sans Condensed', sans-serif; */
- * {
- margin: 0px;
- padding: 0px;
- box-sizing: border-box;
- }
- body {
- background-color: rgb(238, 238, 238);
- }
- header {
- height: 100vh;
- width: 100%;
- background-image: url(../img/background.jpg);
- background-position: center;
- background-size: cover;
- background-repeat: no-repeat;
- background-attachment: fixed;
- position: relative;
- }
- header div {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- height: 80vh;
- width: 60vw;
- transition: 1s;
- overflow: hidden;
- animation: border 1s 1.5s linear both;
- }
- header div img {
- width: 150px;
- height: 150px;
- position: absolute;
- left: 47%;
- bottom: -50%;
- transform: translate(-50%, 0%);
- animation: logo_position 1.2s 3.5s both;
- }
- header div h1 {
- font-family: "anton", sans-serif;
- font-size: 100px;
- color: white;
- position: absolute;
- text-transform: uppercase;
- top: -150%;
- left: 50%;
- transform: translate(-58%, -50%);
- animation: belive_position 1s 2.3s both;
- }
- @keyframes border {
- 0% {}
- 100% {
- box-shadow: 10px 7px 79px 18px rgba(0, 0, 0, 1);
- }
- }
- @keyframes belive_position {
- 0% {
- top: 0%;
- color: transparent
- }
- 100% {
- top: 50%;
- color: white;
- }
- }
- @keyframes logo_position {
- 0% {}
- 100% {
- left: 47%;
- bottom: 15%;
- }
- }
- @media (max-width: 1600px) {
- header div h1 {
- font-size: 90px;
- }
- header div img {
- width: 130px;
- height: 130px;
- }
- }
- @media (max-width: 1367px) {
- header div h1 {
- font-size: 80px;
- }
- header div img {
- width: 110px;
- height: 110px;
- }
- }
- @media (max-width: 813px) and (orientation: landscape) {
- header div h1 {
- font-size: 50px;
- }
- header div img {
- width: 70px;
- height: 70px;
- }
- }
- @media (max-width: 641px) and (orientation: landscape) {
- header div h1 {
- font-size: 40px;
- }
- header div img {
- width: 60px;
- height: 60px;
- }
- }
- @media (max-width: 1024px) and (orientation: portrait) {
- header div h1 {
- font-size: 100px;
- transform: translate(-50%, -50%);
- }
- header div img {
- left: 50%;
- width: 150px;
- height: 150px;
- }
- }
- @media (max-width: 601px) and (orientation: portrait) {
- header div h1 {
- font-size: 70px;
- }
- header div img {
- width: 130px;
- height: 130px;
- }
- }
- @media (max-width: 414px) and (orientation: portrait) {
- header div h1 {
- font-size: 50px;
- }
- header div img {
- width: 110px;
- height: 110px;
- }
- }
- @media (max-width: 375px) and (orientation: portrait) {
- header div h1 {
- font-size: 40px;
- }
- header div img {
- width: 80px;
- height: 80px;
- }
- }
- main {
- position: relative;
- height: 100vh;
- background-color: rgb(238, 238, 238);
- overflow: hidden;
- }
- main div.tlo {
- position: absolute;
- width: 100%;
- height: 100vh;
- overflow: hidden;
- background-image: url(../img/bgc2.png);
- background-position: bottom;
- background-size: cover;
- z-index: 999;
- }
- main div nav ul {
- list-style: none;
- display: flex;
- justify-content: space-around;
- margin: 50px 90px;
- margin-left: 40vw;
- min-width: 50vw;
- }
- main div nav ul li {
- font-size: 30px;
- font-family: 'Open Sans Condensed', sans-serif;
- color: white;
- border: 2px solid white;
- border-radius: 20px;
- padding: 5px 30px;
- text-transform: uppercase;
- position: relative;
- transition: 0.3s;
- min-width: 5vw;
- cursor: pointer;
- overflow: hidden;
- }
- ul li:nth-child(3) {
- margin-left: 300px;
- }
- main div nav ul li::after {
- z-index: -1;
- content: "";
- position: absolute;
- background-color: rgb(238, 238, 238);
- top: calc(50% - 2.5px);
- left: -100%;
- height: 5px;
- width: 100%;
- transition: left 0.3s, height 0.3s 0.3s, top 0.3s 0.3s;
- }
- main div nav ul li:hover {
- cursor: pointer;
- color: black;
- }
- main div nav ul li:hover::after {
- left: 0%;
- height: 100%;
- top: 0%;
- }
- .description {
- position: absolute;
- top: 40%;
- left: 10%;
- width: 30%;
- }
- .description a i {
- font-size: 40px;
- margin: 10px 15px;
- transition: 0.2s;
- }
- .description a i:hover {
- transform: scale(1.4);
- }
- .description a:nth-child(1) i {
- color: #4267B2
- }
- .description a:nth-child(2) i {
- color: #DB4437
- }
- .description a:nth-child(3) i {
- color: #c13584;
- }
- .description h1 {
- font-size: 70px;
- margin: 10px 15px;
- text-transform: uppercase;
- font-family: 'Open Sans Condensed', sans-serif;
- font-weight: bold;
- }
- .description h2 {
- font-size: 40px;
- margin: 10px 15px;
- text-transform: uppercase;
- font-family: 'Open Sans Condensed', sans-serif;
- font-weight: normal;
- }
- .movie {
- position: absolute;
- left: 50%;
- top: 38%;
- width: 750px;
- box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.75);
- }
- .movie video {
- width: 100%;
- height: 100%;
- }
- @media (max-width:1600px) and (orientation: landscape) {
- main div nav ul li {
- font-size: 28px;
- }
- main div nav ul {
- margin: 40px 90px;
- margin-left: 40vw;
- }
- .description a i {
- font-size: 30px;
- }
- .description h1 {
- font-size: 55px;
- }
- .description h2 {
- font-size: 28px;
- }
- .movie {
- width: 580px;
- }
- }
- @media (max-width:1440px) and (orientation: landscape) {
- main div nav ul li {
- font-size: 24px;
- margin: 0 20px;
- }
- main div nav ul {
- margin-right: 30px;
- min-width: 60vw;
- margin-left: 30vw;
- }
- ul li:nth-child(3) {
- margin-left: 200px;
- }
- }
- @media (max-width:1040px) and (orientation: landscape) {
- .description a i {
- font-size: 30px;
- }
- .description h1 {
- font-size: 44px;
- }
- .description h2 {
- font-size: 20px;
- }
- .movie {
- width: 430px;
- }
- }
- @media (max-width:1040px) and (orientation: landscape) {
- main div nav ul li {
- font-size: 20px;
- }
- main div nav ul {
- min-width: 40vw;
- margin: 40px 90px;
- margin-left: 30vw;
- }
- ul li:nth-child(3) {
- margin-left: 100px;
- }
- }
- @media (max-width:820px) and (orientation: landscape) {
- main div nav ul li {
- font-size: 16px;
- }
- main div nav ul {
- margin: 30px 10px;
- margin-left: 25vw;
- }
- ul li:nth-child(3) {
- margin-left: 50px;
- margin-right: 0px;
- }
- .description h1 {
- font-size: 35px;
- }
- .description h2 {
- font-size: 15px;
- }
- .movie {
- width: 330px;
- }
- .description {
- top: 35%;
- width: 35%;
- }
- }
- @media (max-width:670px) and (orientation: landscape) {
- .movie {
- width: 280px;
- }
- }
- @media (max-width:641px) and (orientation: landscape) {
- main div nav ul li {
- font-size: 18px;
- margin: 0 10px;
- }
- main div nav ul li {
- font-size: 14px;
- }
- ul li:nth-child(3) {
- margin-left: 30px;
- margin-right: 0px;
- }
- .description h1 {
- font-size: 30px;
- }
- .description h2 {
- font-size: 12px;
- }
- .movie {
- width: 240px;
- }
- }
- @media (orientation: portrait) {
- main div.tlo {
- background-position: right;
- top: -20%;
- left: 0%;
- height: 110vh;
- }
- main div nav {
- position: absolute;
- top: 25%;
- left: 50%;
- transform: translate(-50%, 0%);
- }
- main div nav ul {
- flex-direction: column;
- width: 50vw;
- height: 20vh;
- flex-wrap: wrap;
- margin: 0px;
- }
- main div nav ul li {
- text-align: center;
- }
- ul li:nth-child(3) {
- margin-left: 0px;
- }
- .description a i {
- font-size: 40px;
- }
- .description h1 {
- font-size: 50px;
- }
- .description h2 {
- font-size: 26px;
- }
- .description {
- width: 50vw;
- top: 50%;
- left: 50%;
- transform: translate(-50%, 0%);
- color: white;
- }
- .movie {
- width: 630px;
- top: 90%;
- left: 50%;
- transform: translate(-50%, -50%)
- }
- }
- @media (orientation: portrait) and (max-width: 1024px) {
- main div nav ul li {
- font-size: 28px;
- }
- .description a i {
- font-size: 30px;
- }
- .description h1 {
- font-size: 40px;
- }
- .description h2 {
- font-size: 22px;
- }
- .movie {
- width: 530px;
- top: 90%;
- }
- }
- @media (orientation: portrait) and (max-width: 760px) {
- main div nav ul li {
- font-size: 24px;
- }
- .description a i {
- font-size: 26px;
- }
- .description h1 {
- font-size: 36px;
- }
- .description h2 {
- font-size: 18px;
- }
- .movie {
- width: 430px;
- top: 90%;
- }
- }
- @media (orientation: portrait) and (max-width: 460px) {
- main div nav ul li {
- font-size: 18px;
- }
- .description {
- width: 60vw;
- top: 47%;
- }
- .description a i {
- font-size: 22px;
- margin: 5px 10px 5px 15px;
- }
- .description h1 {
- font-size: 34px;
- }
- .description h2 {
- font-size: 16px;
- }
- .movie {
- width: 330px;
- top: 90%;
- }
- }
- @media (orientation: portrait) and (max-width: 370px) {
- main div nav {
- top: 23%;
- }
- .description a i {
- font-size: 20px;
- margin: 5px 10px 5px 15px;
- }
- .description h1 {
- font-size: 32px;
- }
- .description h2 {
- font-size: 16px;
- }
- .movie {
- width: 300px;
- top: 90%;
- }
- }
- @media (orientation: portrait) and (max-width: 370px) {
- main div nav ul li {
- font-size: 14px;
- }
- .description {
- width: 60vw;
- top: 45%;
- }
- .description h1 {
- font-size: 28px;
- }
- .description h2 {
- font-size: 14px;
- }
- .movie {
- width: 250px;
- top: 90%;
- }
- }
- section {
- background-color: rgb(238, 238, 238);
- overflow: hidden;
- }
- div.person {
- max-width: 80vw;
- margin: 50px auto;
- position: relative;
- height: 50vh;
- box-shadow: 0px 0px 14px 5px rgba(173, 69, 0, 0.5);
- transform: translate(-120%, 0);
- transition: 0.5s ease;
- }
- div.person h1 {
- position: absolute;
- top: 33%;
- left: 50%;
- font-family: 'Open Sans Condensed', sans-serif;
- font-size: 50px;
- font-weight: bold;
- text-align: center;
- }
- div.person h2 {
- position: absolute;
- width: 45%;
- top: 47%;
- left: 50%;
- font-family: 'Open Sans Condensed', sans-serif;
- font-size: 30px;
- font-weight: normal;
- padding-right: 30px;
- text-align: justify
- }
- div.photo {
- width: 600px;
- position: absolute;
- left: 5%;
- bottom: -0.8%;
- }
- div.photo img {
- height: 100%;
- width: 100%;
- }
- div.person:nth-child(2) {
- transform: translate(120%, 0);
- }
- div.person:nth-child(2) div.photo {
- left: 50%;
- }
- div.person:nth-child(2) h1 {
- left: 5%;
- }
- div.person:nth-child(2) h2 {
- left: 5%;
- width: 45%;
- }
- div.person.active {
- transform: translate(0, 0)
- }
- @media (max-width: 1600px) and (orientation: landscape) {
- div.person h1 {
- font-size: 40px;
- }
- div.person h2 {
- font-size: 25px;
- }
- div.photo {
- width: 510px;
- }
- }
- @media (max-width: 1400px) and (orientation: landscape) {
- div.person h1 {
- font-size: 37px;
- }
- div.person h2 {
- font-size: 22px;
- }
- div.photo {
- width: 450px;
- }
- }
- @media (max-width: 1025px) and (orientation: landscape) {
- div.person h1 {
- font-size: 35px;
- }
- div.person h2 {
- font-size: 20px;
- }
- div.photo {
- width: 380px;
- left: 2%;
- }
- }
- @media (max-width: 961px) and (orientation: landscape) {
- div.photo {
- width: 330px;
- bottom: -1.5%;
- }
- }
- @media (max-width: 820px) and (orientation: landscape) {
- div.person h1 {
- font-size: 30px;
- }
- div.person h2 {
- font-size: 14px;
- top: 53%;
- }
- div.photo {
- width: 230px;
- bottom: -2%;
- }
- }
- @media (max-width: 670px) and (orientation: landscape) {
- div.person h1 {
- font-size: 28px;
- }
- div.person h2 {
- font-size: 14px;
- top: 53%;
- }
- div.photo {
- width: 200px;
- bottom: -2%;
- }
- }
- @media (max-width: 568px) and (orientation: landscape) {
- div.person h1 {
- font-size: 25px;
- }
- div.person h2 {
- font-size: 12px;
- top: 53%;
- }
- div.photo {
- width: 180px;
- bottom: -2%;
- }
- }
- @media (orientation: portrait) {
- div.person h1 {
- font-size: 38px;
- top: 5%;
- left: 50%;
- transform: translate(-50%, 0);
- }
- div.person h2 {
- width: 80%;
- font-size: 24px;
- top: 20%;
- left: 50%;
- transform: translate(-50%, 0);
- }
- div.photo {
- bottom: -0.5%;
- left: 50%;
- transform: translate(-50%, 0);
- width: 500px;
- }
- div.person:nth-child(2) div.photo {
- left: 50%;
- bottom: -0.5%;
- }
- div.person:nth-child(2) h1 {
- top: 5%;
- left: 50%;
- transform: translate(-50%, 0);
- }
- div.person:nth-child(2) h2 {
- width: 80%;
- top: 20%;
- left: 50%;
- transform: translate(-50%, 0);
- }
- }
- @media (max-width: 1023px) and (orientation: portrait) {
- div.person h1 {
- font-size: 35px;
- }
- div.person h2 {
- font-size: 18px;
- }
- div.photo {
- width: 400px;
- bottom: -0.8%;
- }
- div.person:nth-child(2) div.photo {
- bottom: -0.8%;
- }
- }
- @media (max-width: 700px) and (orientation: portrait) {
- div.person h1 {
- font-size: 28px;
- }
- div.person h2 {
- font-size: 16px;
- }
- div.photo {
- width: 350px;
- }
- }
- @media (max-width: 550px) and (orientation: portrait) {
- div.person h1 {
- font-size: 19px;
- }
- div.person h2 {
- font-size: 12px;
- }
- div.photo {
- width: 230px;
- }
- }
- @media (max-width: 380px) and (orientation: portrait) {
- div.person h1 {
- font-size: 19px;
- }
- div.person h2 {
- font-size: 12px;
- top: 24%;
- }
- div.photo {
- width: 200px;
- bottom: -1.3%;
- }
- div.person:nth-child(2) div.photo {
- bottom: -1.3%;
- }
- div.person:nth-child(2) h2 {
- top: 24%;
- }
- }
- section.galeria {
- margin: 0 auto;
- min-height: 100vh;
- }
- section.galeria h1 {
- font-family: 'Open Sans Condensed', sans-serif;
- font-size: 60px;
- text-align: center;
- width: 100vw;
- margin: 70px 0;
- text-transform: uppercase;
- }
- .images {
- margin: 0 auto;
- width: 80%;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-around;
- background-image: url(/img/01.jpg);
- border-radius: 20px;
- }
- .images a {
- display: block;
- width: 30%;
- margin: 30px 0px;
- box-shadow: 0px 0px 19px 5px rgba(0, 0, 0, 1);
- transition: 0.3s;
- }
- .images a:hover {
- transform: scale(1.1)
- }
- a img {
- height: 100%;
- width: 100%;
- }
- @media (max-width: 1280px) {
- section.galeria h1 {
- font-size: 50px;
- margin: 40px 0;
- }
- }
- @media (max-width: 1024px) {
- .images a {
- width: 45%;
- margin: 15px 0px;
- }
- }
- @media (max-width: 767px) {
- section.galeria h1 {
- font-size: 38px;
- margin: 20px 0;
- }
- .images a {
- width: 100%;
- }
- }
- footer {
- margin-top: 50px;
- min-height: 10vh;
- background-color: #222;
- color: white;
- font-size: 10px;
- }
- footer .author {
- font-family: 'Open Sans Condensed', sans-serif;
- text-transform: uppercase;
- font-size: 20px;
- text-align: center;
- display: block;
- padding-top: 10px;
- }
- footer p {
- margin: 0px auto;
- padding: 10px 0;
- width: 60vw;
- text-align: center;
- }
- footer p a {
- display: inline-block;
- width: 300px;
- margin: 0 auto;
- color: white;
- text-decoration: none;
- }
- footer p span {
- display: inline-block;
- width: 300px;
- margin: 0 auto;
- color: white;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement