diff --git a/about.css b/about.css new file mode 100644 index 0000000..98b90f3 --- /dev/null +++ b/about.css @@ -0,0 +1,94 @@ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; + color: #333; +} + +.container { + width: 80%; + margin: 20px auto; + padding: 20px; + background: white; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); + border-radius: 8px; +} + +h1, +h2 { + text-align: center; + color: #2C3E50; +} + +p { + line-height: 1.6; + margin-bottom: 20px; + text-align: justify; +} + +.banner { + background-color: #7ab7df; + color: white; + padding: 10px 0; + margin-bottom: 20px; + text-align: center; + border-radius: 8px 8px 0 0; +} + +.banner h1 { + margin: 0; + font-size: 2em; +} + +.section { + margin: 20px 0; +} + +/* Style for the cards */ +.cards { + display: flex; + justify-content: space-around; + margin-top: 20px; +} + +.card { + background: #f9f9f9; + border: 1px solid #ddd; + border-radius: 10px; + padding: 20px; + width: 30%; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + text-align: center; + margin: 0 10px; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.card:hover { + transform: translateY(-10px); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + + +.card h3 { + color: #2C3E50; + margin-bottom: 10px; +} + +.card p { + color: #555; + font-size: 1em; +} + +/* Responsive design for smaller screens */ +@media (max-width: 768px) { + .cards { + flex-direction: column; + align-items: center; + } + + .card { + width: 80%; + margin-bottom: 20px; + } +} \ No newline at end of file diff --git a/about.html b/about.html index b38ef2f..f806f54 100644 --- a/about.html +++ b/about.html @@ -1,5 +1,6 @@ + @@ -7,6 +8,7 @@ About Math 4 Python + + + + + + +