The following files exists in this folder. Click to view.
burgerstyle.css257 lines ASCII Unix (LF) 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 62.5%;
}
body {
font-family: 'Lato', sans-serif;
font-weight: 300;
background-color: #eee;
color: #333;
text-align: center;
}
a {
color: #333;
text-decoration: none;
}
h1,
h2,
h3 {
padding-bottom: 2rem;
}
.wrapper {
margin: auto;
width: 100%;
}
.button {
font-size: 1.8rem;
color: #eee;
background-color: #333;
padding: 1.5rem 2.5rem;
border: none;
border-radius: 5px;
}
.button:hover {
background-color: #58d4ba;
color: #333;
cursor: pointer;
}
/* ************************************************** nav */
nav {
position: fixed;
font-weight: 300;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 10rem;
background-color: #fff;
box-shadow: 0 0.25rem .25rem rgba(51, 51, 51, 0.2);
}
nav ul {
list-style: none;
display: flex;
font-size: 4rem;
}
nav ul li a {
display: block;
padding: 2rem;
}
nav ul li a:hover,
nav ul li a.current {
background-color: #333;
color: #fff;
}
/* logo */
.logo {
font-size: 4rem;
}
.logo i {
padding: 0 1.5rem;
}
/* ************************************************** header */
#title {
background: url('img/img-1.jpg') no-repeat center center/cover;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
#title h1 {
font-size: 7vw;
letter-spacing: 1.5rem;
margin: 3rem;
padding-bottom: 5rem;
color: #58d4ba;
font-weight: 400;
}
/* ************************************************** main */
/* about */
#about {
font-size: 3.3rem;
line-height: 2.1;
padding: 8rem 5rem;
letter-spacing: 0.2rem;
}
#about p {
margin: 0 auto;
width: 77%;
text-align: justify;
}
/* photos */
.photos {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
}
.photos img {
width: calc(100%/2);
height: calc(100%/2);
}
/* ************************************************** quote */
.quote {
background-color: #58d4ba;
font-size: 3.3rem;
line-height: 2.1;
padding: 8rem 5rem;
letter-spacing: 0.2rem;
}
section:first-of-type {
background-color: #333;
color: #eee;
}
/* ************************************************** form */
#contact {
padding-top: 4rem;
font-size: 3rem;
}
#contact form {
padding: 0 20%;
text-align: left;
}
#contact h2 {
margin: 2rem 0;
}
#contact label {
font-size: 2rem;
}
#contact textarea {
height: 20rem;
}
input,
textarea {
background-color: #e9e9e9;
border: 1px solid #ccc;
border-radius: 4px;
margin: 0;
padding: 1rem;
width: 100%;
box-sizing: border-box;
margin-bottom: 3rem;
font-size: 1.2rem;
}
input:focus,
textarea:focus {
outline: 3px solid #ccc;
}
input[type="submit"] {
font-size: 2rem;
font-weight: 300;
}
input[type="submit"]:hover {
background-color: #58d4ba;
color: #333;
}
/* ************************************************** footer */
#footer {
background: #333;
color: #eee;
padding: 2rem;
font-size: 2.3rem;
margin-top: 3rem;
}
/* ************************************************** media queries */
@media screen and (max-width: 700px) {
nav {
flex-direction: column;
justify-content: center;
}
nav .logo {
font-size: 6rem;
padding-bottom: 1.5rem;
}
nav ul {
display: none;
}
.photos img {
width: 100%;
height: 100%;
}
}
@media screen and (max-width: 481px) {
nav {
padding: 1rem 3rem;
}
nav .logo {
font-size: 4rem;
padding-bottom: 1rem;
}
.title-content a {
font-size: 1.6rem;
}
.quote {
padding: 3rem 4rem;
font-size: 2.5rem;
}
#about {
padding: 3rem 4rem;
font-size: 2.5rem;
}
#about p {
text-align: center;
}
#contact label {
font-size: 1.6rem;
}
}