diff options
| -rw-r--r-- | images/buske-efter.jpeg | bin | 0 -> 5351890 bytes | |||
| -rw-r--r-- | images/buske-före.jpeg | bin | 0 -> 883759 bytes | |||
| -rw-r--r-- | index.html | 49 | ||||
| -rw-r--r-- | style.css | 51 |
4 files changed, 72 insertions, 28 deletions
diff --git a/images/buske-efter.jpeg b/images/buske-efter.jpeg Binary files differnew file mode 100644 index 0000000..d20db53 --- /dev/null +++ b/images/buske-efter.jpeg diff --git a/images/buske-före.jpeg b/images/buske-före.jpeg Binary files differnew file mode 100644 index 0000000..9d3ac6f --- /dev/null +++ b/images/buske-före.jpeg @@ -1,25 +1,30 @@ <!DOCTYPE html> <html lang="sv"> - <head> - <meta charset="UTF-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Trädgårdstomten.se</title> - <link rel="stylesheet" href="/style.css"> - </head> - <body> - <header> - <section> - <p><i>Trädgårdstomten</i> ✂️</p> - </section> - <nav> - <a href="/">Hem</a> - <a href="#">Kontakt</a> - <a href="#">Om</a> - </nav> - </header> - <main> - <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.istockphoto.com%2Fid%2F1276959334%2Fsv%2Fvektor%2Fvarningsskylt-med-symbol-f%25C3%25B6r-v%25C3%25A4garbeten.jpg%3Fs%3D170667a%26w%3D0%26k%3D20%26c%3Deu_R8EfjsmJL23wAgwiTYZma3NPnxKoCiKRDDeEKLsA%3D&f=1&nofb=1&ipt=d1cacf3ffad01b7159a201c2652b36aa73febb8dfd4e2fbe12fa0eb260d7af5c"> - </main> - </body> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Trädgårdstomten.se</title> + <link rel="stylesheet" href="/style.css"> +</head> +<body> + <header> + <section> + <p>Trädgårdstomten ✂️</p> + </section> + <nav> + <a href="/">Tjänster</a> + <a href="/">Om mig</a> + <a href="/">Omdömen</a> + <a href="/">Kontakt</a> + </nav> + </header> + <main> + <article> + <img src="/images/buske-före.jpeg"> + <img src="/images/buske-efter.jpeg"> + <p>Se på fan va' snygg buskfan blev!</p> + </article> + </main> +</body> </html> @@ -9,25 +9,64 @@ src: url(/OpenSans-VariableFont_wdth,wght.ttf); } +:root { + --night: #0c090b; + --pink: #ea46c5; + --beige: #e9eddd; + --rose: #9e0012; + + --green: #5a851c; + --green-1: #486a16; + --green-2: #364f10; + + color: var(--night); +} + body { font-family: OpenSans; } -header { +header section { + padding-block: 0.6em; text-align: center; + font-size: 48px; + background-color: var(--green); + display: grid; + place-items: center; + color: var(--beige); } -header section { - padding-block: 2em; - font-size: 24px; +header nav { + display: flex; + justify-content: center; + background-color: var(--green-1); + gap: 0.5em; } header nav a, header nav a:visited { - color: green; + padding: 0.5em 1em; + color: var(--beige); text-decoration: none; } main { - padding-block: 2em; + padding: 2em; + max-width: 1000px; text-align: center; + margin-inline: auto; +} + +main article { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.5em 1em; +} + +main article img { + width: 100%; + height: auto; +} + +main article p { + grid-column: 1 / -1; } |
