Skip to content

Commit 6458667

Browse files
markodenicmarkodenic
authored
Merge pull request #649 from Lionelapex/main
updated the home page design
2 parents 4efd587 + 53aa919 commit 6458667

File tree

1 file changed

+148
-84
lines changed

1 file changed

+148
-84
lines changed

‎index.html

Lines changed: 148 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,148 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5-
<meta name="viewport" content="width=device-width,initial-scale=1">
6-
<meta charset="UTF-8">
7-
<title>Free Web Development Resources</title>
8-
<meta name="description" content="This is a list of awesome web development resources. Add more!">
9-
<link rel="canonical" href="https://web-dev-resources.com/"/>
10-
11-
<style>
12-
* {
13-
padding: 0;
14-
margin: 0;
15-
}
16-
17-
body {
18-
display: flex;
19-
align-items: center;
20-
justify-content: center;
21-
flex-direction: column;
22-
min-height: 100vh;
23-
text-align: center;
24-
font-family: sans-serif;
25-
font-size: 1.2em;
26-
line-height: 1.2em;
27-
color: #333;
28-
}
29-
30-
header {
31-
padding: 20px;
32-
}
33-
34-
main {
35-
padding: 20px;
36-
line-height: 1.5em;
37-
}
38-
39-
footer {
40-
padding: 20px;
41-
}
42-
43-
h1 {
44-
margin-bottom: 15px;
45-
line-height: 1.4em;
46-
background-image: linear-gradient(45deg, #ff0a78, #43f);
47-
background-clip: text;
48-
-webkit-background-clip: text;
49-
-webkit-text-fill-color: transparent;
50-
}
51-
52-
a {
53-
color: #333;
54-
}
55-
</style>
56-
</head>
57-
<body>
58-
<header>
59-
<h1>
60-
Web Development Resources
61-
</h1>
62-
63-
<p>
64-
This is a list of web developments resources with a free tier.
65-
</p>
66-
</header>
67-
68-
<main>
69-
<p>
70-
Currently more than 200 resources listed.
71-
</p>
72-
73-
<a href="/list/">
74-
Take me to the list!
75-
</a>
76-
</main>
77-
78-
<footer>
79-
Made by <a href="https://markodenic.com">Marko</a> and contributors. <br>
80-
<a href="https://javascriptquiz.com">JavaScript Quiz</a> | <a href="https://freecodetools.org">Free Code Tools</a> |
81-
<a href="https://tech-blogs.dev">Tech Blogs</a>
82-
</footer>
83-
</body>
84-
</html>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<meta charset="UTF-8">
7+
<title>Free Web Development Resources</title>
8+
<meta name="description" content="This is a list of awesome web development resources. Add more!">
9+
<link rel="canonical" href="https://web-dev-resources.com/"/>
10+
11+
<style>
12+
* {
13+
padding: 0;
14+
margin: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
flex-direction: column;
23+
min-height: 100vh;
24+
text-align: center;
25+
font-family: 'Arial', sans-serif;
26+
background-color: #f0f4f8;
27+
}
28+
29+
header {
30+
padding: 20px;
31+
}
32+
33+
h1 {
34+
margin-bottom: 15px;
35+
font-size: 2.5em;
36+
background-image: linear-gradient(45deg, #ff0a78, #43f);
37+
-webkit-background-clip: text;
38+
background-clip: text;
39+
-webkit-text-fill-color: transparent;
40+
}
41+
42+
p {
43+
color: #555;
44+
margin-bottom: 20px;
45+
}
46+
47+
main {
48+
display: flex;
49+
flex-wrap: wrap;
50+
justify-content: center;
51+
padding: 20px;
52+
}
53+
54+
.card {
55+
background: white;
56+
border-radius: 10px;
57+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
58+
margin: 10px;
59+
padding: 20px;
60+
width: 250px;
61+
text-align: center;
62+
transition: transform 0.2s;
63+
}
64+
65+
.card:hover {
66+
transform: translateY(-5px);
67+
}
68+
69+
.card h2 {
70+
font-size: 2em;
71+
margin-bottom: 10px;
72+
color: #ff0a78;
73+
}
74+
75+
.card p {
76+
color: #666;
77+
}
78+
79+
.cta-button {
80+
background-color: #333;
81+
color: white;
82+
padding: 10px 20px;
83+
border: none;
84+
border-radius: 20px;
85+
cursor: pointer;
86+
text-decoration: none;
87+
margin-top: 20px;
88+
transition: background-color 0.3s;
89+
}
90+
91+
.cta-button:hover {
92+
background-color: #3bc411;
93+
}
94+
95+
footer {
96+
padding: 20px;
97+
margin-top: auto;
98+
color: #777;
99+
}
100+
101+
a {
102+
color: #333;
103+
text-decoration: none;
104+
}
105+
106+
.footer-links {
107+
margin-top: 10px;
108+
}
109+
</style>
110+
</head>
111+
<body>
112+
<header>
113+
<h1>
114+
Web Development Resources
115+
</h1>
116+
<p>
117+
This is a list of web development resources with a free tier.
118+
</p>
119+
</header>
120+
121+
<main>
122+
<div class="card">
123+
<h2>200</h2>
124+
<p>Resources Listed</p>
125+
<p>And growing every day</p>
126+
</div>
127+
<div class="card">
128+
<h2>Free Code Tools</h2>
129+
<p>Premium tools at no cost</p>
130+
</div>
131+
<div class="card">
132+
<h2>Tech Blogs</h2>
133+
<p>Latest tech insights</p>
134+
</div>
135+
</main>
136+
137+
<a class="cta-button" href="/list/">Take me to the list!</a>
138+
139+
<footer>
140+
Made by <a href="https://markodenic.com">Marko</a> and contributors. <br>
141+
<div class="footer-links">
142+
<a href="https://javascriptquiz.com">JavaScript Quiz</a> |
143+
<a href="https://freecodetools.org">Free Code Tools</a> |
144+
<a href="https://tech-blogs.dev">Tech Blogs</a>
145+
</div>
146+
</footer>
147+
</body>
148+
</html>

0 commit comments

Comments
 (0)