Untitled
unknown
plain_text
2 years ago
11 kB
4
Indexable
*{
box-sizing: border-box;
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
/* #3166B0 */
}
.header-cont{
width: 100%;
}
.logo-box{
display: flex;
margin-top: 3%;
justify-content: space-between;
}
.logo-item{
display: flex;
margin-left: 30px;
}
#menu-icon{
margin-right: 3%;
}
.ul-item{
margin-right: 30px;
}
ul li{
display: inline-block;
margin-top: 3%;
font-size: 22px;
}
.logo img{
width: 150px;
margin-top: 3%;
}
li a{
padding: 10px;
color: #3166B0;
}
.dropdown{
padding: 10px;
margin-left: 10px;
}
select:hover{
border: 2px solid #3166B0;
background-color: transparent;
color: #3166B0;
}
select{
padding: 10px 10px;
background-color: #3166B0;
border: none;
color: white;
border-radius: 5px;
font-size: 22px;
}
.login{
color:#3166B0 ;
}
.btn{
background-color: #3166B0;
padding: 10px;
border-radius: 5px;
color: white;
}
.btn:hover{
border: 2px solid #3166B0;
background-color: transparent;
color: #3166B0;
}
/* hero section */
.hero-section{
display: flex;
width: 90%;
justify-content: space-between;
margin-top: 5%;
}
.left-side h1{
font-size: 75px;
}
.left-side p{
margin-bottom: 1%;
margin-top: 2%;
font-size: 20px;
word-spacing: 5px;
line-height: 1.3;
}
.right-side{
margin-left: 8%;
}
.right-side img{
width: 500px;
}
.left-side{
margin-left: 8%;
margin-top: 3%;
}
.btn-box{
display:flex;
}
.btnn{
border: 2px;
padding: 20px 30px;
margin-right: 10px;
font-size: 22px;
margin-top: 5%;
background-color: #3166B0 ;
border-radius: 5px;
}
.btnn a{
color: white;
}
.btnn1{
border: 2px solid #3166B0 ;
padding: 20px 30px;
margin-top: 5%;
font-size: 22px;
border-radius: 5px;
color: #3166B0 ;
}
.btnn1 a:hover{
color: white;
}
.btnn1:hover{
border: 3px solid;
background-color: #3166B0 ;
color: white;
}
.btnn a:hover{
color: #3166B0;
}
.btnn:hover{
border: 3px solid #3166B0 ;
background-color: transparent;
color: #3166B0 ;
}
/* work styling */
.work-container h1{
text-align: center;
font-size: 80px;
margin-bottom: 3%;
}
.work-flex{
display: flex;
justify-content: center;
padding: 30px;
margin-left: 10px;
}
.work-container{
margin-top: 5%;
width: 100%;
}
.work-items{
padding-right:4%;
margin-left: 20px;
}
.work-items h2{
text-align: center;
font-size: 25px;
}
.work-items p{
text-align: center;
font-size: 18px;
margin-top: 20px;
}
.work-items img{
height: 100px;
margin-left: 40%;
}
.master{
background-color: #3166B0 ;
color: white;
text-align: center;
margin-top: 10px;
width: 90%;
margin-left: 5%;
position: relative;
font-size: 30px;
height: 300px;
}
.master h2{
padding-top: 45px;
margin-bottom: 10%;
justify-content: center;
}
.gbtn{
color: #3166B0 ;
border: 2px;
background-color: white;
padding: 10px 20px;
position: absolute;
top: 200px;
right: 600px;
border-radius: 5px;
font-size: 22px;
}
.gbtn:hover{
border: 2px solid white;
background-color: transparent;
}
.gbtn a:hover{
color: white;
}
/* learn style */
.learn-flex{
display: flex;
width: 80%;
margin-top: 5%;
justify-content: space-between;
margin-left: 15%;
}
.learn-right img{
width: 500px;
}
.learn-right{
margin-right: 10%;
}
h4{
color: gray;
font-size: 15px;
padding-bottom: 30px;
}
.learn-left h1 span{
background-color: rgb(14, 217, 236);
}
.learn-left h1{
margin-bottom: 30px;
font-size: 90px;
}
.learn-left p{
margin-bottom: 30px;
font-size: 22px;
}
.btnl{
border: 2px;
padding: 15px 20px;
background-color: #3166B0 ;
color: white;
font-size: 22px;
border-radius: 5px;
}
.btnl:hover{
border: 2px solid #3166B0 ;
background-color: transparent;
color:#3166B0 ;
}
/* plan style */
.plan-flex{
display: flex;
margin-left:5%;
margin-top: 5%;
width: 90%;
}
.plan-flex img{
width: 350px;
height: 100%;
}
.the-plan{
background-color: rgb(174, 152, 7);
height: 100hv;
width: 500px;
color: white;
text-align:left;
padding: 25px 25px;
}
.the-plan p{
margin-top: 30px;
margin-left:10px;
margin-bottom: 40px;
font-size: 21px;
word-spacing: 1.6;
padding-left: 10px;
padding-right:10px;
text-align: justify;
}
h3{
margin-left:10px;
margin-top: 15px;
font-size: 20px;
padding-left: 10px;
}
.the-plan li a{
margin-left:10px;
margin-top: 20px;
border: 2px solid white;
border-radius: 5px;
color: white;
padding: 10px 10px;
width: auto;
}
.the-plan li a:hover{
background-color: white;
color:rgb(174, 152, 7); ;
border: none;
}
.innovation{
background-color: rgb(12, 12, 9);
height: 100hv;
width: 500px;
color: white;
text-align:left;
padding: 25px 25px;
}
.innovation p{
margin-top: 30px;
margin-left:10px;
margin-bottom: 40px;
font-size: 21px;
word-spacing: 1.6;
text-align: justify;
padding-left: 10px;
padding-right:10px ;
}
.innovation li a{
margin-left:10px;
margin-top: 20px;
border: 2px solid white;
border-radius: 5px;
color: white;
padding: 10px 20px;
}
.innovation li a:hover{
background-color: white;
color:rgb(9, 8, 3); ;
border: none;
}
/* vision styling */
.vision-flex{
margin-top: 5%;
display: flex;
justify-content: center;
}
.vision-flex img{
width: 500px;
}
.left-text{
margin-left: 2%;
padding-top: 20px;
}
.left-text h1{
font-size: 50px;
}
.left-text p{
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 10px;
font-size: 22px;
font-size: 20px;
}
.ourvision-li{
display: flex;
}
.vision-li2{
margin-left: 10px;
margin-right: 10px;
}
.left-text li a{
border: 2px;
font-size: 22px;
padding: 10px 40px;
background-color: #3166B0;
color: white;
border-radius: 5px;
}
.left-text li{
display: inline-block;
}
.left-text li a:hover{
background-color: transparent;
color: #3166B0;
border: 2px solid #3166B0;
}
.right-img{
margin-right: 2%;
}
/* for navicon */
.fa-solid {
display: none;
}
/* footer styling */
.footer-flex{
display: flex;
width: 100%;
background-color: black;
justify-content: center;
margin-top: 5%;
}
.footer-item{
color: white;
margin: 40px 25px;
padding: 20px;
text-align: center;
}
.footer-item h4{
font-size: 30px;
color: #3166B0;
}
.footer-item p{
font-size: 18px;
}
@media screen and (max-width:700px) {
body{
width: 100%;
padding: 0;
margin: 0;
overflow-x: hidden;
left: -50vw;
}
.logo-box{
flex-direction: column;
}
ul li{
display: block;
}
ul{display: none;
}
ul{
height: 50vh;
width: 40%;
text-align: center;
position: absolute;
top: 0;
right: 0;
z-index: 2;
line-height: 1.6;
background-color: lavender;
}
.fa-solid {
color: #3166B0;
}
.fa-xmark{
font-size: 25px;
padding: 50px;
}
.far-btn{
display: block;
font-size: 25px;
}
.fa-bars{
font-size: 25px;
color: #3166B0;
position: absolute;
right: 0;
top: 3%;
cursor: pointer;
}
.hero-section{
display: inline-block;
text-align: center;
}
.right-side img{
width: 400px;
margin: auto;
}
.left-side h1{
font-size: 50px;
}
.left-side p{
font-size: 20px;
}
.btn-box{
display: inline-block;
}
.btnn1{
font-size: 25px;
}
.btnn{
font-size: 25px;
}
/* work container */
.work-container{
text-align: center;
}
.work-container h1{
font-size: 50px;
color: black;
}
.work-flex{
display: inline-block;
}
.work-items h2{
font-size: 30px;
color: #3166B0;
}
.work-items p{
text-align: center;
font-size: 20px;
}
.work-items img{
margin-left: 10%;
}
.master{
position: relative;
}
.master h2{
font-size: 30px;
padding-left: 20px;
padding-right: 20px;
}
.gbtn{
position: absolute;
right:0;
left: 0;
margin-left: 30%;
margin-right:30% ;
}
.gbtn:hover{
border: none;
background-color: rgb(160, 160, 239);
}
.gbtn a:hover{
color: white;
}
.learn-flex{
display: inline-block;
text-align: center;
margin-top: 10%;
}
.learn-left{
margin-bottom: 20%;
}
.learn-left h1{
font-size: 50px;
}
.learn-right img{
width: 400px;
}
.learn-left p{
font-size: 20px;
padding-left: 10px;
padding-right: 10px;
}
.plan-flex{
display: inline-block;
text-align: center;
margin-top: 15%;
}
.the-plan{
width: 346px;
margin-left: 10%;
text-align: center;
margin-left: 18%;
}
.the-plan p{
font-size: 20px;
}
.the-plan li{
margin-bottom: 3%;
}
.innovation{
width: 347px;
margin-left: 10%;
text-align: center;
margin-left: 18%;
}
.innovation li{
margin-bottom: 3%;
}
.vision-flex{
display: inline-block;
margin-top: 15%;
text-align: center;
}
.ourvision-li{
display: inline-block;
}
.vision-li2{
margin-top: 30px;
margin-bottom: 30px;
}
.left-text h1{
font-size: 35px;
}
.left-text p{
font-size: 20px;
padding-left: 20px;
padding-right: 20px;
}
.right-img img{
width: 400px;
}
.footer-flex{
display: inline-block;
}
.footer-item{
text-align: center;
padding-top: 5px;
}
.footer-item h4{
font-size: 30px;
}
.footer-item p{
font-size: 22px;
}
}Editor is loading...