Skip to content

Commit b0c001e

Browse files
YonatanteklemariamYonatanteklemariam
committed
fixed the overlapping of the footer.
1 parent aad4ec4 commit b0c001e

2 files changed

Lines changed: 43 additions & 40 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@ <h1>Basics of Web Development Designs</h1>
1818

1919
<!-- Hero Image Placeholder -->
2020
<div class="hero">
21-
<img
22-
src="https://thf.bing.com/th/id/OIP.YsDV0VqSm_xNM6gRZ8N9UgHaEK?w=271&h=180&c=7&r=0&o=7&cb=thfc1falcon&dpr=1.3&pid=1.7&rm=3"
23-
alt="readme diagram" class="placeholder">
21+
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1-768.png" alt="readme diagram"
22+
class="placeholder">
2423
</div>
2524

2625
<!-- Main Article -->
@@ -45,50 +44,46 @@ <h2>What is the purpose of a README file?</h2>
4544
others but also to the original creator when returning after a long break.
4645
</p>
4746
<br><br>
48-
<a href="https://www.bing.com/ck/a?!&&p=0e549038c9976fa751249f6e377372e242f89736085ed98c81c4f553d43b47c5JmltdHM9MTc3OTMyMTYwMA&ptn=3&ver=2&hsh=4&fclid=208fb4e6-66f9-61be-37f1-a3e567b76078&psq=readme+file+meaning&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvZ2l0L3doYXQtaXMtcmVhZG1lLW1kLWZpbGUv"
49-
aria-label="Read more about readme files" class="btn">Read More</a>
47+
<a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/" aria-label="Read more about readme files"
48+
class="btn">Read More</a>
5049
</main>
5150

5251
<!-- Small Articles Section -->
5352
<div class="small-articles">
5453

5554
<article class="small-article">
5655
<img
57-
src="https://thf.bing.com/th/id/OIP.tW2YTG0Gl_HHGRa0SvM8hwHaFj?w=191&h=180&c=7&r=0&o=7&cb=thfc1falcon&dpr=1.3&pid=1.7&rm=3"
56+
src="https://cdn.logojoy.com/wp-content/uploads/20220823141611/hand-drawn-website-wireframe-example-600x450.jpeg"
5857
alt="wireframe diagram" class="placeholder-small">
5958
<h3>What is the purpose of a wireframe?</h3>
6059
<p>A <strong>wireframe</strong> is a simple visual layout that shows the structure of a webpage before design or
61-
coding begins. It
62-
helps developers and designers plan where elements should go and how the page should flow.</p>
63-
<a href="https://www.bing.com/ck/a?!&&p=b7ce4e20dfeb568901a83af5b4240b863c21d97b8e784467aa170932e2aba9b1JmltdHM9MTc3OTMyMTYwMA&ptn=3&ver=2&hsh=4&fclid=208fb4e6-66f9-61be-37f1-a3e567b76078&psq=wireframe+meaning&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvYmxvZ3Mvd2hhdC1pcy13aXJlZnJhbWluZy8"
64-
aria-label="Read more about wireframes" class="btn">Read More</a>
60+
coding begins. It helps developers and designers plan where elements should go and how the page should flow.</p>
61+
<a href="https://www.geeksforgeeks.org/blogs/what-is-wireframing/" aria-label="Read more about wireframes"
62+
class="btn">Read More</a>
6563
</article>
6664

6765

6866
<article class="small-article">
6967
<img
70-
src="https://thf.bing.com/th/id/OIP.e8ErcddqmrslMLMzf3tLUgHaEK?w=333&h=187&c=7&r=0&o=7&cb=thfc1falcon&dpr=1.3&pid=1.7&rm=3"
68+
src="https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0d19837bbaf82a71ab35b2a62c5f8776af8e900a.png"
7169
alt="git branching diagram" class="placeholder-small">
7270
<h3>What is a branch in Git?</h3>
7371
<p>A <strong>Git branch</strong> is a separate version of your project where you can work on new features without
7472
affecting the
7573
main code. Branches allow safe experimentation and make collaboration easier. Therefore.</p>
76-
<a href="https://www.bing.com/ck/a?!&&p=a3106f4d918b1bd91968281781229db63f035c1379f56a2aaa6ebbb47092becfJmltdHM9MTc3OTMyMTYwMA&ptn=3&ver=2&hsh=4&fclid=208fb4e6-66f9-61be-37f1-a3e567b76078&psq=git+branching+means&u=a1aHR0cHM6Ly93d3cuZ2Vla3Nmb3JnZWVrcy5vcmcvZ2l0L2ludHJvZHVjdGlvbi10by1naXQtYnJhbmNoLw"
77-
aria-label="Read more about Git branching" class="btn">Read More</a>
74+
<a href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/" aria-label="Read more about Git branching"
75+
class="btn">Read More</a>
7876
</article>
7977

