Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- margin: 0;
- padding: 0;
- }
- html, body {
- width: 100%;
- height: 100%
- font-size: 14px;
- font-weight: normal;
- }
- .background {
- width: 100%;
- height: 100%;
- background-image: url("https://i.imgur.com/3gezSd1.jpg");
- background-repeat: no-repeat;
- background-size: cover;
- position: relative;
- overflow-y: auto
- }
- .nav {
- width: 350px;
- height: auto;
- position: absolute;
- top: 20%;
- Left: 0;
- }
- .nav a {
- text-decoration: none;
- font-size: 28px;
- font-family: Futura, "Trebuchet MS", Arial, sans-serif;
- font-weight: bold;
- height: 90px;
- margin: 5px 0;
- float: left;
- display: inline-block;
- background-color: black;
- color: white;
- line-height: 90px;
- text-align: center;
- transition: 300ms;
- }
- a.active, .nav a:hover {
- width: 100%;
- background-color: white;
- color: black;
- }
- .a {
- width: 95%;
- }
- .b {
- width: 75%;
- }
- .c {
- width: 70%;
- }
- .d {
- width: 90%;
- }
- .content {
- position: absolute;
- width: 930px;
- min-height: 500px;
- height: auto;
- right: 0;
- top: 10%;
- }
- .home {
- position: absolute;
- right: 0;
- bottom: -50px;
- color: white;
- font-family: Futura, "Trebuchet MS", Arial, sans-serif;
- }
- .home h1 {
- font-size: 95px;
- padding-right: 90px;
- border-bottom: 1px solid white;
- text-transform: uppercase;
- }
- .home h3 {
- font-size: 35px;
- padding: 5px 0;
- opacity: 0.6;
- }
- .aboutus {
- position: absolute;
- right: 0;
- top: 10px;
- bottom: 10px;
- color: white;
- font-family: Futura, "Trebuchet MS", Arial, sans-serif;
- padding: 0 60px;
- display: none;
- }
- .aboutus p {
- font-size: 18px;
- line-height: 28px;
- margin-bottom: 15px;
- color: black;
- }
- .gallery {
- position: absolute;
- right: 0;
- top: 10px;
- color: white;
- padding: 0 60px;
- display: none;
- }
- .gallery .image {
- width: 20%;
- margin: 2%;
- float: left;
- }
- .image img {
- width: 100%;
- transition: all ease o.5s;
- -webkit-transform: scale(1);
- transform: scale(1);
- -webkit-transition: all ease 0.5s;
- }
- .image img:hover {
- transform: scale(1.2);
- -webkit-tranform: scale(1.2);
- }
- @media only screen and (max-width: 768px) {
- .nav a {
- font-size: 10px;
- width: auto;
- height: 30px;
- line-height: 30px;
- padding: 0 10px;
- margin: 0 5px;
- }
- a.active, .nav a:hover {
- width: auto;
- }
- .nav {
- width: 100%;
- top: 20px;
- z-index: 99;
- }
- .home h1 {
- font-size: 22px;
- padding-right: 0;
- border-bottom: none;
- }
- .home h3 {
- font-size: 18px;
- }
- .content {
- width: 100%;
- height: 100%;
- top: 0;
- min-height: inherit;
- }
- .home {
- left: 0;
- text-align: center;
- bottom: 50px;
- }
- .background {
- background-position: center;
- }
- .aboutus {
- width: 90%
- margin: 0 auto;
- padding: 100px 0 0;
- top: 0;
- left: 0;
- }
- .aboutus p {
- font-size: 14px;
- }
- .gallery {
- width: 90%
- margin: 0 auto;
- padding: 100px 0 0;
- top: 0;
- left: 0;
- }
- .gallery .image {
- width: 38%;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement