Skip to content

Commit 7243e67

Browse files
AngelaMcLearyAngelaMcLeary
committed
updated css code to variable
1 parent 64c5bc4 commit 7243e67

File tree

2 files changed

+58
-48
lines changed

2 files changed

+58
-48
lines changed

‎Wireframe/index.html‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,62 @@
11
<!doctype html>
22
<html lang="en">
3-
43
<head>
54
<meta charset="UTF-8" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Wireframe</title>
6+
<title>Wireframe | Process</title>
87
<link rel="stylesheet" href="style.css" />
98
<link rel="preconnect" href="https://fonts.googleapis.com" />
109
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11-
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
12-
rel="stylesheet" />
10+
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet" />
1311
</head>
14-
1512
<body>
1613
<header>
1714
<h1>STARTING SIMPLE</h1>
1815
<h2>Breaking down the development process</h2>
1916
</header>
17+
2018
<main>
2119
<article>
22-
<img src="placeholder.svg" alt="placeholder" />
20+
<img src="placeholder.svg" alt="A sample README file structure" />
2321
<div class="content">
2422
<h2>README.md</h2>
2523
<p>
2624
The purpose of a README is to explain what the project is about. It
2725
provides a summary of the project, the technology stack used, and
2826
instructions for any required dependencies.
2927
</p>
30-
<a
31-
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read
32-
more</a>
28+
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
3329
</div>
3430
</article>
31+
3532
<article>
36-
<img src="placeholder.svg" alt="placeholder" />
33+
<img src="placeholder.svg" alt="A simple website wireframe" />
3734
<div class="content">
3835
<h2>Wireframe</h2>
3936
<p>
4037
A wireframe is like a draft for your project. It shows where things
4138
will go and how they work before you add colors, images, or final
42-
design details to guide the design process.
39+
design details.
4340
</p>
44-
<a href="ttps://www.productplan.com/glossary/wireframe/">Read more</a>
41+
<a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
4542
</div>
4643
</article>
44+
4745
<article>
48-
<img src="placeholder.svg" alt="placeholder" />
46+
<img src="placeholder.svg" alt="Diagram of a Git branch" />
4947
<div class="content">
5048
<h2>A Branch in Git</h2>
5149
<p>
5250
A Git branch is a separate line of development within a repository.
53-
It lets you work on new features or fixes independently without
54-
affecting the main code until you are ready to merge.
51+
It lets you work on features independently without affecting the main code.
5552
</p>
56-
<a
57-
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read
58-
more</a>
53+
<a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read more</a>
5954
</div>
6055
</article>
6156
</main>
57+
6258
<footer>
63-
<p>Wireframe|Sprint 1| 2026</p>
59+
<p>Wireframe | Sprint 1 | 2026</p>
6460
</footer>
6561
</body>
66-
6762
</html>

‎Wireframe/style.css‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,32 @@
1+
:root {
2+
--text-main: rgb(9, 9, 9);
3+
--border-color: rgb(7, 7, 7);
4+
--bg-body: rgb(245, 245, 245);
5+
--bg-card: whitesmoke;
6+
--bg-footer: rgb(238, 236, 233);
7+
}
8+
19
* {
210
padding: 0;
311
margin: 0;
412
box-sizing: border-box;
513
}
614

715
body {
8-
background: rgb(245, 245, 245);
9-
color: rgb(9, 9, 9);
16+
background: var(--bg-body);
17+
color: var(--text-main);
1018
font-family: "Roboto", Helvetica, sans-serif;
1119
}
1220

1321
header {
1422
text-align: center;
15-
}
16-
17-
h1,
18-
h2 {
19-
margin: 1rem 0;
23+
padding: 2rem 1rem;
2024
}
2125

2226
h1 {
2327
font-size: 3rem;
2428
font-weight: 900;
29+
margin-bottom: 0.5rem;
2530
}
2631

2732
h2 {
@@ -30,70 +35,80 @@ h2 {
3035
}
3136

3237
p {
33-
line-height: 1.2;
38+
line-height: 1.5;
3439
}
3540

3641
a {
3742
display: inline-block;
3843
width: 140px;
3944
text-decoration: none;
40-
color: rgb(9, 9, 9);
41-
border: 1px solid rgb(7, 7, 7);
45+
color: var(--text-main);
46+
border: 1px solid var(--border-color);
4247
padding: 10px 15px;
43-
margin-top: 1rem;
44-
margin-bottom: 1rem;
48+
margin-top: 1.5rem;
49+
text-align: center;
50+
transition: all 0.2s ease;
4551
}
4652

47-
a:hover {
53+
a:hover, a:focus {
4854
text-decoration: underline;
55+
background-color: var(--text-main);
56+
color: white;
57+
outline: none;
4958
}
5059

5160
main {
5261
display: grid;
5362
grid-template-columns: repeat(2, 1fr);
54-
column-gap: 1rem;
55-
row-gap: 1.5rem;
56-
max-width: 1280px;
63+
gap: 1.5rem;
64+
max-width: 1200px;
5765
margin: 0 auto 4rem;
5866
padding: 0 1rem;
59-
height: auto;
6067
}
6168

62-
main>article:first-child {
63-
grid-column: 1/-1;
69+
main > article:first-child {
70+
grid-column: 1 / -1;
6471
}
6572

6673
article {
6774
display: flex;
6875
flex-direction: column;
69-
background: whitesmoke;
70-
max-height: 520px;
71-
border: 1px solid rgb(7, 7, 7);
76+
background: var(--bg-card);
77+
border: 1px solid var(--border-color);
7278
}
7379

7480
article img {
7581
display: block;
7682
object-fit: cover;
7783
width: 100%;
78-
max-height: 300px;
79-
border: 1px solid rgb(7, 7, 7);
84+
height: 250px;
85+
border-bottom: 1px solid var(--border-color);
8086
}
8187

8288
article .content {
8389
display: flex;
8490
flex-direction: column;
85-
padding: 1rem;
91+
padding: 1.5rem;
92+
flex-grow: 1;
93+
}
94+
95+
article .content a {
96+
margin-top: auto;
8697
}
8798

8899
footer {
89100
text-align: center;
90-
padding: 1rem;
91-
background-color: rgb(238, 236, 233);
92-
position: relative;
101+
padding: 2rem;
102+
background-color: var(--bg-footer);
103+
border-top: 1px solid #ddd;
93104
}
94105

95106
@media (max-width: 768px) {
96107
main {
97108
grid-template-columns: 1fr;
98109
}
110+
111+
h1 {
112+
font-size: 2.2rem;
113+
}
99114
}

0 commit comments

Comments
 (0)