Scribd
Upload
8 views

Form Container

Uploaded by

andyjohnkama
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Form Container

Uploaded by

andyjohnkama
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

<style>

#formContainer {
text-align: center;
display: none;
margin-top: 40px; /* Increased margin */
}
#formContainer table {
border-collapse: collapse;
width: 100%;
max-width: 500px;
margin: 0 auto;
}
#formContainer table td {
padding: 10px;
text-align: left;
}
#formContainer table td label {
font-weight: bold;
}
#formContainer table td input[type="text"],
#formContainer table td input[type="radio"] {
width: calc(100% - 150px);
}
#formContainer table td input[type="submit"] {
width: auto;
}
.banner-text a {
display: inline-block;
padding: 10px 20px; /* Added padding */
border: 2px solid black; /* Added border */
font-size: 25px; /* Increased font size */
margin-top: 20px; /* Adjusted button position */
text-decoration: none; /* Remove default underline */
color: black; /* Button text color */
transition: color 0.3s; /* Smooth color transition */
}
.banner-text a:hover {
color: white; /* Change text color on hover */
}
</style>
<div id="sideNav">
<nav>
<ul>
<li><a href="#banner">HOME</a></li>
<li><a href="#feature">FEATURES</a></li>
<li><a href="#service">SERVICES</a></li>
<li><a href="#footer">CONTACT US</a></li>
</ul>
</nav>
</div>

*{
margin: 0;
padding: 0;

}
.home-text {
background: linear-gradient,(rgba,rgb(83, 78,
78))url(freepik.jpeg);
background-size: auto;
background-position: center;
height: 100%;
}

.home-text{
text-align: center;
background-size: small;
color: rgb(83, 78, 78);
padding-top: 7px;

}
.home-text h1{
font-size: 50px;
font-family: "aerial", cursive;
padding: -200px;
}
.home-text p{
font-size: 30px;
font-family: "aerial", cursive;
}
#resizable-image {
max-width: 35%;
height: 45%;}
.hed1{
display: flex;
font-size: 40px;
left: auto;
}
.about{
height: aut;
}
.about-text{
display: flex;
font-size: 25Px;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.about-text p{
font-size: 25px;
font-family: "aerial", cursive;}
.left-side{
width: 60%;
}
.right-side{
width: 50%;
}

/*--FEATURES--*/
#feature{
width: 100%;
padding: 70px 0;
}
.title-text{
text-align: center;
padding-bottom: 70px;

}
.title-text p{
margin: auto;
font-size: 25px;
color: #525a59;
font-weight: bold;
position: relative;
z-index: 1;
display: inline-block;
}
.title-text p::after{
content: '';
width: 20px;
height: 35px;
background: linear-gradient(#585e5d,#fff) ;
position: relative;
top: -20px;
left: 0;
z-index: -1;
transform: rotate(10eg);
border-bottom-right-radius: 35px;
}
.title-text h1{
font-size: 50px;
}
.feature-box{
width: 80%;
margin: auto;
display: flex;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.features{
flex-basis: 50%;
}
.features-img{
flex-basis: 50%;
margin: auto;
}
.features-img img{
width: 70%;
border-radius: 10px;
}
.features h1{
text-align: left;
margin-bottom: 10px;
font-weight: 100;
color: #009688;
}
.feature-desc{
display: flex;
align-items: center;
margin-bottom: 40;
}
.features-icon .fa{
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px;
border-radius: 8px;
color: #009688;
border: 1px solid #003
}
.feature-text p{
padding: 0 20px;
text-align: initial;
}
@media screen and (max-width: 770px) {
.title-text h1{
font-size: 35px;
}
.features{
flex-basis: 100%;
}
.features-img{
flex-basis: 100%;
margin: auto;
}
.features-img img{
width: 100%;
}
}
/*service*/
.hed3{
display: flex;
font-size: 30px;
left: auto;}
#service{
width: 100%;
padding: 70px 0;
background: #efefef;
font-size: 18px;
}
.service-box{
width: 60%;
font-size: 18px;
display: flex;

justify-content: space-between;

}
.single-service{
flex-basis: 48%;
text-align: center;
border-radius: 7px;
color: #fff;
position: relative;
}
.single-service img{
width: 100%;
border-radius: 7px;
}
.overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5),#009688);
opacity: 0;
transition: 1s;

}
.single-service:hover .overlay{
opacity: 1;

}
.service-desc{
width: 80%;
position: absolute;
bottom: 0%;
left: 50%;
opacity: 0;
transition: 1s;
transform: translate(-50%);
}
hr{
background: #03010409;
height: 2px;
border: 0;
margin: 15px auto;
width: 60%;
}

.service-desc p{
font-size: 15px;
}
.single-service:hover .service-desc{
bottom: 40%;
opacity: 1;
}
/**--footer--**/
#footer{
padding: 100px 0 20px;
background: #efefef;
position: relative;

}
.footer-row{
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: 5% ;
}
.footer-left,.footer-right{
flex-basis: 45%;
padding: 10px;
margin-bottom: 20px;

}
.footer-right{
text-align: right;
}
.footer-row h1{
margin: 10px 0;
}
.footer-row p{
line-height: 35px;
}
.footer-img{
max-width: 370px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 35%;
transform: translate(-50%,-50%);
}
.service-box{
font-size: 25px;
font-family: "aerial", cursive;}
.left-side{
width: 60%;
}
.right-side{
width: 50%;}
.fservice{
font-size: 25px;
font-family: "aerial", cursive;}
.left-side{
width: 60%;
}
.right-side{
width: 50%;}

*{
margin: 0;
padding: 0;

}
.home-text {
background: linear-gradient,(rgba,rgb(83, 78,
78))url(freepik.jpeg);
background-size: auto;
background-position: center;
height: 100%;
}

.home-text{
text-align: center;
background-size: small;
color: rgb(83, 78, 78);
padding-top: 7px;

}
.home-text h1{
font-size: 50px;
font-family: "aerial", cursive;
padding: -200px;
}
.home-text p{
font-size: 30px;
font-family: "aerial", cursive;
}
#resizable-image {
max-width: 35%;
height: 45%;}
.hed1{
display: flex;
font-size: 40px;
left: auto;
}
.about{
height: aut;
}
.about-text{
display: flex;
font-size: 25Px;
justify-content: space-between;
align-items: center;
padding: 20px;
}
.about-text p{
font-size: 25px;
font-family: "aerial", cursive;}
.left-side{
width: 60%;
}
.right-side{
width: 50%;
}

/*--FEATURES--*/
#feature{
width: 100%;
padding: 70px 0;
}
.title-text{
text-align: center;
padding-bottom: 70px;

}
.title-text p{
margin: auto;
font-size: 25px;
color: #525a59;
font-weight: bold;
position: relative;
z-index: 1;
display: inline-block;
}
.fservice{
width: 100%;
font-size: 25px;
color: #525a59;
justify-content: center;
display: flex;
}
.title-text p::after{
content: '';
width: 20px;
height: 35px;
background: linear-gradient(#585e5d,#fff) ;
position: relative;
top: -20px;
left: 0;
z-index: -1;
transform: rotate(10eg);
border-bottom-right-radius: 35px;
}
.title-text h1{
font-size: 50px;
}
.feature-box{
width: 100%;
margin: auto;
display: flex;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.features{
flex-basis: 50%;
}
.features-img{
flex-basis: 50%;
margin: auto;
}
.features-img img{
width: 70%;
border-radius: 10px;
}
.features h1{
text-align: left;
margin-bottom: 10px;
font-weight: 100;
color: #009688;
}
.feature-desc{
display: flex;
align-items: center;
margin-bottom: 40;
}
.features-icon .fa{
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px;
border-radius: 8px;
color: #009688;
border: 1px solid #003
}
.feature-text p{
padding: 0 20px;
text-align: initial;
}
@media screen and (max-width: 770px) {
.title-text h1{
font-size: 35px;
}
.features{
flex-basis: 100%;
}
.features-img{
flex-basis: 100%;
margin: auto;
}
.features-img img{
width: 100%;
}
}
/*service*/
.hed3{
display: flex;
font-size: 33px;
left: auto;}
#service{
width: 100%;
padding: 70px 0;
background: #efefef;
font-size: 18px;
}
.service-box{
width: 100%;
font-size: 18px;
display: flex;
padding: 20px;
justify-content: space-between;

}
.single-service{
flex-basis: 48%;
text-align: center;
border-radius: 7px;
color: #fff;
position: relative;
}
.single-service img{
width: 100%;
border-radius: 7px;
}
.overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5),#009688);
opacity: 0;
transition: 1s;

}
.single-service:hover .overlay{
opacity: 1;

}
.service-desc{
width: 80%;
position: absolute;
bottom: 0%;
left: 50%;
opacity: 0;
transition: 1s;
transform: translate(-50%);
}
hr{
background: #03010409;
height: 2px;
border: 0;
margin: 15px auto;
width: 60%;
}

.service-desc p{
font-size: 15px;
}
.single-service:hover .service-desc{
bottom: 40%;
opacity: 1;
}
/**--footer--**/
#footer{
padding: 100px 0 20px;
background: #efefef;
position: relative;

}
.footer-row{
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
flex-wrap: 5% ;
}
.footer-left,.footer-right{
flex-basis: 45%;
padding: 10px;
margin-bottom: 20px;

}
.footer-right{
text-align: right;
}
.footer-row h1{
margin: 10px 0;
}
.footer-row p{
line-height: 35px;
}
.footer-img{
max-width: 370px;
opacity: 0.1;
position: absolute;
left: 50%;
top: 35%;
transform: translate(-50%,-50%);
}
.service-box{
font-size: 25px;
font-family: "aerial", cursive;}
.left-side{
width: 20%;
}
.right-side{
width: 30%;}
.fservice{
font-size: 23px;
font-family: "aerial", cursive;}
.left-side{
width: 20%;
}
.right-side{
width: 30%;}

You might also like