diff --git a/css/t7.css b/css/t7.css index 56edaf3..92afabb 100644 --- a/css/t7.css +++ b/css/t7.css @@ -27,12 +27,6 @@ main { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } -h1, h2, h3 { - color: #34495e; - margin-bottom: 20px; - font-weight: 600; - text-align: center; -} p { margin-bottom: 20px; @@ -81,7 +75,7 @@ img { } table { - width: 100%; + width: 100; border-collapse: collapse; margin: 20px 0; border-radius: 5px; diff --git a/css/t8.css b/css/t8.css index 7d49839..1474841 100644 --- a/css/t8.css +++ b/css/t8.css @@ -1,17 +1,19 @@ /* t8.css - HTML 5 */ body { font-family: 'Roboto', sans-serif; - background-color: #f5f5f5; + background-color: #f4f4f9; color: #333; margin: 0; padding: 80px; } -h1, h2, h3 { - color: #16a085; - text-align: center; - margin-bottom: 30px; - font-weight: 700; +main { + max-width: 960px; + margin: 40px auto; + padding: 20px; + background-color: white; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } output{ @@ -82,3 +84,27 @@ a{ a:visited{ color: #e74c3c; } + +footer { + text-align: center; + padding: 10px ; border-radius: 5px; + + background-color: #e74c3c; + color: white; + margin-top: 40px; + font-size: 14px; +} + +div.card { + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + margin: 20px 0; + transition: transform 0.2s ease, box-shadow 0.3s ease; +} + +div.card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +} diff --git a/css/t9.css b/css/t9.css index f9b78ce..0067eb8 100644 --- a/css/t9.css +++ b/css/t9.css @@ -1,15 +1,26 @@ /* t9.css - XHTML 5 */ body { font-family: 'Montserrat', sans-serif; - background-color: #ffffff; + background-color: #f4f4f9; color: #2c3e50; margin: 0; + padding: 0; + line-height: 1.6; } output{ font-size: 50px; } +main { + max-width: 960px; + margin: 40px auto; + padding: 20px; + background-color: white; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + button { padding: 25px 50px; border: none; @@ -47,7 +58,7 @@ img:hover { } table { - width: 85vw; + width: 100; border-collapse: collapse; border: 3px solid #ff9900; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); @@ -101,7 +112,7 @@ div.score-button{ color: white; font-weight: bolder; font-size: xx-large; - width: 75vw; + width: 100; border-radius: 10px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); @@ -109,4 +120,28 @@ div.score-button{ } div.score-button:hover { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); -} \ No newline at end of file +} + +footer { + text-align: center; + padding: 10px ; border-radius: 5px; + + background-color: #fda500; + color: white; + margin-top: 40px; + font-size: 14px; +} + +div.card { + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + margin: 20px 0; + transition: transform 0.2s ease, box-shadow 0.3s ease; +} + +div.card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +}