From e24a72f789f61bd5994533de345519cc3b19c7d7 Mon Sep 17 00:00:00 2001
From: Onni Roivas <ab0410@student.jamk.fi>
Date: Mon, 16 Jan 2023 23:17:19 +0200
Subject: [PATCH] WV4 done
---
WV4/responsive.html | 52 +++++++++++++++++++++++
WV4/styles.css | 101 ++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 153 insertions(+)
create mode 100644 WV4/responsive.html
create mode 100644 WV4/styles.css
diff --git a/WV4/responsive.html b/WV4/responsive.html
new file mode 100644
index 0000000..44e38e7
--- /dev/null
+++ b/WV4/responsive.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang='en'>
+ <head>
+ <meta charset='UTF-8'/>
+ <meta name='viewport'
+ content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
+ <title>Responsive Design</title>
+ <link rel='stylesheet' href='styles.css'/>
+ </head>
+ <body>
+ <div class='page'>
+
+ <section class='section menu'></section>
+ <div class='section header'>
+ <div class='photo'>
+ <picture>
+ <source media='(min-width: 401px)'
+ srcset='images/photo-big.jpg'/>
+ <source media='(max-width: 400px)'
+ srcset='images/photo-tall.jpg'/>
+ <img src='images/photo-small.jpg'/>
+ </picture>
+ </div>
+ </div>
+
+ <div class='section content'>
+ <div class='illustration'>
+ <img src='images/illustration-small.png'
+ srcset='images/illustration-small.png 1x,
+ images/illustration-big.png 2x'
+ style='max-width: 500px'/>
+ </div>
+ </div>
+
+ <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>
+</html>
\ No newline at end of file
diff --git a/WV4/styles.css b/WV4/styles.css
new file mode 100644
index 0000000..68c1c65
--- /dev/null
+++ b/WV4/styles.css
@@ -0,0 +1,101 @@
+* {
+ 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;
+ }
+
+ .illustration img {
+ width: 100%;
+ display: block;
+ }
+
+ .menu {
+ background-color: #5995DA;
+ height: 80px;
+ }
+
+ .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;
+ }
+
+ .header {
+ background-color: #B2D6FF;
+ height: auto;
+ justify-content: inherit;
+ align-items: inherit;
+ }
+
+ .photo img {
+ width: 100%;
+ display: block;
+ }
+
+ /* 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
--
GitLab