Цель такова: Сделать рядом с видео его описание.
Адекватно сделать у меня не получается.
Уже пробовал float:left, right
. text-align: center, left, right
.
а хотелось бы получить что то типо этого:
body {
line-height: 1.5;
}
.page {
font-family: Arial, sans-serif;
width: 1000px;
margin: 20px auto;
background-color: white;
}
.header {
background-color: black;
padding: 20px;
}
.title {
margin: 0;
font-size: 20px;
color: white;
text-align: center;
}
.sub_title {
margin: 0;
font-size: 13px;
color: white;
text-align: center;
}
.nav {
text-align: center;
justify-content: center;
display: flex;
}
.link {
padding: 8px 12px;
color: black;
text-decoration: none;
}
main {
display: block;
}
aside {
display: block;
}
.content {
width: 1000px;
float: left;
}
.image {
margin: 0;
margin-bottom: 20px;
border-radius: 15px;
}
.content-title {
margin: 0px;
color: rgb(44, 44, 44);
font-size: 28px;
margin-bottom: 45px;
}
.content-title2 {
margin: 0px;
color: rgb(44, 44, 44);
font-size: 28px;
margin-bottom: 45px;
margin-top: 10px;
padding-top: 20px;
border-top: 1px solid black;
}
.link:hover {
background-color: rgb(0, 0, 0, 0.2);
}
.article {
padding-bottom: 20px;
border-bottom: 1px solid rgb(26, 25, 46);
padding-top: 20px;
}
.article-title {
color: rgb(31, 25, 95);
font-size: 18px;
text-decoration: none;
margin-top: 10px;
font-weight: bold;
}
.time {
font-size: 13px;
margin-left: 5px;
}
.article-text {
font-weight: 1;
margin-left: 5px;
}
.read_all {
font-size: 15px;
}
.footer {
background-color: black;
margin: 0px;
margin-top: 30px;
color: white;
padding: 20px;
margin-bottom: 30px;
}
.uvideo {
padding-top: 10px;
background-color: rgb(241, 241, 241);
border-radius: 5px;
}
.uvideo-content {
padding-left: 5px;
border-radius: 10px;
}
.uvideo-content_text {
font-size: 15px;
padding: 3px;
display: flex;
align-items: flex-start;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Простая страница</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="page" id="part1">
<div class="header">
<h1 class="title">Мой первый сайт</h1>
<h2 class="sub_title">Добро пожаловать</h2>
</div>
<div class="nav">
<a class="link" href="#part1">Главная</a>
<a class="link" href="#part2">Новости</a>
<a class="link" href="#part3">Видео</a>
<a class="link" href="#">Об авторе</a>
</div>
<div class="container">
<main class="content">
<img src="1000px-Mount_Everest_as_seen_from_Drukair2.jpg" class="image">
<h3 class="content-title" id="part2">Новости</h3>
<article class="article">
<a href="#" class="article-title">Заголовок новости</a>
<p></p>
<time class="time" datetime="21-12-2020 19:21">Вчера в 19:21</time>
<div class="article-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="read_all" id="show-moddal">Читать полностью</a>
</div>
</article>
<article class="article">
<a href="#" class="article-title">Заголовок новости</a>
<p></p>
<time class="time" datetime="21-12-2020 19:21">Вчера в 19:21</time>
<!-- Сделать сайт шире!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
<div class="article-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#" class="read_all" id="show-moddal">Читать полностью</a>
</div>
<h3 class="content-title2">Видео</h3>
<div class="uvideo">
<iframe class="uvideo-content" id="part3" width="560" height="315" src="https://www.youtube.com/embed/RkRwLUf8YCQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="uvideo-content_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>
</article>
<div class="footer">
<p class="footer-logo">Сделано мной</p>
</div>
</main>
</div>
</div>
<script src="main.js"></script>
</body>
</html>