8078
</div>
8179
</main>
8280
<!-- footer -->
8381
<footer>
8482
<div class="footer-note">
85-
<p>For more information, please contact us at: Email: <a href="mailto:info@mywireframedesign.com"
83+
<p>For more information, please contact us at: Email: <a href="mailto:jante26uk@gmail.com"
8684
target="_blank">jante26uk@gmail.com</a></p>
87-
<p>Telephone: <a href="tel:+1234567890" target="_blank">07350989507</a></p>
88-
<p>Address: <a
89-
href="https://www.google.com/maps/place/29+fauna+field,+dunstable/@51.8892291,-0.5159181,3a,75y,233.86h,90t/data=!3m4!1e1!3m2!1smLOk3gqmcMjC07E1hbElkg!2e0!4m2!3m1!1s0x48764f036c42a891:0xae3cf387fd9cf1dd?sa=X&ved=1t:3780&ictx=111"
90-
target="_blank">29
91-
Fauna Field, Dusntable, UK</a></p><br>
85+
<p>Telephone: <a href="tel:07350989507" target="_blank">07350989507</a></p>
86+
<p>Address: 27 Broadwalk, Dusntable, UK</p><br>
9287
</div>
9388
<p>&copy; 2026 My Wireframe Design. All rights reserved.</p>
9489
</footer>

‎Wireframe/style.css‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
:root {
2+
--paper: oklch(100% 0 0);
3+
--ink: oklch(20% 0 0);
4+
--font: 100%/1.5 system-ui;
5+
--space: clamp(10px, 1vw + 10px, 40px);
6+
--line: 1px solid;
7+
--container: 1280px;
8+
--base: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 39%, rgba(0, 212, 255, 1) 100%);
9+
--cards: radial-gradient(circle, rgba(227, 233, 241, 1) 0%, rgba(227, 233, 241, 1) 12%, rgba(227, 233, 241, 1) 5%, rgba(226, 233, 240, 1) 36%, rgba(202, 219, 238, 1) 53%, rgba(191, 212, 237, 1) 60%, rgba(200, 217, 238, 1) 75%, rgba(215, 226, 239, 1) 100%, rgba(148, 187, 233, 1) 100%, rgba(242, 242, 242, 1) 100%);
10+
--text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
11+
--text-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
12+
--text-p: clamp(0.91rem, 0.61vw + 1.1rem, 1rem);
13+
--text-h2: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
14+
--text-h3: clamp(1rem, 8vw + 1rem, 2rem);
15+
--title: clamp(1rem, 6vw + 1rem, 3rem);
16+
--footer-h3: #f18930;
17+
}
18+
119
* {
220
margin: 0;
321
padding: 0;
@@ -15,7 +33,6 @@ body {
1533
color: #080000;
1634
font-family: 'Arial', sans-serif;
1735
line-height: 1.5;
18-
font-size: 1em;
1936
display: flex;
2037
flex-direction: column;
2138
}
@@ -42,7 +59,6 @@ body {
4259
border: 2px dashed #1a082c;
4360
border-radius: 10px;
4461
margin-bottom: 20px;
45-
4662
}
4763

4864
.hero {
@@ -56,14 +72,13 @@ body {
5672
padding-top: 45px;
5773
padding-left: 15px;
5874
padding-right: 15px;
59-
padding-bottom: 15px;
75+
padding-bottom: 80px;
6076
border: 2px solid #000;
6177
border-radius: 10px;
6278
margin-bottom: 20px;
6379
text-align: justify;
6480
margin-right: 20px;
6581
margin-left: 20px;
66-
6782
}
6883

6984
.main-article p,
@@ -110,8 +125,7 @@ body {
110125
margin-right: 20px;
111126
margin-left: 20px;
112127
text-align: justify;
113-
114-
128+
padding-bottom: 125px;
115129
}
116130

117131
.small-article {
@@ -138,40 +152,34 @@ body {
138152
}
139153

140154
footer {
155+
position: fixed;
156+
bottom: 0;
157+
left: 0;
141158
background-color: #d0bee3;
142159
color: #1a082c;
143160
text-align: center;
144161
text-shadow: 2px 2px 4px rgba(225, 226, 237, 0.982);
145-
padding: 10px 15px;
146-
line-height: 1.3;
147-
font-size: 1em;
162+
line-height: 1.2;
148163
margin-top: auto;
149-
164+
width: 100%;
165+
clear: both;
150166
}
151167

152168
footer p {
169+
font-size: 16px;
153170
font-weight: bold;
154171
}
155172

156173
.footer-note {
157-
font-size: 22px;
174+
font-size: 16px;
158175
color: #1a082c;
159176
margin-bottom: 5px;
160177
text-shadow: 2px 2px 4px rgba(210, 213, 244, 0.982);
161-
padding-top: 10px;
162-
padding-bottom: 10px;
163-
padding-left: 15px;
164-
padding-right: 15px;
178+
padding-top: 5px;
165179
border-bottom: none;
166-
<<<<<<< HEAD
167-
/* optional: remove the thick bar */
168-
=======>>>>>>>59daf8a (Updated wireframe HTML and CSS) border-radius: 10px;
169-
170-
171180
}
172181

173182
.footer-note a:hover {
174183
color: #c6e9e9;
175184
text-shadow: 2px 2px 4px rgba(25, 32, 112, 0.982);
176-
177185
}

0 commit comments

Comments
 (0)