Untitled

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Experimental Graphic Design Portfolio</title> 
    <style> 
      /* Add CSS styles for the website layout and design */ 
      body { 
        font-family: Arial, sans-serif; 
        background-color: #F2F2F2; 
        padding: 30px; 
      } 
      h1 { 
        text-align: center; 
        margin-bottom: 50px; 
      } 
      .card { 
        display: flex; 
        flex-direction: column; 
        background-color: white; 
        box-shadow: 0px 0px 10px #BBBBBB; 
        padding: 20px; 
        margin-bottom: 30px; 
        text-align: center; 
      } 
      .card img { 
        width: 100%; 
        height: 200px; 
        object-fit: cover; 
      } 
      .card h2 { 
        margin-top: 20px; 
      } 
      .card p { 
        font-size: 14px; 
        margin-top: 10px; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>Experimental Graphic Design Portfolio</h1> 
    <div class="card"> 
      <img src="project1.jpg" alt="Project 1"> 
      <h2>Project 1</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo, enim eu commodo congue, purus lectus eleifend purus, id laoreet quam odio ac lacus.</p> 
    </div> 
    <div class="card"> 
      <img src="project2.jpg" alt="Project 2"> 
      <h2>Project 2</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo, enim eu commodo congue, purus lectus eleifend purus, id laoreet quam odio ac lacus.</p> 
    </div> 
    <div class="card"> 
      <img src="project3.jpg" alt="Project 3"> 
      <h2>Project 3</h2> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin commodo, enim eu commodo congue, purus lectus eleifend purus, id laoreet quam odio ac lacus.</p> 
    </div> 
    <!-- Add JavaScript for additional functionality (optional) --> 
  </body> 
</html>
Editor is loading...