Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
body{
font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
background:linear-gradient(145deg, rgb(0, 100, 109) 42%, rgb(65, 28, 206)) 0% 0% / cover;
color:white;
}
/* MOBILE */
html{
font-size:14px;
}
/* TABLET */
@media only screen and (min-width: 480px) {
html{
font-size:16px;
}
}
/* DESKTOP */
@media only screen and (min-width: 768px) {
html{
font-size:18px;
}
}
/* X-LARGE */
@media only screen and (min-width: 1024px) {
html{
font-size:20px;
}
}
body{
font-family:-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,sans-serif;
height:100%;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
/* background:linear-gradient(145deg, rgb(0, 100, 109) 42%, rgb(65, 28, 206)) 0% 0% / cover; */
background: white;
color:Green;
}
.header {
background-color: Yellow;
min-height: 3.5rem;
height: 3.5rem;
width: 100%;
display: flex;
padding: 0px 1rem;
align-items: center;
font-size: 2rem;
}
.logo{
height:3rem;
width:4rem;
background: url(https://i.insider.com/57b231c1db5ce94f008b6df4?width=750&format=jpeg&auto=webp);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
margin-right: .6rem;
}
.motto{
margin: 3.5rem;
color: Green;
min-height: 3.5rem;
height: 3.5rem;
width: 100%;
display: flex;
padding: 0px 2rem;
align-items: center;
font-size:3rem;
font-weight: bold;
text-align: center;
}
<header class="header">
<div class="logo"></div>
SUBWAY
</header>
<section class="motto">
EAT FRESH.
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment