Я только что узнал, что проверял мою собственную страницу, созданную до сих пор, у меня есть основной div, который берет первый раздел в нем с css и всем, однако это занимает только до H1, div с информацией не включен в этом. ПОЛНЫЙ КОД Извините, что это так грязно HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>SmashingConf SF 2020 (November 10–11) — Friendly, inclusive, practical event
for web designers and developers. - SmashingConf SF 2020, November 10—11 </title>
<!--copied from website -->
</head>
<body>
<div class="main">
<div class="background">
<picture>
<img
src="https://d33wubrfki0l68.cloudfront.net/c1c98ee82fdf48d7336ff0e81fb58edce8f6ab3c/8ceaa/images/logo/logo.svg"
class="picture1" alt="First picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/01d39b8f9052067758bba263382663824b716604/80124/images/events/nav/online-workshops.svg"
class="picture2" alt="Secound picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/122011923c166667a82e110879cb68c36efbb1db/35e97/images/events/nav/freiburg-2020.svg"
class="picture2" alt="Secound picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/2ab6033bf90bcab710c1c4b4dc86a3389b369e80/341c5/images/events/nav/austin-2020.svg"
class="picture2" alt="Secound picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/415d6bcc50d0ff005936651006cad3862dfa13bf/096b1/images/events/nav/ny-2020.svg"
class="picture2" alt="Secound picture">
<img
src="https://d33wubrfki0l68.cloudfront.net/0938f079770a465a5c01fcf9f826b9d0123ee149/fc3dc/images/events/nav/sf-2020-rescheduled.svg"
class="picture2" alt="Secound picture">
</picture>
<nav class="m" role="navigation">
<ul>
<li><a class="active" href="/sf-2020">Home</a></li>
<li><a href="/sf-2020/speakers">Speakers</a></li>
<li><a href="/sf-2020/schedule">Schedule</a></li>
<li><a href="/sf-2020/workshops">Workshops</a></li>
<li><a href="/sf-2020/locations">Locations</a></li>
<li><a href="/sf-2020/sponsors">Partners</a></li>
<li><a href="/sf-2020/registration"><strong>Tickets</strong></a></li>
</ul>
</nav>
<section class="section1">
<div class="apology">
<table>
<tr>
<td>
<p>Unfortunately, due to recommendations from the SF Mayor's office restricting group size, and with
countless
travel bans in place affecting speakers, attendees, and team members, we cannot give you the
conference
experience you expect and deserve. For these, and many more reasons, <b>SmashingConf SF (April 21–22)
is
re-scheduled for November 10–11, 2020.</b></p>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/83ed4a85d70130df5dcbcb93a5370118f898d495/7fa75/images/helpers/sad-cat.svg"
class="picture3" alt="third picture"></td>
</tr>
</table>
</div>
<div class="information">
<table>
<tr>
<td>
<p>
For SmashingConf SF <span class="small-caps">2020</span>
,<b>November 10–11</b>, we’re bringing back two full days packed with front-end, UX
and all that jazz! Live sessions on <b>performance</b>
, accessibility, interface design, copywriting, designing
for emotion, debugging and fancy CSS/JS techniques — and a few surprises along the way. ?
</p>
<p>
Feel excited to join, but you think your manager could need just a little bit more persuasion? We’ve
prepared a neat visual Convince Your Boss PDF and a Letter For The Boss Template. Good luck!
?????
</p>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/0938f079770a465a5c01fcf9f826b9d0123ee149/fc3dc/images/events/nav/sf-2020-rescheduled.svg"
class="picture4" alt="fourth picture"></td>
</tr>
</div>
<div class="speakers">
<table>
<h2 style="color: blue;">Our Smashing Speakers</h2>
<tr>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/ed619878a72d086fef28c393fcbef985d9f0225b/9a9ff/images/speakers/chris-coyier.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/eb8f2292998adc841060f9139bcc05f14cae15ba/2afd6/images/speakers/whitney-homans.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/1267e40e21e92b8950fc41ef9c173d37b5e72c16/77ec1/images/speakers/phil-hawksworth.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/3c8cc2c2d722d693cb3df63f67053fe8390fc7f8/f9b1f/images/speakers/eva-ferreira.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<tr>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/346eb539774acb2594af41b257203d1a292e5e16/2d5d4/images/speakers/aarron-walter.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/9d5e8ffda6f4086cb4825d019a78389447a479d1/fa9dc/images/speakers/cassidy-williams.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/daf5eceae9b67999b3228bc90df96803833b8ab3/942f0/images/speakers/kevin-powell.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/dbd2e283f704c650eb82a2af2da08b42a0d1ea10/b1ca8/images/speakers/nathan-curtis.jpg"
class="Personas" alt="fourth picture"></td>
</td>
</tr>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/1c07d8442f6052a2f2876fff0f029bb8be665169/e41dc/images/speakers/monica-dinculescu.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/126e971632c807a1510e4479322582aa66a486c4/3b08f/images/speakers/graham-mcdonnell.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/ea54f2099057a3630c639bafabc1ec3857eb9fe5/e4264/images/speakers/sara-soueidan.jpg"
class="Personas" alt="fourth picture"></td>
</td>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/c69cefb0d82b404d27b737e2be6c160238abf755/12ac7/images/speakers/marc-edwards.jpg"
class="Personas" alt="fourth picture"></td>
</td>
</tr>
<td><img
src="https://d33wubrfki0l68.cloudfront.net/47c04c1ce46b5066610cbc9ccfaf8066728b263f/c697e/images/speakers/mystery-sf-2019.png"
class="Personas" alt="fourth picture"></td>
</td>
</table>
</div>
</section>
<section class="section2">
<div class="like">
<h1>What’s Smashing Conference Like?</h1>
</div>
<div class="firstBlock">
<div class="left">
<p>
<em>SmashingConf</em>
is a friendly, inclusive event which is focused on real-world problems and solutions.
<strong>
<span class="small-caps">2</span>
days,
<span class="small-caps">1</span>
track
</strong>
,
<span class="small-caps">14</span>
speakers,
<span class="small-caps">300</span>
-
<span class="small-caps">400</span>
attendees and bunch of hands-on workshops.
</p>
<p>
Our speakers rarely show slides: they show
<em>how they work</em>
- their setupo, techniques and shortcuts for getting work done in
<strong>live interactive sessions</strong>
. So expect everything from refactoring and debugging to sketching and redisgn,
<em>live</em>
.
</p>
<p>
<em>SmashingConf</em> is focused on <strong>front-end and UX</strong>, but it covers everything web, be
it interface design or machine learning. That means a <em>packed</em> bundle of diverse, actionable
insights for your work.
</p>
<p>What’s the atmosphere like? Well, take a look at the <a href="https://vimeo.com/227793688">conference
showreel</a>, <a href="https://vimeo.com/smashingmagazine/videos">videos from previous events</a>, and
<a href="https://www.flickr.com/photos/marcthiele/albums">photos</a>.</p>
</div>
<div class="right">
</div>
</div>
</section>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
css
.picture1{
width: 195px;
height: auto;
}
.picture2{
width: 132px;
height: auto;
border-radius: 11px;
}
.picture3{
width: 176px;
height: 233;
}
.picture4{
width: 350px;
height: 343;
}
img{
outline: 0;
border-radius: 11px;
}
.body{
line-height: 170%;
font-size: calc(1em+ .25vw);
}
.main{
font-size: 100%;
font-family: "Elena",-apple-system,BlinkMacSystemFont,AvenirNext,Avenir,Roboto Slab,"Droid Serif",Segoe UI,Georgia,Times New Roman,serif;
vertical-align: baseline;
background-color: rgba(0, 0, 0, 0);
}
.background{
margin: 0, auto;
margin-top: 0px;
margin-left: 234.078px;
margin-bottom: 0px;
margin-right: 234.078px;
}
.section1{
border-bottom-color: rgb(255, 255, 255);
border-bottom-style: solid;
border-bottom-width: 1px;
color: rgb(51, 51, 51);
line-height: 33.1245px;
padding-left: 73.0688px;
padding-right: 73.0688px;
}
.apology{
margin-bottom: 3rem;
line-height: 1.6em;
float: right;
}
.small-caps {
font-feature-settings: "smcp" 1,"c2sc" 1,"c2sc","c2sc","c2sc";
letter-spacing: 1px;
font-variant: small-caps;
text-transform: lowercase;
}
nav{
float: middle;
}
nav li{
float:left;
}
nav ul{
list-style: none;
}
.active{
background-color: #dbebf7;
}
.topnav a {
float: left;
color: #0168b8;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: rgb(2, 6, 252);
}
.m {
background-color: rgba(0, 0, 0, 0);
background-clip: border-box;
font-size: 19.485px;
font-style: normal;
margin-top: 19.485px;
vertical-align: center;
padding-left: 73.0688px;
padding-right: 73.0688px;
padding-inline-start: 73.0;
}
.m ul{
grid-template-columns: 1fr 1fr 1fr;
}
.Personas {
transition: transform .25s ease-in-out,-webkit-transform .25s ease-in-out;
border-radius: 50%;
transform: rotate(-11deg);
width: 180px;
height: 180px;
}
.Personas:hover {
-webkit-transform: rotate(11deg);
transform: rotate(11deg);
}
h1.section2{
color: white;
background-color: rgb(9, 42, 53);
}
.like{
background-color: rgb(9, 42, 53);
color: white;
margin-bottom: 0px;
}
.firstblock{
color:white;
background-color: rgb(9, 42, 53);
}
.speakers{
padding-top: calc(1.5em +3 vh) 3.75em;
padding-left: 3.75em;
padding-right: 3.75em;
padding-bottom: calc(1.5em + 3vh);
}
.left{
padding-left: 20.8px;
padding-right: 20.8px;
line-height: 35.36px;
width: 50%;
height: auto;
float: left;
background-color: rgb(9, 42, 53);
color:white;
}
Надеюсь, это даст больше понимания из того, что я создал до сих пор.