add: project placeholders

index.html

@@ -45,9 +45,10 @@
 				participate in game-jams.
 			</p>
 			<p>
-				My interests in computer science are rather broad. My main focus lies in game development, web development and computer
+				My interests in computer science are rather broad. My main focus lies in game development, web
+				development and computer
 				graphics. But I also have a keen interest in algorithms and artificial intelligence. Next year I will
-				start a master's degree in artificial intelligence at the TU Delft or TU Eindhoven
+				start a master's degree in artificial intelligence at the TU Delft or TU Eindhoven.
 			</p>
 			<hr>
 			<h1 id="skills">SKILLS</h1>
@@ -95,13 +96,35 @@
 			</div>
 			<hr>
 			<h1 id="projects">PROJECTS</h1>
-			<p>
-				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus dignissim rutrum. Suspendisse vel
-				dapibus risus. Morbi vitae sodales nisi, vitae convallis dolor. In non vulputate magna. Praesent
-				ultrices, tellus nec lacinia molestie, dui mi aliquet mi, imperdiet ultricies neque lacus blandit risus.
-				Curabitur condimentum nisi sit amet dui auctor malesuada. Integer eleifend nisi mi, in tempus tortor
-				fringilla ac. Donec ultrices lacus feugiat, feugiat tortor vitae, tincidunt risus.
-			</p>
+			<div class="projects">
+				<div class="project">
+					<img src="./images/projects/placeholder.jpg">
+					<div>
+						<h2>Project</h2>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare commodo purus at gravida. Etiam quis metus eu tortor luctus mollis. In tempus venenatis arcu, ut convallis sem iaculis vitae. Sed aliquet dui eu est iaculis, vitae vulputate urna suscipit. Pellentesque sit amet ligula sed eros ultrices suscipit.
+						</p>
+					</div>
+				</div>
+				<div class="project">
+					<img src="./images/projects/placeholder.jpg">
+					<div>
+						<h2>Project</h2>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare commodo purus at gravida. Etiam quis metus eu tortor luctus mollis. In tempus venenatis arcu, ut convallis sem iaculis vitae. Sed aliquet dui eu est iaculis, vitae vulputate urna suscipit. Pellentesque sit amet ligula sed eros ultrices suscipit.
+						</p>
+					</div>
+				</div>
+				<div class="project">
+					<img src="./images/projects/placeholder.jpg">
+					<div>
+						<h2>Project</h2>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ornare commodo purus at gravida. Etiam quis metus eu tortor luctus mollis. In tempus venenatis arcu, ut convallis sem iaculis vitae. Sed aliquet dui eu est iaculis, vitae vulputate urna suscipit. Pellentesque sit amet ligula sed eros ultrices suscipit.
+						</p>
+					</div>
+				</div>
+			</div>
 			<hr>
 			<h1 id="contact">CONTACT</h1>
 			<p>

styles.css

@@ -22,6 +22,13 @@ h1{
     color:#212121;
     font-size: 2rem;
     margin-bottom: 10px;
+    margin-top: 0;
+}
+hr{
+    margin: 35px auto;
+    border: 0;
+    border-top: 1px solid #808080;
+
 }
 p{
     color:#424242;
@@ -134,23 +141,24 @@ nav a:hover{
     margin: 0;
 }
 
-form{
+.projects{
     display: flex;
     flex-direction: column;
-    width: 50%;
-    margin: auto;
+    gap: 15px;
 }
-input{
-    width: 100%;
-    height: 25px;
-    border: 2px solid #e0e0e0;
-    padding: 5px;
-    margin-bottom: 10px;
+
+.project{
+    height: 200px;
+    display: flex;
+    flex-direction: row;
+    gap: 15px;
 }
-textarea{
-    width: 100%;
-    height: 100px;
-    border: 2px solid #e0e0e0;
-    padding: 2px;
-    margin-bottom: 10px;
+
+.project img{
+    width: 300px;
+    height: 200px;
+    object-fit: cover;
+}
+.project h2, p{
+    margin: 0;
 }