1<!DOCTYPE html>
2<html>
3<head>
4<style>
5 body {
6 margin: 0;
7 padding: 0;
8 }
9 .blue-rectangle {
10 background-color: #ADD8E6; /* Light blue color */
11 height: 50%; /* Assuming 50% of the viewport height */
12 display: flex;
13 justify-content: center;
14 align-items: center;
15 }
16 .white-rectangle {
17 background-color: #FFFFFF;
18 height: 50%; /* Assuming 50% of the viewport height */
19 }
20 .teardrop {
21 stroke: #0000FF; /* Blue color */
22 stroke-width: 2;
23 fill: none;
24 width: 20px;
25 height: 20px;
26 }
27</style>
28</head>
29<body>
30 <div class="blue-rectangle">
31 <svg class="teardrop" viewBox="0 0 20 20">
32 <path d="M10 0L15 20H5Z" />
33 </svg>
34 </div>
35 <div class="white-rectangle"></div>
36</body>
37</html>