diff --git a/Wood049_1K-JPG_Color.jpg b/Wood049_1K-JPG_Color.jpg deleted file mode 100644 index f8862a3..0000000 Binary files a/Wood049_1K-JPG_Color.jpg and /dev/null differ diff --git a/depositphotos_wood.jpg b/depositphotos_wood.jpg new file mode 100644 index 0000000..29ec848 Binary files /dev/null and b/depositphotos_wood.jpg differ diff --git a/index.html b/index.html index 1d5a3d2..fa80483 100644 --- a/index.html +++ b/index.html @@ -14,58 +14,76 @@ src:url(TT2020Base-Regular.woff2)format('woff2'); } - html { - background-color: rgb(255, 255, 246); - background-image: url(Wood049_1K-JPG_Color.jpg); + body { + background-image: url(depositphotos_wood.jpg); font-family: tt2020, 'Courier New', Courier, monospace; font-size: 1.2em; font-weight: 500; + color: #302e2a; } - - body > div { + a { + font-weight: bold; + color:rgb(200, 58, 48) + } + body > div { + position: relative; + } + body > div > div { position: absolute; background-image: url(papier.jpg); background-repeat: repeat; width: 800px; height: 1150px; - left: 0; right: 0; margin-inline: auto; margin-top: 50px; - box-shadow: 5px 5px 30px #302e2a, inset 5px 5px 30px #d5d5d5; + box-shadow: 5px 5px 20px #302e2a87, inset 5px 5px 30px #d5d5d5; rotate: calc(sin(var(--i) * 1.61) * 1.5deg) } .page-content { padding: 100px; } + .main-title { + font-size: 4em; + font-family: 'Times New Roman', Times, serif; + } .tape-tab { position: absolute; height: 55px; width: 150px; - background-color: rgba(243, 90, 90, 0.75); + background-color: rgba(79, 136, 189, 0.671); margin-top: calc(50px + (var(--i) - 1) * 100px); - margin-left: -100px; + margin-left: -120px; rotate: calc(sin(var(--i) * 1.61) * 1.5deg); padding: 10px; - vertical-align: middle; - z-index: 10; + color: black; + font-size: large; + } + .tape-tab:hover { + background-color: rgb(60, 153, 240); + transform: + rotateX(20deg) + rotateY(10deg) + perspective(800px); + transform-origin: 45% 33%; + transition: 150ms ease-out; } .polaroid{ position: relative; width: 350px; padding: 20px; - background-color: #FFF; - box-shadow: 0px 0px 5px #302e2a; - + margin-left: auto; + margin-right: auto; + margin-top: 50px; + margin-bottom: 30px; } .polaroid > img { position: relative; width: 100%; - margin-left: auto; - margin-right: auto; + z-index: 1; } .polaroid > p { @@ -80,7 +98,7 @@