Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- :root {
- --main-bg-color: #fbfbfb;
- --border-color: #f3f3f3;
- }
- .ghost .grid-container {
- max-width: 75em;
- padding: 0 2%;
- margin: 0 auto;
- display: block;
- }
- .ghost .top-nav-wrapper {
- height: 90px;
- max-width: 75em;
- padding: 0 2%;
- margin-top: 0;
- padding-top: 0;
- display: flex;
- justify-content: space-between;
- flex-direction: row;
- padding-bottom: 100px;
- align-self: center;
- margin-bottom: 30px;
- align-items: center;
- padding-top: 10px;
- border-bottom: 1px solid var(--main-bg-color);
- }
- @media screen and (max-width: 992px) {
- .ghost .top-nav-wrapper {
- background-color: #f3f3f3;
- border: 1px solid var(--border-color);
- padding: 0 !important;
- height: 60px;
- }
- .ghost .top-nav-wrapper * {
- display: none;
- }
- .ghost .grid-container{
- max-width: 75em;
- padding: 0;
- margin: 0 auto;
- display: block;
- }
- .ghost main .left-column {
- display: none !important;
- }
- .ghost main .main-stage div{
- width: 100% !important;
- }
- .ghost main .main-stage{
- width: 100% !important;
- flex-direction: column
- }
- }
- .ghost .top-nav-wrapper .logo {
- width: 30%;
- }
- .ghost .top-nav-wrapper .logo div {
- width: 200px;
- height: 40px;
- }
- .ghost .top-nav-wrapper .ghost-buttons {
- width: 70%;
- text-align: right;
- }
- .ghost .top-nav-wrapper .ghost-buttons ul {
- display: flex;
- flex-direction: row-reverse;
- justify-content: space-between;
- align-items: center;
- }
- .ghost .top-nav-wrapper .ghost-buttons ul li {
- background: #f3f3f3;
- background-size: 400% 400%;
- border: 1px solid var(--border-color);
- list-style-type: none;
- border-radius: 5px;
- width: 120px;
- height: 15px;
- }
- .ghost .top-nav-wrapper .ghost-buttons ul li.c {
- width: 18px;
- height: 18px;
- border-radius: 18px;
- }
- .ghost main {
- display: flex;
- max-width: 75em;
- padding: 0 2%;
- flex-direction: row;
- justify-content: space-between;
- align-items: top;
- margin-top: 0px;
- padding-top: 0px;
- }
- .ghost main .left-column {
- width: 25%;
- border: 1px solid var(--border-color);
- background: var(--main-bg-color);
- height: 400px;
- margin-right: 5%;
- -webkit-box-shadow: 6px 2px 24px -10px rgba(0,0,0,0.3);
- -moz-box-shadow: 6px 2px 24px -10px rgba(0,0,0,0.3);
- box-shadow: 6px 2px 16px -10px rgba(0,0,0,0.3);
- border-radius: 3px;
- background: linear-gradient(138deg, #ffffff, #f3f3f3);
- background-size: 400% 400%;
- .ghost main .left-column div:first-of-type {
- width: 90%;
- margin: 10% 5% 5% 5%;
- height: 30px;
- background: #f3f3f3;
- }
- .ghost main .left-column div {
- width: 75%;
- margin: 10% 5% 5% 5%;
- height: 30px;
- background: #f3f3f3;
- }
- .ghost main .main-stage {
- width: 70%;
- height: 400px;
- border-radius: 3px;
- display: flex;
- justify-content: space-between;
- }
- .ghost main .main-stage .left, .ghost main .main-stage .right {
- width: 48%;
- }
- .ghost main .main-stage aside {
- background: #f3f3f3;
- width: 95%;
- height: 30px;
- margin-bottom: 20px;
- }
- .ghost main .main-stage aside:last-of-type {
- width: 80%;
- margin-bottom: 30px
- }
- .ghost main .main-stage .left div, .ghost main .main-stage .right div {
- background: linear-gradient(138deg, #ffffff, #f3f3f3);
- background-size: 400% 400%;
- border: 1px solid var(--border-color);
- height: 300px;
- margin-bottom: 15px;
- }
- .ghost main .main-stage .right div.small {
- height: 35px;
- }
- .ghost .footer {
- border-top: 1px solid var(--main-bg-color);
- width: 100%;
- margin-top: 50px;
- padding: 0 2%;
- display: flex;
- align-items: flex-start;
- }
- .ghost .footer div {
- margin-top: 50px;
- width: 20%;
- margin-right: 1.5%;
- height: 100px;
- background: linear-gradient(138deg, #ffffff, #f3f3f3);
- background-size: 400% 400%;
- }
- .ghost .footer div:last-of-type {
- align-self: flex-end;
- }
- .ghost div.inside {
- width: 90%;
- display: block;
- margin: 5% auto;
- background: #f7f7f7 !important;
- height: 220px !important;
- padding-top: 30px;
- }
- .ghost div.inside span {
- display: block;
- margin: 20px 3%;
- width: 60%;
- height: 20px;
- background: #FFF;
- }
- .ghost div.inside span:first-of-type {
- display: block;
- width: 80%;
- height: 20px;
- background: #FFF;
- }
- .ghost div.inside span:last-of-type {
- display: block;
- width: 40%;
- height: 20px;
- background: #FFF;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement