Started design.

assets/scss/_font.scss

@@ -0,0 +1,35 @@
+@font-face {
+    font-family: "Open Sans";
+    font-style: italic;
+    font-weight: normal;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url("../font/OpenSans-Italic.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: normal;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url("../font/OpenSans-Regular.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: bold;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url("../font/OpenSans-Bold.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "Open Sans";
+    font-style: italic;
+    font-weight: bold;
+    font-stretch: 100%;
+    font-display: swap;
+    src: url("../font/OpenSans-BoldItalic.ttf") format("truetype");
+}

assets/scss/main.scss

@@ -1,4 +1,69 @@
-body {
-	max-width: 800px;
-	margin: 40px;
+@import "_font.scss";
+
+$borderRadius: 8px;
+$textColor: #0f0f0f;
+$highlight: #d76f30;
+
+* {
+	box-sizing: border-box;
+	font-family: "Open Sans", sans-serif;
+	font-size: 18px;
+	line-height: 1.5;
+	color: $textColor;
+}
+
+body {
+	padding: 80px 40px;
+	max-width: 1000px;
+	margin: 0 auto;
+}
+
+h1 {
+	font-size: 32px;
+	margin: 0 0 40px 0;
+	font-weight: normal;
+}
+
+a {
+	text-decoration: none;
+}
+
+nav {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 0 0 40px 0;
+
+	.contact {
+		display: inline-block;
+		padding: 8px 16px;
+		border-radius: $borderRadius;
+		border: 1px solid $highlight;
+		color: $textColor;
+		transition: all 0.3s;
+
+		&:hover {
+			background: $highlight;
+		}
+	}
+}
+
+.intro {
+	article {
+		display: flex;
+		gap: 40px;
+		justify-content: flex-start;
+		align-items: center;
+
+		h1 {
+			margin: 0;
+		}
+
+		img {
+			max-width: 256px;
+			max-height: 256px;
+			aspect-ratio: 1;
+			border-radius: $borderRadius;
+		}
+	}
 }