Skip to content

Commit 46b91b4

Browse files
wdhdevwdhdev
committed
modify website design
1 parent 33c469b commit 46b91b4

File tree

2 files changed

+75
-119
lines changed

2 files changed

+75
-119
lines changed

‎index.html‎

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,33 +40,15 @@
4040
<link rel="stylesheet" href="styles/main.css" />
4141
<link rel="stylesheet" href="https://cdn.hrsn.net/is-a-dev/website/fonts/Roboto/font.css" />
4242
<link rel="stylesheet" href="https://cdn.hrsn.net/is-a-dev/website/fonts/UbuntuMono/font.css" />
43-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
4443

4544
<!-- Scripts -->
4645
<script defer data-domain="is-a.dev" src="https://analytics.hrsn.net/js/script.js"></script>
4746
</head>
4847

4948
<body>
50-
<header>
51-
<div class="domain">
52-
<a href="https://github.com/is-a-dev" target="_blank"><img
53-
src="https://raw.githubusercontent.com/is-a-dev/register/main/media/banner.png"
54-
style="max-width: 1000px; width: 100%; display: block" /></a>
55-
</div>
56-
</header>
57-
5849
<main>
59-
<div class="socials">
60-
<div class="social">
61-
<a href="https://github.com/is-a-dev" target="_blank"><i class="fa-brands fa-github"></i></a>
62-
<a href="https://discord.gg/is-a-dev-830872854677422150" target="_blank"><i
63-
class="fa-brands fa-discord"></i></a>
64-
</div>
65-
</div>
66-
67-
<h1>is-a.dev
68-
<h3>Grab your own sweet-looking <span>.is-a.dev</span> subdomain.</h3>
69-
</h1>
50+
<div class="banner"><img src="https://raw.githubusercontent.com/is-a-dev/register/main/media/banner.png" alt="is-a.dev" style="max-width: 100%; height: auto;" /></div>
51+
<h3>Grab your own sweet-looking <span>.is-a.dev</span> subdomain.</h3>
7052

7153
<p>
7254
To register your own subdomain, visit the
@@ -78,6 +60,13 @@ <h3>Grab your own sweet-looking <span>.is-a.dev</span> subdomain.</h3>
7860
src="//cdn.carbonads.com/carbon.js?serve=CW7DE2JU&placement=is-adev&format=cover"
7961
id="_carbonads_js"></script>
8062

63+
<h2>Important Links</h2>
64+
<ul>
65+
<li><a href="https://docs.is-a.dev">Documentation</a></li>
66+
<li><a href="https://github.com/is-a-dev">GitHub</a></li>
67+
<li><a href="https://discord.gg/is-a-dev-830872854677422150">Discord</a></li>
68+
</ul>
69+
8170
<h2>Report Abuse</h2>
8271
<p>
8372
If you suspect that a subdomain is abusing the service, please
@@ -100,11 +89,4 @@ <h2>Donations</h2>
10089
</p>
10190
</main>
10291
</body>
103-
104-
<style>
105-
#carbonads .carbon-poweredby {
106-
color: #ffffff;
107-
}
108-
</style>
109-
11092
</html>

‎styles/main.css‎

