Skip to content

Commit 490a6e3

Browse files
changes to CSS
1 parent a76cd4e commit 490a6e3

2 files changed

Lines changed: 15 additions & 16 deletions

File tree

Wireframe/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<body>
1010
<header class="header">
1111
<h1> Web Development concepts</h1>
12-
<h2> this page will give you the understanding of README ,Git and Wireframe</h2>
12+
<hp> this page will give you the understanding of README ,Git and Wireframe</p>
1313
</header>
1414
<main>
1515

Wireframe/style.css

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -28,18 +28,16 @@ As well as useful links to learn more */
2828
/* ====== Base Elements ======
2929
General rules for basic HTML elements in any context */
3030
body {
31-
background-color:rgba(159, 210, 58, 0.691);
31+
background: var(--paper);
3232
color: var(--ink);
3333
font: var(--font);
34-
}
35-
.header {
36-
text-align: center;
37-
padding: 2px;
34+
padding-bottom: 60px;
3835
}
3936
a {
4037
padding: var(--space);
4138
border: var(--line);
4239
max-width: fit-content;
40+
border-style: none;
4341
}
4442
img,
4543
svg {
@@ -50,20 +48,18 @@ svg {
5048
Setting the overall rules for page regions
5149
https://www.w3.org/WAI/tutorials/page-structure/regions/
5250
*/
53-
54-
55-
.main {
56-
background-color: blanchedalmond;
51+
main {
5752
max-width: var(--container);
5853
margin: 0 auto calc(var(--space) * 4) auto;
54+
display: flex;
5955
}
60-
.footer {
56+
footer {
6157
position: fixed;
6258
bottom: 0;
6359
text-align: center;
64-
border-top: 1px solid #000;
65-
background-color: rgba(206, 245, 107, 0.663);
66-
60+
height: 60px;
61+
background-color:#f6f4f4;
62+
width: 100%;
6763
}
6864
/* ====== Articles Grid Layout ====
6965
Setting the rules for how articles are placed in the main element.
@@ -73,7 +69,6 @@ https://developer.chrome.com/docs/devtools/css/grid
7369
https://gridbyexample.com/learn/
7470
*/
7571
main {
76-
text-align: center;
7772
display: grid;
7873
grid-template-columns: 1fr 1fr;
7974
gap: var(--space);
@@ -95,7 +90,11 @@ article {
9590
> * {
9691
grid-column: 2/3;
9792
}
98-
img {
93+
> img {
9994
grid-column: span 3;
10095
}
10196
}
97+
98+
header {
99+
text-align: center;
100+
}

0 commit comments

Comments
 (0)