From 52805af938235a158607818286b7174d38df365a Mon Sep 17 00:00:00 2001
From: Onni Roivas <ab0410@student.jamk.fi>
Date: Mon, 23 Jan 2023 14:12:16 +0200
Subject: [PATCH] WV8 initial
---
WV8/index.html | 26 ++++++++++++++++++++++++++
WV8/styles.css | 38 ++++++++++++++++++++++++++++++++++++++
WV8/variables.css | 16 ++++++++++++++++
3 files changed, 80 insertions(+)
create mode 100644 WV8/index.html
create mode 100644 WV8/styles.css
create mode 100644 WV8/variables.css
diff --git a/WV8/index.html b/WV8/index.html
new file mode 100644
index 0000000..66a867c
--- /dev/null
+++ b/WV8/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS3 Advanced</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+ <header id="main-header">
+ <h1>This is a Heading</h1>
+ </header>
+
+ <main class="container">
+ <article class="box">
+ <h2>Article</h2>
+ <p>This is a paragraph.</p>
+ </article>
+
+ <article class="box">
+ <h2>Article</h2>
+ <p>This is a paragraph.</p>
+ </article>
+ </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/WV8/styles.css b/WV8/styles.css
new file mode 100644
index 0000000..caffc8a
--- /dev/null
+++ b/WV8/styles.css
@@ -0,0 +1,38 @@
+@import url(variables.css);
+body {
+ margin: 0;
+ padding: 0;
+ line-height: 1.5;
+ font-family: Arial, Helvetica, sans-serif;
+ }
+
+ header{
+ background-color: var(--header-bg-color);
+ color: var(--header-txt-color);
+ }
+
+ .container {
+ margin: 20px auto;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ grid-gap: 20px;
+ align-items: center;
+ width: var(--container-width);
+ }
+
+ .container .box{
+ background-color: var(--box-bg-color);
+ padding: var(--box-padding);
+ color: var(--box-main-color);
+ box-shadow: var(--box-main-color)
+ var(--box-shadow-h-offset)
+ var(--box-shadow-v-offset)
+ var(--box-shadow-blur);
+ border: 1px solid var(--box-main-color);
+
+}
+
+ header#main-header h1 {
+ padding: 0;
+ margin: 0;
+ }
\ No newline at end of file
diff --git a/WV8/variables.css b/WV8/variables.css
new file mode 100644
index 0000000..7b8d136
--- /dev/null
+++ b/WV8/variables.css
@@ -0,0 +1,16 @@
+:root {
+ --main-bg-color: rgba(246, 250, 235, 0.067);
+ --main-txt-color: #333;
+ --container-width: 90%;
+ --header-bg-color: #333;
+ --header-txt-color: #fff;
+ }
+
+.box {
+ --box-bg-color: #ddd;
+ --box-main-color: rgb(249, 170, 50);
+ --box-padding: 5px 10px;
+ --box-shadow-h-offset: 10px;
+ --box-shadow-v-offset: 5px;
+ --box-shadow-blur: 5px;
+ }
\ No newline at end of file
--
GitLab