530 lines
7.5 KiB
SCSS
530 lines
7.5 KiB
SCSS
body{
|
|
background-color: rgb(233, 221, 221);
|
|
font-family: 'Times New Roman', Times, serif;
|
|
color: black;
|
|
width:100%;
|
|
height: 100%;
|
|
margin:0px;
|
|
//padding:1em;
|
|
//border-radius: 10em;
|
|
//max-width: fit-content;
|
|
}
|
|
|
|
.navbar{
|
|
background: white;
|
|
padding: 1em;
|
|
|
|
|
|
.LOGO{
|
|
text-align:left;
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
float: left;
|
|
position:static;
|
|
top:2em;
|
|
left:23.5em;
|
|
margin: .56em .3em 0 auto
|
|
}
|
|
|
|
.NAME{
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
color: black;
|
|
font-size: 1.5em;
|
|
margin: 0em 12em 0em 0em ;
|
|
text-align: center;
|
|
padding-top: .25em;
|
|
|
|
span {
|
|
color:gray;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
display: none ;
|
|
float:left;
|
|
width: 1em;
|
|
}
|
|
|
|
.nav-container {
|
|
display: flex;
|
|
place-content: space-between;
|
|
|
|
}
|
|
|
|
.mobile-menu {
|
|
cursor: pointer;
|
|
float: right;
|
|
position: fixed;
|
|
right: .5em;
|
|
}
|
|
|
|
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.LOGO-1{
|
|
text-align: left;
|
|
width: 2em ;
|
|
float: right;
|
|
position:absolute;
|
|
top: 150px ;
|
|
left: 1080px;
|
|
}
|
|
|
|
nav {
|
|
position: fixed;
|
|
z-index: 999;
|
|
width: 66%;
|
|
right: 0;
|
|
top: 0;
|
|
background: #20272e;
|
|
height: 100vh;
|
|
padding: 1em;
|
|
|
|
ul.primary-nav {
|
|
margin-top: 5em;
|
|
|
|
}
|
|
|
|
li {
|
|
a {
|
|
color: rgb(0, 0, 0);
|
|
text-decoration: none;
|
|
display: block;
|
|
padding: 0.5em;
|
|
font-size: 1.3em;
|
|
text-align: right;
|
|
|
|
&:hover {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.mobile-menu-exit{
|
|
float: right;
|
|
margin: 0.5em;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.hero{
|
|
background: rgb(205,190,190);
|
|
background: linear-gradient(90deg, rgba(205,190,190,1) 0%, rgba(106,106,106,1) 50%, rgb(35, 53, 58) 100%);
|
|
height:auto ;
|
|
margin:auto ;
|
|
|
|
|
|
.hero-img {
|
|
width: 900px;
|
|
height:550px;
|
|
margin: 0%;
|
|
padding: 0%;
|
|
float: left;
|
|
position:static;
|
|
}
|
|
|
|
.intro{
|
|
width: 900px;
|
|
height: auto;
|
|
margin: 0% 0% 0% 102%;
|
|
position: static;
|
|
}
|
|
|
|
.inrto-1{
|
|
color: white;
|
|
font-size: xxx-large;
|
|
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
|
margin: 50px 0px 10px 0px;
|
|
width: 50%;
|
|
}
|
|
.sub-intro {
|
|
width: 50%;
|
|
font-size: large;
|
|
color: white;
|
|
margin:0%;
|
|
|
|
}
|
|
|
|
.about-1 {
|
|
width: 50%;
|
|
color: white;
|
|
margin: 10px 0px 0px 0px;
|
|
|
|
}
|
|
hr{
|
|
width: 50%;
|
|
float: left;
|
|
color: #000000;
|
|
}
|
|
|
|
.icons{
|
|
display: flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
flex-direction: column;
|
|
width: fit-content;
|
|
margin-top: -36%;
|
|
|
|
.icon-1 {
|
|
text-align: left;
|
|
width: 100px;
|
|
float: right;
|
|
position:static;
|
|
top: 150px ;
|
|
left: 1410px;
|
|
margin:4em;
|
|
}
|
|
.icon-2{
|
|
text-align: left;
|
|
width: 100px;
|
|
float: right;
|
|
position:static;
|
|
top: 320px ;
|
|
left: 1410px ;
|
|
}
|
|
}
|
|
|
|
.Cont-info{
|
|
color: white;
|
|
float: right;
|
|
width:38%;
|
|
display: flex;
|
|
|
|
justify-content:center;
|
|
flex-direction: column;
|
|
position: static;
|
|
left: 2em;
|
|
margin-top: -36%;
|
|
margin-right:-6.5em;
|
|
//margin-left:;
|
|
}
|
|
|
|
.cont-1{
|
|
overflow: hidden;
|
|
width: 80%;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
.cont{
|
|
display: flex;
|
|
width:auto;
|
|
justify-content: center;
|
|
margin-left: -5em;
|
|
}
|
|
|
|
form{
|
|
width: fit-content;
|
|
display: flex;
|
|
justify-content:left;
|
|
flex-direction: column;
|
|
//margin-top: .5em;
|
|
}
|
|
|
|
.text{
|
|
border-radius: 1em;
|
|
margin: 0 0 1em 0 ;
|
|
}
|
|
|
|
.message{
|
|
border-radius: 1em;
|
|
}
|
|
|
|
.send-message-cta{
|
|
background-color: #acacac;
|
|
border-radius: 1em;
|
|
margin-top: .5em;
|
|
width: fit-content;
|
|
font-weight: bold;
|
|
margin: .3em 0 0 auto;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.goal {
|
|
width: fit-content;
|
|
padding-left: .5em;
|
|
//padding-right: .5em;
|
|
|
|
.p{
|
|
width: 80em;
|
|
box-shadow: 0px 18px 11px 15px rgb(199, 199, 199);
|
|
line-height:1.3em;
|
|
}
|
|
}
|
|
|
|
.sub-web{
|
|
width: 1911px;
|
|
display: flex;
|
|
justify-content:flex-end
|
|
|
|
}
|
|
|
|
.phone-lap{
|
|
width: 600px;
|
|
margin-top:-15.6em;
|
|
margin-right:em;
|
|
}
|
|
|
|
|
|
.location{
|
|
//margin-right:21.4em;
|
|
padding-top: 1em;
|
|
display: flex;
|
|
justify-content:center;
|
|
}
|
|
.maldives{
|
|
width: 250px;
|
|
height:200px;
|
|
//padding-right: 1em;
|
|
box-shadow: 10px 10px 5px #aaaaaa;
|
|
}
|
|
|
|
.faafu{
|
|
width: 250px;
|
|
height:200px;
|
|
//padding-right: 1em;
|
|
padding-left: 1em;
|
|
box-shadow: 10px 10px 5px #aaaaaa;
|
|
}
|
|
|
|
.dharanboodhoo{
|
|
width:250px;
|
|
height:200px;
|
|
padding-left: 1em;
|
|
box-shadow: 10px 10px 5px #aaaaaa;
|
|
}
|
|
|
|
|
|
|
|
.phone{
|
|
margin-right:2em ;
|
|
display: flex;
|
|
justify-content:flex-end
|
|
}
|
|
|
|
.phone-1{
|
|
width: 250px;
|
|
}
|
|
|
|
.tab{
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
.tab-1{
|
|
margin-top:-33em ;
|
|
width: 370px;
|
|
}
|
|
}
|
|
//////////////////
|
|
///
|
|
|
|
.back-page{
|
|
background-color: white;
|
|
width:fit-content;
|
|
display: flex;
|
|
justify-content: center;
|
|
box-shadow: 10px 10px 5px rgb(168, 168, 168);
|
|
}
|
|
|
|
.projects:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
.project {
|
|
margin-bottom: 30px;
|
|
|
|
}
|
|
.row > * {
|
|
flex-shrink: 0;
|
|
|
|
//width: 100%;
|
|
|
|
max-width: 100%;
|
|
|
|
//padding-right: calc(var(--bs-gutter-x) * .5);
|
|
|
|
//padding-left: calc(var(--bs-gutter-x) * .5);
|
|
|
|
//margin-top: var(--bs-gutter-y);
|
|
|
|
}
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
//margin-top:em;
|
|
|
|
}
|
|
.card-body {
|
|
flex: 1 1 auto;
|
|
|
|
padding: 1rem 1rem;
|
|
|
|
color:black;
|
|
background-color: white;
|
|
width:318px;
|
|
|
|
}
|
|
.card-shadow-lg{
|
|
width: fit-content;
|
|
margin: .5em;
|
|
outline-color: #000000;
|
|
outline-style: solid;
|
|
}
|
|
.card-title{
|
|
margin: 0%;
|
|
font-size: large;
|
|
}
|
|
|
|
.card-img-top{
|
|
width:350px;
|
|
}
|
|
.col-md-4-project{
|
|
width: fit-content;
|
|
}
|
|
.section-title{
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: -19em;
|
|
}
|
|
|
|
.btn-primary{
|
|
background-color: gray;
|
|
border-radius: .2em;
|
|
padding: .5em;
|
|
text-decoration: none;
|
|
color: white;
|
|
|
|
.btn-primary:hover
|
|
{
|
|
background-color: #000000;
|
|
}
|
|
}
|
|
|
|
footer{
|
|
margin-top:5em;
|
|
background-color: #000000;
|
|
color: white;
|
|
padding: 1em;
|
|
//padding-bottom: 1em;
|
|
margin-top:3.2em;
|
|
|
|
.alex{
|
|
margin: 0%;
|
|
text-decoration: none;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items:flex-end;
|
|
|
|
}
|
|
|
|
.back-to-top{
|
|
margin: 0%;
|
|
text-decoration: none;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.mobile-menu,
|
|
.mobile-menu-exit{
|
|
display:none;
|
|
}
|
|
.navbar .container {
|
|
display: grid;
|
|
grid-template-columns: 180px auto;
|
|
justify-content: unset;
|
|
}
|
|
|
|
.navbar nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background: none;
|
|
position: unset;
|
|
height: auto;
|
|
width: 100%;
|
|
padding: 0;
|
|
|
|
ul {
|
|
display: flex;
|
|
}
|
|
|
|
a {
|
|
color: black;
|
|
font-size: 1em;
|
|
padding: 0.1em 1em;
|
|
}
|
|
|
|
ul.primary-nav {
|
|
margin: 0;
|
|
}
|
|
|
|
li.current a {
|
|
font-weight: bold;
|
|
}
|
|
li.go-premium-cta a {
|
|
//color: var(--primary-color);
|
|
border: 3px solid ;
|
|
font-weight: bold;
|
|
border-radius: 5em;
|
|
margin-top: -0.2em;
|
|
|
|
&:hover {
|
|
background:black;
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
.primary-nav{
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 1080px) {
|
|
|
|
.nav-container {
|
|
width: 1080px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
.hero .container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: left;
|
|
|
|
.left-col {
|
|
margin: 3em 3em 0 5em;
|
|
|
|
h1 {
|
|
font-size: 3em;
|
|
width: 90%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@media(max-width: 1600px)
|
|
{
|
|
.container {
|
|
width: 100%;
|
|
}
|
|
} |