Skip to content

Commit e6a1ef6

Browse files
nesangcodenesangcode
authored
Merge pull request #1 from k124k3n/dev
1.0 merge
2 parents fd068e7 + 6cb5ef1 commit e6a1ef6

File tree

7 files changed

+160
-1
lines changed

7 files changed

+160
-1
lines changed

‎fonts/KidsDream.ttf

18.4 KB
Binary file not shown.

‎fonts/Poppins-Bold.ttf

147 KB
Binary file not shown.

‎fonts/Poppins-ExtraBold.ttf

146 KB
Binary file not shown.

‎fonts/Poppins-SemiBold.ttf

148 KB
Binary file not shown.

‎img/bg.jpg

757 KB
Loading

‎index.html

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,18 @@
77
<title>Hello!</title>
88
</head>
99
<body>
10-
<div class="opening">Hello World!</div>
10+
<!-- <div class="opening">Hello World!</div> -->
11+
<div class="header">
12+
<div class="name"><a href=".">Kraken</a></div>
13+
<div class="menu">
14+
<div class="Home"><a href=".">Home</a></div>
15+
<div class="contact"><a href=".">Contact</a></div>
16+
<div class="about"><a href=".">About</a></div>
17+
</div>
18+
</div>
19+
20+
<div class="content">
21+
Hello World!
22+
</div>
1123
</body>
1224
</html>

‎styles.css

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,155 @@
33
src: url(./fonts/ka1.ttf);
44
}
55

6+
@font-face {
7+
font-family: "Kids Dream";
8+
src: url(./fonts/KidsDream.ttf);
9+
}
10+
11+
@font-face {
12+
font-family: "Poppins";
13+
src: url(./fonts/Poppins-Bold.ttf);
14+
}
15+
16+
17+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800&family=Poppins:wght@800&family=Roboto:wght@900&family=Secular+One&display=swap');
18+
19+
20+
621
.opening {
722
font-family: pixel;
823
font-size: 20pt;
924
/* need to learn font-size scaling h3h3 */
25+
}
26+
27+
body {
28+
background-image: url(img/bg.jpg);
29+
background-size: 100vw auto;
30+
}
31+
32+
.header {
33+
display: flex;
34+
/* background-color: rgb(32, 30, 30); */
35+
align-items: center;
36+
justify-content: center;
37+
font-family: Roboto;
38+
color: white;
39+
font-size: 120%;
40+
font-family: Poppins;
41+
gap: 30px;
42+
padding: 3vh 10vw;
43+
margin: 0 0;
44+
45+
border-radius: 1px;
46+
47+
max-width: 100vw;
48+
flex-wrap: wrap;
49+
50+
/* animation: fadein 1.5s; */
51+
}
52+
53+
.name {
54+
margin-right: auto;
55+
font-size: 30px;
56+
/* font-weight: 1000; */
57+
font-family: "Kids Dream";
58+
}
59+
60+
a {
61+
text-decoration: none;
62+
color: white;
63+
}
64+
65+
a:visited {
66+
text-decoration: none;
67+
color: white;
68+
}
69+
70+
.home {
71+
margin-left: auto;
72+
}
73+
74+
.content {
75+
font-family: 'Poppins';
76+
font-size: 50px;
77+
color: white;
78+
display: flex;
79+
height: 80vh;
80+
max-width: 100vw;
81+
flex-wrap: wrap;
82+
align-items: center;
83+
justify-content: center;
84+
user-select: none;
85+
animation: fade-in-right 2s ease-in-out;
86+
}
87+
88+
.menu > * :hover {
89+
text-shadow: 0 0 1px grey, 0 0 1px grey, 0 0 1px grey, 0 0 10px grey, 0 0 30px grey, 0 0 70px grey, 0 0 80px grey;
90+
}
91+
92+
@keyframes fadein {
93+
from {
94+
opacity: 0;
95+
height: 0px;
96+
}
97+
to {
98+
opacity: 1;
99+
height: 5.5vh;
100+
}
101+
}
102+
103+
@keyframes fade-in-right {
104+
from {
105+
opacity: 0;
106+
transform: translateX(300px);
107+
}
108+
to {
109+
opacity: 1;
110+
}
111+
}
112+
113+
114+
html, body, div, span, applet, object, iframe,
115+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
116+
a, abbr, acronym, address, big, cite, code,
117+
del, dfn, em, img, ins, kbd, q, s, samp,
118+
small, strike, strong, sub, sup, tt, var,
119+
b, u, i, center,
120+
dl, dt, dd, ol, ul, li,
121+
fieldset, form, label, legend,
122+
table, caption, tbody, tfoot, thead, tr, th, td,
123+
article, aside, canvas, details, embed,
124+
figure, figcaption, footer, header, hgroup,
125+
menu, nav, output, ruby, section, summary,
126+
time, mark, audio, video {
127+
margin: 0;
128+
padding: 0;
129+
border: 0;
130+
font-size: 100%;
131+
font: inherit;
132+
vertical-align: baseline;
133+
}
134+
135+
.menu {
136+
display: flex;
137+
gap: 30px;
138+
}
139+
@media only screen and (orientation: portrait) {
140+
.menu {
141+
visibility: hidden !important;
142+
display: none !important;
143+
}
144+
145+
.header {
146+
flex-direction: column;
147+
align-items: center;
148+
justify-content: center;
149+
flex: 1;
150+
}
151+
152+
.name {
153+
width: 80vw;
154+
display: inline;
155+
text-align: center;
156+
}
10157
}

0 commit comments

Comments
 (0)