new files
This commit is contained in:
Alsan
commit
fcead50cd3
BIN
2024-09-18_14-27.png
Normal file
BIN
2024-09-18_14-27.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
Replace-fav-icon.png
Normal file
BIN
Replace-fav-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
447
css/main.css
Normal file
447
css/main.css
Normal file
@ -0,0 +1,447 @@
|
||||
body {
|
||||
background-color: rgb(233, 221, 221);
|
||||
font-family: "Times New Roman", Times, serif;
|
||||
color: black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background: white;
|
||||
padding: 1em;
|
||||
}
|
||||
.navbar .LOGO {
|
||||
text-align: left;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
float: left;
|
||||
position: static;
|
||||
top: 2em;
|
||||
left: 23.5em;
|
||||
margin: 0.56em 0.3em 0 auto;
|
||||
}
|
||||
.navbar .NAME {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
font-size: 1.5em;
|
||||
margin: 0em 12em 0em 0em;
|
||||
text-align: center;
|
||||
padding-top: 0.25em;
|
||||
}
|
||||
.navbar .NAME span {
|
||||
color: gray;
|
||||
}
|
||||
.navbar nav {
|
||||
display: none;
|
||||
float: left;
|
||||
width: 1em;
|
||||
}
|
||||
.navbar .nav-container {
|
||||
display: flex;
|
||||
place-content: space-between;
|
||||
}
|
||||
.navbar .mobile-menu {
|
||||
cursor: pointer;
|
||||
float: right;
|
||||
position: fixed;
|
||||
right: 0.5em;
|
||||
}
|
||||
.navbar ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.navbar .LOGO-1 {
|
||||
text-align: left;
|
||||
width: 2em;
|
||||
float: right;
|
||||
position: absolute;
|
||||
top: 150px;
|
||||
left: 1080px;
|
||||
}
|
||||
.navbar nav {
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
width: 66%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #20272e;
|
||||
height: 100vh;
|
||||
padding: 1em;
|
||||
}
|
||||
.navbar nav ul.primary-nav {
|
||||
margin-top: 5em;
|
||||
}
|
||||
.navbar nav li a {
|
||||
color: rgb(0, 0, 0);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
font-size: 1.3em;
|
||||
text-align: right;
|
||||
}
|
||||
.navbar nav li a:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
.navbar .mobile-menu-exit {
|
||||
float: right;
|
||||
margin: 0.5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background: rgb(205, 190, 190);
|
||||
background: linear-gradient(90deg, rgb(205, 190, 190) 0%, rgb(106, 106, 106) 50%, rgb(35, 53, 58) 100%);
|
||||
height: auto;
|
||||
margin: auto;
|
||||
}
|
||||
.hero .hero-img {
|
||||
width: 900px;
|
||||
height: 550px;
|
||||
margin: 0%;
|
||||
padding: 0%;
|
||||
float: left;
|
||||
position: static;
|
||||
}
|
||||
.hero .intro {
|
||||
width: 900px;
|
||||
height: auto;
|
||||
margin: 0% 0% 0% 102%;
|
||||
position: static;
|
||||
}
|
||||
.hero .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%;
|
||||
}
|
||||
.hero .sub-intro {
|
||||
width: 50%;
|
||||
font-size: large;
|
||||
color: white;
|
||||
margin: 0%;
|
||||
}
|
||||
.hero .about-1 {
|
||||
width: 50%;
|
||||
color: white;
|
||||
margin: 10px 0px 0px 0px;
|
||||
}
|
||||
.hero hr {
|
||||
width: 50%;
|
||||
float: left;
|
||||
color: #000000;
|
||||
}
|
||||
.hero .icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
margin-top: -36%;
|
||||
}
|
||||
.hero .icons .icon-1 {
|
||||
text-align: left;
|
||||
width: 100px;
|
||||
float: right;
|
||||
position: static;
|
||||
top: 150px;
|
||||
left: 1410px;
|
||||
margin: 4em;
|
||||
}
|
||||
.hero .icons .icon-2 {
|
||||
text-align: left;
|
||||
width: 100px;
|
||||
float: right;
|
||||
position: static;
|
||||
top: 320px;
|
||||
left: 1410px;
|
||||
}
|
||||
.hero .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;
|
||||
}
|
||||
.hero .cont-1 {
|
||||
overflow: hidden;
|
||||
width: 80%;
|
||||
}
|
||||
.hero .cont {
|
||||
display: flex;
|
||||
width: auto;
|
||||
justify-content: center;
|
||||
margin-left: -5em;
|
||||
}
|
||||
.hero form {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
flex-direction: column;
|
||||
}
|
||||
.hero .text {
|
||||
border-radius: 1em;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
.hero .message {
|
||||
border-radius: 1em;
|
||||
}
|
||||
.hero .send-message-cta {
|
||||
background-color: #acacac;
|
||||
border-radius: 1em;
|
||||
margin-top: 0.5em;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
font-weight: bold;
|
||||
margin: 0.3em 0 0 auto;
|
||||
}
|
||||
|
||||
.goal {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.goal .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 {
|
||||
padding-top: 1em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.maldives {
|
||||
width: 250px;
|
||||
height: 200px;
|
||||
box-shadow: 10px 10px 5px #aaaaaa;
|
||||
}
|
||||
|
||||
.faafu {
|
||||
width: 250px;
|
||||
height: 200px;
|
||||
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 .tab-1 {
|
||||
margin-top: -33em;
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
.back-page {
|
||||
background-color: white;
|
||||
width: -moz-fit-content;
|
||||
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;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 1rem 1rem;
|
||||
color: black;
|
||||
background-color: white;
|
||||
width: 318px;
|
||||
}
|
||||
|
||||
.card-shadow-lg {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
margin: 0.5em;
|
||||
outline-color: #000000;
|
||||
outline-style: solid;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.card-img-top {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.col-md-4-project {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: -19em;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: gray;
|
||||
border-radius: 0.2em;
|
||||
padding: 0.5em;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary .btn-primary:hover {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 5em;
|
||||
background-color: #000000;
|
||||
color: white;
|
||||
padding: 1em;
|
||||
margin-top: 3.2em;
|
||||
}
|
||||
footer .alex {
|
||||
margin: 0%;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
}
|
||||
footer .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;
|
||||
}
|
||||
.navbar nav ul {
|
||||
display: flex;
|
||||
}
|
||||
.navbar nav a {
|
||||
color: black;
|
||||
font-size: 1em;
|
||||
padding: 0.1em 1em;
|
||||
}
|
||||
.navbar nav ul.primary-nav {
|
||||
margin: 0;
|
||||
}
|
||||
.navbar nav li.current a {
|
||||
font-weight: bold;
|
||||
}
|
||||
.navbar nav li.go-premium-cta a {
|
||||
border: 3px solid;
|
||||
font-weight: bold;
|
||||
border-radius: 5em;
|
||||
margin-top: -0.2em;
|
||||
}
|
||||
.navbar nav li.go-premium-cta a: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;
|
||||
}
|
||||
.hero .container .left-col {
|
||||
margin: 3em 3em 0 5em;
|
||||
}
|
||||
.hero .container .left-col h1 {
|
||||
font-size: 3em;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1600px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}/*# sourceMappingURL=main.css.map */
|
||||
1
css/main.css.map
Normal file
1
css/main.css.map
Normal file
@ -0,0 +1 @@
|
||||
{"version":3,"sources":["main.scss","main.css"],"names":[],"mappings":"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","file":"main.css"}
|
||||
530
css/main.scss
Normal file
530
css/main.scss
Normal file
@ -0,0 +1,530 @@
|
||||
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%;
|
||||
}
|
||||
}
|
||||
BIN
dharanboodhoo.jpg
Normal file
BIN
dharanboodhoo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
BIN
icon-1.png
Normal file
BIN
icon-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
BIN
icon-2.png
Normal file
BIN
icon-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
180
index.html
Normal file
180
index.html
Normal file
@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Alex_PF</title>
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="icon" href="Replace-fav-icon.png">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!--NAV-->
|
||||
<div class="navbar">
|
||||
<div class="nav-container">
|
||||
<img class="LOGO" src="icon-2.png" alt="LOGO">
|
||||
|
||||
<a class="NAME" href="#">Alex_<span>ty</span></a>
|
||||
|
||||
|
||||
<img id="mobile-cta" class="mobile-menu" src="menu.png" alt="Open Navigation">
|
||||
|
||||
<nav>
|
||||
<img id="mobile-exit" class="mobile-menu-exit" src="menu-exit.png" alt="Close Navigation">
|
||||
|
||||
<ul class="primary-nav">
|
||||
<li class="current"><a href="#">Home</a></li>
|
||||
<li><a href="#Future Goals">Features</a></li>
|
||||
<li><a href="#projects">Pricing</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--HERO-->
|
||||
<section class="hero">
|
||||
<div class="container">
|
||||
<div>
|
||||
<img class="hero-img" src="A1.jpg" alt="hero img">
|
||||
|
||||
<div class="intro">
|
||||
<h1 class="inrto-1">Introduction</h1>
|
||||
<p class="sub-intro">Hi, I'm Alsan Ahmed, a front-end developer with a passion for creating engaging digital experiences.</p>
|
||||
<hr>
|
||||
<P class="about-1">I come from a small island in the Maldives named Dharanboodhoo. Growing up in a place where technology isn't always at your fingertips, I found my curiosity sparked early on. At 16, I decided to dive into the world of IT and web development, and I was fortunate to have a mentor named Shihaam, a local genius and part-time internet provider. Shihaam's guidance helped me navigate the complexities of coding and technology. Now, I'm on my way to becoming a developer, fueled by the passion that began on this little island.</P>
|
||||
|
||||
<div class="icons">
|
||||
<img class="icon-1" src="icon-1.png" alt="my icon">
|
||||
<img class="icon-2" src="icon-2.png" alt="my icon">
|
||||
</div>
|
||||
<div class="Cont-info">
|
||||
|
||||
<div class="cont">
|
||||
<h2 >Contact Me </h2>
|
||||
</div>
|
||||
<div class="cont-1">
|
||||
<p>Hey there! I’m available across multiple platforms if you need to get in touch. You can find me on Instagram, Snapchat, Telegram, Facebook, and Viber. Feel free to drop me a message on any of these apps, and I’ll get back to you as soon as I can
|
||||
|
||||
If you have any questions, feel free to send a text on Telegram, or you can email me with your name and question down below. Looking forward to hearing from you!.</p>
|
||||
</div>
|
||||
<form action="ll">
|
||||
<label for="name">Name</label>
|
||||
<input class="text" type="text" id="name" name="name">
|
||||
|
||||
<label for="message">Message</label>
|
||||
<textarea class="message" name="message" id="message" cols="30" rows="1"></textarea>
|
||||
|
||||
<input type="submit" class="send-message-cta" value="Send message">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--Goals-->
|
||||
<section id="Future Goals" class="goal">
|
||||
<div class="container">
|
||||
<h1>Future Goals</h1>
|
||||
<div class="p">
|
||||
<p> A developer with some experience under my belt, my future goals include advancing my skills and expanding my knowledge base. I aim to deepen my expertise in my primary programming language and explore more advanced concepts, such as design patterns and software architecture. I also plan to improve my proficiency with multiple frameworks and libraries to become more versatile in my development work.
|
||||
|
||||
Another goal is to enhance my problem-solving capabilities by tackling more complex coding challenges and participating in coding competitions or hackathons. I want to get better at writing efficient, scalable code and learn more about performance optimization techniques.
|
||||
|
||||
Building on my experience, I aspire to take on more significant projects, perhaps contributing to larger open-source initiatives or leading small teams on development projects. I also want to develop my skills in areas like DevOps and cloud computing to understand the full lifecycle of software development and deployment.
|
||||
|
||||
Networking with other developers and participating in tech communities is important to me, as it will help me stay updated with industry trends and best practices. Additionally, I plan to mentor beginners, sharing my knowledge and experiences to help them grow.
|
||||
|
||||
Ultimately, I want to position myself for career advancement, possibly moving into roles with more responsibility, such as a senior developer or team lead, and continuing to pursue lifelong learning and professional growth in the tech field.</p>
|
||||
</div>
|
||||
<!--ext-->
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="sub-web">
|
||||
<img class="phone-lap" src="2024-09-18_14-27.png" alt="Web sub">
|
||||
</div>
|
||||
<div class="location">
|
||||
<img class="maldives" src="maldives.png" alt="maldives">
|
||||
<img class="faafu" src="faafu.png" alt="faafu">
|
||||
<img class="dharanboodhoo" src="dharanboodhoo.jpg" alt="dharanboodhoo">
|
||||
</div>
|
||||
<div class="phone">
|
||||
<img class="phone-1" src="untitled.png" alt="phone view">
|
||||
</div>
|
||||
<div class="tab">
|
||||
<img class="tab-1" src="tab.png" alt="tablet view">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Projects Section -->
|
||||
<section id="projects" class="container">
|
||||
|
||||
<h2 class="section-title">Projects</h2>
|
||||
<div class="row">
|
||||
<div class="back-page">
|
||||
<div class="col-md-4-project">
|
||||
<div class="card-shadow-lg">
|
||||
<img src="project.png" class="card-img-top" alt="Project 1">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project 1</h5>
|
||||
<p class="card-text">A brief description of Project 1, highlighting the key features and technologies used.</p>
|
||||
<a href="#" class="btn-primary">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4-project">
|
||||
<div class="card-shadow-lg">
|
||||
<img src="project.png" class="card-img-top" alt="Project 2">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project 2</h5>
|
||||
<p class="card-text">A brief description of Project 2, highlighting the key features and technologies used.</p>
|
||||
<a href="#" class="btn-primary">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4-project">
|
||||
<div class="card-shadow-lg">
|
||||
<img src="project.png" class="card-img-top" alt="Project 3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Project 3</h5>
|
||||
<p class="card-text">A brief description of Project 3, highlighting the key features and technologies used.</p>
|
||||
<a href="#" class="btn-primary">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p class="back-to-top">
|
||||
<a class="back-to-top-1" href="#">Back to top</a>
|
||||
</p>
|
||||
|
||||
<p class="alex">
|
||||
<<< ©<a class="alex" href="about.html">ALex</a>>>>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const mobileBtn = document.getElementById('mobile-cta')
|
||||
nav = document.querySelector('nav')
|
||||
mobileBtnExit = document.getElementById('mobile-exit');
|
||||
|
||||
mobileBtn.addEventListener('click', () => {
|
||||
nav.classList.add('menu-btn');
|
||||
})
|
||||
|
||||
mobileBtnExit.addEventListener('click', () => {
|
||||
nav.classList.remove('menu-btn');
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
maldives.png
Normal file
BIN
maldives.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 459 KiB |
BIN
menu-exit.png
Normal file
BIN
menu-exit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 339 B |
BIN
project.png
Normal file
BIN
project.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
BIN
untitled.png
Normal file
BIN
untitled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
Loading…
x
Reference in New Issue
Block a user