diff --git a/css/t1.css b/css/t1.css index e69de29..e724641 100644 --- a/css/t1.css +++ b/css/t1.css @@ -0,0 +1,38 @@ +/* t1.css - HTML */ +body { + font-family: Arial, sans-serif; + background-color: white; + color: black; + margin: 0; + padding: 20px; +} + +h1, h2, h3 { + font-family: "Times New Roman", serif; + text-align: left; + color: #333; +} + +button { + padding: 5px 10px; + border: 1px solid #000; + background-color: white; + cursor: pointer; +} + +img { + width: 100%; + height: auto; + border: 0; +} + +table { + width: 100%; + border-collapse: collapse; + border: 1px solid #000; +} + +td, th { + padding: 5px; + text-align: left; +} diff --git a/css/t2.css b/css/t2.css index e69de29..28bda36 100644 --- a/css/t2.css +++ b/css/t2.css @@ -0,0 +1,44 @@ +/* t2.css - HTML+ */ +body { + font-family: Verdana, sans-serif; + background-color: #f4f4f4; + color: #333; + margin: 0; + padding: 20px; +} + +h1, h2, h3 { + font-family: 'Helvetica Neue', sans-serif; + text-align: left; + color: #444; +} + +button { + padding: 8px 15px; + border: 1px solid #ddd; + background-color: #ddd; + cursor: pointer; + border-radius: 5px; +} + +button:hover { + background-color: #bbb; +} + +img { + max-width: 100%; + height: auto; + border-radius: 5px; +} + +table { + width: 100%; + border-collapse: collapse; + border: 1px solid #ddd; +} + +td, th { + padding: 8px; + text-align: left; + border: 1px solid #ddd; +} diff --git a/css/t3.css b/css/t3.css index e69de29..9e75140 100644 --- a/css/t3.css +++ b/css/t3.css @@ -0,0 +1,47 @@ +/* t3.css - HTML 2.0 */ +body { + font-family: 'Segoe UI', sans-serif; + background-color: #f0f0f0; + color: #333; + margin: 0; + padding: 30px; +} + +h1, h2, h3 { + font-family: 'Arial', sans-serif; + text-align: left; + color: #2c3e50; +} + +button { + padding: 10px 20px; + border: none; + background-color: #3498db; + color: white; + cursor: pointer; + border-radius: 10px; + font-weight: bold; +} + +button:hover { + background-color: #2980b9; +} + +img { + max-width: 100%; + height: auto; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +table { + width: 100%; + border-collapse: collapse; + border: 1px solid #ccc; +} + +td, th { + padding: 10px; + text-align: left; + border: 1px solid #ddd; +} diff --git a/css/t4.css b/css/t4.css index e69de29..3308ae0 100644 --- a/css/t4.css +++ b/css/t4.css @@ -0,0 +1,48 @@ +/* t4.css - HTML 3.2 */ +body { + font-family: 'Arial', sans-serif; + background-color: #ecf0f1; + color: #34495e; + margin: 0; + padding: 40px; +} + +h1, h2, h3 { + font-family: 'Georgia', serif; + color: #2980b9; + margin-bottom: 20px; +} + +button { + padding: 12px 25px; + border: none; + background-color: #1abc9c; + color: white; + cursor: pointer; + border-radius: 12px; + font-weight: bold; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #16a085; +} + +img { + max-width: 100%; + height: auto; + border-radius: 15px; + box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); +} + +table { + width: 100%; + border-collapse: collapse; + border: 1px solid #ddd; +} + +td, th { + padding: 12px; + text-align: left; + border: 1px solid #ccc; +} diff --git a/css/t5.css b/css/t5.css index e69de29..bcb6b8e 100644 --- a/css/t5.css +++ b/css/t5.css @@ -0,0 +1,49 @@ +/* t5.css - HTML 4.01 */ +body { + font-family: 'Helvetica Neue', sans-serif; + background-color: #fafafa; + color: #2c3e50; + margin: 0; + padding: 50px; +} + +h1, h2, h3 { + color: #e74c3c; + text-align: center; + margin-bottom: 25px; +} + +button { + padding: 15px 30px; + border: 2px solid #e74c3c; + background-color: #ecf0f1; + color: #e74c3c; + cursor: pointer; + border-radius: 25px; + font-size: 16px; + transition: background-color 0.3s ease; +} + +button:hover { + background-color: #e74c3c; + color: white; +} + +img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} + +table { + width: 100%; + border-collapse: collapse; + border: 1px solid #ecf0f1; +} + +td, th { + padding: 15px; + text-align: left; + border: 1px solid #ecf0f1; +} diff --git a/css/t6.css b/css/t6.css index e69de29..4e85119 100644 --- a/css/t6.css +++ b/css/t6.css @@ -0,0 +1,46 @@ +/* t6.css - XHTML 4.01 */ +body { + font-family: 'Verdana', sans-serif; + background-color: #ffffff; + color: #2c3e50; + margin: 0; + padding: 60px; +} + +h1, h2, h3 { + color: #9b59b6; + text-align: left; + margin-bottom: 30px; +} + +button { + padding: 18px 35px; + border: none; + background-color: #9b59b6; + color: white; + cursor: pointer; + border-radius: 5px; + font-size: 18px; +} + +button:hover { + background-color: #8e44ad; +} + +img { + max-width: 100%; + height: auto; + border-radius: 5px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); +} + +table { + width: 100%; + border-collapse: collapse; +} + +td, th { + padding: 18px; + text-align: left; + border: 1px solid #ddd; +} diff --git a/css/t7.css b/css/t7.css index e69de29..0c35268 100644 --- a/css/t7.css +++ b/css/t7.css @@ -0,0 +1,50 @@ +/* t7.css - XHTML 1.0 */ +body { + font-family: 'Georgia', serif; + background-color: #ecf0f1; + color: #34495e; + margin: 0; + padding: 70px; +} + +h1, h2, h3 { + color: #3498db; + text-align: center; + margin-bottom: 20px; +} + +button { + padding: 20px 40px; + border: 2px solid #3498db; + background-color: white; + color: #3498db; + cursor: pointer; + border-radius: 25px; + font-size: 20px; + transition: transform 0.2s ease; +} + +button:hover { + transform: scale(1.1); + background-color: #3498db; + color: white; +} + +img { + max-width: 100%; + height: auto; + border-radius: 20px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); +} + +table { + width: 100%; + border-collapse: collapse; + border: 2px solid #3498db; +} + +td, th { + padding: 20px; + text-align: left; + border: 1px solid #3498db; +} diff --git a/css/t8.css b/css/t8.css index e69de29..315497e 100644 --- a/css/t8.css +++ b/css/t8.css @@ -0,0 +1,66 @@ +/* t8.css - HTML 5 */ +body { + font-family: 'Roboto', sans-serif; + background-color: #f5f5f5; + color: #333; + margin: 0; + padding: 80px; +} + +h1, h2, h3 { + color: #16a085; + text-align: center; + margin-bottom: 30px; + font-weight: 700; +} + +button { + padding: 20px 40px; + border: none; + background-color: #16a085; + color: white; + cursor: pointer; + border-radius: 50px; + font-size: 22px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + transition: background-color 0.3s ease, transform 0.2s ease; +} + +button:hover { + background-color: #1abc9c; + transform: translateY(-3px); +} + +img { + max-width: 100%; + height: auto; + border-radius: 20px; + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); +} + +table { + width: 100%; + border-collapse: collapse; + border: 2px solid #16a085; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +td, th { + padding: 25px; + text-align: left; + border: 1px solid #16a085; + font-size: 18px; +} + +td { + background-color: #ecf0f1; +} + +th { + background-color: #16a085; + color: white; +} + +table tr:hover { + background-color: #f1f1f1; +} diff --git a/css/t9.css b/css/t9.css index e69de29..7146a17 100644 --- a/css/t9.css +++ b/css/t9.css @@ -0,0 +1,81 @@ +/* t9.css - XHTML 5 */ +body { + font-family: 'Montserrat', sans-serif; + background-color: #ffffff; + color: #2c3e50; + margin: 0; + padding: 90px; +} + +h1, h2, h3 { + color: #2980b9; + text-align: center; + font-weight: 800; + text-transform: uppercase; + margin-bottom: 35px; +} + +button { + padding: 25px 50px; + border: none; + background-color: #2980b9; + color: white; + cursor: pointer; + border-radius: 40px; + font-size: 24px; + font-weight: 600; + letter-spacing: 1px; + transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; +} + +button:hover { + background-color: #3498db; + transform: translateY(-5px); + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); +} + +button:active { + transform: translateY(2px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} + +img { + max-width: 100%; + height: auto; + border-radius: 25px; + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +img:hover { + transform: scale(1.05); +} + +table { + width: 100%; + border-collapse: collapse; + border: 3px solid #2980b9; + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); +} + +td, th { + padding: 30px; + text-align: left; + border: 1px solid #ddd; + font-size: 20px; + letter-spacing: 1px; +} + +td { + background-color: #f9f9f9; +} + +th { + background-color: #2980b9; + color: white; + text-transform: uppercase; +} + +table tr:hover { + background-color: #f1f1f1; +}