- 
-
+What is SASS? Give an example
+Indented (simply called 'Sass'): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it's quicker to write. It’s the old version of SASS, but it will never be deprecated!
-### Installing
+What is the difference between .scss and .sass syntax.
+.scss uses brackets and .sass uses indentation instead of brackets
-In this project you must use the VSCode SASS extension in order to compile SASS into CSS.
+In which cases would we use SCSS? And in which cases would we use SASS?
+It's about preferences, but most people uses SCSS because it's more like CSS
-First of all you will need to install the extension:
+Explain how traditional CSS and Preprocessed CSS workflows are different.
+CSS is read by the browser while Preprocessed CSS need to be compiled
-- [Live SASS Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
+Can we create functions with SASS? If it is true, give an example.
+Mixins are some kind of common functions on programming languages.
-When the extension is installed correctly, having a SASS file open, you must click on "Watch Sass":
+Example:
+@mixin textTransform ($value) {
+text-transform: $value;
+}
+We can call that using the @include in a selector like:
+.title {
+@include textTransform(uppercase);
+}
-
+What is nesting? Is it useful? Give an example of nesting
+Nesting allows the developer to includes selectors inside other selectors like:
+.body {
+color:white;
+.title {
+font-weight: bold
+}
+}
-If you want to change some configuration of "Live SASS Compiler" you can check this official resource:
+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. This enables an endless chain of imported files where it's difficult to trace where your variables and mixins are coming from. It also allows for overlap and makes it difficult to trace back why your perfect css breaks. This is a problem especially with complex file structures and projects with multiple contributors and global libraries, which is why @import is no longer recommended by Sass.
+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. Here's an example of simple SCSS partials.
-- [Live SASS Compiler Settings](https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md)
+How can we import other CSS/SASS files in SASS? Give an example
+@use "relative path";
-## Technologies used
+Explain the concept of inheritance in SASS.
+You can use %(element name) to declare a selector with it's own css attributes
-\* SASS
-
-\* CSS
-
-\* HTML
-
-## Project delivery
-
-To deliver this project you must follow the steps indicated in the document:
-
-- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6)
-
-## Resources
-
-- [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)
+Why use @extend? Give an example
+If you already created an %element, you can use it these base elements with @extend
+%card {
+border: 1px solid black;
+}
+.little-card {
+@extend %card;
+width: 20%
+}
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 00000000..9cb71be3
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,340 @@
+.login-container {
+ margin: 0 auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ gap: 2rem;
+ width: 95%;
+}
+
+.login-box {
+ border: 1px solid #dbdbdb;
+ height: 30rem;
+}
+
+.login-area {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.login-area__facebook {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+}
+.login-area__facebook img {
+ height: 1rem;
+}
+.login-area__facebook p {
+ color: #38569e;
+ font-size: small;
+ font-weight: bold;
+}
+.login-area__split {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 1.5rem;
+ margin: auto;
+ width: 73%;
+ color: #8e8e99;
+}
+.login-area__forgotpass {
+ color: black;
+ padding: 1rem 0;
+}
+.login-area__signup {
+ border: 1px solid #dbdbdb;
+ margin-top: 1rem;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ padding: 1rem 0;
+}
+.login-area__signup a {
+ font-weight: bold;
+ color: #18a1f7;
+}
+.login-area__app {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}
+
+.apps {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ height: 100%;
+}
+.apps img {
+ height: 3rem;
+ width: 10rem;
+}
+
+.login-form {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 0;
+}
+.login-form img {
+ width: 50%;
+ margin: 2rem 0;
+}
+.login-form input {
+ width: 70%;
+ font-size: smaller;
+ height: 2rem;
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+ padding-left: 0.5rem;
+ border: 1px solid grey;
+ border-radius: 3px;
+ background-color: whitesmoke;
+}
+.login-form__username {
+ margin-bottom: 0.5rem;
+}
+.login-form__submit {
+ font-weight: bold;
+ height: 2rem;
+ margin: 1rem 0 0 0;
+ width: 73%;
+ background-color: #b2dffc;
+ color: white;
+ border: none;
+ padding: 0.25rem 0;
+ border-radius: 5px;
+}
+
+.line {
+ width: 100%;
+ height: 0.05rem;
+ background-color: #8e8e99;
+}
+
+.login-box {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+form {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+footer {
+ max-width: 50rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-top: 6rem;
+}
+
+.footer {
+ width: 100%;
+}
+
+.links {
+ width: 80%;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ margin: 0 auto;
+}
+.links a {
+ word-spacing: 1rem;
+ color: #8e8e99;
+ font-size: smaller;
+}
+
+a {
+ text-decoration: none;
+}
+
+.copyright {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 1rem;
+ color: #8e8e99;
+}
+.copyright select {
+ color: #8e8e99;
+ border: none;
+ outline: none;
+}
+
+:root {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: small;
+}
+
+body {
+ background-color: #fafafa;
+}
+
+.container {
+ width: 100%;
+ max-width: 780px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: 6.5rem auto;
+}
+
+.login-photos {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+}
+
+@media (max-width: 780px) {
+ .login-photos {
+ display: none;
+ }
+}
+@media (max-width: 780px) {
+ .login-container {
+ width: 50%;
+ }
+}
+.container-home {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin: 0 auto;
+ height: 100%;
+ width: 50%;
+}
+
+.nav {
+ height: 3rem;
+ background-color: white;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: center;
+ width: 100%;
+ border-bottom: 1px solid lightgrey;
+}
+.nav__img {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+}
+.nav__img img {
+ height: 100%;
+}
+.nav__search {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+}
+.nav__search input {
+ text-align: center;
+ border: 1px solid lightgrey;
+ color: lightgrey;
+ padding-top: 0.25rem;
+ padding-bottom: 0.25rem;
+}
+.nav__icons {
+ height: 70%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 1.5rem;
+ width: 100%;
+}
+.nav__icons a {
+ height: 100%;
+}
+.nav__icons img {
+ height: 100%;
+}
+
+.post__header {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ height: 2rem;
+ border: 1px solid lightgrey;
+ margin-top: 2rem;
+ padding: 0.5rem 0 0.5rem 1rem;
+}
+.post__header img {
+ height: 100%;
+ margin-right: 1rem;
+ border: 2px solid lightgreen;
+ border-radius: 25px;
+}
+
+.post {
+ width: 100%;
+}
+.post__footer {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: flex-start;
+ height: 100%;
+ border-bottom: 1px solid lightgrey;
+ border-left: 1px solid lightgrey;
+ border-right: 1px solid lightgrey;
+ padding-left: 1rem;
+}
+.post__footer .post-icons {
+ height: 2rem;
+ padding: 1rem 0 1rem 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 0.75rem;
+}
+.post__footer .post-icons img {
+ height: 100%;
+}
+.post__footer .post-likes {
+ font-weight: bold;
+ margin: 0;
+}
+.post__footer .post-comments span {
+ font-weight: bold;
+ padding-right: 1rem;
+ padding-left: 1rem;
+}
+.post__footer .post-date {
+ text-transform: uppercase;
+ color: #8e8e99;
+ margin: 0;
+ padding-bottom: 0.75rem;
+}/*# sourceMappingURL=index.css.map */
\ No newline at end of file
diff --git a/home.html b/home.html
new file mode 100644
index 00000000..41a2ade7
--- /dev/null
+++ b/home.html
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+ 
+ antonio
+
+ 
+ 
+ 2 Likes
+3 days ago
+
+ Don't have an account? Sign Up
+Get the app.
+ +
+
+ 
+ 
+ 
+
antoniobuenos días
+jesusbuenas tardes
+