Я создаю свою первую личную веб-страницу, но у меня возникают проблемы с ее корректным отображением в Chrome. Что я делаю не так с моим встроенным html / css кодом?
Когда я открываю его с моего ноутбука в виде файла .html, он корректно показывает нужный мне шрифт, стиль изображения и т. Д. Проблема в том, что когда я открываю его как электронное письмо, которое я отправляю, оно отображается без шрифта и без моего изображения справа (в виде круга). Я не знаю, что еще я могу сделать, чтобы решить эту проблему. Я новичок, и если у вас есть больше знаний, я буду признателен за помощь.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cecilia Cevi</title>
<link
href="https://fonts.googleapis.com/css
family=Open+Sans+Condensed:300&display=swap"
rel="stylesheet">
</head>
<body
style="font-family: 'Open Sans Condensed', sans-serif; background-
color: #0B0C10; font-size:20px">
<div class="left">
<header>
<h1
style="color:#66FCF1; font-family:'Open Sans Condensed', sans-s
serif; background-color: #1F2833; border:1px solid white; width:
200px;">Cecila Cevi</h1>
</header>
</div>
<div class="wrapper">
<style>
img {
float: right;
border-radius: 50%;
}
</style>
<img class="profile-picture"
src="https://i.lensdump.com/i/ilE9n0.jpg" alt="girl" width="400"
float: " right " radius: "50%" />
</div>
<div>
<main
style="background-color: #1F2833;border: 1px solid black: width:
300px; max-width:1000px;">
<h2 style="color: #66FCF1;">Biography</h2>
<p style="color: #C5C6C7;">Information</p>
<hr>
<h2 style="color: #66FCF1;">My Work</h2>
<p style="color: #C5C6C7;">In the</p>
<hr>
</div>
<div style="background-color: #45A29E; border: 1px solid white;">
<h2 style="color: #C5C6C7;">Digital Projects</h2>
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/350" alt="empty">
</a>
</div>
</main>
</body>
</html>