Spaces:
Running
Running
*{ | |
margin: 0; | |
padding: 0; | |
font-family: 'Raleway', sans-serif; | |
} | |
.header{ | |
min-height: 100vh; | |
width: 100%; | |
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/bg.jpg); | |
background-position: center; | |
background-size: cover; | |
position: relative; | |
} | |
nav{ | |
display: flex; | |
padding: 2% 6%; | |
justify-content: space-between ; | |
align-items: center; | |
} | |
nav img{ | |
width: 400px; | |
} | |
.nav-links{ | |
flex: 1; | |
text-align: right; | |
} | |
.nav-links ul li{ | |
list-style: none; | |
display: inline-block; | |
padding: 8px 12px; | |
position: relative; | |
} | |
.nav-links ul li a{ | |
color: white; | |
text-decoration: none; | |
font-size: 15px; | |
} | |
.nav-links ul li::after{ | |
content: ''; | |
width: 0%; | |
height: 2px; | |
background: orange; | |
display: block; | |
margin: auto; | |
transition: 0.5s; | |
} | |
.nav-links ul li:hover::after{ | |
width: 100%; | |
} | |
.text-box{ | |
width: 90%; | |
color: white; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%,-50%); | |
text-align: center; | |
} | |
.text-box h1{ | |
font-size: 62px; | |
} | |
.text-box p{ | |
margin: 10px 0 40px; | |
font-size: 14px; | |
color: white; | |
} | |
.more-btn{ | |
display: inline-block; | |
text-decoration: none; | |
color: white; | |
border: 1px solid white; | |
padding: 12px 34px; | |
background: transparent; | |
position: relative; | |
cursor: pointer; | |
} | |
.more-btn:hover{ | |
border: 1px solid orange; | |
background: orange; | |
transition: 1s; | |
} | |
nav .lni{ | |
display: none; | |
} | |
@media(max-width: 700px){ | |
.text-box h1{ | |
font-size: 20px; | |
} | |
.nav-links ul li{ | |
display: block; | |
} | |
.nav-links{ | |
position: absolute; | |
background: orange; | |
height: 100vh; | |
width: 200px; | |
top: 0; | |
right: -200px; | |
text-align: left; | |
z-index: 2; | |
transition: 1s; | |
} | |
nav .lni{ | |
display: block; | |
color: white; | |
margin: 10px; | |
font-size: 22px; | |
cursor: pointer; | |
} | |
.nav-links ul{ | |
padding: 30px; | |
} | |
} | |
/*-----courses-----*/ | |
.course{ | |
width: 80%; | |
margin: auto; | |
text-align: center ; | |
padding-top: 100px; | |
} | |
h1{ | |
font-size: 36px; | |
font-weight: 600; | |
} | |
p{ | |
color: black; | |
font-size: 14px; | |
font-weight: 300; | |
line-height: 22px; | |
padding: 10px; | |
} | |
.row{ | |
margin-top: 5%; | |
display: flex; | |
justify-content: space-between; | |
} | |
.course-col{ | |
flex-basis: 31%; | |
background: rgb(236, 194, 145); | |
border-radius: 10px; | |
margin-bottom: 5%; | |
padding: 20px 12px; | |
box-sizing: border-box; | |
transition: 0.5s; | |
} | |
h3{ | |
text-align: center; | |
font-weight: 600; | |
margin: 10px 0; | |
} | |
.course-col:hover{ | |
box-shadow: 0 0 20px 0px rgba(0,0,0,0.5) ; | |
} | |
@media(max-width: 700px){ | |
.row{ | |
flex-direction: column; | |
} | |
} | |
/*--campus--*/ | |
.campus{ | |
width: 80%; | |
margin: auto; | |
text-align: center; | |
padding-top: 50px; | |
} | |
.campus-col{ | |
flex-basis: 30%; | |
border-radius: 10px; | |
margin-bottom: 30px; | |
position: relative; | |
overflow: hidden; | |
} | |
.campus-col img{ | |
width: 100%; | |
border-radius: 10px; | |
display: block; | |
} | |
.layer{ | |
background: transparent; | |
height: 100%; | |
width: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
transition: 0.5s; | |
} | |
.layer:hover{ | |
background: rgba(255, 137, 69, 0.7); | |
} | |
.layer h3{ | |
width: 100%; | |
font-weight: 500; | |
color: white; | |
font-size: 26px; | |
bottom: 0; | |
left: 50%; | |
transform: translate(-50%); | |
position: absolute; | |
opacity: 0; | |
transition: 0.5s; | |
} | |
.layer:hover h3{ | |
bottom: 49%; | |
opacity: 1; | |
} | |
/*----facilities---*/ | |
.fac{ | |
width: 80%; | |
margin: auto; | |
text-align: center; | |
padding-top: 100px ; | |
} | |
.fac-col{ | |
flex-basis: 31%; | |
border-radius: 10px; | |
margin-bottom: 5%; | |
text-align: left; | |
} | |
.fac-col img{ | |
width: 100%; | |
border-radius: 10px; | |
} | |
.fac-col p{ | |
padding: 0; | |
} | |
.fac-col h3{ | |
margin-top: 16px; | |
margin-bottom: 15px; | |
text-align: left; | |
} | |
/*---home contact--*/ | |
.con{ | |
margin: 100px auto; | |
width: 80%; | |
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.7)),url(images/conh.jpg); | |
background-position: center; | |
background-size: cover; | |
border: 10px; | |
text-align: center; | |
padding: 10px; | |
} | |
.con h1{ | |
color: white; | |
margin-bottom: 40px; | |
padding: 0; | |
} | |
/*----footer---*/ | |
.footer{ | |
width: 100%; | |
text-align: center; | |
padding: 30px 0; | |
} | |
.footer h4{ | |
margin-bottom: 25px; | |
margin-top: 20px; | |
font-weight: 600; | |
} | |
.icons .lni{ | |
color: rgb(255, 87, 9); | |
margin: 0 13px; | |
cursor: pointer; | |
padding: 18px 0; | |
} | |
/*----------ABOUT PAGE-----------*/ | |
.sub-header{ | |
height: 50vh; | |
width: 100%; | |
background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(images/abbg.jpg); | |
background-position: center; | |
background-size: cover; | |
text-align: center; | |
color: white; | |
} | |
.sub-header h1{ | |
margin-top: 100px; | |
} | |
.abt{ | |
width: 80%; | |
margin: auto; | |
padding-top: 80px; | |
padding-bottom: 50px; | |
} | |
.abt-col{ | |
flex-basis: 48%; | |
padding: 30px 2px; | |
} | |
.abt-col img{ | |
width: 100%; | |
} | |
.abt-col h1{ | |
padding-top: 0; | |
} | |
.abt-col p{ | |
padding: 15px 0 25px; | |
} | |
.no-btn{ | |
border: 1px solid orange; | |
background: transparent; | |
color: orange; | |
} | |
.no-btn:hover{ | |
color: white; | |
} | |
/*---------FEEDBACK PAGE-----*/ | |
.feed{ | |
width: 80%; | |
margin: auto; | |
padding: 60px 0; | |
} | |
.feed-left{ | |
flex-basis: 65%; | |
} | |
.feed-left img{ | |
width: 100%; | |
} | |
.feed-left h2{ | |
color: black; | |
font-weight: 600; | |
margin: 30px 0; | |
} | |
.comment{ | |
border: 1px solid #cccc; | |
margin: 0.05px 0; | |
padding: 0.001px 20px; | |
} | |
.comment h3{ | |
text-align: left; | |
} | |
.comment-form input,textarea{ | |
width: 100%; | |
padding: 10px; | |
margin: 15px 0; | |
box-sizing: border-box; | |
border: none; | |
outline: none; | |
background: #f0f0f0; | |
} | |
.comment-form button{ | |
margin: 10px 0; | |
} | |
/*------contact us page -----------------*/ | |
.location{ | |
width: 80%; | |
margin: auto; | |
padding: 80px 0; | |
} | |
.location iframe{ | |
width: 100%; | |
} | |
.contus{ | |
width: 80%; | |
margin: auto; | |
} | |
.contus-col{ | |
flex-basis: 48%; | |
margin-bottom: 30px; | |
} | |
.contus-col div{ | |
display: flex; | |
align-items: center; | |
margin-bottom: 40px; | |
} | |
.contus-col div .lni{ | |
font-size: 28px; | |
color: red; | |
margin: 10px; | |
margin-right: 30px; | |
} | |
.contus-col div p{ | |
padding: 0; | |
} | |
.contus-col div h5{ | |
font-size: 20px; | |
margin-bottom: 5px; | |
color: #555; | |
font-weight: 400; | |
} | |
.contus-col input, .contus-col textarea{ | |
width: 100%; | |
padding: 15px; | |
margin-bottom: 17px; | |
outline: none; | |
border: 1px solid #ccc ; | |
} |