This tutorial will guide you through creating an abstract human figure using only HTML & CSS. Follow the steps below to reproduce the project locally.
- Create index.html and add the HTML markup.
- Create style.css and add the CSS styles.
- Create index.js and add the JavaScript if needed.
HTML
HTML Code for Abstract Human Figure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content">
<div class="face"></div>
<div class="hand"></div>
<div class="body1"></div>
<div class="body2"></div>
<div class="foot1"></div>
<div class="foot2"></div>
<div class="foot3"></div>
</div>
</body>
</html>
CSS
CSS Code Abstract Human Figure.
*{
padding: 0;
margin: 0;
}
body{
background: white;
}
.content{
background: rgb(255, 255, 255);
height: 100vh;
width: 100%;
display: grid;
place-items: center;
}
.face{ /* ... */ }
What is HTML
HTML, or HyperText Markup Language, is the standard markup language used to create and design documents on the World Wide Web.
What is CSS
CSS, or Cascading Style Sheets, is a language used to style the presentation of web documents written in HTML and XML.
What is JavaScript
JavaScript is a versatile programming language used for creating dynamic and interactive web content.
Comments