-
+· What is a SASS Variable? Explain why are useful
-### Installing
+ - Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself.
-In this project you must use the VSCode SASS extension in order to compile SASS into CSS.
+ - Variables make it possible to reduce repetition, do complex math, configure libraries, and much more.
-First of all you will need to install the extension:
+· Explain the SASS variables property with an example.
-- [Live SASS Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
+ - A property’s name can include interpolation, which makes it possible to dynamically generate properties as needed. You can even interpolate the entire property name
-When the extension is installed correctly, having a SASS file open, you must click on "Watch Sass":
+ - Sass makes this easier and less redundant by allowing property declarations to be nested. The outer property names are added to the inner, separated by a hyphen.
-
+ .enlarge
+ font-size: 14px
+ transition:
+ property: font-size
+ duration: 4s
+ delay: 2s
-If you want to change some configuration of "Live SASS Compiler" you can check this official resource:
+ &:hover
+ font-size: 36px
-- [Live SASS Compiler Settings](https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md)
+ - If a declaration’s value is null or an empty unquoted string, Sass won’t compile that declaration to CSS at all.
-## Technologies used
+ $rounded-corners: false
-\* SASS
+ .button
+ border: 1px solid black
+ border-radius: if($rounded-corners, 5px, null)
-\* CSS
+· What is a mixin? Why is it important? Give an example
-\* HTML
+ - A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for transform.
-## Project delivery
+ @mixin transform($property) {
+ -webkit-transform: $property;
+ -ms-transform: $property;
+ transform: $property;
+ }
+ .box { @include transform(rotate(30deg)); }
-To deliver this project you must follow the steps indicated in the document:
+· What is SCSS? Give an example
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
+ - SCSS is the syntax of CSS but with all the advantages of SASS
-## Resources
+· What is the difference between .scss and .sass syntax.
-- [SASS documentation](https://sass-lang.com/)
-- [W3S SASS](https://www.w3schools.com/sass/)
-- [SASS Guidelines](https://sass-guidelin.es/es/)
-- [Organizing SASS Projects](https://blog.prototypr.io/how-i-organize-sass-projects-e2d7760df86f)
-- [Why don't use @import](https://www.youtube.com/watch?v=CR-a8upNjJ0)
+ - SCSS have the syntax of pure CSS and SASS don't use breaks or curly braces
+
+· In which cases would we use SCSS? And in which cases would we use SASS?
+
+ - I wil use SCSS if I'm more advanced programmer and SASS if I'm a beginer
+
+· Explain how traditional CSS and Preprocessed CSS workflows are different.
+
+ - Traditional CSS is added to HTML and changes are applied once the page is loaded. With SASS, the .sass document is first compiled, a .css document is created and this is the one that applies the changes.
+
+. Can we create functions with SASS? If it is true, give an example.
+
+ - Yes.
+
+ @function mult($base, $exponent) {
+ $result: 1;
+ $exponent: $result * $base;
+ @return $exponent;
+ }
+
+· What is nesting? Is it useful? Give an example of nesting.
+
+ - Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Is useful for have more organized CSS.
+
+ nav
+ ul
+ margin: 0
+ padding: 0
+ list-style: none
+
+ li
+ display: inline-block
+
+ a
+ display: block
+ padding: 6px 12px
+ text-decoration: none
+
+· Difference between @use & @import? Give an example
+
+ - Fundamentally both rules do the same thing - load members inside another module. The main differences is how they handle members. @import makes everything globally accessible in the target file. Same as @import, @use rule enables us to break our stylesheet into more practical, smaller sections and load them inside other stylesheets. The key difference is how you access the original files' members. To do this you will need to refer to the namespace of the original file.
+
+ // _box.scss
+
+ @use 'button';
+
+ .boxButton {
+ @include button.buttonSmall;
+ margin: 1rem + button.$radius;
+ }
+
+- How can we import other CSS/SASS files in SASS? Give an example
+
+· Explain the concept of inheritance in SASS.
+
+ - Using @extend lets you share a set of CSS properties from one selector to another.
+
+· Why use @extend? Give an example
+
+ - Lets you share a set of CSS properties from one selector to another.
+
+ %message-shared {
+ border: 1px solid #ccc;
+ padding: 10px;
+ color: #333;
+ }
+
+ .message {
+ @extend %message-shared;
+ }
\ No newline at end of file
diff --git a/dev/pages/_login.sass b/dev/pages/_login.sass
new file mode 100644
index 00000000..bcdad90f
--- /dev/null
+++ b/dev/pages/_login.sass
@@ -0,0 +1,222 @@
+$background-container: #FFFFFF
+$background-main: #FAFAFA
+$border: 1px solid #DBDBDB
+$color: #8E8E9C
+$border-gradient: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgba(131,58,180,1)), color-stop(0.33, rgba(253,29,29,1)), color-stop(0.33, rgba(252,176,69,1)))
+// SASS LOGIN.HTML
+
+*
+ margin: 0
+ padding: 0
+ font-family: 'Montserrat', sans-serif
+ //outline: solid 2px red
+ font-size: 12px
+
+body
+ height: 100vh
+ width: 100vw
+ overflow: hidden
+ font-size: 16px
+ background-color: #FAFAFA
+
+body > div
+ display: flex
+ flex-direction: row
+ width: 100%
+ height: 85%
+
+section.left
+ width: 100%
+ height: 100%
+ padding: 0.5rem
+ display: flex
+ flex-direction: row
+ align-items: center
+ justify-content: flex-end
+
+div.left__mockup
+ //height: auto
+ //width: 50%
+
+div.left__mockup > img
+ height: 480px
+
+div.left__containerImages
+ position: absolute
+ height: 352px
+ margin: 15px
+ z-index: 2
+
+img.imagesFixed
+ height: 356px
+ right: 0
+ opacity: 0
+ position: absolute
+ top: 0
+ width: 200px
+img.imagesProgress
+ opacity: 1
+ transition: opacity 1.8s ease-in
+img.imagesOn
+ height: 356px
+ right: 0
+ opacity: 1
+ position: absolute
+ top: 0
+ width: 200px
+
+
+
+section.right
+ width: 100%
+ height: 100%
+ padding: 0.5rem
+
+main.login__login
+ width: 50%
+ max-width: 300px
+ height: 100%
+ display: flex
+ flex-direction: column
+ align-items: center
+ justify-content: center
+
+div.login
+ width: auto
+ height: auto
+ border: $border
+ margin-bottom: 0.5rem
+ padding: 1.5rem
+ background-color: $background-container
+
+div.login__img
+ width: auto
+ height: auto
+ display: flex
+ flex-direction: column
+ align-items: center
+
+div.login__img > img
+ width: 60%
+
+form.login__form
+ width: auto
+ height: auto
+ display: flex
+ flex-direction: column
+ justify-content: center
+
+form.login__form > input
+ width: auto
+ height: auto
+ border: $border
+ padding: 0.5rem
+ margin-bottom: 0.4rem
+ color: $color
+
+form.login__form > button
+ width: 100%
+ border: $border
+ padding: 0.4rem 0
+ margin-bottom: 0.4rem
+ color: #fff
+ font-weight: bold
+ border: none
+ border-radius: 4px
+ background-color: rgba(0,149,246,.3)
+
+div.create
+ width: 100%
+ height: 10%
+ border: $border
+ margin-bottom: 0.5rem
+ background-color: $background-container
+ display: flex
+ flex-direction: row
+ justify-content: center
+ align-items: center
+
+div.download
+ display: flex
+ flex-direction: column
+ justify-content: center
+ align-items: center
+ width: 100%
+
+div.separator
+ display: flex
+ align-items: center
+ align-content: center
+ color: grey
+
+div.line
+ height: 1px
+ width: 100%
+ background-color: rgb(219,219,219)
+
+div#leftLine
+ margin-right: 1.5rem
+ margin-left: 2.5rem
+
+div#rightLine
+ margin-left: 1.5rem
+ margin-right: 2.5rem
+
+p.passwordForget
+ color: #385185
+
+div.loginFacebook
+ display: flex
+ color: #385185
+ font-weight: bold
+ margin: 1rem 0
+ justify-content: center
+
+div.loginOptions
+ display: flex
+ flex-direction: column
+ justify-content: end
+ align-items: center
+
+div.loginFacebook p
+ margin-left: 0.5rem
+
+div.download p
+ margin-bottom: 20px
+ margin-top: 15px
+
+div.create a
+ text-decoration: none
+
+div.stores
+ display: flex
+ flex-direction: row
+
+div.stores > a > img
+ width: 135px
+ height: 40px
+ margin:0.4rem
+
+footer
+ width: 100%
+ height: 15%
+ display: flex
+ flex-direction: column
+ justify-content: center
+ align-items: center
+
+footer > div
+ margin: 0.5rem
+ display: flex
+ flex-direction: column
+ justify-content: center
+ align-items: center
+
+footer > div > div
+ display: flex
+ flex-direction: row
+ justify-content: center
+ align-items: center
+
+footer > div > div > div
+ margin: 0 0.5rem 0.5rem 0.5rem
\ No newline at end of file
diff --git a/dev/pages/_main.sass b/dev/pages/_main.sass
new file mode 100644
index 00000000..0bebf80f
--- /dev/null
+++ b/dev/pages/_main.sass
@@ -0,0 +1,361 @@
+header
+ width: 100%
+ height: 50px
+ background-color: $background-container
+ border-bottom: solid 1px #DBDBDB
+ margin: 0 0 2.5rem 0
+ display: flex
+ flex-direction: row
+ justify-content: space-around
+ align-items: center
+div.main__header--logo
+ width: auto
+ height: auto
+ display: flex
+ flex-direction: row
+
+div.main__header--logo > img
+ max-width: 140px
+ height: 50px
+ margin-left: 11rem
+ padding: 0 0 0 1rem
+
+div.main__header--search
+ width: 180px
+ padding: 0.2rem
+ border: $border
+ background-color: $background-main
+ display: flex
+ border-radius: 3px
+ text-align: center
+ flex-direction: row
+ justify-content: center
+
+div.main__header--search > i
+ font-size: 1rem
+div.main__header--search > i > input
+ border: none
+ padding: 0.5rem
+ text-align: center
+div.main__header--search > i > input:hover
+ border: none
+
+div.header__icons
+ display: flex
+ flex-direction: row
+ align-items: center
+ justify-content: center
+ margin-right: 7rem
+
+header > div > div
+ display: flex
+ flex-direction: row
+ align-items: center
+
+header > div > div > img
+ border-radius: 50%
+ width: 2.5em
+ height: 2.5rem
+
+header > div > div > i
+ font-size: 1.8rem
+ margin-right: 1.8rem
+
+main.main__main
+ width: 100%
+ height: calc(100vh - 80px)
+ display: flex
+ flex-direction: row
+
+section.stories
+ width: 70%
+ height: 100%
+ background-color: $background-main
+ display: flex
+ flex-direction: column
+ justify-content: flex-start
+ //align-items: center
+ align-items: flex-end
+ overflow-y: scroll
+ overflow-x: hidden
+ padding-right: 0.5rem
+section.stories::-webkit-scrollbar
+ width: 0px
+ height: 0px
+
+section.stories::-webkit-scrollbar-thumb
+ background: #CCC
+ border-radius: 4px
+section.stories::-webkit-scrollbar-thumb:hover
+ background: #b3b3b3
+ box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2)
+section.stories::-webkit-scrollbar-track
+ background: #b3b3b3
+ border-radius: 4px
+section.recommendations
+ width: 40%
+ height: auto
+ background-color: $background-main
+ display: flex
+ flex-direction: column
+ padding: 2rem 0 0 2rem
+
+div.main__stories
+ width: inherit
+ height: 100px
+ background-color: $background-container
+ margin: 0 0 2.5rem 0
+ border: $border
+ display: flex
+ align-items: center
+ overflow-x: scroll
+ overflow-y: hidden
+ padding: 4rem 0
+div.main__stories::-webkit-scrollbar
+ width: 0px
+ height: 0px
+div.main__stories::-webkit-scrollbar-thumb
+ background: #CCC
+ border-radius: 4px
+div.main__stories::-webkit-scrollbar-thumb:hover
+ background: #b3b3b3
+ box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2)
+div.main__stories::-webkit-scrollbar-track
+ background: #b3b3b3
+ border-radius: 4px
+div.storie
+ display: flex
+ flex-direction: column
+ align-items: center
+ justify-content: end
+ width: 70px
+ height: 85px
+div.storie div
+ display: flex
+ flex-direction: row
+ justify-content: center
+ align-items: center
+ border: 4px solid $border-gradient
+ //background-image: -webkit-gradient(radial, left bottom, left top, color-stop(23%, rgba(131,58,180,1)), color-stop(56%, rgba(253,29,29,1)), color-stop(79%, rgba(252,176,69,1)))
+ //background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% )
+ width: 4.25rem
+ height: 4.25rem
+ margin: 0.75rem
+ border-radius: 50%
+div.storie > div >img
+ width: 4rem
+ height: 4rem
+ border-radius: 50%
+
+
+
+div.main__posts
+ width: inherit
+ height: auto
+ background-color: $background-container
+ border: $border
+ margin: 0 0 1.5rem 0
+
+div.main__posts--container
+ width: 100%
+ height: auto
+
+div.main__posts--user
+ width: auto
+ height: 10%
+ display: flex
+ flex-direction: row
+ justify-content: space-between
+ align-items: center
+ padding: 0.5rem 1rem
+
+div.main__posts--userName
+ display: flex
+ flex-direction: row
+ justify-content: center
+ align-items: center
+div.main__posts--userImg
+ margin: 0 1rem 0 0
+ width: 30px
+ height: 30px
+ //border: solid 1px
+ //border: 2px solid linear-gradient(90deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%)
+ border-radius: 20px
+ display: flex
+ flex-direction: row
+ justify-content: center
+ align-items: center
+
+div.main__posts--userImg > img
+ width: inherit
+ max-width: 100%
+ height: inherit
+ max-height: 100%
+ border-radius: 20px
+
+div.main__posts--img
+ width: 100%
+ height: 70%
+ background-color: red
+ display: flex
+ flex-direction: row
+
+div.main__posts--img > img
+ width: inherit
+ display: block
+ margin: auto
+
+div.main__posts--content
+ width: 100%
+ height: 20%
+div.main__posts--contentIcons
+ width: auto
+ display: flex
+ flex-direction: row
+ justify-content: space-between
+ margin: 0rem 0rem
+
+div.main__posts--contentIcons > div > i
+ font-size: 1.8rem
+ margin: 0.5rem 1rem
+div.main__posts--playback
+ display: flex
+ flex-direction: row
+ justify-content: end
+ margin: 0.5rem 1rem
+
+span.main__posts--generalBold
+ margin: 0 0.5rem 0 0
+ font-weight: bold
+div.main__posts--userTitle
+ display: flex
+ flex-direction: row
+ justify-content: end
+ margin: 0px 1rem 1rem 1rem
+ width: auto
+ height: auto
+
+div.main__posts--coments
+ width: 100%
+ height: 10%
+ border-top: $border
+div.main__posts--coments > div
+ display: flex
+ flex-direction: row
+ height: auto
+ width: auto
+ padding: 0.5rem 1rem
+ justify-content: flex-start
+ align-items: center
+
+div.main__posts--coments > div > i
+ font-size: 1.5rem
+
+input.main__posts--comentsInput
+ width: 100%
+ height: 20%
+ padding: 0.5rem
+ margin: 0 0 0 0.5rem
+ border-top: 0
+ border-left: 0
+ border-right: 0
+ border-bottom: $border
+
+
+//@mixin bg-gradient($angle: 180deg, $color: #0bd, $amount: 20%)
+ //background: linear-gradient($angle, $color, adjust-hue($color, $amount)) fixed;
+ //background-color: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%)
+#user
+ font-weight: bold
+
+.change__user.otherUser
+ margin-left: 10px
+
+.user__name
+ width: 100%
+ white-space: nowrap
+ text-overflow: ellipsis
+ overflow: hidden
+ margin-left: 1rem
+
+.recommendations.change__user button
+ border: none
+ background-color: white
+ cursor: pointer
+ margin-left: 1rem
+ color: #0095F6
+ font-weight: bold
+
+.containerRecomend
+ width: 85%
+
+div.change__user
+ width: 70%
+ display: flex
+ justify-content: space-between
+ align-items: center
+
+div.change__user button
+ border: none
+ background-color: white
+
+div.change__user img
+ border-radius: 50%
+ width: 4.5rem
+ height: 4.5rem
+
+.sugestmentContainer
+ width: 100%
+
+div.sugerencias
+ margin-top: 1.5rem
+ display: flex
+ justify-content: space-between
+
+div.sugestedUsers
+ width: 70%
+ display: flex
+ flex-direction: column
+ justify-content: space-between
+
+div.sugerencias h5
+ color: grey
+
+div.sugerencias button
+ border: none
+ cursor: pointer
+ background-color: white
+
+div.sugerencias_users
+ display: flex
+ flex-direction: row
+ align-items: center
+ margin-top: 2rem
+
+div.sugerencias_users img
+ border-radius: 50%
+ width: 3.2em
+ height: 3.2rem
+
+div.sugerencias_users button
+ border: none
+ background-color: white
+ cursor: pointer
+ margin-left: 0.5rem
+ color: #0095F6
+ font-weight: bold
+
+.copy_text
+ color: lightgrey
+ margin-top: 4rem
+
+.copy_text h5
+ font-weight: 500
+ margin-top: 2rem
+
+@media (max-width: 1000px)
+ section.recommendations
+ display: none
+ section.stories
+ width: 80%
+ margin-left: 6%
\ No newline at end of file
diff --git a/dev/style.sass b/dev/style.sass
new file mode 100644
index 00000000..e033602f
--- /dev/null
+++ b/dev/style.sass
@@ -0,0 +1,2 @@
+@import "pages/login"
+@import "pages/main"
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..1dde37da
--- /dev/null
+++ b/index.html
@@ -0,0 +1,121 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+
+
+
+ 
+
+
+
+
+
+
+ o
+
+
+
+
+ 
+
+
+ Login with Facebook
+have you forgotten your password?
+
+
+ Don't have an account?
+ Register +
+
+ Download the App
+
+ 
+ 
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+