Lab-RPL-ITS · devaartana · Aug 24, 2023
diff --git a/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/Meditations.jpg b/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/Meditations.jpg
diff --git a/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/commodus2.jpg b/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/commodus2.jpg
diff --git a/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/epictetus.jpg b/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/epictetus.jpg
diff --git a/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/marcus-aurelius.jpg b/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/marcus-aurelius.jpg
diff --git a/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/marcus2.jpg b/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/assets/marcus2.jpg
diff --git a/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/index.html b/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="information">
+            <div class="name"> Marcus Aurelius Antoninus </div>
+            <div class="history"> Seorang Kaisar Romawi dan filsuf, terkenal dengan tulisan-tulisannya dalam aliran Stoik dan masa pemerintahannya sebagai salah satu dari "Five Good Emperors" di Romawi. Meskipun masa pemerintahannya relatif singkat, Marcus Aurelius meninggalkan bekas tak terhapuskan dalam sejarah sebagai seorang raja-filosof yang mewujudkan prinsip-prinsip Stoik baik dalam kehidupan pribadinya maupun dalam pemerintahannya. Tulisannya terus dibaca dan dihargai karena kebijaksanaan praktis dan panduan tentang bagaimana menjalani kehidupan yang berbudi luhur dan bermakna.</div>
+        </div>
+        <div> <img class="img" src="./assets/marcus-aurelius.jpg" alt=""></div>
+    </div>
+
+    <div class="container-2">
+        <div class="cnt-header"> Some More Informatoin about Marcus Aurelius</div>
+
+        <div class="content">
+            <div class="cnt-information">
+                <div class="illustration"> <img src="./assets/Meditations.jpg" alt=""> </div>
+                <p> Dalam "Meditations"-nya, Marcus Aurelius menekankan <em>Stoic virtues</em> seperti kebijaksanaan, keberanian, keadilan, dan disiplin diri. Dia percaya bahwa dengan mengembangkan <em>virtues</em> ini, individu bisa mencapai perasaan ketenangan batin dan menjalani kehidupan yang etis.</p>
+            </div>
+            <div class="cnt-information">
+                <div class="illustration"> <img src="./assets/marcus2.jpg" alt=""> </div>
+                <p>Meskipun memiliki kecenderungan filosofis, Marcus Aurelius mengakui pertempurannya sendiri dan kekurangannya dalam tulisannya. Dia sering merenungkan pertempurannya dengan emosi negatif dan upayanya untuk menyelaraskan pikiran dan tindakannya dengan prinsip Stoik.</p>
+            </div>
+            <div class="cnt-information">
+                <div class="illustration"> <img src="./assets/epictetus.jpg" alt=""> </div>
+                <p>Salah satu pengaruh filosofis bagi Marcus Aurelius adalah Epictetus, seorang filosof Stoik terkenal. Ajaran Epictetus, yang berpusat pada agensi pribadi dan ketahanan dalam menghadapi tantangan, resonansi mendalam dengan keyakinan Marcus sendiri.</p>
+            </div>
+            <div class="cnt-information">
+                <div class="illustration"> <img src="./assets/commodus2.jpg" alt="">  </div>
+                <p>Marcus Aurelius menikah dengan Faustina yang Muda, dengan siapa ia memiliki beberapa anak. Putranya, Commodus, menggantikannya sebagai kaisar, meskipun masa pemerintahan Commodus ditandai oleh kemewahan dan pemerintahan yang buruk.</p>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="container-3">
+        <div class="quote-content">
+            <p> Segala peristiwa dalam hidupmu terjadi demikian adanya karena kau mampu mengahadapinya dengan ketahanan alamimu, atau bisa juga tidak. Jika itu adalah peristiwa yang mampu kau hadapi, jangan mengeluh, tetap hadapilah seperti kau dilahirkan untuk menghadapinya. Namun, jika itu diluar kemampuanmu, jangan mengeluh juga karena masalah itu akan menghilang setelah ia menyita pikiranmu</p>
+            <div class="tag"> - Marcus Aurelius, King of Sparta</div>
+        </div>
+
+    </div>
+</body>
+</html>
diff --git a/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/style.css b/tugas/pelatihan-vcs-2023/I Kadek Arya Deva Artana/style.css
@@ -0,0 +1,133 @@
+*, body, html{
+    margin: 0px;
+    padding: 0px;
+    font-family: sans-serif;
+}
+
+.container{
+    height: 100vh;
+    width: auto;
+    background-color:#65451F;
+    color: #EAC696;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 42px;
+    flex-direction: row;
+}
+
+.information{
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    gap: 20px;
+    width: 600px;
+    height: auto;
+}
+
+.name{
+    font-size: 40px;
+    font-weight: bolder;
+    margin-bottom: 4px;
+}
+
+.history{
+    font-size: 18px;
+    margin-bottom: 4px;
+    text-align: justify;
+}
+
+
+.img{
+    width: 360px;
+    height: 360px;
+    border-radius: 20%;
+}
+
+
+.container-2{
+    height: 100vh;
+    width: 100%;
+    background-color:#C8AE7D;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 30px;
+}
+
+.content{
+    display: flex;
+    width: auto;
+    margin: 30px;
+    gap: 20px;
+
+}
+
+.cnt-header{
+    text-align: center;
+    margin-top: 30px;
+    font-size: 38px;
+    font-weight: bolder;
+    color: #65451F;
+}
+
+.container-3{
+    height: 100vh;
+    width: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #EAC696;
+
+}
+
+.cnt-information{
+    width: 400px;
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.cnt-information p{
+    font-size: 18px;
+    text-align:justify;
+    color: #65451F;
+}
+
+.illustration img{
+    height: 200px;
+    width: 200px;
+    color: white;
+    border: 4px solid #65451F;
+    border-radius: 16px;
+}
+
+
+
+.quote-content{
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+
+.quote-content p{
+    font-size: 30px;
+    font-style: italic;
+    color: #765827;
+    width: 900px;
+    align-self: center;
+    text-align:justify;
+}
+
+.tag{
+    margin-left: auto;
+    font-weight: bolder;
+    font-size: 14px;
+    color: #65451F;
+}
+
+
+
+