Commit 6beb18cd authored by Raquel's avatar Raquel 💬

added day5

parent 2530996c
.DS_Store
node_modules/
node_modules
/dist/
dist
npm-debug.log*
yarn-debug.log*
yarn-error.log*
/test/unit/coverage/
/test/e2e/reports/
selenium-debug.log
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
This diff is collapsed.
This diff is collapsed.
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,700");
:root {
--color-primary: #c468ff;
--linear-gradient: linear-gradient(102deg, #c468ff, #6e91f6); }
* {
margin: 0;
padding: 0; }
*,
*::after,
*::before {
box-sizing: inherit; }
html {
box-sizing: border-box;
font-size: 100%;
font-family: 'Roboto', sans-serif;
font-weight: 400; }
.container {
height: 100vh;
display: flex;
object-fit: contain; }
.col {
width: 60%;
display: flex;
flex-flow: column; }
.col.left {
background-image: url("../assets/images/background_image.png"), var(--linear-gradient);
background-repeat: no-repeat;
background-size: cover;
width: 40%;
display: flex;
justify-content: center;
align-items: center; }
.col.right {
width: 60%; }
.logo-content {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
margin-top: 16.5625rem;
margin-bottom: 2.5rem;
max-width: 17.1875rem; }
.logo-content .motion-logo {
margin-bottom: 0.9375rem; }
.logo-content h1 {
margin-bottom: 1.5625rem;
font-weight: 300;
font-size: 1.875rem; }
.logo-content p {
font-weight: 300;
font-size: 1rem;
line-height: 1.5;
opacity: 0.6; }
.buttons {
display: flex;
align-items: center;
width: 17.1875rem;
margin-bottom: 7.9375rem; }
.buttons .apple_store {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid;
border-color: white;
border-radius: 6.25rem;
height: 2.5rem;
width: 7.875rem; }
.buttons .google_play {
display: flex;
justify-content: center;
align-items: center;
border: 2px solid;
border-color: white;
border-radius: 6.25rem;
height: 2.5rem;
width: 7.875rem;
margin-left: 1rem; }
.social_media {
display: flex;
justify-content: center;
align-items: center;
width: 17.1875rem;
margin-bottom: 2.625rem; }
.social_media .twitter {
display: flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: 2.5rem;
height: 2.5rem; }
.social_media .facebook {
display: flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: 2.5rem;
height: 2.5rem;
margin-left: 16px; }
.social_media .instagram {
display: flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: 2.5rem;
height: 2.5rem;
margin-left: 1rem; }
.footer_info {
font-size: 12px;
color: white;
display: flex;
justify-content: center;
margin-bottom: 2.5rem; }
/* right side of website */
.sign_up {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 2.5rem; }
.sign_up .sign_up_btn {
border: 2px solid;
border-color: lightgrey;
border-radius: 100px;
height: 2.5rem;
width: 7.5rem;
margin-right: 40px; }
.sign_up .sign_up_label {
font-size: 14px;
margin-right: 0.875rem; }
.sign_in {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin-top: 8.8125rem;
margin-bottom: 4rem; }
.sign_in .title {
font-size: 40px;
margin-bottom: 4rem; }
.username {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse; }
/* with input boxes ----
.input_user{
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: black;
margin-bottom:rem(58px);
} */
.input_user {
display: flex;
align-items: center;
font-size: 20px;
color: black;
padding-right: 471px; }
.username_line {
width: 340px;
height: 2px;
color: grey;
margin-top: 39px;
margin-bottom: 2.6875rem; }
.username_logo {
display: flex;
justify-content: flex-start;
margin-bottom: 3.625rem; }
.password {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse; }
/* with input boxes ----
.input_pass{
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: black;
margin-bottom: rem(167px);
}*/
.input_pass {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 16px;
color: black;
margin-bottom: 10.4375rem; }
.password_line {
width: 340px;
height: 2px;
color: grey;
margin-top: 39px;
margin-bottom: 167px; }
.password_logo {
display: flex;
justify-content: flex-start;
margin-bottom: 10.4375rem; }
.sign_in_button {
border-radius: 100px;
width: 16.25rem;
height: 3.75rem;
background-image: linear-gradient(102deg, #c468ff, #6e91f6);
color: white;
font-size: 12px; }
This diff is collapsed.
This diff is collapsed.
{
"name": "motion",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"scss": "node-sass --watch ./sass/main.scss -o css"
},
"author": "Laurent Hoxhaj",
"license": "ISC",
"dependencies": {
"node-sass": "^4.11.0"
}
}
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');
:root {
--color-primary: #c468ff;
--linear-gradient: linear-gradient(102deg, #c468ff, #6e91f6);
}
* {
margin: 0;
padding: 0;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 100%;
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
@import "functions";
.logo-content{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
color: white;
text-align: center;
margin-top: rem(265px);
margin-bottom: rem(40px);
max-width: rem(275px);
.motion-logo {
margin-bottom: rem(15px);
}
h1 {
margin-bottom: rem(25px);
font-weight: 300;
font-size: rem(30px);
}
p{
font-weight: 300;
font-size: rem(16px);
line-height: 1.5;
opacity: 0.6;
}
}
.buttons{
display:flex;
align-items: center;
width: rem(275px);
margin-bottom: rem(127px);
.apple_store {
display:flex;
justify-content: center;
align-items: center;
border: 2px solid;
border-color: white;
border-radius: rem(100px);
height: rem(40px);
width: rem(126px);
}
.google_play {
display:flex;
justify-content: center;
align-items: center;
border: 2px solid;
border-color: white;
border-radius: rem(100px);
height: rem(40px);
width:rem(126px);
margin-left: rem(16px);
}
}
.social_media{
display:flex;
justify-content: center;
align-items: center;
width: rem(275px);
margin-bottom:rem(42px);
.twitter{
display:flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: rem(40px);
height: rem(40px);
}
.facebook{
display:flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: rem(40px);
height: rem(40px);
margin-left: 16px;
}
.instagram{
display:flex;
justify-content: center;
align-items: center;
border: 2px, solid;
border-radius: 50%;
opacity: 0.5;
background-color: #ffffff;
width: rem(40px);
height: rem(40px);
margin-left: rem(16px);
}
}
.footer_info{
font-size:12px;
color: white;
display:flex;
justify-content: center;
margin-bottom:rem(40px);
}
/* right side of website */
.sign_up{
display:flex;
justify-content: flex-end;
align-items: center;
margin-top:rem(40px);
.sign_up_btn{
border: 2px solid;
border-color: lightgrey;
border-radius: 100px;
height: rem(40px);
width: rem(120px);
margin-right:40px;
}
.sign_up_label{
font-size:14px;
margin-right:rem(14px);
}
}
.sign_in{
display:flex;
flex-flow: column;
justify-content: center;
align-items: center;
margin-top: rem(141px);
margin-bottom: rem(64px);
.title{
font-size: 40px;
margin-bottom: rem(64px);
}
}
.username{
display:flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
/* with input boxes ----
.input_user{
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: black;
margin-bottom:rem(58px);
} */
.input_user{
display:flex;
align-items: center;
font-size: 20px;
color: black;
padding-right:471px;
// margin-bottom:rem(58px);
}
.username_line{
width:340px;
height:2px;
color:grey;
margin-top:39px;
margin-bottom:rem(43px);
}
.username_logo{
display:flex;
justify-content: flex-start;
margin-bottom:rem(58px);
}
.password{
display:flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
/* with input boxes ----
.input_pass{
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: black;
margin-bottom: rem(167px);
}*/
.input_pass{
display:flex;
justify-content: flex-start;
align-items: center;
font-size: 16px;
color: black;
margin-bottom: rem(167px);
}
.password_line{
width:340px;
height:2px;
color:grey;
margin-top:39px;
margin-bottom: 167px;
}
.password_logo{
display:flex;
justify-content: flex-start;
margin-bottom: rem(167px);
}
.sign_in_button{
border-radius:100px;
width: rem(260px);
height: rem(60px);
background-image: linear-gradient(102deg, #c468ff, #6e91f6);
color:white;
font-size: 12px;
}
.container {
height: 100vh;
display: flex;
object-fit: contain;
}
.col {
width: 60%;
display: flex;
flex-flow: column;
&.left {
background-image: url('../assets/images/background_image.png'), var(--linear-gradient);
background-repeat: no-repeat;
background-size: cover;
width: 40%;
display: flex;
justify-content: center;
align-items: center;
}
&.right{
width: 60%;
}
}
\ No newline at end of file
@function em($px, $base: 16px) {
@return ($px / $base) * 1em;
}
@function rem($size) {
$remsize: $size / 16px;
@return #{$remsize}rem;
}
\ No newline at end of file
@import "base";
@import "layout";
@import "components";
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment