To jest placeholder.
Przejdź do trybu Podglądu lub opublikuj stronę,
aby sprawdzić działanie swojego kodu.
Kliknij dwa razy, aby edytować
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap" rel="stylesheet">
<style>
:root {
--main-font-color: #3142b1;
--alt-font-color: #ffffff;
--main-header-font-size: 38px;
--alt-header-font-size: 0px;
--main-paragraph-font-size:20px;
--alt-paragraph-font-size: 0px;
--main-font-family: 'Open Sans', sans-serif;
--alt-font-family: sans-serif;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-semibold: 500;
--font-weight-bold: 600;
--line-height-paragraph: 30px;
--line-height-header: 45px;
--main-btn-bg-color: #fa8821;
--alt-btn-bg-color:#ffffff;
--main-btn-font-color: #3142b1;
--alt-btn-font-color:#ffffff;
}
body {
font-family: var(--main-font-family);
color: var(--main-font-color);
font-weight: var(--font-weight-regular);
margin: 0;
padding: 0;
}
sup {font-size:small; vertical-align:super;}
h1, h2, h3, h4, h5, h6, p, li, a, button, input, label {
font-family: 'Open Sans', sans-serif;
}
button:visited, button:active, a:visited, a:active {
border: none;
outline: none;
}
section {
max-width: 100%;
/* max-height: 100vh;*/
}
h2.header {
font-size: var(--main-header-font-size);
text-align: center;
padding: 2vh 0 0 0;
font-weight: var(--font-weight-light);
margin-top: 60px;
margin-bottom: 40px;
}
h2.header > span {
font-weight: var(--font-weight-semibold);
}
.header-secondary {
color: var(--alt-font-color);
}
header {
display: grid;
grid-template-rows: 60px;
grid-template-columns: 1fr 7fr;
align-items: center;
}
strong{vertical-align: baseline !important;}
nav {
justify-self: end;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
padding: 10px 10px;
margin 0 10px;
}
nav li a {
font-size: 18px;
text-decoration: none;
}
nav li a:hover {
color: #fa8821;
}
.top svg {
width: 24px;
height: 24px;
display: inline;
fill: #ffffff;
margin-top: 5px;
}
.top .top-container {
margin-top: 60px;
display: grid;
grid-template-rows: 220px 220px 100px;
grid-template-columns: 100%;
grid-column-gap: 50px;
align-items: center;
justify-items: center;
color: var(--alt-font-color);
}
.top .cont-1 {
align-self: center;
}
.top .cont-2 {
display: grid;
grid-template-rows: 45px 45px 45px;
grid-template-columns: 40px 1fr;
align-items: start;
justify-items: start;
}
.top .cont-3 {
font-size: 32px;
font-weight: 300;
}
.top .cont-3 span {
font-weight: 500;
}
.top .cont-4 {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
grid-column-gap: 100px;
align-items: end;
justify-items: start;
align-self: end;
}
.top h1 {
text-align: center;
font-weight: var(--font-weight-bold);
font-size: var(--main-header-font-size);
line-height: 60px;
}
.top h1 span{
font-size: 26.2px;
font-weight: 200;
margin-top: 20px;
display: inline-block;
}
.top .top-desc {
font-size: 22px;
text-align: left;
font-weight: 300;
}
.top .button {
/**color: #f5f5fa;
background-color: #e97a0b;**/
color: white;
background-color: var(--main-btn-bg-color);
font-size: 20px;
width: 250px;
font-family: 'Open Sans', sans-serif;
border-radius: 2vh;
font-weight: 400;
height:60px;
border: none;
outline: none;
cursor: pointer;
margin-top: 1vh;
line-height: 45px;
vertical-align: middle;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
align-self:start;
}
.program {
color: #ffffff;
}
.program p {
font-size: 17px;
font-weight: 400;
text-align: center;
}
.program p span {
font-weight: 300;
}
.program svg {
width: 12px;
height: 12px;
display: inline;
margin: 0 10px;
fill: #fa8821;
}
.program-container {
display: grid;
grid-template-rows: repeat(4, 50px);
grid-template-columns: 100%;
justify-items: start;
align-items: start;
border-radius: 15px;
background-color: rgba(227, 234, 246, .2);
box-shadow: 5px 10px 8px 3px #2b3ba0;
padding: 30px 35px 20px;
}
.topic-container {
display: grid;
grid-template-rows: repeat(1, 80px);
grid-template-columns: 100%;
justify-items: start;
align-items: start;
border-radius: 15px;
background-color: rgba(227, 234, 246, .2);
box-shadow: 5px 10px 8px 3px #2b3ba0;
padding: 30px 35px 20px;
}
.topic {
font-size: 20px;
text-align:left;
}
.topic-left {
font-weight: 400;
padding-bottom: 15px;
}
/* .organizers {
display: grid;
grid-template-rows: 40px 150px;
grid-template-columns: 1fr 1fr;
grid-column-gap: 200px;
align-items: center;
justify-items: center;
margin-top: 50px;
}
.organizers-header {
grid-column: 1/3;
}
.organizers h3 {
font-size: 24px;
font-weight: 700;
}
.organizers-logo-1 {
justify-self: end;
}
.organizers-logo-2 {
justify-self: start;
}*/
.promo {
color: #3142b1;
}
.promo p {
font-size: 20px;
font-weight: 300;
text-align: center;
line-height: 30px;
padding-top: 10px;
color: #3142b1;
}
.promo p span {
font-weight: 400;
}
.promo-container-1 {
display: grid;
grid-template-rows: 350px;
grid-template-columns: 270px 270px 270px;
grid-column-gap: 163.5px;
justify-items: center;
align-items: center;
}
.promo-container-2 {
display: grid;
grid-template-rows: 350px;
grid-template-columns: 216.75px 270px 163.5px 270px 216.75px;
justify-items: center;
align-items: center;
}
.promo img {
display: block;
margin: 0 auto;
}
.promo-gift-1 {
align-self: center;
justify-self: end;
}
.promo-gift-2 {
align-self: center;
justify-self: start;
}
.promo-gift-3 {
align-self: center;
justify-self: end;
}
.promo-gift-4 {
align-self: center;
justify-self: start;
}
.promo-gift-5 {
align-self: center;
justify-self: start;
}
.nvision {
color: #ffffff;
}
.nvision p {
font-size: 20px;
font-weight: 300;
text-align: left;
margin-bottom: 10px;
line-height: 36px;
}
.nvision p.description{text-align: center}
.nvision-container {
display: grid;
grid-template-rows: 378px;
grid-template-columns: 700px 437px;
justify-items: center;
align-items: center;
}
.area-container{
border-radius: 15px;
background-color: rgba(227, 234, 246, .2);
box-shadow: 5px 10px 8px 3px #2b3ba0;
padding: 30px 35px 20px;
}
.area-container.ast {
margin-top: 68px;
}
.nvision .area svg{ color: #fa8821;}
.community-container {
display: grid;
grid-template-rows: 137px;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 110px;
justify-items: center;
align-items: center;
}
.recommendations {
color: #3142b1;
}
.recommendations-container {
display: grid;
grid-template-rows: 120px;
grid-template-columns: 1fr 1fr 1fr 1fr;
justify-items: center;
align-items: center;
}
.expert-sec {
color: #3142b1;
}
.expert {
display: grid;
grid-template-rows: 250px 100px;
grid-template-columns: 2fr 2fr 2fr;
align-items: center;
justify-items: center;
}
.expert-desc {
align-self: start;
text-align:center;
}
.expert-details {
font-weight: 300;
}
.expert-details span {
font-size: 20px;
font-weight: 500;
}
.register-container {
display: block;
text-align: center;
color: #3142b1;
}
.register p.subheader {
font-size: 20px;
font-weight: 300;
text-align: center;
margin-bottom: 60px;
line-height: 36px;
}
.register h2.header {
margin-bottom: 40px;
}
.input-container {
width: 455px;
margin: 0 auto;
}
form {
width: 60%;
display: block;
margin: 0 auto;
text-align: left;
}
input {
background-color: #ffffff;
border: 2px solid #3142b1;
color: #3142b1;
font-size: 20px;
padding: 5px;
border-radius: 10px;
width: 455px;
height: 30px;
display: block;
}
/* input:focus {
background-color: rgba(256,256,256,.2);
outline: none;
border: 2px solid #f5f5fa;
border-radius: 10px;
} */
input:invalid {
outline: none;
}
label {
display: block;
text-align: left;
font-size: 18px;
line-height:2;
font-weight: 300;
}
form .button {
/**color: #f5f5fa;
background-color: #e97a0b;**/
color: var(--main-btn-font-color);
background-color: var(--main-btn-bg-color);
font-size: 20px;
width: 180px;
font-family: 'Open Sans', sans-serif;
border-radius: 15px;
font-weight: 400;
height:45px;
border: none;
cursor: pointer;
margin: 20px 0;
vertical-align: middle;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.button-holder {
text-align: center;
}
form .agreement {
display: none;
}
form .agreement + *::before {
content: "";
width: 25px;
height: 25px;
display: inline-block;
margin: 0;
margin-right: 10px;
text-align: left;
border-radius: 10px;
font-size: 14px;
}
.explainer {
margin-bottom: 20px;
}
form .agreement:checked + *::before {
content:'\2713';
color: #3142b1;
background-color: rgba(256,256,256,.2);
text-align: center;
}
.beforeBorder + *::before {
border: 2px solid #3142b1;
}
.afterBorder + *::before{
border: 2px solid #3142b1;
}
form .label-agreement {
display: inline-block;
width: 538px;
font-size: 13px;
font-weight: 300px;
}
.register .privacy {
font-size: 12px;
text-align: left;
margin-top: 15px;
line-height: 1.2;
text-align: justify;
}
.register .privacy a {
color: #3142b1;
cursor: pointer;
text-decoration: underline;
}
.register .privacy .more {
color: #3142b1;
text-decoration: underline;
cursor: pointer;
}
.register .extended-privacy {
display: none;
}
footer {
width: 100%;
display: grid;
grid-template-rows: 120px 40px;
grid-template-columns: 40% 30% 30%;
grid-gap: 2px;
align-items: start;
font-size: 16px;
color: var(--alt-font-color);
}
footer img {
display: inline-block;
}
footer a {
text-decoration: none;
cursor: pointer;
}
footer a:hover {
color: #e97a0b;
}
footer div {
margin-top: 30px;
}
footer .phone p, footer .email p, footer .partner p {
display: inline;
font-size: 16px;
}
footer .phone p {
padding-bottom: 20px;
}
footer .partner {
justify-self: end;
align-self: start;
}
footer .company {
line-height: 1.5;
}
footer .company img {
margin-bottom: 10px;
}
footer .phone img, footer .email img {
padding-right:5px;
}
footer .copy {
font-size: 13px;
align-self: start;
}
/*media queries*/
@media (max-width: 600px) {
#section-hassouu {
min-height: 0 !important;
}
header {
grid-template-rows: 60px;
grid-template-columns: 1fr;
align-items: center;
justify-items: center;
}
nav {
display: none;
}
h2.header {
font-size: 3vh;
margin-top: 30px;
margin-bottom: 30px;
}
.top .top-container {
margin-top: 50px;
display: grid;
grid-template-rows: 280px 300px 60px 80px;
grid-template-columns: 100%;
grid-column-gap: 50px;
align-items: center;
justify-items: center;
grid-template-columns: 100%;
grid-row-gap: 20px;
}
.top h1 {
text-align: center;
font-weight: 600;
font-size: 30px;
line-height: 50px;
}
.top h2 {
font-size: 26px;
font-weight: lighter;
text-align: center;
padding-top: 24px;
border-top: solid 1px;
margin-top: 24px;
}
.top h1 span{
font-size: 25px;
font-weight: 400;
}
.top .top-desc {
font-size: 18px;
text-align: center;
font-weight: 300;
padding-bottom:30px;
}
.cont-4 img {
display: none;
justify-self: center;
}
.top svg {
display: none;
}
.top .cont-3 {
font-size: 22px;
text-align: center;
}
.top .cont-2, .top .cont-4 {
display: block;
}
.top .button {
font-size: 20px;
border-radius: 10px;
height:50px;
margin-top: 1vh;
line-height: 50px;
}
.program-container {
display: grid;
grid-template-rows: repeat(4, 120px);
grid-template-columns: 100%;
justify-items: center;
align-items: center;
}
.program p {
font-size: 16px;
font-weight: 400;
text-align: center;
}
.program svg {
display: block;
margin: 0 auto 10px auto;
padding-top: 50px;
}
.topic {
font-size: 1.9vh;
width: 100%;
}
.promo-container-1 {
display: grid;
grid-template-columns: 350px;
grid-template-rows: repeat(3, 1fr);
}
.promo-container-2 {
display: grid;
grid-template-columns: 350px;
grid-template-rows: repeat(2, 1fr);
}
.promo .mobile-not-display {
display:none;
}
.nvision p {
font-size: 18px;
font-weight: 300;
text-align: center;
line-height: 28px;
}
.nvision-container {
grid-template-rows: 400px;
grid-template-columns: 100%;
}
.nvision img {
width: 350px;
height: 311px;
}
.community-container {
grid-template-rows: repeat(5, 100px);
grid-template-columns: 100%;
grid-row-gap: 30px;
margin-top: 50px;
}
.recommendations-container {
grid-template-columns: 100%;
grid-row-gap: 30px;
}
.expert {
grid-template-rows: 200px 80px 200px 80px;
grid-template-columns: 100%; grid-row-gap: 30px;}
.expert-photo-2{grid-row: 3;}
.expert-desc-2{grid-row: 4;}
.expert-photo-3{grid-row: 5}
.expert-desc-1 { grid-row: 2/3;}
.expert-details {
font-size: 1.7vh;
}
.expert-details span {
font-size: 1.8vh;
font-weight: 700;
}
.promo p {
font-size: 2.1vh;
font-weight: 300;
text-align: center;
margin-bottom: 4vh;
}
.promo-container {
margin: 0 auto;
width: 90%;
display: grid;
grid-template-rows: 220px 220px 50px;
grid-template-columns: 100%;
}
.promo-gift {
justify-self: center;
align-self: center;
margin-bottom: 30px;
}
.gift-desc {
grid-column: 1;
}
#section-en23vo6 {
height: 1500px;
}
form, input, .input-container {
width: 90%;
}
form .label-agreement {
width: 98%;
}
form .button {
font-size: 20px;
width: 60%;
border-radius: 2vh;
height:5vh;
margin: 20px 0;
vertical-align: middle;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
footer {
width: 90%;
display: grid;
grid-template-rows: 100px 25px 25px 25px;
grid-template-columns: 1fr;
grid-gap: 23px;
align-items: center;
justify-items: center;
font-size: 14px;
text-align: center;
margin: 0 auto;
}
footer div {
margin: 0;
}
form .button {
border: none;
}
footer .company {
justify-self: center;
align-self: center;
margin: 0 auto;
}
footer .email {
justify-self: center;
align-self: center;
margin: 0 auto;
}
footer .address {
justify-self: center;
align-self: center;
margin: 0 auto;
}
footer .phone {
justify-self: center;
align-self: center;
margin: 0 auto;
}
footer .copy {
align-self: start;
margin: o auto;
}
}
</style>
</head>