<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<style></style>
</head>
<body>
<div class="headerLayout">
<div style="vertical-align: middle">
<img src="./LOGO.png" class="logo">
<h2 class="t2p">Teens to peers</h2>
</div>
<div class="navBar">
<a class="linkButton">Про нас</a>
<a class="linkButton">Чому саме ми</a>
<a class="linkButton">Навчання</a>
<a class="linkButton">Контакти</a>
<a class="registerButton" class="linkButton">Let's Go!</a>
</div>
</div>
<div class="mainPage">
<img src="./casual-life-3d-stack-of-books-and-mug-next-to-laptop-screen-showing-planets(1).png" class="cup">
<div class="mainPageContent">
<h1 class="mainPageContentHeader">Teens To Peers</h1>
<p style="font-size: 42px">Онлайн-школа саморозвитку для підлітків
<p>
<div class="mainPageButtonContainer">
<div class="line">
<div class="contentBlock">Більше про навчання</div>
</div>
</div>
</div>
<img src="./casual-life-3d-young-couple-sitting-on-the-floor-and-reading-books (1).png" class="couple">
<div class="aboutPage">
<img src="./casual-life-3d-young-man-working-at-desk.png" class="table">
<svg width="800" height="1100" xmlns="http://www.w3.org/2000/svg">
<path d="M0 80 Q 1600 580 0 1080" stroke="white" fill="transparent" style="color:white" />
</svg>
<div class="aboutPageContent">
<h1 class="aboutPageContentHeader">About us</h1>
<p style="font-size: 30px; text-align:right;text-shadow: 0px 5px 10px rgba(0,0,0,0.5);">
Це єдина онлайн-школа саморозвитку для молоді, де спікерами є самі підлітки! Ми збираємо молодих людей з крутезним досвідом і неймовірними досягненнями, які готові навчати та відкривати секрети свого успіху для допомоги іншим! У нашій школі ми пропонуємо
комплексне навчання, що поділяється на рівні різної складності, на кожному з яких ти знайдеш практичні курси для реалізації себе у майбутньому та втілення своїх задумів </p>
</div>
</div>
<div class="weEducatePage">
<h1 class="weEducatePageContentHeader">Our Education</h1>
<div class="weEducatePageContent">
<div class="weEducatePageButton">
<img src="./30d96aa2-a918-4a38-a930-46964ddb2ce7.png" class="book">
<b>Курси з основ психології та лідерства.</b> Ти не тільки навчишся якісно аналізувати та розуміти себе, а й вміло вести за собою цілу команду!
</div>
<div class="weEducatePageButton">
<img src="./casual-life-3d-stack-of-books-and-mug-next-to-laptop-screen-showing-planets.png" class="laptop">
<b>Курси, націлені на розуміння сучасних технологій, програмування, та основ дизайну.</b> Ти отримаєш знання, націлені на практичне застосування, та закріпиш засвоєний матеріал, виконавши низку цікавих завдань
</div>
<div class="weEducatePageButton">
<img src="./906d1e6e-dd6c-4de9-9fc1-d118f44b3c92.png" class="lamp">
<b>Курси з фінансової грамотності та основ бізнесу.</b> Ти навчишся викоистовувати кошти для збільшення власного капіталу та реалізації своїх ідей
</div>
</div>
</div>
<img src="./casual-life-3d-books-graduation-hat-and-diploma-scroll(1).png" class="graduationCap">
<div class="chooseUsPage">
<h1 class="chooseUsPageContentHeader">Choose Teens To Peers!</h1>
<div class="chooseUsPageContent">
<div class="chooseUsPageButton">
<img src="./casual-life-3d-green-backpack-with-books.png" class="rucksack"> Ми створюємо оточення, у якому ти зможеш <b>знайти однолітків та однодумців,</b> які замотивовані на навчання та реалізацію себе у майбутньому!
</div>
<div class="chooseUsPageButton">
<img src="./casual-life-3d-sale-badge-1.png" class="discount"> Приведи друга та отримай один місяць навчання <b>безкоштовно!</b>
</div>
<div class="chooseUsPageButton">
<img src="./casual-life-3d-stationery-2.png" class="schoolItems"> У нашій школі ти зможеш знайти <b>практично-орієнтовані та цікаві курси,</b> які засновані на життєвих прикладах, а не теорії з підручників
</div>
</div>
</div>
<div class="joinUsPage">
<h1 class="joinUsPageContentHeader">Join us...</h1>
<div class="joinUsPageContent">
<ul type="disc">
<li class="joinUsList">якщо тобі від 12 до 17 років</li>
<li class="joinUsList">якщо прагнеш у повній мірі реалізувати свій потенціал</li>
<li class="joinUsList">якщо хочеш знайти нових друзів та однодумців</li>
<li class="joinUsList">якщо готовий робити кроки назустріч своїм мріям</li>
</ul>
<img src="./casual-life-3d-girl-sitting-in-armchair-and-looking-at-phone-1.png" class="girlWatching">
</div>
</div>
<div class="ourContactsPage">
<h1 class="ourContactsPageContentHeader">Our Contacts</h1>
<img src="./casual-life-3d-excited-young-woman-receiving-like-notifications-on-her-laptop.png" class="girlSmiling">
<img src="./casual-life-3d-avatar-girl-with-pink-hair.png" class="girlIcon">
<div class="ourContactsPageContent">
<div class="buttonAlice">
Buddy Аліса
</div>
<div>
</div>
</div>
</div>
</div>
<div class="featuresPage"></div>
</body>
</html>a {
text-decoration: none;
}
a:hover {
color: #3F5BD4;
}
.logo {
height: fill-available;
display: inline-block;
}
.couple {
position: relative;
transform: scale(1.4, 1.4);
top: 120px;
left: 1000px;
}
.cup {
position: absolute;
margin-top: 250px;
transform: scale(-1.8, 1.8);
opacity: 45%;
}
.headerLayout {
position: fixed;
padding: 0 20px;
/* background-color: blue; */
height: 80px;
width: 100%;
background-color: #A387E8;
text-align: center;
/*top: 20px;*/
display: flex;
justify-content: space-between;
}
.mainPage {
height: 800vh;
width: 100%;
background: linear-gradient(90deg, #1037E1 0%, rgba(146, 63, 212, 0.45) 100%);
}
.mainPageContent {
position: relative;
padding-left: 200px;
top: 200px;
color: white;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}
.mainPageContentHeader {
margin-bottom: 10px;
font-size: 72px;
font-weight: bold;
}
.mainPageButtonContainer {
width: 750px;
top: 100px;
position: relative;
}
.line {
margin: 0px;
margin-bottom: 10px;
}
.contentBlock {
margin: 5px;
width: 350px;
padding: 30px 18px;
background-color: #FFFFFF;
border-radius: 50px;
font-size: 28px;
font-weight: bold;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
color: #000000;
text-align: center;
display: inline-block;
box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.4);
}
.aboutPage {
position: relative;
top: 200px;
width: 100%;
height: 1100px
}
.aboutPageContent {
position: relative;
width: 55%;
color: white;
display: inline-block;
vertical-align: bottom;
height: 1100px;
padding-left: 250px;
padding-top: 100px;
}
.aboutPageContentHeader {
font-size: 76px;
text-align: right;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
margin-bottom: 70px;
margin-top: 100px;
}
.table {
position: absolute;
transform: scale(0.5, 0.5);
right: 400px;
top: -200px;
}
.featuresPage {
height: 100vh;
}
.weEducatePage {
height: 100vh;
position: relative;
top: 350px;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
color: white;
}
.weEducatePageContent {
position: relative;
color: white;
height: 1100px;
}
.weEducatePageContentHeader {
font-size: 76px;
text-align: center;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
margin-bottom: 70px;
}
.weEducatePageButton {
margin: 50px;
color: #914ED3;
border-radius: 50px;
background-color: white;
font-size: 32px;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
padding: 10px;
width: 27.9%;
height: 680px;
vertical-align: top;
text-align: center;
display: inline-block;
}
.book {
width: 60%;
margin: 10px 120px;
position: relative;
}
.laptop {
width: 45%;
margin: 10px 120px;
position: relative;
}
.lamp {
width: 45%;
margin: 10px 120px;
position: relative;
}
.graduationCap {
position: absolute;
margin-top: 350px;
margin-left: 1599px;
vertical-align: bottom;
transform: scale(1, 1);
opacity: 45%;
}
.chooseUsPage {
height: 1500px;
position: relative;
top: 600px;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
color: white;
}
.chooseUsPageContentHeader {
font-size: 76px;
text-align: center;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
margin-bottom: 70px;
}
.chooseUsPageButton {
margin: 50px;
color: white;
font-size: 36px;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
padding: 30px;
width: 27.9%;
height: 500px;
vertical-align: top;
text-align: center;
display: inline-block;
}
.rucksack {
width: 50%;
margin: 10px 120px;
position: relative;
}
.discount {
width: 50%;
margin: 10px 120px;
position: relative;
}
.schoolItems {
width: 50%;
margin: 10px 120px;
position: relative;
}
.joinUsPage {
height: 1200px;
position: relative;
top: 100px;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
color: white;
}
.joinUsPageContentHeader {
font-size: 106px;
text-align: left;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
margin-bottom: 70px;
margin-left: 70px;
}
.joinUsPageContent {
margin: 50px 150px;
color: white;
font-size: 46px;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
height: 500px;
width: 20%;
vertical-align: top;
display: inline-block;
}
.joinUsList {
margin: 50px 0px;
width: 60%;
font-weight: lighter;
}
.girlWatching {
position: absolute;
bottom: 300px;
left: 1350px;
transform: scale(1.8, 1.8);
}
.ourContactsPage {
height: 1500px;
position: relative;
top: 100px;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
color: white;
}
.ourContactsPageContentHeader {
font-size: 106px;
text-align: right;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
margin-right: 70px;
}
.ourContactsPageContent {
position: initial;
margin: 120px 50px 0px 850px;
color: white;
font-size: 40px;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
.buttonAlice {
padding: 20px 30px;
background-color: #CBD4FA;
color: white;
border-radius: 70px;
width: 700px;
text-align: left;
font-weight: bold;
font-size: 50px;
}
.girlSmiling {
position: absolute;
bottom: 900px;
left: 175px;
transform: scale(1.4, 1.4);
}
.girlIcon {
position: absolute;
bottom: 920px;
left: 1350px;
transform: scale(0.7, 0.7);
}
.linkButton {
margin: 10px;
color: white;
font-size: x-large;
text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.t2p {
color: white;
display: inline-block;
margin: 0px;
font-weight: lighter;
vertical-align: middle;
}
.navBar {
padding: 20px;
}
.registerButton {
margin: 20px;
padding: 10px 36px 14px 30px;
background-color: #914ED3;
border-radius: 30px;
font-weight: bold;
font-size: x-large;
color: white;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.