Skip to content

Commit 5016aaa

Browse files
committed
added style.css
1 parent 9506192 commit 5016aaa

2 files changed

Lines changed: 61 additions & 7 deletions

File tree

index.html

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,29 @@
33
<head
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>My App</title>
7-
<!-- <link rel="stylesheet" href="style.css"> -->
6+
<title>Mushthafa Sinuhaji</title>
7+
<link rel="stylesheet" href="style.css">
88
</head>
99
<body>
10-
<header>
11-
<h1>My App</h1>
10+
<!-- <header>
11+
<h1>Hi, I'm Mushthafa Sinuhaji.</h1>
12+
<h2>It's nice to meet you.</h2>
1213
</header>
1314
<main>
14-
<h1>Welcome to my app!</h1>
15-
</main>
15+
<p>I'm a student with a passion for Computer Science, Mathematics, and abstract thinking.</p>
16+
</main> -->
17+
18+
<div class="grid">
19+
<div class="item" style="width: 20em">
20+
<h1>Hi, I'm Mushthafa Sinuhaji.</h1>
21+
<h2>It's nice to meet you.</h2>
22+
</div>
23+
<div class="item">
24+
<p>I'm a student with a passion for Computer Science, Mathematics, and abstract thinking.</p>
25+
</div>
26+
<div class="item">
27+
28+
</div>
29+
</div>
1630
</body>
17-
</html>>
31+
</html>

style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
* {
2+
font-weight: normal;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
background-color: #111111;
10+
color: #fff;
11+
letter-spacing: -3%;
12+
}
13+
14+
h1 {
15+
font-size: 5em;
16+
}
17+
18+
h2 {
19+
font-size: 3.5em;
20+
}
21+
22+
p {
23+
font-size: 1.25em;
24+
}
25+
26+
div.grid {
27+
display: grid;
28+
grid-template-columns: repeat(auto-fit, minmax(20em, auto));
29+
height: 30em;
30+
padding: 2em;
31+
gap: 20px;
32+
margin-top: 20px;
33+
}
34+
35+
.grid .item {
36+
background-color: #ff0000;
37+
padding: 20px;
38+
border-radius: 10px;
39+
text-align: center;
40+
}

0 commit comments

Comments
 (0)