Skip to content

Commit

Permalink
Creating app
Browse files Browse the repository at this point in the history
  • Loading branch information
@Simon-Manasse
Simon-Manasse committed Jun 12, 2023
1 parent c607c2c commit 802457e
Show file tree
Hide file tree
Showing 6 changed files with 532 additions and 0 deletions.
198 changes: 198 additions & 0 deletions css/profile.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,198 @@
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.background {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: url("https://images.unsplash.com/photo-1447433589675-4aaa569f3e05?ixlib=rb-0.3.5&s=4222852e25e0f57d9485f7889957e99a&auto=format&fit=crop&w=2000&q=80");
background-size: cover;
background: #ccc;
background-position: 0 50%;
background: #dde5f4;
}
.background:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0);
}
.outer-div, .inner-div {
height: 450px;
max-width: 300px;
margin: 0 auto;
position: relative;
}
.outer-div {
perspective: 900px;
perspective-origin: 50% calc(50% - 18em);
}
.inner-div {
margin: 0 auto;
border-radius: 5px;
font-weight: 400;
color: #071011;
font-size: 1rem;
text-align: center;
transition: all 0.6s cubic-bezier(0.8, -0.4, 0.2, 1.7);
transform-style: preserve-3d;
}
.inner-div:hover .social-icon {
opacity: 1;
top: 0;
/*&:hover .front__face-photo,
&:hover .front__footer {
opacity: 1;
}*/
}
.outer-div:hover .inner-div {
transform: rotateY(180deg);
}
.front, .back {
position: relative;
top: 0;
left: 0;
backface-visibility: hidden;
}
.front {
cursor: pointer;
height: 100%;
background: #fff;
backface-visibility: hidden;
border-radius: 5px;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.front__bkg-photo {
position: relative;
height: 150px;
width: 300px;
background: url("https://images.unsplash.com/photo-1511207538754-e8555f2bc187?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88672068827eaeeab540f584b883cc66&auto=format&fit=crop&w=1164&q=80") no-repeat;
background-size: cover;
backface-visibility: hidden;
overflow: hidden;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.front__bkg-photo:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.front__face-photo {
position: relative;
top: -60px;
height: 120px;
width: 120px;
margin: 0 auto;
border-radius: 50%;
border: 5px solid #fff;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/156905/profile/profile-512.jpg?1530296477") no-repeat;
background-size: contain;
overflow: hidden;
/* backface-visibility: hidden;
transition: all 0.6s cubic-bezier(0.8, -0.4, 0.2, 1.7);
z-index: 3;*/
}
.front__text {
position: relative;
top: -55px;
margin: 0 auto;
font-family: "Montserrat";
font-size: 18px;
backface-visibility: hidden;
}
.front__text .front__text-header {
font-weight: 700;
font-family: "Oswald";
text-transform: uppercase;
font-size: 20px;
}
.front__text .front__text-para {
position: relative;
top: -5px;
color: #000;
font-size: 14px;
letter-spacing: 0.4px;
font-weight: 400;
font-family: "Montserrat", sans-serif;
}
.front__text .front-icons {
position: relative;
top: 0;
font-size: 14px;
margin-right: 6px;
color: gray;
}
.front__text .front__text-hover {
position: relative;
top: 10px;
font-size: 10px;
color: tomato;
backface-visibility: hidden;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
border: 2px solid #3e4684;
padding: 8px 15px;
border-radius: 30px;
background: #3e4684;
color: #fff;
}
.back {
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #071011;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.social-media-wrapper {
font-size: 36px;
}
.social-media-wrapper .social-icon {
position: relative;
top: 20px;
margin-left: 5px;
margin-right: 5px;
opacity: 0;
color: #fff;
transition: all 0.4s cubic-bezier(0.3, 0.7, 0.1, 1.9);
}
.social-media-wrapper .social-icon:nth-child(1) {
transition-delay: 0.6s;
}
.social-media-wrapper .social-icon:nth-child(2) {
transition-delay: 0.7s;
}
.social-media-wrapper .social-icon:nth-child(3) {
transition-delay: 0.8s;
}
.social-media-wrapper .social-icon:nth-child(4) {
transition-delay: 0.9s;
}
.fab {
position: relative;
top: 0;
left: 0;
transition: all 200ms ease-in-out;
}
.fab:hover {
top: -5px;
}
178 changes: 178 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
* {
font-family: "Poppins";
}

body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
overflow-y: hidden;
display: flex;
justify-content: center;
align-items: center;
background: #dde5f4;
height: 100vh;
}

.screen-1 {
background: #f1f7fe;
padding: 2em;
display: flex;
flex-direction: column;
border-radius: 30px;
box-shadow: 0 0 2em #e6e9f9;
gap: 2em;
}

.screen-1 .logo {
margin-top: -3em;
}

.screen-1 .email {
background: white;
box-shadow: 0 0 2em #e6e9f9;
padding: 1em;
display: flex;
flex-direction: column;
gap: 0.5em;
border-radius: 20px;
color: #4d4d4d;
margin-top: 0,2em;
}

.screen-1 .name {
background: white;
box-shadow: 0 0 2em #e6e9f9;
padding: 1em;
display: flex;
flex-direction: column;
gap: 0.5em;
border-radius: 20px;
color: #4d4d4d;
margin-top: 0,2em;
}

.screen-1 .name input {
outline: none;
border: none;
}

.screen-1 .name input::-moz-placeholder {
color: black;
font-size: 0.9em;
}

.screen-1 .name input:-ms-input-placeholder {
color: black;
font-size: 0.9em;
}

.screen-1 .name input::placeholder {
color: black;
font-size: 0.9em;
}

.screen-1 .name ion-icon {
color: #4d4d4d;
margin-bottom: -0.2em;
}

/* email */
.screen-1 .email input {
outline: none;
border: none;
}

.screen-1 .email input::-moz-placeholder {
color: black;
font-size: 0.9em;
}

.screen-1 .email input:-ms-input-placeholder {
color: black;
font-size: 0.9em;
}

.screen-1 .email input::placeholder {
color: black;
font-size: 0.9em;
}

.screen-1 .email ion-icon {
color: #4d4d4d;
margin-bottom: -0.2em;
}

.screen-1 .password {
background: white;
box-shadow: 0 0 2em #e6e9f9;
padding: 1em;
display: flex;
flex-direction: column;
gap: 0.5em;
border-radius: 20px;
color: #4d4d4d;
}

.screen-1 .password input {
outline: none;
border: none;
}

.screen-1 .password input::-moz-placeholder {
color: black;
font-size: 0.9em;
}

.screen-1 .password input:-ms-input-placeholder {
color: black;
font-size: 0.9em;
}

.screen-1 .password input::placeholder {
color: black;
font-size: 0.9em;
}

.screen-1 .password ion-icon {
color: #4d4d4d;
margin-bottom: -0.2em;
}

.screen-1 .password .show-hide {
margin-right: -5em;
}

.screen-1 .login {
padding: 1em;
background: #3e4684;
color: white;
border: none;
border-radius: 30px;
font-weight: 600;
}

.screen-1 .footer {
display: flex;
font-size: 0.7em;
color: #5e5e5e;
gap: 14em;
padding-bottom: 10em;
}

.screen-1 .footer span {
cursor: pointer;
}

button {
cursor: pointer;
}

#logoPic {
width: 150px;
height: 150px;
margin-left: auto;
margin-right: auto;
padding-bottom: 50px;
}
Loading

0 comments on commit 802457e

Please sign in to comment.