From 96fb08751fd388e9fc609fd181bf3b3daaa1b445 Mon Sep 17 00:00:00 2001 From: Gideon Cameron Date: Thu, 1 May 2025 21:41:54 -0700 Subject: [PATCH] Updated html and css for a cleener and centered layout --- index.html | 14 +++++---- styles.css | 83 +++++++++++++++++++++++++++++++----------------------- 2 files changed, 56 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index a9652a9..d3b4fbc 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,19 @@ - - - Basic Static Website - + + + Basic Static Website + +

Welcome to My Basic Website

Sample

This is a very simple static website created using HTML, CSS, and JavaScript. It has an image and some content to get started.

+
- + - \ No newline at end of file + diff --git a/styles.css b/styles.css index 51f1bed..0e495de 100644 --- a/styles.css +++ b/styles.css @@ -1,36 +1,49 @@ body { - font-family: Arial, sans-serif; - margin: 0; - padding: 40px; - background-color: #f4f4f4; - color: #333; - } - h1 { - color: #2c3e50; - } - img { - max-width: 300px; - height: auto; - margin: 20px 0; - border-radius: 8px; - box-shadow: 0 0 10px rgba(44, 62, 80, 0.2); - } - p { - font-size: 18px; - max-width: 600px; - margin: 0 auto 30px auto; - line-height: 1.5; - } - button { - background-color: #2980b9; - color: white; - border: none; - padding: 10px 20px; - font-size: 16px; - border-radius: 5px; - cursor: pointer; - } - button:hover { - background-color: #3498db; - } - \ No newline at end of file + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; + color: #333; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; +} + +.container { + text-align: center; + padding: 40px; + max-width: 700px; +} + +h1 { + color: #2c3e50; +} + +img { + max-width: 300px; + height: auto; + margin: 20px 0; + border-radius: 8px; + box-shadow: 0 0 10px rgba(44, 62, 80, 0.2); +} + +p { + font-size: 18px; + line-height: 1.5; + margin-bottom: 30px; +} + +button { + background-color: #2980b9; + color: white; + border: none; + padding: 10px 20px; + font-size: 16px; + border-radius: 5px; + cursor: pointer; +} + +button:hover { + background-color: #3498db; +}