Tam Tran

README.md

@@ -1,37 +1,26 @@
-`#sass` `#css` `#html` `#master-in-software-engineering`
+`#sass` `#css` `#html`
 
 # SASS - Clone Instagram <!-- omit in toc -->
 
 <p>
-  <img alt="Version" src="https://img.shields.io/badge/version-1.0-blue.svg?cacheSeconds=2592000" />
+  <img alt="login page" src="assets/img/login-page.PNG" />
+</p>
+<p>
+  <img alt="login page" src="assets/img/home-page.PNG" />
 </p>
 
 > Sass (which stands for 'Syntactically awesome style sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more
->
-> The purpose of this project is to learn the basics of SASS and put them into practice by building a visual replica of Instagram
 
 ## Index <!-- omit in toc -->
 
-- [Requirements](#requirements)
-- [Repository](#repository)
-- [Technologies used](#technologies-used)
-- [Project delivery](#project-delivery)
+- [Description](#description)
+- [Installation](#installation)
 - [Resources](#resources)
+- [Theory](#theory)
 
-## Requirements
-
-- You must use variables at least once in the project.
-- You must use nesting.
-- You must use inheritance at least once in the project.
-- You cannot use third party libraries for the development of this pill
-
-## Repository
-
-First of all you must fork this project into your GitHub account.
+## Description
 
-To create a fork on GitHub is as easy as clicking the “fork” button on the repository page.
-
-<img src="https://docs.github.com/assets/images/help/repository/fork_button.jpg" alt="Fork on GitHub" width='450'>
+This project aims to improve HTML skils, learn how to work with HTML and SASS, to improve front end and SASS knowledge.
 
 ### Installing
 
@@ -57,16 +46,25 @@ If you want to change some configuration of "Live SASS Compiler" you can check t
 
 \* 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)
+
+## Theory
+
+- SASS is a tool known as a CSS preprocessor, a scripting language that extend the default capabilities of CSS.
+- SASS stands for Syntactically Awesome Style Sheet.
+- CSS pre-processor is a program that let you generate CSS from the preprocessor’s own unique syntax.
+- Using SASS we can write more readable, maintainable and reusable code.
+- Using SASS variable is a way to store values for colors, fonts or any CSS value that you want to reuse. Use the $ symbol. This becomes extremely powerful when working on large Project.
+- Mixins is a method to group together multiple CSS declarations for reuse throughout your project. To add mixin into our code, use @include directive.
+- Sass functions can receive arguments and return a single value. We can do standard math: +, -, \*, /.
+- Nesting is used nesting to nest child selectors inside of the parent selector as CSS lacks a visual structure to make it easier to read. The code will be cleaner and less repetitive.
+- To import other CSS/SASS files in SASS, we divide up our Sass into separate files representing different components. Then we import the partial using an @import directive.
+- Inheritance allows multiple classes to share a common set of properties with one another. We implement this using the @extend directive.
+- The ampersand & operator is often used when nesting in SASS and is an extremely useful feature.
+- Placeholder selectors are mainly useful when writing a SASS library where each style rule is optional.

assets/sass/base/_index.scss

@@ -0,0 +1,2 @@
+@forward 'reset';
+@forward 'variables';

assets/sass/base/_reset.scss

@@ -0,0 +1,15 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: Roboto,Helvetica,Arial,sans-serif;
+} 
+
+// .main {
+//     display: flex;
+//     align-items: center;
+//     justify-content: center;
+// }
+
+
+

assets/sass/base/_variables.scss

@@ -0,0 +1,14 @@
+// Color
+
+$text-footer-color: rgba(var(--f52,142,142,142),1);
+$title-color: #262626;
+$bg-color: rgba(var(--b3f,250,250,250),1);
+$bg-color-form: rgba(var(--d87,255,255,255),1);
+$post-border-color: rgb(219, 219, 219);
+$nav-border-color: rgb(219, 219, 219);
+$comment-color: rgb(142, 142, 142);
+$post-cmt-color: rgb(0, 149, 246);
+
+// Border Radius:
+$border-wrapper: 1px;
+$border: 1px solid rgba(var(--b6a,219,219,219),1);

assets/sass/components/_footer.scss

@@ -0,0 +1,23 @@
+.footer__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer__content_first ul,
+.footer__content_second ul,
+.footer__content_third ul {
+    display: flex;
+    align-items: center;
+    li {
+        list-style-type:none;  
+        display: inline-block;
+        margin: 0 0.4rem;
+    }
+    justify-content: space-around;
+}
+
+
+
+

assets/sass/components/_index.scss

@@ -0,0 +1,4 @@
+@forward 'footer';
+@forward 'nav';
+@forward 'post';
+@forward 'slider';

assets/sass/components/_nav.scss

@@ -0,0 +1,69 @@
+@use '../base/' as b;
+
+.nav__container {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    height: 54px;
+    background-color: #fff;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+    align-items: center;
+    border-bottom: 1px solid b.$nav-border-color;
+}
+
+.nav__container_logo img{
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.nav__container_search {
+    position: relative;
+    i {
+        position: absolute;
+        left: 63px;
+        top: 8px;
+        color: b.$nav-border-color;
+        font-weight: bold;
+    }
+    input[type="search"] {
+        width: 220px;
+        padding: 0.4rem;
+        text-align: center;
+        border: 1px solid b.$nav-border-color;
+        border-radius: 3px;
+        background-color: b.$bg-color;
+    }
+}
+
+
+
+.nav__container_extends {
+    width: 115px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    i {
+        font-size: 24px;
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}
+
+.nav__container_extends-profile {
+    height: 26px;
+    width: 26px;
+    border-radius: 50%;
+    background-image: url("../assets/img/profile-2.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    &:hover {
+        cursor: pointer;
+    }
+}

assets/sass/components/_post.scss

@@ -0,0 +1,156 @@
+@use '../base/' as b;
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+.main__container_post {
+    width: 600px;
+    margin: 2rem auto;
+    border: 1px solid b.$post-border-color;
+    margin-bottom: 1rem;
+}
+
+.main__container_post-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    flex-wrap: nowrap;
+    border-bottom: 1px solid b.$post-border-color;
+    background-color: #fff;
+}
+
+.main__container_post-header--info {
+    display: flex;
+    p {
+        line-height: 1.6;
+    }
+}
+
+.post__profile_info-name {
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.post__profile_info-extra {
+    font-size: 12px;
+}
+
+.post__profile-circle--large {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: linear-gradient(45deg, orange, purple);
+}
+
+.post__profile-circle--small {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    background: linear-gradient(45deg, orange, purple);
+    position: relative;
+    left: 2px;
+    top: 2px; 
+}
+
+.post__profile-img {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    position: relative;
+    left: 2px;
+    top: 2px; 
+    &:hover {
+        cursor: pointer;
+    }
+}
+
+.post__profile_info {
+    margin-left: 1rem;
+}
+
+.main__container_post-img {
+    height: 600px;
+    border-bottom: 1px solid b.$post-border-color;
+}
+
+.main__container_post-interactions {
+    border-bottom: 1px solid b.$post-border-color;
+    padding: 1rem;
+    background-color: #fff;
+}
+
+.post__interactions_icons {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    margin-bottom: 0.9rem;
+    i {
+        font-size: 24px;
+        &:hover {
+            cursor: pointer;
+        }
+    }
+}
+
+.post__interactions_icons-left {
+    display: flex;
+    align-items: center;
+    i {
+        margin-right: 1rem;
+    }
+}
+
+.post__interactions_users {
+    margin-bottom: 0.9rem;
+}
+
+.post__interactions_comments-user {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.9rem;
+}
+
+.post__interactions_comments-load {
+    margin-bottom: 0.9rem;
+    p {
+        color: b.$comment-color;
+        font-size: 14px;
+    }
+}
+
+.post__interactions_comments-extra {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.9rem;
+}
+
+.post__interactions_date {
+    font-size: 10.5px;
+    color: b.$comment-color;
+    text-transform: uppercase;
+}
+
+.main__container_post-new {
+    display: flex;
+    position: relative;
+    padding: 1rem;
+    input {
+        width: 100%;
+        border: none;
+        padding: 1 rem;
+    }
+}
+
+.main__container_post-new-cmt p {
+    font-size: 14px;
+    color: b.$post-cmt-color;
+    opacity: 0.3;
+    font-weight: bold;
+    &:hover {
+        opacity: 1;
+    }
+}