Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- box-sizing: border-box;
- }
- html,
- body {
- height: 100%;
- width: 100%;
- margin: 0;
- font-family: 'Alegreya Sans', sans-serif;
- }
- .row {
- height: 100%;
- width: 100%;
- display: flex;
- }
- #side {
- background-color: #222;
- text-align: center;
- color: white;
- font-size: 20px;
- height: 100%;
- position: static;
- }
- #side img {
- padding-top: 20px;
- width: 50%;
- height: 20%;
- }
- #side ul {
- margin: 0px;
- padding: 0;
- list-style-type: none;
- }
- #side li {
- padding: 5px;
- }
- #main {
- background-color: #d1d1d1;
- width: 80%;
- height: 100%;
- padding: 0;
- margin: 0;
- }
- #Window {
- width: 31.3%;
- margin: 1%;
- border-radius: 5px;
- }
- #Window h2 {
- font-size: 20px;
- margin: 1%;
- text-align: center;
- }
- #Window p {
- font-size: 14px;
- justify-content: flex-start;
- }
- #Window img {
- height: 150px;
- width: 100%;
- }
- #menu {
- padding: 15px;
- width: 100%;
- background-color: #181818;
- }
- #wrapper {
- display: flex;
- flex-wrap: wrap;
- }
- #menu a {
- text-decoration: none;
- color: white;
- font-size: 25px;
- }
- #menu a:active {
- color: #e44d26;
- }
- #Window:last-child {
- clear: both;
- }
- @media (min-width: 1000px) {
- #side {
- height: 100%;
- width: 20%;
- font-size: 20px;
- background-color: #222;
- scroll-snap-type: inherit;
- }
- #side img {
- align-items: center;
- width: 50%;
- }
- #main {
- background-color: #d1d1d1;
- width: 80%;
- }
- #Window {
- width: 31.3%;
- margin: 1%;
- border-radius: 5px;
- background-color: white;
- }
- #Window h1 {
- font-size: 10px;
- margin: 1%;
- }
- #Window p {
- font-size: 14px;
- justify-content: flex-start;
- }
- #Window img {
- height: 150px;
- }
- }
- @media (max-width: 1000px) {
- #side {
- width: 200px;
- }
- #Window {
- width: 48%;
- margin: 1%;
- }
- #side img {
- padding-top: 20px;
- width: 60%;
- height: 20%;
- }
- #main {
- width: calc(100% - 200px);
- }
- #Window{
- width: 48%;
- margin: 1%;
- }
- }
- @media (max-width: 799px) {
- .row{
- flex-direction: column;
- }
- #side {
- height: auto;
- width: 100%;
- text-align: center;
- color: white;
- font-size: 35px;
- height: auto;
- }
- #menu ul{
- display: flex;
- }
- #side img {
- width: 150px;
- }
- #main {
- width: 100%;
- height: auto;
- }
- #wrapper{
- justify-content: center;
- }
- #Window {
- width: 65%;
- margin: 2%;
- }
- #Window img {
- height: 250px;
- }
- #Window h1 {
- font-size: 15px;
- color: black;
- }
- #Window p {
- font-size: 20px;
- justify-content: center;
- color: #555;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement