Skip to content
Snippets Groups Projects
Commit 164a3270 authored by AB0410's avatar AB0410
Browse files

WV2 done

parent 00c6b1f5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
WV1-2/responsive.html
+ 23
− 1
View file @ 164a3270
...@@ -2,10 +2,32 @@ ...@@ -2,10 +2,32 @@
<html lang='en'> <html lang='en'>
<head> <head>
<meta charset='UTF-8'/> <meta charset='UTF-8'/>
<meta name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
<title>Responsive Design</title> <title>Responsive Design</title>
<link rel='stylesheet' href='styles.css'/> <link rel='stylesheet' href='styles.css'/>
</head> </head>
<body> <body>
<!-- There's nothing here! --> <div class='page'>
<section class='section menu'></section>
<header class='section header'>
<img src='images/header.svg'/>
</header>
<section class='section content'>
<img src='images/content.svg'/>
</section>
<section class='section sign-up'>
<img src='images/sign-up.svg'/>
</section>
<section class='section feature-1'>
<img src='images/feature.svg'/>
</section>
<section class='section feature-2'>
<img src='images/feature.svg'/>
</section>
<section class='section feature-3'>
<img src='images/feature.svg'/>
</section>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
WV1-2/styles.css 0 → 100644
+ 88
− 0
View file @ 164a3270
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 80px;
}
.header {
background-color: #B2D6FF;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}
/* Mobile Styles */
@media only screen and (max-width: 400px) {
body {
background-color: #F09A9D; /* Red */
}
}
/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
.sign-up,
.feature-1,
.feature-2,
.feature-3 {
width: 50%;
}
}
/* Desktop Styles */
@media only screen and (min-width: 961px) {
.page {
width: 960px;
margin: 0 auto;
}
.feature-1,
.feature-2,
.feature-3 {
width: 33.3%;
}
.header {
height: 400px;
}
.sign-up {
height: 200px;
order: 1;
}
.content {
order: 2;
}
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment