Day 222
Finish the top-jumbo section.
#CodingPhase #TheCodingWay #365CodingPhaseChallenge
**********
#top-jumbo {
padding: 0 0 400px 0;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 31%, #cd7af9 54%, #cd7af9 55%, #cd7af9 56%, #cd7af9 56%, #cd7af9 57%, #f2cbee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 31%,#cd7af9 54%,#cd7af9 55%,#cd7af9 56%,#cd7af9 56%,#cd7af9 57%,#f2cbee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 31%,#cd7af9 54%,#cd7af9 55%,#cd7af9 56%,#cd7af9 56%,#cd7af9 57%,#f2cbee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#top-jumbo:after {
content: "";
display: table;
clear: both;
}
#top-jumbo .left-side {
width: 40%;
/* display: inline-block; */
float: left;
}
#top-jumbo .left-side .large-number{
font-size: 325px;
font-weight: 700;
opacity: 0.1;
color: #4C44C1;
position: relative;
left: -26px;
top: 0;
z-index: 1;
}
#top-jumbo .left-side .info-container {
position: relative;
top: -130px;
}
#top-jumbo .left-side .info-container h1 {
font-size: 2.8rem;
line-height: 1.1;
color: #6066F2;
text-transform: capitalize;
margin-bottom: 1.5rem;
}
#top-jumbo .left-side .info-container p {
font-size: 1.3rem;
font-weight: 300;
line-height: 1.8;
color: #aaacaf;
margin-bottom: 1.5rem;
}
#top-jumbo .left-side .info-container .email-area {
background: #fff;
border-radius: 50px;
display: inline-block;
padding: 5px 7px;
}
#top-jumbo .left-side .info-container .email-area .far {
font-size: 2rem;
position: relative;
top: 5px;
margin-left: 15px;
}
#top-jumbo .left-side .info-container .email-area input[type="email"] {
background: #fff;
border: none;
padding: 10px;
text-transform: uppercase;
font-size: 1rem;
width: 230px;
}
#top-jumbo .left-side .info-container .email-area button {
background: #6066F2;
padding: 15px 40px;
color: #fff;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
border-radius: 50px;
}
#top-jumbo .right-side {
width: 60%;
/* display: inline-block; */
float: left;
padding: 0 40px;
}
#top-jumbo .right-side img {
width: 100%;
}
#CodingPhase #TheCodingWay #365CodingPhaseChallenge
**********
#top-jumbo {
padding: 0 0 400px 0;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 31%, #cd7af9 54%, #cd7af9 55%, #cd7af9 56%, #cd7af9 56%, #cd7af9 57%, #f2cbee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 31%,#cd7af9 54%,#cd7af9 55%,#cd7af9 56%,#cd7af9 56%,#cd7af9 57%,#f2cbee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 31%,#cd7af9 54%,#cd7af9 55%,#cd7af9 56%,#cd7af9 56%,#cd7af9 57%,#f2cbee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#top-jumbo:after {
content: "";
display: table;
clear: both;
}
#top-jumbo .left-side {
width: 40%;
/* display: inline-block; */
float: left;
}
#top-jumbo .left-side .large-number{
font-size: 325px;
font-weight: 700;
opacity: 0.1;
color: #4C44C1;
position: relative;
left: -26px;
top: 0;
z-index: 1;
}
#top-jumbo .left-side .info-container {
position: relative;
top: -130px;
}
#top-jumbo .left-side .info-container h1 {
font-size: 2.8rem;
line-height: 1.1;
color: #6066F2;
text-transform: capitalize;
margin-bottom: 1.5rem;
}
#top-jumbo .left-side .info-container p {
font-size: 1.3rem;
font-weight: 300;
line-height: 1.8;
color: #aaacaf;
margin-bottom: 1.5rem;
}
#top-jumbo .left-side .info-container .email-area {
background: #fff;
border-radius: 50px;
display: inline-block;
padding: 5px 7px;
}
#top-jumbo .left-side .info-container .email-area .far {
font-size: 2rem;
position: relative;
top: 5px;
margin-left: 15px;
}
#top-jumbo .left-side .info-container .email-area input[type="email"] {
background: #fff;
border: none;
padding: 10px;
text-transform: uppercase;
font-size: 1rem;
width: 230px;
}
#top-jumbo .left-side .info-container .email-area button {
background: #6066F2;
padding: 15px 40px;
color: #fff;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
border-radius: 50px;
}
#top-jumbo .right-side {
width: 60%;
/* display: inline-block; */
float: left;
padding: 0 40px;
}
#top-jumbo .right-side img {
width: 100%;
}
Comments
Post a Comment