diff --git a/Wireframe/Untitled-1.css b/Wireframe/Untitled-1.css new file mode 100644 index 000000000..7de798f69 --- /dev/null +++ b/Wireframe/Untitled-1.css @@ -0,0 +1,171 @@ + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Georgia', serif; + background-color: #f7f4eb; + color: #1a1a1a; + /* WCAG AA High Contrast Compliant */ + display: flex; + flex-direction: column; + min-height: 100vh; + padding: 40px 20px 100px 20px; + /* Base padding offsets fixed footer footprint */ +} + +.page-header { + text-align: center; + margin-bottom: 40px; + width: 100%; +} + +.page-header h1 { + font-size: 2.8rem; + color: #4a3728; + margin-bottom: 8px; + font-weight: 700; +} + +.page-header h2 { + font-family: 'Arial', sans-serif; + font-size: 1.1rem; + font-weight: normal; + color: #333333; +} + +.article-container { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + max-width: 1100px; + margin: 0 auto; + width: 100%; +} + +.card { + background-color: #ffffff; + border-radius: 12px; + overflow: hidden; + display: flex; + flex-direction: column; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); +} + +.featured-article { + grid-column: span 2; +} + +.image-wrapper { + width: 100%; + overflow: hidden; + background-color: #e2e2e2; +} + +.featured-article .image-wrapper { + height: 340px; +} + +.landscape-card .image-wrapper { + height: 240px; +} + +.portrait-card .image-wrapper { + height: 380px; +} + +.image-wrapper img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.card-content { + padding: 24px; + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.card-content h3 { + font-family: 'Georgia', serif; + font-size: 1.4rem; + color: #1a1a1a; + margin-bottom: 12px; + min-height: 35px; +} + +.summary-box { + margin-bottom: 20px; + min-height: 100px; +} + +.summary-box p { + font-family: 'Arial', sans-serif; + font-size: 0.95rem; + line-height: 1.6; + color: #444444; +} + +.read-more-btn { + display: inline-block; + text-decoration: none; + background-color: #cbaf87; + color: #1a1a1a; + padding: 12px 24px; + font-family: 'Arial', sans-serif; + font-size: 0.85rem; + font-weight: bold; + border-radius: 6px; + text-transform: uppercase; + letter-spacing: 0.5px; + align-self: flex-start; + margin-top: auto; + transition: background-color 0.2s ease-in-out; +} + +.read-more-btn:hover { + background-color: #bfa37a; +} + +.page-footer { + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: #f7f4eb; + text-align: center; + padding: 20px 0; + box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05); + z-index: 10; +} + +.page-footer p { + font-family: 'Arial', sans-serif; + font-size: 0.85rem; + color: #555555; + font-weight: bold; +} + +@media (max-width: 768px) { + .article-container { + grid-template-columns: 1fr; + } + + .featured-article { + grid-column: span 1; + } + + .card-content h3, + .summary-box { + min-height: auto; + } + + .portrait-card .image-wrapper { + height: 240px; + } +} \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..4b078b4b3 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,90 @@ - - - Wireframe - + + + Wireframe - Exploring the Basics of Web Design + + -
+ +

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

+

Exploring the Basics of Web Design

-
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more + +
+
+
+ An enterprise monitor display presenting bright development programming code +
+
+

Purpose of a README File

+
+

+ A README file is a document that provides information about a project, + including its purpose, how to use it, and any other relevant details. + It serves as a guide for users and developers who may be interested in + the project. +

+
+ Read more +
+
+ +
+
+ A clean DSLR camera lens reflecting a sprawling modern city silhouette +
+
+

Purpose of a Wireframe

+
+

+ A wireframe is a visual representation of a website or application's + layout and structure. It shows the placement of elements, such as + text, images, and buttons, without the final design details. +

+
+ Read more +
+
+ +
+
+ Bright spacious contemporary office hallway layout interior architecture +
+
+

What Is a Branch in Git?

+
+

+ A branch in Git is a separate line of development that allows you to + work on different features or bug fixes without affecting the main + codebase. It enables multiple developers to collaborate simultaneously. +

+
+ Read more +
-