HTML и CSS-заголовок ⇐ CSS

[Anonymous]

Здравствуйте, я пытаюсь создать свою собственную версию существующего веб-сайта, но не могу скопировать их заголовок. Ниже приведен мой код

Код: Выделить всё

@import url(https://fonts.googleapis.com/css?family=Poppins:400);

#logo {
display: inline-block;
padding-top: 0.3125rem;
padding-bottom: 0.3125rem;
margin-top: 1rem;
margin-left: 5rem;
margin-right: 1rem;
line-height: inherit;
white-space: nowrap;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}

.topnav a.icon {
float: right;
display: block;
}
}

@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}

.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}

.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}

nav {
flex-grow: 1;
font-family: 'Poppins', sans-serif;

}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul li {
margin: 0 1vw;
}

.topnav {
background-color: #252323 !important;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: absolute;
padding: 1rem 1rem;
position: sticky;
width: 100%;

}

a{
color: white;
text-decoration:none;
font-size: 1.2rem;
}

.topnav #hover:hover {
background-color: #1F9BDE;
color: white;
transition: background-color 0.3s;

}

.topnav a.active {
color: orange;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: flex-end;
}

.page{

padding: 0.2rem 1rem;
margin: 1% 1%;
border: none;

border-radius: 4px;
cursor: pointer;
font-family: Poppins;

font-weight: 400;
transition: background-color 0.3s ease;

}

.btn {
padding: 0.2rem 1rem;
margin: 1% 1%;
border: none;
background-color: orange;
color: #fff;
border-radius: 4px;
cursor: pointer;
font-family: Poppins;

font-weight: 400;
transition: background-color 0.3s ease;
}





[url=#] 
[img]ActiveLearningLogo.png[/img]
 [/url]

[list]

[*][url=#]Applicants[/url]
[*][url=#]Accounts[/url]
[*][url=#]Archives[/url]
[*][url=#]Sign Out[/url]

[/list]

так это выглядит в свернутом виде
введите здесь описание изображения
и это изначально так
введите здесь описание изображения
я пытаюсь сделать этот заголовок
и вот он свернут
p>
Я только начинаю изучать HTML и CSS, поэтому я новичок в большинстве этих вещей, но мне бы хотелось, чтобы кто-нибудь помог

Подробнее здесь: https://stackoverflow.com/questions/784 ... css-header