$bg : RGB(241, 230, 86);
$orange : RGB(254, 107, 56);
$green : RGB(70, 171, 79);
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import "_variables";
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
width: 100%;
height: 100vh;
background-color: $bg;
text-align: center;
display: flex;
box-sizing: border-box;
padding: 10px;
align-items: center;
justify-content: center;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
place-content: center center;
}
.main {
width: 1fr;
flex-grow: 1;
color: white;
order: 2;
display: flex;
justify-content: center;
align-items: center;
nav {
width: 50px;
height: 100%;
font-family:'Trebuchet MS', sans-serif;
font-weight: bold;
font-style: italic;
display: flex;
flex-direction: column;
justify-content: stretch;
align-items: stretch;
div {
ul {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
display: flex;
place-content: center center;
border-bottom: solid $orange 5px;
padding: 5px;
border-left: solid $orange 5px;
border-right: solid $orange 5px;
}
&:nth-child(1) {
div:nth-child(1) {
flex-grow: 2;
background-color: $orange;
}
div:nth-child(2) {
flex-grow: 1;
color: $orange;
background-color: white;
}
div:nth-child(3) {
flex-direction: column;
flex-grow: 0;
min-height: max-content;
border-bottom: 0px;
font-size: 2em;
color: $orange;
background-color: white;
}
}
}
.right {
div {
flex-grow: 1;
ul {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
display: flex;
place-content: center center;
border-bottom: solid $orange 5px;
padding: 5px;
border-left: solid $orange 5px;
border-right: solid $orange 5px;
background-color: $green;
}
}
#vtc {
span {
display: inline-block;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
}
nav img {
fill:$orange;
}
}
.bg {
height: 100%;
flex-grow: 1;
align-items: stretch;
display: grid;
grid-template-columns: 1fr 1fr;
div {background-size: cover;}
div:nth-child(1) { background-image: url('https://curry.cafe/wp-content/uploads/2018/11/leader-10.jpg'); }
div:nth-child(2) { background-image: url('https://curry.cafe/wp-content/uploads/2018/11/leader-02.jpg'); }
}
header {
align-items: center;
position: absolute;
top: 30%;
font-family:'Trebuchet MS', sans-serif;
font-weight: bold;
font-size: 400%;
display: flex;
flex-direction: column;
align-items: stretch;
.logo {
width: 100%;
img {
filter: invert(100%);
width: 100px;
}
}
}
.small {
font-style: italic;
border: solid $orange 5px;
flex-grow: 0;
padding: 5px;
background-color: white;
color: $orange;
&:nth-child(1) { order: 1; }
&:nth-child(2) { order: 2; }
}
#contact {
display: flex;
width: 35px;
height: 35px;
background-color: $orange;
border-radius: 5px;
position: fixed;
bottom: 20px;
right: 20px;
box-shadow: 1px 1px 3px rgb(7, 71, 7);
img {
filter: invert(100%);
width: 20px;
margin: 7.5px;
}
}
CSS