Skip to content
Permalink
Browse files

first push

  • Loading branch information...
LEVALLOIS Clément
LEVALLOIS Clément committed Jun 10, 2019
0 parents commit 6e2586bd6b234c78d1214be10926f962eca03c2f
BIN +6 KB docs/.DS_Store
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

Please sign in to comment.
You can’t perform that action at this time.