AlexCr4ckPentest
/
HTML


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
							/* Global styles
 * for <body>, <h1>, <h2>, <h3>, <p>
*/
body
, h1
, h2
, h3
, p {
    margin: 0;
}


/* Some helpers */
.text__center {
    text-align: center;
}

.container__narrow {
    width: 60%;
}

.bg__main {
    background-color: #f3eed9;
}

.bg__accent {
    background-color: #824936;
}

.bg__dark {
    background-color: #222c2a;
}


.split {
    display: flex;
    flex-direction: column; /* Same as without flex */
}

.sec_2 {
    padding-bottom: 6%;
}

.sec_3 {
    padding-top: 6%;
}

.sec_2__bg, .sec_3__bg {
    height: 100px;
    width: 250px;
    background-color: #ccc;
    border: 1px solid black;
}

.container {
    margin: auto;
    width: 80%;
}


/* Dynamically updating selectors behavior
 *
 * @media (conditions) {
 *     slector {
          <redefine options>
          ...
 *     }
 * }
*/

/* If window min-width >= 375px
 * Change flex-direction from column to row
*/
@media (min-width: 375px) {
    .split {
        flex-direction: row;
    }
}

/* Add padding in section sec_2 if min-width >= 600px */
@media (min-width: 600px) {
    .header, .sec_1 {
        padding: 9%;
    }
    .sec_2, .sec_3 {
        padding: 6% 17% 6% 17%;
    }
}