Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Exercise 2: Responsive CSS
<header class="header">
<div class="logo"></div>
MY COOL APP!
</header>
<section class="main">
</section>
/* mobile */
html {
font-size:16px;
}
/* TABLET */
@media only screen and (min-width: 480px) {
html {
font-size:18px;
}
}
/* DESKTOP */
@media only screen and (min-width: 768px) {
html {
font-size:20px;
}
}
/* X-LARGE */
@media only screen and (min-width: 1024px) {
html {
font-size:22px;
}
}
body{
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;
color:white;
}
.header{
background:#f7797d;
width:100%;
min-height:5rem;
display:flex;
padding:2rem;
align-items:center;
justify-content:flex-start;
}
.main{
min-height:100vh;
width:100%;
background: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
background-position: top left;
background-repeat: no-repeat;
background-size: cover;
display:flex;
flex-direction:column;
align-items:center;
/* flex-wrap:wrap; */
}
.logo{
background: url(https://99designs-blog.imgix.net/blog/wp-content/uploads/2018/05/attachment_49766565.jpeg?auto=format&q=60&fit=max&w=930);
background-color:black;
height:3rem;
width:3rem;
padding:0rem;
margin: 0.5rem;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment