Membuat Situs Pribadi menggunakan HTML dan CSS

HTML

HTML (Hyper Text Markup Language) adalah bahasa yang digunakan untuk menampilkan sebuah konten dalam sebuah website. HTML saat ini berada pada versi HTML5 yang sangat kompatibel di gawai yang ada pada zaman sekarang,

CSS

CSS (Cascading Style Sheest) sendiri merupakan bahasa yang digunakan untuk memberikan tampilan yang lebih baik pada HTML. Ibarat kata, HTML merupakan tubuh manusia tanpa busana, demikian website yang hanya menggunakan HTML yang hanya berisi tulisan hitam dengan background putih, CSS merupakan busana/perlengkapan yang membantu membentuk gaya pada manusia, demikian website yang ditambahkan CSS dapat dilihat gaya, warna, dan lain sebagainnya yang dapat memberikan pengguna perasaan yang lebih baik dibanding hitam-putih HTML

Peugasan CV Website

Pada pengasan kali ini, kami ditugaskan untuk membuat website hanya menggunakan HTML dan CSS. Di bawah ini merupakan website yang saya buat hanya dengan menggunakan HTML dan CSS. Perlu saya tambahkan, untuk penugasan kali ini saya tidak membuatnya responsive untuk semua ukuran layar. Maka gunakan layar dengan resolusi 1440x1080 (ukuran piksel) untuk pengalaman yang lebih baik.

Kode HTML

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Curriculum Vitae - Anggito Anju Hartawan Manalu</title>
	</head>
	<body>
	<!-- Header -->
	<section id="header">
	<!-- Layout -->
	<div class="header-left">
	<h1>Hello, I Am</h1>
	<h2>ANGGITO ANJU HARTAWAN MANALU</h2>
	</div>
	<div class="header-right">
	<img src="src/img/ProfilePicture.png" alt="Anggito Anju Hartawan Manalu">
	<a href="#about"><button>ABOUT ANGGITO</button></a>
	</div>
	<!-- Background -->
	<div class="header-background">
	<div class="blue-circle"></div>
	<div class="orange-circle"></div>
	<img class="html-logo" src="src/logo/HTML logo.png" alt="HTML Logo">
	<img class="css-logo" src="src/logo/CSS logo.png" alt="CSS Logo">
	<img class="js-logo" src="src/logo/Javascript logo.png" alt="Javascript Logo">
	</div>
	<!---->
	</div>
	<!---->
	</section>
	<!---->

	<!-- About -->
	<section id="about">
	<!-- Layout -->
	<img src="src/svg/ProfileSection.png" alt="People">
	<div class="about-right">
	<h1>TECH ENTUSIAST</h1>
	<br>
	<h3>I am a teenager from Surabaya with a great interest in Technological Development and Data Science.
	I am currently pursuing my bachelor’s degree in Department of Informatics Engineering
	Institut Teknologi Sepuluh Nopember.</h3>
	</div>
	<!---->

	<!-- Background -->
	<div class="about-background">
	<div class="orange-circle"></div>
	<div class="green-circle"></div>
	</div>
	<!---->
	</section>
	<!---->

	<!-- Education -->
	<section id="education">
	<!-- Layout -->
	<h1>EDUCATION</h1>
	<div class="ed-full-wrapper">
	<div class="ed-content-wrapper ed-content-1">
	<div class="ed-title">SD KRISTEN PETRA 1 SURABAYA</div>
	</div>
	<div class="ed-content-wrapper ed-content-2">
	<div class="ed-title">SMP NEGERI 1 SURABAYA</div>
	</div>
	<div class="ed-content-wrapper ed-content-3">
	<div class="ed-title">SMA NEGERI 5 SURABAYA</div>
	</div>
	<div class="ed-content-wrapper ed-content-4">
	<div class="ed-title">INSTITUT TEKNOLOGI<br>SEPULUH NOPEMBER</div>
	</div>
	</div>
	<!---->

	<!-- Background -->
	<svg id="ed-svg-circle" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 800 800" opacity="1"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="vvvortex-grad"><stop stop-color="#7FBCD2" stop-opacity="1" offset="0%"></stop><stop stop-color="#FFEEAF" stop-opacity="1" offset="100%"></stop></linearGradient></defs><g stroke="url(#vvvortex-grad)" fill="none" stroke-linecap="round"><circle r="335.5" cx="400" cy="400" stroke-width="17" stroke-dasharray="60 52" stroke-dashoffset="25" transform="rotate(114, 400, 400)"></circle><circle r="305" cx="400" cy="400" stroke-width="16" stroke-dasharray="59 50" stroke-dashoffset="25" transform="rotate(116, 400, 400)"></circle><circle r="274.5" cx="400" cy="400" stroke-width="15" stroke-dasharray="40 67" stroke-dashoffset="25" transform="rotate(279, 400, 400)"></circle><circle r="244" cx="400" cy="400" stroke-width="15" stroke-dasharray="52 76" stroke-dashoffset="25" transform="rotate(198, 400, 400)"></circle><circle r="213.5" cx="400" cy="400" stroke-width="14" stroke-dasharray="67 44" stroke-dashoffset="25" transform="rotate(255, 400, 400)"></circle><circle r="183" cx="400" cy="400" stroke-width="14" stroke-dasharray="42 58" stroke-dashoffset="25" transform="rotate(224, 400, 400)"></circle><circle r="152.5" cx="400" cy="400" stroke-width="13" stroke-dasharray="46 42" stroke-dashoffset="25" transform="rotate(315, 400, 400)"></circle><circle r="122" cx="400" cy="400" stroke-width="12" stroke-dasharray="50 30" stroke-dashoffset="25" transform="rotate(124, 400, 400)"></circle><circle r="91.5" cx="400" cy="400" stroke-width="12" stroke-dasharray="64 46" stroke-dashoffset="25" transform="rotate(138, 400, 400)"></circle><circle r="61" cx="400" cy="400" stroke-width="11" stroke-dasharray="57 58" stroke-dashoffset="25" transform="rotate(157, 400, 400)"></circle><circle r="30.5" cx="400" cy="400" stroke-width="11" stroke-dasharray="44 63" stroke-dashoffset="25" transform="rotate(13, 400, 400)"></circle></g></svg>
	<svg id="ed-svg-line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="ejbYXqZV9eW1" viewBox="0 0 1440 1024" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path d="M250.982048,343.315733c373.051743,2.703274,8.109821,516.325239,929.926083,513.621965" transform="translate(.000001 0.000001)" fill="none" stroke="#202d56" stroke-width="9" stroke-linecap="round"/></svg>
	<div class="ed-circle ed-circle-1"></div>
	<div class="ed-circle ed-circle-2"></div>
	<div class="ed-circle ed-circle-3"></div>
	<div class="ed-circle ed-circle-4"></div>
	<!---->
	</section>
	<!---->

	<!-- Experience -->
	<section id="experience">
	<!-- Layout -->
	<h1>EXPERIENCE</h1>
	<div class="exp-full-content-wrapper">
	<div class="exp-wrapper-divider">
	<div class="exp-content exp-content-1"><h2>PKMBK PMK ITS 2021/2022</h2><br>Logistic Staff</div>
	<div class="exp-content exp-content-2"><h2>Educator.id</h2><br>System Analyst & Front-End Intern</div>
	<div class="exp-content exp-content-3"><h2>PKMBK PMK ITS 2022/2023</h2><br>Chief Executive</div>
	</div>
	<div class="exp-wrapper-divider">
	<div class="exp-content exp-content-4"><h2>Generasi Baru Indonesia</h2><br>Awardee GenBI Scholarship 2022/2023</div>
	<div class="exp-content exp-content-5"><h2>GenBI Suramadu</h2><br>Logistic Staff</div>
	<div class="exp-content exp-content-6"><h2>GenBI ITS</h2><br>Media and Publication Staff</div>
	</div>
	</div>
	<!---->

	<!-- Background -->
	<svg id="exp-background" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" viewBox="0 0 1422 800"><circle r="10" cx="1332" cy="26" stroke-width="2" stroke="hsl(93, 50%, 50%)" fill="none" opacity="0.76"></circle><circle r="15.5" cx="274" cy="478" fill="hsl(155, 50%, 50%)" opacity="0.27"></circle><circle r="9.5" cx="1222" cy="775" stroke-width="2" stroke="hsl(90, 50%, 50%)" fill="none" opacity="0.44"></circle><circle r="17.5" cx="837" cy="283" fill="hsl(202, 50%, 50%)" opacity="0.15"></circle><circle r="10" cx="1259" cy="676" stroke-width="2" stroke="hsl(82, 50%, 50%)" fill="none" opacity="0.40"></circle><circle r="17" cx="903" cy="282" stroke-width="2" stroke="hsl(189, 50%, 50%)" fill="none" opacity="0.25"></circle><circle r="17.5" cx="711" cy="181" fill="hsl(202, 50%, 50%)" opacity="0.46"></circle><circle r="8.5" cx="37" cy="544" stroke-width="2" stroke="hsl(85, 50%, 50%)" fill="none" opacity="0.39"></circle><circle r="7.5" cx="1385" cy="690" fill="hsl(75, 50%, 50%)" opacity="0.93"></circle><circle r="9" cx="1350" cy="538" fill="hsl(75, 50%, 50%)" opacity="0.51"></circle><circle r="14" cx="81" cy="26" fill="hsl(168, 50%, 50%)" opacity="0.40"></circle><circle r="16.5" cx="708" cy="727" fill="hsl(199, 50%, 50%)" opacity="0.71"></circle><circle r="17.5" cx="708" cy="298" stroke-width="2" stroke="hsl(199, 50%, 50%)" fill="none" opacity="0.53"></circle><circle r="15.5" cx="953" cy="25" fill="hsl(201, 50%, 50%)" opacity="0.23"></circle><circle r="13" cx="1054" cy="213" fill="hsl(136, 50%, 50%)" opacity="0.41"></circle><circle r="8.5" cx="1276" cy="476" stroke-width="2" stroke="hsl(79, 50%, 50%)" fill="none" opacity="0.95"></circle><circle r="10.5" cx="71" cy="489" fill="hsl(103, 50%, 50%)" opacity="0.22"></circle><circle r="13" cx="1030" cy="100" fill="hsl(160, 50%, 50%)" opacity="0.44"></circle><circle r="14.5" cx="211" cy="466" fill="hsl(147, 50%, 50%)" opacity="0.44"></circle><circle r="15.5" cx="341" cy="329" stroke-width="2" stroke="hsl(155, 50%, 50%)" fill="none" opacity="0.74"></circle><circle r="11.5" cx="34" cy="77" stroke-width="2" stroke="hsl(124, 50%, 50%)" fill="none" opacity="0.84"></circle><circle r="14" cx="262" cy="197" fill="hsl(153, 50%, 50%)" opacity="0.22"></circle><circle r="16" cx="937" cy="231" fill="hsl(176, 50%, 50%)" opacity="0.13"></circle><circle r="10" cx="1247" cy="528" fill="hsl(82, 50%, 50%)" opacity="0.20"></circle><circle r="16.5" cx="581" cy="604" fill="hsl(176, 50%, 50%)" opacity="0.35"></circle><circle r="11" cx="1170" cy="314" fill="hsl(101, 50%, 50%)" opacity="0.55"></circle><circle r="12" cx="152" cy="322" fill="hsl(129, 50%, 50%)" opacity="0.58"></circle><circle r="17" cx="476" cy="83" stroke-width="2" stroke="hsl(186, 50%, 50%)" fill="none" opacity="0.93"></circle><circle r="15.5" cx="430" cy="239" stroke-width="2" stroke="hsl(154, 50%, 50%)" fill="none" opacity="0.94"></circle><circle r="17" cx="711" cy="361" stroke-width="2" stroke="hsl(199, 50%, 50%)" fill="none" opacity="0.41"></circle><circle r="8" cx="22" cy="185" fill="hsl(76, 50%, 50%)" opacity="0.58"></circle><circle r="14" cx="433" cy="678" stroke-width="2" stroke="hsl(154, 50%, 50%)" fill="none" opacity="0.79"></circle><circle r="15" cx="941" cy="127" fill="hsl(188, 50%, 50%)" opacity="0.88"></circle><circle r="16" cx="416" cy="77" stroke-width="2" stroke="hsl(190, 50%, 50%)" fill="none" opacity="0.21"></circle><circle r="17.5" cx="206" cy="27" fill="hsl(211, 50%, 50%)" opacity="0.36"></circle><circle r="17" cx="506" cy="28" fill="hsl(193, 50%, 50%)" opacity="0.97"></circle><circle r="18" cx="817" cy="230" stroke-width="2" stroke="hsl(204, 50%, 50%)" fill="none" opacity="0.36"></circle><circle r="10" cx="1172" cy="774" stroke-width="2" stroke="hsl(101, 50%, 50%)" fill="none" opacity="0.29"></circle><circle r="17.5" cx="874" cy="333" stroke-width="2" stroke="hsl(194, 50%, 50%)" fill="none" opacity="0.16"></circle><circle r="13.5" cx="999" cy="570" fill="hsl(160, 50%, 50%)" opacity="0.74"></circle><circle r="15.5" cx="618" cy="123" stroke-width="2" stroke="hsl(194, 50%, 50%)" fill="none" opacity="0.72"></circle><circle r="8.5" cx="21" cy="498" stroke-width="2" stroke="hsl(76, 50%, 50%)" fill="none" opacity="0.80"></circle><circle r="15" cx="169" cy="70" fill="hsl(182, 50%, 50%)" opacity="0.98"></circle><circle r="16" cx="679" cy="774" stroke-width="2" stroke="hsl(196, 50%, 50%)" fill="none" opacity="0.26"></circle><circle r="16" cx="882" cy="773" stroke-width="2" stroke="hsl(194, 50%, 50%)" fill="none" opacity="0.93"></circle><circle r="17.5" cx="726" cy="626" stroke-width="2" stroke="hsl(202, 50%, 50%)" fill="none" opacity="0.76"></circle><circle r="16.5" cx="609" cy="369" stroke-width="2" stroke="hsl(181, 50%, 50%)" fill="none" opacity="0.82"></circle><circle r="11.5" cx="1166" cy="468" fill="hsl(101, 50%, 50%)" opacity="1.00"></circle><circle r="17.5" cx="857" cy="178" stroke-width="2" stroke="hsl(199, 50%, 50%)" fill="none" opacity="0.94"></circle><circle r="8" cx="1400" cy="733" stroke-width="2" stroke="hsl(75, 50%, 50%)" fill="none" opacity="0.81"></circle><circle r="14.5" cx="410" cy="182" stroke-width="2" stroke="hsl(153, 50%, 50%)" fill="none" opacity="0.17"></circle><circle r="14.5" cx="348" cy="153" fill="hsl(172, 50%, 50%)" opacity="0.46"></circle><circle r="15.5" cx="389" cy="284" fill="hsl(154, 50%, 50%)" opacity="0.32"></circle><circle r="17" cx="709" cy="242" fill="hsl(199, 50%, 50%)" opacity="0.63"></circle><circle r="12" cx="1141" cy="413" stroke-width="2" stroke="hsl(107, 50%, 50%)" fill="none" opacity="0.38"></circle><circle r="17.5" cx="886" cy="670" stroke-width="2" stroke="hsl(194, 50%, 50%)" fill="none" opacity="0.70"></circle><circle r="11.5" cx="1101" cy="168" stroke-width="2" stroke="hsl(123, 50%, 50%)" fill="none" opacity="0.25"></circle><circle r="13.5" cx="1074" cy="671" fill="hsl(128, 50%, 50%)" opacity="0.36"></circle><circle r="16" cx="445" cy="27" fill="hsl(195, 50%, 50%)" opacity="0.51"></circle><circle r="17" cx="577" cy="475" fill="hsl(170, 50%, 50%)" opacity="0.88"></circle><circle r="15" cx="305" cy="597" stroke-width="2" stroke="hsl(155, 50%, 50%)" fill="none" opacity="0.75"></circle><circle r="13.5" cx="494" cy="774" fill="hsl(159, 50%, 50%)" opacity="0.79"></circle><circle r="9.5" cx="1258" cy="427" stroke-width="2" stroke="hsl(82, 50%, 50%)" fill="none" opacity="0.67"></circle><circle r="17" cx="923" cy="481" fill="hsl(183, 50%, 50%)" opacity="0.53"></circle><circle r="8.5" cx="1352" cy="403" stroke-width="2" stroke="hsl(75, 50%, 50%)" fill="none" opacity="0.30"></circle><circle r="8" cx="1399" cy="200" stroke-width="2" stroke="hsl(75, 50%, 50%)" fill="none" opacity="0.35"></circle><circle r="14.5" cx="1003" cy="772" fill="hsl(152, 50%, 50%)" opacity="0.52"></circle><circle r="15" cx="493" cy="672" stroke-width="2" stroke="hsl(159, 50%, 50%)" fill="none" opacity="0.61"></circle><circle r="14.5" cx="192" cy="622" stroke-width="2" stroke="hsl(142, 50%, 50%)" fill="none" opacity="0.81"></circle><circle r="16" cx="980" cy="74" stroke-width="2" stroke="hsl(182, 50%, 50%)" fill="none" opacity="0.55"></circle><circle r="12.5" cx="373" cy="582" fill="hsl(154, 50%, 50%)" opacity="0.26"></circle><circle r="14" cx="395" cy="730" fill="hsl(154, 50%, 50%)" opacity="0.78"></circle><circle r="16" cx="629" cy="570" fill="hsl(186, 50%, 50%)" opacity="0.24"></circle><circle r="9" cx="1394" cy="302" fill="hsl(75, 50%, 50%)" opacity="0.92"></circle><circle r="9" cx="1345" cy="728" fill="hsl(75, 50%, 50%)" opacity="0.24"></circle><circle r="18.5" cx="757" cy="451" fill="hsl(206, 50%, 50%)" opacity="0.16"></circle><circle r="14.5" cx="462" cy="727" fill="hsl(154, 50%, 50%)" opacity="0.20"></circle><circle r="12.5" cx="148" cy="675" fill="hsl(129, 50%, 50%)" opacity="0.20"></circle><circle r="11" cx="1213" cy="26" fill="hsl(109, 50%, 50%)" opacity="0.21"></circle><circle r="15" cx="254" cy="639" stroke-width="2" stroke="hsl(153, 50%, 50%)" fill="none" opacity="0.91"></circle><circle r="12.5" cx="154" cy="442" stroke-width="2" stroke="hsl(129, 50%, 50%)" fill="none" opacity="0.56"></circle><circle r="13.5" cx="334" cy="492" fill="hsl(155, 50%, 50%)" opacity="0.12"></circle><circle r="15.5" cx="976" cy="375" stroke-width="2" stroke="hsl(168, 50%, 50%)" fill="none" opacity="0.20"></circle><circle r="18.5" cx="758" cy="136" fill="hsl(213, 50%, 50%)" opacity="0.29"></circle><circle r="18.5" cx="735" cy="506" stroke-width="2" stroke="hsl(205, 50%, 50%)" fill="none" opacity="0.80"></circle><circle r="11.5" cx="1119" cy="773" fill="hsl(114, 50%, 50%)" opacity="0.21"></circle><circle r="17" cx="631" cy="27" stroke-width="2" stroke="hsl(207, 50%, 50%)" fill="none" opacity="0.18"></circle><circle r="9.5" cx="1298" cy="387" fill="hsl(77, 50%, 50%)" opacity="0.90"></circle><circle r="17" cx="884" cy="431" stroke-width="2" stroke="hsl(194, 50%, 50%)" fill="none" opacity="0.11"></circle><circle r="10.5" cx="1222" cy="474" fill="hsl(90, 50%, 50%)" opacity="0.33"></circle><circle r="14.5" cx="1014" cy="418" stroke-width="2" stroke="hsl(152, 50%, 50%)" fill="none" opacity="0.30"></circle><circle r="17.5" cx="651" cy="271" fill="hsl(191, 50%, 50%)" opacity="0.58"></circle><circle r="13.5" cx="371" cy="451" stroke-width="2" stroke="hsl(154, 50%, 50%)" fill="none" opacity="0.36"></circle><circle r="13" cx="1121" cy="72" stroke-width="2" stroke="hsl(129, 50%, 50%)" fill="none" opacity="0.30"></circle><circle r="10.5" cx="1272" cy="27" fill="hsl(96, 50%, 50%)" opacity="0.83"></circle><circle r="8.5" cx="1352" cy="79" fill="hsl(81, 50%, 50%)" opacity="0.33"></circle><circle r="12.5" cx="1063" cy="773" stroke-width="2" stroke="hsl(136, 50%, 50%)" fill="none" opacity="0.32"></circle><circle r="14.5" cx="235" cy="149" stroke-width="2" stroke="hsl(168, 50%, 50%)" fill="none" opacity="0.72"></circle><circle r="15.5" cx="315" cy="433" fill="hsl(155, 50%, 50%)" opacity="0.77"></circle><circle r="9" cx="1395" cy="354" fill="hsl(75, 50%, 50%)" opacity="0.85"></circle><circle r="11.5" cx="1098" cy="569" fill="hsl(121, 50%, 50%)" opacity="0.52"></circle><circle r="8.5" cx="1346" cy="482" fill="hsl(75, 50%, 50%)" opacity="0.46"></circle><circle r="11.5" cx="1089" cy="22" fill="hsl(159, 50%, 50%)" opacity="0.45"></circle><circle r="13" cx="1081" cy="411" fill="hsl(128, 50%, 50%)" opacity="0.68"></circle><circle r="11" cx="68" cy="176" stroke-width="2" stroke="hsl(110, 50%, 50%)" fill="none" opacity="0.18"></circle></svg>
	<!---->
	</section>
	<!---->

	<!-- Skill -->
	<section id="skill">
	<h1>SKILL</h1>
	<div class="skill-full-wrapper">
	<div class="skill-content-wrapper">
	<div class="skill-title">LANGUAGE</div>
	<div class="skill-items-wrapper">
	<div class="skill-items">INDONESIA - Native Speaker</div>
	<div class="skill-items">ENGLISH - Professional Working Profeciency</div>
	</div>
	</div>
	<div class="skill-content-wrapper">
	<div class="skill-title">SOFT SKILL</div>
	<div class="skill-items-wrapper">
	<div class="skill-items">Team Leadership - Proficient Leader</div>
	<div class="skill-items">Teamwork - Reliable Team Member</div>
	<div class="skill-items">Problem Solving - Creative Thinker</div>
	<div class="skill-items">Communication - Effective Communicator</div>
	</div>
	</div>
	<div class="skill-content-wrapper">
	<div class="skill-title">HARD SKILL</div>
	<div class="skill-items-wrapper">
	<div class="skill-items">HTML - Proficient</div>
	<div class="skill-items">CSS - Proficient</div>
	<div class="skill-items">JavaScript - Intermediate JavaScript (Specialty in Front-End)</div>
	<div class="skill-items">Java - Intermediate Java</div>
	<div class="skill-items">C/C++ - Proficient</div>
	<div class="skill-items">C# - Proficient (Specialty in Unity Framework for AR Development)</div>
	<div class="skill-items">Unity3D - Proficient Working Profeciency (9mos in the AR Industry)</div>
	</div>
	</div>
	</div>
	</section>
	</body>
	</html>

