Skip to content

Commit 47ab119

Browse files
javin1102javin1102
committed
aktivitas sudah di masukkan di about
1 parent 9a05900 commit 47ab119

14 files changed

Lines changed: 368 additions & 2 deletions

‎Johanes/BGDC_website.zip‎

12.3 KB
Binary file not shown.

‎Johanes/html dan css garis.txt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
html
2+
3+
<hr class="garis">
4+
5+
css
6+
7+
.garis{
8+
width: 255px;
9+
height: 16px;
10+
background: linear-gradient(85.98deg, #FF6B00 11.55%, #FFB800 91.18%);
11+
border-radius: 70px;
12+
}

‎Johanes/index.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
12+
13+
14+
<!-- Flex Aktivitas -->
15+
<article>
16+
<h2>Aktivitas</h2>
17+
<hr class="garis">
18+
<div class="container1">
19+
20+
<img src="pic/EszIU9uI_400x400.jpg" alt="Beluga">
21+
<div class="text">
22+
23+
<h3>KELAS GAME DEV</h3>
24+
<p>
25+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cupiditate voluptate ratione sed ipsa molestiae amet expedita. Ratione ipsum repudiandae earum? Unde reiciendis aliquam molestiae enim ratione temporibus exercitationem mollitia. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, non, voluptas nesciunt necessitatibus iure voluptates eveniet recusandae laborum facere magni, cumque sequi harum voluptate in! Deleniti commodi laboriosam cumque praesentium? Lorem ipsum dolor sit amet consectetur adipisicing elit. In voluptatibus alias voluptates ratione! Deserunt nulla aperiam, eius quod expedita ducimus, nam officiis doloremque natus voluptas labore vero atque debitis sequi. </p>
26+
</div>
27+
</div>
28+
29+
<div class="container2">
30+
31+
<img src="pic/EszIU9uI_400x400.jpg" alt="Beluga">
32+
<div class="text">
33+
34+
<h3>TALENT GROUP</h3>
35+
<p>
36+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cupiditate voluptate ratione sed ipsa molestiae amet expedita. Ratione ipsum repudiandae earum? Unde reiciendis aliquam molestiae enim ratione temporibus exercitationem mollitia. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, non, voluptas nesciunt necessitatibus iure voluptates eveniet recusandae laborum facere magni, cumque sequi harum voluptate in! Deleniti commodi laboriosam cumque praesentium? Lorem ipsum dolor sit amet consectetur adipisicing elit. In voluptatibus alias voluptates ratione! Deserunt nulla aperiam, eius quod expedita ducimus, nam officiis doloremque natus voluptas labore vero atque debitis sequi. </p>
37+
</div>
38+
39+
</div>
40+
41+
<div class="container1">
42+
43+
<img src="pic/EszIU9uI_400x400.jpg" alt="Beluga">
44+
<div class="text">
45+
46+
<h3>GATHERING</h3>
47+
<p>
48+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis cupiditate voluptate ratione sed ipsa molestiae amet expedita. Ratione ipsum repudiandae earum? Unde reiciendis aliquam molestiae enim ratione temporibus exercitationem mollitia. Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, non, voluptas nesciunt necessitatibus iure voluptates eveniet recusandae laborum facere magni, cumque sequi harum voluptate in! Deleniti commodi laboriosam cumque praesentium? Lorem ipsum dolor sit amet consectetur adipisicing elit. In voluptatibus alias voluptates ratione! Deserunt nulla aperiam, eius quod expedita ducimus, nam officiis doloremque natus voluptas labore vero atque debitis sequi. </p>
49+
</div>
50+
51+
</div>
52+
53+
</article>
54+
55+
</body>
56+
</html>

‎Johanes/style.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
body {
2+
width: 50%;
3+
margin-right: auto;
4+
margin-left: auto;
5+
}
6+
7+
h2 {
8+
font-style: normal;
9+
font-weight: 500;
10+
font-size: 36px;
11+
line-height: 105.06%;
12+
/* identical to box height, or 38px */
13+
14+
text-align: center;
15+
letter-spacing: 0.15em;
16+
text-align: center;
17+
margin-bottom: 0%;
18+
}

‎about.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,73 @@ <h3 class="heading-3 heading-3--underline">Misi</h3>
9595
</div>
9696
</div>
9797
</div>
98+
99+
<div class="section-about__content section-about__content--mt" id="aktivitas">
100+
<h3 class="heading-3 heading-3--underline">Aktivitas</h3>
101+
<div class="aktivitas-container mt-md">
102+
<img src="./assets/img/pic/EszIU9uI_400x400.jpg" alt="Beluga" />
103+
<div class="text">
104+
<h4 class="heading__4 mb-md">KELAS GAME DEV</h4>
105+
<p class="paragraph-default">
106+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
107+
cupiditate voluptate ratione sed ipsa molestiae amet expedita.
108+
Ratione ipsum repudiandae earum? Unde reiciendis aliquam molestiae
109+
enim ratione temporibus exercitationem mollitia. Lorem ipsum dolor
110+
sit amet consectetur adipisicing elit. Suscipit, non, voluptas
111+
nesciunt necessitatibus iure voluptates eveniet recusandae laborum
112+
facere magni, cumque sequi harum voluptate in! Deleniti commodi
113+
laboriosam cumque praesentium? Lorem ipsum dolor sit amet
114+
consectetur adipisicing elit. In voluptatibus alias voluptates
115+
ratione! Deserunt nulla aperiam, eius quod expedita ducimus, nam
116+
officiis doloremque natus voluptas labore vero atque debitis
117+
sequi.
118+
</p>
119+
</div>
120+
</div>
121+
122+
<div class="aktivitas-container aktivitas-container--reverse mt-large">
123+
<img src="./assets/img/pic/EszIU9uI_400x400.jpg" alt="Beluga" />
124+
<div class="text-align-end">
125+
<h4 class="heading__4 mb-md">TALENT GROUP</h4>
126+
<p class="paragraph-default">
127+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
128+
cupiditate voluptate ratione sed ipsa molestiae amet expedita.
129+
Ratione ipsum repudiandae earum? Unde reiciendis aliquam molestiae
130+
enim ratione temporibus exercitationem mollitia. Lorem ipsum dolor
131+
sit amet consectetur adipisicing elit. Suscipit, non, voluptas
132+
nesciunt necessitatibus iure voluptates eveniet recusandae laborum
133+
facere magni, cumque sequi harum voluptate in! Deleniti commodi
134+
laboriosam cumque praesentium? Lorem ipsum dolor sit amet
135+
consectetur adipisicing elit. In voluptatibus alias voluptates
136+
ratione! Deserunt nulla aperiam, eius quod expedita ducimus, nam
137+
officiis doloremque natus voluptas labore vero atque debitis
138+
sequi.
139+
</p>
140+
</div>
141+
</div>
142+
143+
<div class="aktivitas-container mt-large">
144+
<img src="./assets/img/pic/EszIU9uI_400x400.jpg" alt="Beluga"/>
145+
<div class="text-align-start">
146+
<h4 class="heading__4 mb-md">GATHERING</h4>
147+
<p class="paragraph-default">
148+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
149+
cupiditate voluptate ratione sed ipsa molestiae amet expedita.
150+
Ratione ipsum repudiandae earum? Unde reiciendis aliquam molestiae
151+
enim ratione temporibus exercitationem mollitia. Lorem ipsum dolor
152+
sit amet consectetur adipisicing elit. Suscipit, non, voluptas
153+
nesciunt necessitatibus iure voluptates eveniet recusandae laborum
154+
facere magni, cumque sequi harum voluptate in! Deleniti commodi
155+
laboriosam cumque praesentium? Lorem ipsum dolor sit amet
156+
consectetur adipisicing elit. In voluptatibus alias voluptates
157+
ratione! Deserunt nulla aperiam, eius quod expedita ducimus, nam
158+
officiis doloremque natus voluptas labore vero atque debitis
159+
sequi.
160+
</p>
161+
</div>
162+
</div>
98163
</section>
164+
99165
</main>
100166
</body>
101167
</html>

‎assets/img/pic/EszIU9uI_400x400.jpg‎

10.6 KB
Loading

‎html dan css garis.txt‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
html
2+
3+
<hr class="garis">
4+
5+
css
6+
7+
.garis{
8+
width: 255px;
9+
height: 16px;
10+
background: linear-gradient(85.98deg, #FF6B00 11.55%, #FFB800 91.18%);
11+
border-radius: 70px;
12+
}

‎style/base/_typography.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@ html {
6262
text-shadow: $header-text-shadow;
6363
}
6464

65+
.heading__4 {
66+
font-size: $medium-low-font-size;
67+
// line-height: 1.05px;
68+
letter-spacing: 0.2rem;
69+
}
70+
6571
.header {
6672
& .heading__4 {
6773
color: white;

‎style/base/_utilities.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
.mb-sm {
2+
margin-bottom: $small;
3+
}
4+
.mt-sm {
5+
margin-top: $small;
6+
}
7+
8+
.mb-md {
9+
margin-bottom: $medium;
10+
}
11+
.mt-md {
12+
margin-top: $medium;
13+
}
14+
15+
.mb-large {
16+
margin-bottom: $large;
17+
}
18+
.mt-large {
19+
margin-top: $large;
20+
}
21+
22+
.ms-sm {
23+
margin-left: $small;
24+
}
25+
.me-sm {
26+
margin-right: $small;
27+
}
28+
29+
.ms-md {
30+
margin-left: $medium;
31+
}
32+
.me-md {
33+
margin-right: $medium;
34+
}
35+
36+
.ms-large {
37+
margin-left: $large;
38+
}
39+
.me-large {
40+
margin-right: $large;
41+
}
42+
43+
.flex-col {
44+
display: flex;
45+
flex-direction: column !important;
46+
}
47+
48+
.row-rev {
49+
flex-direction: row-reverse;
50+
}
51+
.text-align-start {
52+
text-align: start;
53+
}
54+
55+
.text-align-end {
56+
text-align: end;
57+
}

‎style/main.css‎

Lines changed: 111 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)