diff --git a/style.css b/style.css index 74063c3..3d84593 100644 --- a/style.css +++ b/style.css @@ -1,7 +1,8 @@ @import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap'); - - +*{ + box-sizing: border-box; +} body { height: 100vh; @@ -10,21 +11,24 @@ body { justify-content: center; background-size: 1000px; - background-image: url("https://www.psdgraphics.com/wp-content/uploads/2022/01/white-math-paper-texture.jpg"); + background-image: url("images/bg.jpeg"); background-position: center center; } .paper { - background-image: url("https://i0.wp.com/textures.world/wp-content/uploads/2018/10/2-Millimeter-Paper-Background-copy.jpg?ssl=1"); + background-image: url("images/paper.jpg"); background-size: 500px; background-position: center center; padding: 20px 100px; -/* min-width: 800px; */ + /* min-width: 800px; */ transform: rotateZ(-5deg); box-shadow: 1px 15px 20px 0px rgba(0,0,0,0.5); - position: absolute; + + display: flex; + flex-direction: column; + align-items: center; } .paper.heart { @@ -38,19 +42,47 @@ body { .paper.image { padding: 10px; } + .paper.image p { font-size: 30px; } img { - max-height: 200px; - width: 100%; user-select: none; + object-fit: cover; + object-position: top; + width: 100%; +} + +.img-1 { + max-height: 280px; +} + +.img-2 { + max-height: 300px; +} + +.img-3 { + max-height: 320px; +} + +.normal-text { + margin: 15px; + background-color: rgba(0, 200, 255, 0.1); + padding: 0px 10px; + line-height: 40px; + border-radius: 10px; +} + +.important-text { + background-color: rgba(0, 200, 255, 0.1); + padding: 0px 15px; + border-radius: 20px; } .paper.heart::after { content: ""; - background-image: url('https://cdn.pixabay.com/photo/2016/03/31/19/25/cartoon-1294994__340.png'); + background-image: url("images/heart.webp"); width: 100%; height: 100%; position: absolute; @@ -69,4 +101,5 @@ p { opacity: 0.75; user-select: none; filter: drop-shadow(2px 1.5px 1px rgba(0,0,105,0.9)); + text-align: center; } \ No newline at end of file