Permalink
Please
sign in to comment.
Showing
with
836 additions
and 0 deletions.
- BIN docs/.DS_Store
- +5 −0 docs/css/components/avatar.css
- +116 −0 docs/css/components/banner.css
- +25 −0 docs/css/components/banner2.css
- 0 docs/css/components/box.css
- +7 −0 docs/css/components/button.css
- +49 −0 docs/css/components/card.css
- +138 −0 docs/css/components/card2.css
- +77 −0 docs/css/components/container.css
- +86 −0 docs/css/components/form.css
- +16 −0 docs/css/components/sidebar.css
- +134 −0 docs/css/style.css
- +40 −0 docs/css/untitled.html
- BIN docs/images/.DS_Store
- BIN docs/images/background.jpeg
- BIN docs/images/come.jpg
- BIN docs/images/costarica.jpg
- BIN docs/images/faroe.jpg
- BIN docs/images/iceland.jpg
- BIN docs/images/nepal.jpg
- BIN docs/images/norway.jpg
- BIN docs/images/shanghai.jpg
- BIN docs/images/tipsit.png
- BIN docs/images/tokyo.jpg
- +143 −0 docs/index.html
Binary file not shown.
@@ -0,0 +1,5 @@ | |||
.avatar { | |||
width: 200px; | |||
margin: 0 auto; | |||
border-radius: 50%; | |||
} |
@@ -0,0 +1,116 @@ | |||
.banner { | |||
background-image: linear-gradient(-225deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 50%), url(../../images/background.jpeg); | |||
color: white; | |||
padding: 150px 0px; | |||
background-size: cover; | |||
background-position: center; | |||
text-align: left; | |||
} | |||
|
|||
.banner h1 { | |||
font-size: 40px; | |||
font-weight: bold; | |||
line-height: 120%; | |||
margin-top: 0%; | |||
} | |||
|
|||
.banner h2 { | |||
font-size: 25px; | |||
font-weight: lighter; | |||
margin-top: -20px; | |||
margin-bottom: 40px; | |||
color: white; | |||
} | |||
|
|||
form { | |||
width:500px; | |||
margin:50px auto; | |||
} | |||
.search { | |||
padding:8px 15px; | |||
background:rgba(50, 50, 50, 0.2); | |||
border:0px solid #dbdbdb; | |||
} | |||
.button { | |||
position:relative; | |||
padding:6px 15px; | |||
left:-8px; | |||
border:2px solid #207cca; | |||
background-color:#207cca; | |||
color:#fafafa; | |||
} | |||
.button:hover { | |||
background-color:#fafafa; | |||
color:#207cca; | |||
} | |||
|
|||
|
|||
|
|||
.box{ | |||
margin: 0px auto; | |||
width: 300px; | |||
height: 50px; | |||
box-shadow:rgba(0,0,0,2); | |||
} | |||
|
|||
.container-1{ | |||
width: 300px; | |||
vertical-align: middle; | |||
white-space: nowrap; | |||
position: relative; | |||
margin: 0px auto; | |||
box-shadow:rgba(0,10,0,2); | |||
} | |||
|
|||
.container-1 input#search{ | |||
width: 300px; | |||
height: 50px; | |||
background: white; | |||
border: none; | |||
font-family: "Nunito" | |||
font-size: 15pt; | |||
font-weight: bold; | |||
float: left; | |||
padding-left: 45px; | |||
-webkit-border-radius: 5px; | |||
-moz-border-radius: 5px; | |||
border-radius: 5px; | |||
box-shadow: rgba(4,0,0,0.1) | |||
|
|||
|
|||
-webkit-transition: background .55s ease; | |||
-moz-transition: background .55s ease; | |||
-ms-transition: background .55s ease; | |||
-o-transition: background .55s ease; | |||
transition: background .55s ease; | |||
} | |||
|
|||
.container-1 input#search::-webkit-input-placeholder { | |||
color: #65737e; | |||
} | |||
|
|||
.container-1 input#search:-moz-placeholder { /* Firefox 18- */ | |||
color: #65737e; | |||
} | |||
|
|||
.container-1 input#search::-moz-placeholder { /* Firefox 19+ */ | |||
color: #65737e; | |||
} | |||
|
|||
.container-1 input#search:-ms-input-placeholder { | |||
color: #65737e; | |||
} | |||
|
|||
.container-1 .icon{ | |||
position: absolute; | |||
top: 50%; | |||
margin-left: -135px; | |||
margin-top: 15px; | |||
z-index: 1; | |||
color: white; | |||
} | |||
|
|||
.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{ | |||
outline:none; | |||
background: #ffffff; | |||
} |
@@ -0,0 +1,25 @@ | |||
.banner2 { | |||
background-size: cover; | |||
background-position: center; | |||
background-color: #ff5959; | |||
padding: 50px 0px; | |||
} | |||
|
|||
.banner2 h1 { | |||
font-size: 25px; | |||
font-weight: bold; | |||
line-height: 120%; | |||
color: white; | |||
margin-bottom: 30px; | |||
text-align: center; | |||
|
|||
} | |||
|
|||
.banner2 h2 { | |||
font-size: 18px; | |||
font-weight: lighter; | |||
margin-top: -20px; | |||
margin-bottom: 40px; | |||
color: white; | |||
text-align: center; | |||
} |
No changes.
@@ -0,0 +1,7 @@ | |||
.btn-blue { | |||
background: #ff5959; | |||
padding: 15px 20px; | |||
border-radius: 5px; | |||
font-weight: bold; | |||
color: white; | |||
} |
@@ -0,0 +1,49 @@ | |||
.cards { | |||
display: flex; | |||
flex-wrap: wrap; | |||
flex-direction: row; | |||
margin-top: -20px; | |||
margin-bottom: 50px; | |||
} | |||
|
|||
.card { | |||
display: flex; | |||
box-shadow: 0px 10px 30px rgba(0,0,0,0.2); | |||
border-radius: 4px; | |||
margin: 10px; | |||
flex-basis: auto; | |||
flex-grow: 0; | |||
flex-direction: column; | |||
} | |||
|
|||
.card img { | |||
width: 280px; | |||
height: 300px; | |||
border-radius: 4px; | |||
margin-bottom: -10px; | |||
} | |||
|
|||
.card h2 { | |||
align-self: flex-start; | |||
flex-grow: : 1px; | |||
padding-left: 20px; | |||
font-size: 13px; | |||
font-weight: bold; | |||
} | |||
|
|||
.card h3 { | |||
align-self: flex-start; | |||
flex-grow: : 1px; | |||
padding-left: 20px; | |||
font-size: 20px; | |||
font-weight: bold; | |||
color: white; | |||
margin: -30px 0px 0px; | |||
} | |||
|
|||
|
|||
.card a { | |||
font-size: 14px; | |||
align-self: flex-end; | |||
margin: -47px 10px 0px; | |||
} |
@@ -0,0 +1,138 @@ | |||
.about { | |||
.one { | |||
width: 2px; | |||
height: 20px; | |||
background-color: #444857; | |||
margin: 0px auto; | |||
} | |||
.two { | |||
width: 4px; | |||
height: 4px; | |||
border-radius: 100%; | |||
background-color: #444857; | |||
margin: 0 5px; | |||
} | |||
} | |||
|
|||
.wrapper { | |||
width: 100vw; | |||
margin: 0px auto; | |||
margin-top: -200px; | |||
margin-bottom: 100px; | |||
height: 400px; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
position: relative; | |||
transition: all 0.3s ease; | |||
} | |||
|
|||
@media screen and (max-width: 767px) { | |||
.wrapper { | |||
height: 900px; | |||
} | |||
} | |||
|
|||
.content { | |||
max-width: 1024px; | |||
width: 100%; | |||
padding: 0 4%; | |||
padding-top: 250px; | |||
margin: 0 auto; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
|
|||
@media screen and (max-width: 767px) { | |||
.content { | |||
padding-top: 300px; | |||
flex-direction: column; | |||
} | |||
} | |||
|
|||
.card2 { | |||
width: 100%; | |||
max-width: 300px; | |||
min-width: 00px; | |||
height: 250px; | |||
margin: 10px; | |||
border-radius: 5px; | |||
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24); | |||
border: 2px solid rgba(7, 7, 7, 0.12); | |||
font-size: 16px; | |||
transition: all 0.3s ease; | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
flex-direction: column; | |||
cursor: pointer; | |||
transition: all 0.3s ease; | |||
} | |||
|
|||
|
|||
.card2 img { | |||
width: 300px; | |||
height: 200px; | |||
margin-top: -17px; | |||
border-radius: 5px; | |||
} | |||
|
|||
.material-icons.md-18 { font-size: 18px; } | |||
.material-icons.md-24 { font-size: 24px; } | |||
.material-icons.md-36 { font-size: 36px; } | |||
.material-icons.md-48 { font-size: 48px; } | |||
|
|||
.card2 .title { | |||
width: 100%; | |||
margin: 0; | |||
text-align: center; | |||
margin-top: 10px; | |||
color: black; | |||
font-weight: bold; | |||
text-transform: uppercase; | |||
letter-spacing: 4px; | |||
font-family: Nunito; | |||
} | |||
|
|||
.card2 .text { | |||
width: 80%; | |||
margin: 0 auto; | |||
font-size: 13px; | |||
text-align: center; | |||
margin-top: 5px; | |||
color: black; | |||
font-weight: 200; | |||
letter-spacing: 2px; | |||
opacity: 0; | |||
max-height:0; | |||
transition: all 0.3s ease; | |||
} | |||
|
|||
.card2:hover { | |||
height: 270px; | |||
} | |||
|
|||
.card2:hover .info { | |||
height: 90%; | |||
} | |||
|
|||
.card2:hover .text { | |||
transition: all 0.3s ease; | |||
opacity: 1; | |||
max-height:40px; | |||
} | |||
|
|||
.card2:hover .icon { | |||
background-position: -129px; | |||
transition: all 0.3s ease; | |||
} | |||
|
|||
.card2:hover .icon i { | |||
background: linear-gradient(90deg, #FF7E7E, #FF4848); | |||
-webkit-background-clip: text; | |||
-webkit-text-fill-color: transparent; | |||
opacity: 1; | |||
transition: all 0.3s ease; | |||
} |
Oops, something went wrong.
0 comments on commit
6e2586b