view raw index.html hosted with ❤ by GitHub

Kode CSS

	/* IMPORTS */

	/* Fonts */
	@import url('https://fonts.googleapis.com/css2?family=Anton&family=Dosis:wght@700;800&family=Qwitcher+Grypen&family=Source+Serif+Pro:wght@400&display=swap');
	/* ============================ */

	/* Utilities */

	* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	}

	html,
	body {
	scroll-behavior: smooth;
	overflow-x: hidden;
	}

	body {
	background-color: #f0f8ff;
	}

	a,
	a:hover,
	a:active {
	text-decoration: none;
	}

	button {
	border: none;
	background: none;
	}

	button:hover {
	cursor: pointer;
	}

	ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	}

	/* ============================ */

	/* Header Layout */
	#header {
	padding-left: 4%;
	padding-right: 4%;

	height: 100vh;

	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid blue;
	}

	.header-left {
	height: 100%;
	width: 45%;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	}

	.header-left >
	h1 {
	color: 202D56;

	font-family: 'Qwitcher Grypen';
	font-style: normal;
	font-weight: 400;
	font-size: 96px;
	line-height: 106px;
	}

	.header-left >
	h2 {
	font-family: 'Dosis';
	font-style: normal;
	font-weight: 700;
	font-size: 64px;
	line-height: 81px;


	background: radial-gradient(100% 1251.06% at 0% 0%, #202D56 0%, #7FBCD2 56.38%, #FFEEAF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.header-right {
	height: 100%;
	width: 55%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.header-right >
	a {
	width: 80%;
	display: flex;
	justify-content: center;
	}

	.header-right >
	a >
	button {
	width: 75%;
	height: 56px;

	color: white;

	font-family: 'Dosis';
	font-style: normal;
	font-weight: 600;
	font-size: 32px;
	line-height: 46px;

	border-radius: 35px;
	background: linear-gradient(90deg, #202D56 0%, #7FBCD2 50.52%, #FFEEAF 100%);
	box-shadow: 0px 0px 22px #7FBCD2;
	transition: ease-out 0.4s;
	}

	.header-right >
	a >
	button:hover {
	width: 90%;
	letter-spacing: .08em;
	}

	.header-right >
	a >
	button:active {
	width: 85%;
	letter-spacing: .02em;
	}

	/* ============================ */

	/* Header Background */

	.header-background {
	position: absolute;
	top: 24px;
	left: 695px;
	z-index: -1;

	width: 685px;
	height: 749px;
	}

	.header-background >
	.blue-circle {
	position: absolute;
	top: 64px;

	width: 415px;
	height: 415px;

	border-radius: 50%;
	background: #7FBCD2;
	}

	.header-background >
	.orange-circle {
	position: absolute;
	top: 315px;
	left: 235px;

	width: 450px;
	height: 450px;

	border-radius: 50%;
	background: #FFEEAF;
	}

	.html-logo,
	.css-logo,
	.js-logo {
	z-index: 1;
	}

	.html-logo {
	position: absolute;
	top: 0px;
	left: 532px;

	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	transform: rotate(-5.98deg);
	}

	.css-logo {
	position: absolute;
	top: 12px;
	left: 130px;

	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	transform: rotate(12.03deg);
	}

	.js-logo {
	position: absolute;
	top: 295px;
	left: 575px;

	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	transform: rotate(6.23deg);
	}

	/* ============================ */

	/* About Layout */

	#about {
	padding-left: 4%;
	padding-right: 4%;

	height: 100vh;

	display: flex;
	align-items: center;
	justify-content: space-evenly;
	border: 1px solid red;
	}

	.about-right {
	width: 50%;
	}

	.about-right >
	h1 {
	font-family: 'Anton', sans-serif;
	font-size: 72px;

	letter-spacing: .1em;

	background: radial-gradient(100% 1251.06% at 0% 0%, #202D56 0%, #7FBCD2 56.38%, #FFEEAF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.about-right >
	h3 {
	color: #202D56;

	font-family: 'Dosis', sans-serif;
	font-size: 24px;
	}

	/* ============================ */

	/* About Background */

	.about-background {
	z-index: -1;
	}

	.about-background >
	.orange-circle {
	position: absolute;
	top: 690px;
	left: 64px;

	width: 495px;
	height: 495px;

	border-radius: 50%;
	background: #FFEEAF;
	}

	.about-background >
	.green-circle {
	position: absolute;
	top: 1280px;
	left: 1000px;

	width: 200px;
	height: 200px;

	border-radius: 50%;
	background: #7FBCD2;
	}

	/* ============================ */

	/* Education Layout */
	#education {
	padding-left: 4%;
	padding-right: 4%;

	height: 100vh;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	border: 1px solid red;
	}

	#education >
	h1 {
	width: 100%;
	height: 20%;
	padding: 3%;

	display: flex;
	align-items: center;
	justify-content: flex-start;

	font-family: 'Dosis', sans-serif;
	font-weight: 800;
	font-size: 64px;

	background: radial-gradient(100% 100% at 0% 0%, #202D56 0%, #7FBCD2 56.38%, #FFEEAF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.ed-content-wrapper {
	font-family: "Dosis", sans-serif;
	font-size: 24px;

	color: #202D56;
	border: 1px solid red;
	}

	.ed-content-1 {
	position: absolute;
	top: 1580px;
	left: 280px;
	}

	.ed-content-1:after {
	display: none;
	content: "This is my elementary school and i learned a lot of things here from 2007 to 2014";
	position: absolute;
	top: 80px;
	left: 0;

	width: 80%;
	height: 100%;

	font-family: 'Source Serif Pro', serif;
	font-size: 18px;
	}

	.ed-content-1:hover:after {
	display: block;
	}

	.ed-content-2 {
	position: absolute;
	top: 1760px;
	left: 640px;
	}

	.ed-content-2::after {
	display: none;
	content: "This is my middle school. I really have a really fun times during this times from 2014 to 2017";
	position: absolute;
	top: 0px;
	left: -250px;

	width: 75%;

	font-family: 'Source Serif Pro', serif;
	font-size: 18px;
	}

	.ed-content-2:hover::after {
	display: block;
	}

	.ed-content-3 {
	position: absolute;
	top: 1990px;
	left: 580px;
	}

	.ed-content-3::after {
	display: none;
	content: "This is where i really interested in technological developments. I learn here from 2017 to 2020";
	position: absolute;
	top: -180px;
	left: 150px;

	width: 75%;

	font-family: 'Source Serif Pro', serif;
	font-size: 18px;
	}

	.ed-content-3:hover::after {
	display: block;
	}

	.ed-content-4 {
	position: absolute;
	top: 1915px;
	left: 925px;
	}

	.ed-content-4::after {
	display: none;
	content: "This is where i started to learn coding and stuff. I really liked the environment in ITS. I hope I could graduated from college in 2024";
	position: absolute;
	top: 120px;

	width: 100%;

	font-family: 'Source Serif Pro', serif;
	font-size: 18px;
	}

	.ed-content-4:hover::after {
	display: block;
	}

	/* ============================ */

	/* Education Background */
	#ed-svg-circle {
	position: absolute;
	top: 1690px;
	left: -350px;
	z-index: -1;

	width: 50%;
	}

	#ed-svg-line {
	position: absolute;
	top: 1380px;
	left: 250px;
	z-index: -1;

	width: 70%;
	}

	.ed-circle {
	width: 25px;
	height: 25px;

	border-radius: 50%;
	background: radial-gradient(#7FBCD2, #202D56);
	}

	.ed-circle-1 {
	position: absolute;
	top: 1622px;
	left: 420px;
	}

	.ed-circle-2 {
	position: absolute;
	top: 1780px;
	left: 600px;
	}

	.ed-circle-3 {
	position: absolute;
	top: 1945px;
	left: 760px;
	}

	.ed-circle-4 {
	position: absolute;
	top: 1998px;
	left: 1000px;
	}

	/* ============================ */

	/* Experience Layout */

	#experience {
	padding-top: 2%;
	padding-left: 4%;
	padding-right: 4%;

	height: 100vh;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	border: 1px solid red;
	}

	#experience > h1 {
	font-family: 'Dosis', sans-serif;
	font-weight: 800;
	font-size: 64px;

	background: radial-gradient(100% 100% at 0% 0%, #202D56 0%, #7FBCD2 56.38%, #FFEEAF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.exp-full-content-wrapper {
	padding-top: 2%;

	height: 90%;
	width: 90%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}

	.exp-content {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 500;
	}

	.exp-content >
	h2 {
	font-family: 'Source Serif Pro', serif;
	letter-spacing: .1em;
	}

	.exp-wrapper-divider {
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: space-evenly;
	}

	.exp-content {
	width: 100%;
	height: 100%;

	color: #202D56;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	border: 2px solid #202D56;
	transition: all .5s;
	}

	.exp-content-1::after {
	display: none;
	content: "I learned a lot about logistics and Standart Operating Procedure in ITS";
	padding: 5% 15%;
	}

	.exp-content-2::after {
	display: none;
	content: "I learned a lot about how the real-life industry works and how to implement my skill in the Startup industry";
	padding: 5% 15%;
	}

	.exp-content-3::after {
	display: none;
	content: "I am learning a lot about how to manage a team and how to manage a project. I also learn a lot about people characteristics and how to manage them";
	padding: 5% 15%;
	}

	.exp-content-4::after {
	display: none;
	content: "I am thankful for this opportunity for becoming Bank Indonesia Scholarship's Awardee.";
	padding: 5% 15%;
	}

	.exp-content-5::after {
	display: none;
	content: "This is one of my way to give back to Bank Indonesia for trusting me to become the Scholarship's Awardee";
	padding: 5% 15%;
	}

	.exp-content-6::after {
	display: none;
	content: "I am also thankful for ITS because trusting me to become the Scholarship's Awardee. So this is one of my way to give back to ITS";
	padding: 5% 15%;
	}

	.exp-content:hover {
	background: linear-gradient(0deg, #FFEEAF 0%, #7FBCD2 40.38%);
	color: #f0f8ff;
	}

	.exp-content:hover::after {
	display: block;
	}

	/* ============================ */

	/* Experience Background */

	#exp-background {
	position: absolute;
	left: 0%;

	z-index: -2;
	}
	/* ============================ */

	/* Skill Layout */
	#skill {
	padding: 4% 2%;

	height: 120vh;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	border: 1px solid red;
	}

	#skill >
	h1 {
	font-family: 'Dosis', sans-serif;
	font-weight: 800;
	font-size: 64px;

	background: radial-gradient(100% 100% at 0% 0%, #202D56 35%, #7FBCD2 60.38%, #FFEEAF 150%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	}

	.skill-full-wrapper {
	padding-top: 2%;

	height: 90%;
	width: 90%;

	color: #202D56;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	}

	.skill-content-wrapper {
	padding: 0% 10%;

	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

	.skill-content-wrapper > * {
	border: 2px solid #202D56;
	}

	.skill-content-wrapper >
	.skill-title {
	width: 50%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	font-family: 'Source Serif Pro', serif;
	font-size: 32px;
	letter-spacing: .1em;

	color: #f0f8ff;
	background:linear-gradient(0deg, #7FBCD2 0%, #202D56 50.38%);
	}

	.skill-content-wrapper >
	.skill-items-wrapper {
	padding: 0 2%;

	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-evenly;

	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight: 500;
	font-size: 16px;
	}

	/* ============================ */

	/* Skill Background */
	/* ============================ */

view raw style.css hosted with ❤ by GitHub

Referensi :

http://fajarbaskoro.blogspot.com/2022/08/1-membuat-situs-pribadi-dengan-html-dan.html

Cari Blog Ini

IT Blog

Membuat Situs Pribadi menggunakan HTML dan CSS

Komentar

Posting Komentar

Postingan populer dari blog ini

Dokumentasi ETS PWEB 2022

Programming in Java : Mengubah Ekspresi Infix menjadi Postfix

Implementasi Stack di Java