Lines changed: 66 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1,129 @@
11
html,
22
body {
3-
--header-bg: #0f0c19;
4-
--accent: #4e3aa3;
5-
--body-fg: #9b7dff;
3+
--header-bg: linear-gradient(90deg, #1a1331, #4e3aa3);
4+
--accent: #7041ff;
5+
--body-fg: #d1c4ff;
6+
--hover-bg: #4e3aa3;
7+
--hover-accent: #9b7dff;
68

79
margin: 0;
810
padding: 0;
911
background-color: #0f0c19;
1012
color: var(--body-fg);
11-
1213
font-family: "Roboto Regular", sans-serif;
14+
line-height: 1.6;
1315
padding: 20px;
1416
}
1517

1618
body * {
1719
box-sizing: border-box;
18-
line-height: 1.5em;
1920
}
2021

2122
main > p {
2223
font-family: "Ubuntu Mono Regular";
2324
}
2425

2526
a:hover {
26-
opacity: 0.8;
27+
color: var(--hover-accent);
28+
background-color: var(--hover-bg);
29+
border-radius: 5px;
30+
padding: 0 5px;
31+
transition: 0.3s ease-in-out;
2732
}
2833

29-
/* Scrollbar for Chrome users */
34+
/* Scrollbar */
3035
::-webkit-scrollbar {
31-
width: 20px;
32-
}
33-
34-
::-webkit-scrollbar-button {
35-
width: 0;
36-
height: 0;
36+
width: 12px;
3737
}
3838

3939
::-webkit-scrollbar-track {
4040
background: #0f0c19;
4141
}
4242

4343
::-webkit-scrollbar-thumb {
44-
background: #9b7dff;
45-
border: 6px solid #0f0c19;
46-
border-radius: 10px;
47-
transition: all 0.2s ease-in-out;
44+
background: var(--accent);
45+
border-radius: 6px;
4846
}
4947

5048
::-webkit-scrollbar-thumb:hover {
51-
background: #7041ff;
52-
}
53-
54-
header {
55-
display: flex;
56-
justify-content: center;
57-
align-items: center;
58-
flex-direction: column;
59-
background-color: var(--header-bg);
60-
color: white;
61-
}
62-
63-
.domain img {
64-
border-radius: 20px;
65-
display: block;
66-
transition: all 0.2s ease-in-out;
67-
cursor: pointer;
68-
outline: 1px solid transparent;
69-
}
70-
71-
.domain img:hover {
72-
outline: 1px solid #9b7dff;
73-
}
74-
75-
.domain a {
76-
border-radius: 20px;
49+
background: var(--hover-accent);
7750
}
7851

7952
main {
80-
padding: 1em;
53+
padding: 2em;
8154
margin: 1em auto;
82-
max-width: 1000px;
83-
}
84-
85-
main p {
86-
padding-left: 10px;
87-
border-left: 1px solid #9b7dff;
88-
border-radius: 5px;
89-
}
90-
91-
main p img {
55+
max-width: 900px;
56+
background: rgba(255, 255, 255, 0.05);
9257
border-radius: 10px;
93-
margin-top: 7px;
94-
margin-right: 10px;
95-
transition: all 0.2s ease-in-out;
96-
outline: 1px solid transparent;
58+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
9759
}
9860

99-
main p img:hover {
100-
opacity: 0.8;
101-
outline: 1px solid white;
61+
/* Banner */
62+
main .banner {
63+
font-size: 2.5rem;
64+
color: var(--body-fg);
65+
text-align: center;
66+
background: var(--header-bg);
67+
padding: 4px;
68+
border-radius: 4px;
69+
margin-bottom: 20px;
70+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
10271
}
10372

104-
main p img:last-child {
105-
margin-right: 0;
73+
main .banner img {
74+
max-width: 100%;
75+
height: auto;
76+
display: block;
77+
margin: 0 auto;
78+
border-radius: 4px;
10679
}
10780

108-
main span {
109-
color: #ffffff;
110-
background-color: #7041ff;
111-
padding: 2px 5px;
81+
/* Paragraphs */
82+
main p {
83+
padding-left: 15px;
84+
border-left: 3px solid var(--accent);
11285
border-radius: 5px;
113-
line-height: 1;
86+
margin-bottom: 1em;
11487
}
11588

89+
/* Headings */
11690
h1 {
117-
font-size: 2em;
118-
margin: 0;
119-
border-bottom: 4px solid #9b7dff;
91+
font-size: 2.5rem;
92+
color: var(--body-fg);
93+
text-align: center;
94+
background: var(--header-bg);
95+
padding: 15px;
12096
border-radius: 5px;
121-
background-color: #9b7dff20;
122-
padding: 20px;
123-
padding-bottom: 17px;
97+
margin-bottom: 20px;
98+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
12499
}
125100

126-
h1 p {
127-
border: none;
128-
font-size: 12pt;
129-
color: #bdb7cf;
130-
padding: 0;
131-
margin: 0;
101+
h2 {
102+
margin-top: 2rem;
103+
font-size: 1.5rem;
104+
color: var(--accent);
105+
border-bottom: 2px solid var(--accent);
106+
padding-bottom: 5px;
132107
}
133108

109+
/* Links */
134110
a {
135-
color: #ddd2ff;
111+
color: var(--accent);
136112
text-decoration: none;
137-
transition: all 0.2s ease-in-out;
113+
transition: all 0.3s ease-in-out;
138114
}
139115

140116
a:hover {
141-
opacity: 0.8;
117+
text-decoration: underline;
118+
color: var(--accent); /* Ensures the color remains the same */
119+
background-color: transparent; /* No background change */
142120
}
143121

144-
.socials {
145-
display: block;
146-
position: absolute;
147-
top: 0;
148-
right: 0;
149-
margin: 10px;
122+
/* Carbon Ads */
123+
#carbonads {
124+
padding-top: 20px;
150125
}
151126

152-
.social {
153-
padding: 10px;
154-
font-size: 16pt;
127+
#carbonads .carbon-poweredby {
128+
color: #ffffff;
155129
}

0 commit comments

Comments
 (0)