* {
margin: 0;
padding: 0;
}
html,body{
background: #fafaff;
margin: 0;
padding: 0;
height: 100%;
}
.header {
width: 100%;
height: 450px;
padding: 50px 0;
background-color: #000;
color: #fff;
-webkit-box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.75);
margin-bottom: 50px;
}
.header-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 350px;
}
.header-content .logo {
width: 250px;
}
.header-content .logo img {
width: 100%;
}
.header-content .slogan p {
font-size: 40px;
font-weight: 100;
margin: 0;
padding: 0;
}
.header-content .form {
width: 50%;
}
.header-content .form .name-input {
width: 100%;
outline: none;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border:none;
text-align: center;
}
.header-content .input-content {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #fff;
width: 100%;
height: 30px;
border-radius:5px;
box-shadow: inset 0.5px 0.5px 2px 0 rgba(0, 0, 0, 0.15);
margin:0 auto 0;
}
.header-content input[type="radio"] {
appearance: none;
display: none;
}
.header-content label {
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
background-color: inherit;
padding: 0 10px;
text-align: center;
border-radius: 5px;
overflow: hidden;
transition: linear 0.3s;
color: #6e6e6edd;
}
.header-content input[type="radio"]:checked + label {
background-color: #000;
color: #f1f3f5;
font-weight: 900;
transition: 0.3s;
}
.header-content .radio-text {
color: #000;
font-size: 12px;
padding: 0 15px;
}
.font-content {
width: 100%;
height: 200px;
background-color: #fff;
border: none;
outline: none;
border-radius: 5px;
box-shadow: 0 1px 5px 0 rgba(0,0,0,.3);
display: none;
}
.font-content span {
display: flex;
flex-direction: row;
align-items: center;
height: 166px;
font-size: 90px;
padding: 0 0 0 30px;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #ccc,
0 3px 0 #ccc,
0 4px 0 #ccc,
0 5px 0 #ccc,
0 6px 0 #ccc,
0 7px 0 #ccc,
0 8px 0 #ccc,
0 0 5px rgba(255, 255, 255, .05),
0 -1px 3px rgba(255, 255, 255, .2),
0 9px 9px rgba(255, 255, 255, .3),
0 12px 12px rgba(255, 255, 255, .3),
0 15px 15px rgba(255, 255, 255, .3);
}
.font-info {
display: flex;
align-items: center;
justify-content: space-between;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background: #000;
color: #fff;
padding: 5px 10px;
}
.gold{
color: #FFD700;
}
.rose {
color: #B76E79;
}
.white {
color: silver;
}
.uppercase{
text-transform: uppercase;
}
.lowercase {
text-transform: lowercase;
}
.capitalize {
text-transform: capitalize;
}
/* Autumn Chant */
.font1 {
font-family: 'Autumn Chant';
font-weight: normal;
font-style: normal;
}
/* Backline */
.font2 {
font-family: 'Backline';
font-weight: normal;
font-style: normal;
}
/* Brush Script D */
.font3 {
font-family: 'Brush Script D';
font-weight: normal;
font-style: normal;
}
/* Brannboll Connect PERSONAL USE */
.font4 {
font-family: 'Brannboll Connect PERSONAL USE';
font-weight: normal;
font-style: normal;
}
/* Angelface */
.font5 {
font-family: 'Angelface';
font-weight: normal;
font-style: normal;
}
/* Canterbury */
.font6 {
font-family: 'Canterbury';
font-weight: normal;
font-style: normal;
}
/* Dancing Script */
.font7 {
font-family: 'Dancing Script';
font-weight: normal;
font-style: normal;
}
/* Catherine */
.font8 {
font-family: 'Catherine';
font-weight: normal;
font-style: normal;
}
/* LD Walt */
.font9 {
font-family: 'LD Walt';
font-weight: normal;
font-style: normal;
}
/* English111 Vivace BT */
.font10 {
font-family: 'English111 Vivace BT';
font-weight: normal;
font-style: italic;
}
/* GeoSlab703 Md BT */
.font11 {
font-family: 'GeoSlab703 Md BT';
font-weight: 500;
font-style: normal;
}
/* GoodVibrations */
.font12 {
font-family: 'GoodVibrations';
font-weight: normal;
font-style: normal;
}
/* Dontheus */
.font13 {
font-family: 'Dontheus';
font-weight: normal;
font-style: normal;
}
/* Intro Script Demo */
.font14 {
font-family: 'Intro Script Demo';
font-weight: 500;
font-style: normal;
}
/* SauberScript */
.font15 {
font-family: 'SauberScript';
font-weight: normal;
font-style: normal;
}
/* Quindelia */
.font16 {
font-family: 'Quindelia';
font-weight: normal;
font-style: normal;
}
/* Script MT */
.font17 {
font-family: 'Script MT';
font-weight: bold;
font-style: normal;
}
/* Scriptina */
.font18 {
font-family: 'Scriptina';
font-weight: normal;
font-style: normal;
}
/* Vigrand */
.font19 {
font-family: 'Vigrand';
font-weight: normal;
font-style: normal;
}
@media (max-width: 575.98px) {
.header {
padding: 30px 0;
height: 370px;
}
.header-content {
height: 300px;
}
.header-content .logo {
width: 150px;
}
.header-content .slogan p {
font-size: 30px;
}
.header-content .form {
width: 95%;
}
.header-content .radio-text {
display: none;
}
.header-content label {
width: auto;
font-size: 12px;
}
.font-content span {
font-size: 50px;
}
.font-content {
height: 150px;
}
.font-content span {
height: 112px;
}
.header-content .input-content {
padding: 0 10px;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.header {
padding: 30px 0;
height: 370px;
}
.header-content {
height: 300px;
}
.header-content .logo {
width: 150px;
}
.header-content .slogan p {
font-size: 30px;
}
.header-content .form {
width: 95%;
}
.header-content .radio-text {
display: none;
}
.header-content label {
width: auto;
font-size: 12px;
}
.font-content span {
font-size: 50px;
}
.font-content {
height: 150px;
}
.font-content span {
height: 112px;
}
.header-content .input-content {
padding: 0 10px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.header-content .form {
width: 85%;
}
.font-content span {
font-size: 70px;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.header-content .form {
width: 80%;
}
.font-content span {
font-size: 70px;
}
}
@media (min-width: 1200px) {
}