diff --git a/README.md b/README.md index 5e6faf7d..0896bee6 100644 --- a/README.md +++ b/README.md @@ -70,3 +70,271 @@ To deliver this project you must follow the steps indicated in the document: - [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) + +## SASS questions + +- What is SASS? What does SASS stand for? + + SASS → syntactically awesome style sheets. + + Preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. + +- What is a CSS pre-processor? + A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. + What does a pre-processor have to do with SASS? + The pre-processor is in charge of interpreting SASS code and turning it into CSS code. + Why use SASS? + Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff. + It also helps to maintain large CSS style sheets and shortens the way developers generate CSS code. + +- SASS has disadvantages? Which are? + + 1. The developer must have enough time to learn new features present in this preprocessor before using it. + 2. Using Sass may cause losing benefits of browser’s built-in element inspector. + 3. Code has to be compiled + 4. Difficult Troubleshooting + +- What is a SASS Variable? Explain why are useful + + A SASS variable is just a way to store an specific value that will be used to assign it to a property that accepts it when required. + +- Explain the SASS variables property with an example. + + Variable definition and declaration → $variableName: value; + + Ex: + + $myGreen: #8FBC8F; + + Use → + body { font-family: Helvetica, sans-serif; + font-size: 18px; + color: $myGreen; + } + +- What is a mixin? Why is it important? Give an example + + A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It is basically a snippet of code that receives properties and values as parameters. + + Ex: + + //SCSS + + @mixin transform($property) { + -webkit-transform: $property; + -ms-transform: $property; + transform: $property; + } + + .box { @include transform(rotate(30deg)); } + + //CSS + + .box { + -webkit-transform: rotate(30deg); + -ms-transform: rotate(30deg); + transform: rotate(30deg); + } + +- What is SCSS? Give an example + + SASS that uses the Block syntax. + + Block syntax → Code block are defined by opening and closing curly brackets (file.scss extension). + + Ex: + + $font-stack: Helvetica,sans-serif; + $primary-color:#333; + + body{ + font:100% $font-stack; + color:$primary-color; + } + +- What is SASS? Give an example + + SASS that uses the indent syntax. + + Indent syntax → Code blocks are defined by indentations (file.sass extension). + Ex: + + $font-stack: Helvetica,sans-serif + $primary-color:#333 + + body + font:100% $font-stack + color:$primary-color + +- What is the difference between .scss and .sass syntax. + + .scss → uses Block syntax + .sass → uses Indentation syntax + +- In which cases would we use SCSS? And in which cases would we use SASS? + + Either one is fine in all cases. + +- Explain how traditional CSS and Preprocessed CSS workflows are different. + + The difference between traditional CSS and Preprocessed CSS workflows is that traditional CSS basically applies a CSS stylesheet to the HTML file, whereas preprocessed CSS needs to compile the SASS code file and then generate the CSS stylesheet. + +- Can we create functions with SASS? If it is true, give an example. + + Yes. Functions are mainly used to do some calculations that might be needed for an specific value to assign to a property in the SASS code. + + Ex: + + SCSS + + @function pow($base, $exponent) { + $result: 1; + @for $_ from 1 through $exponent { + $result: $result * $base; + } + @return $result; + } + + .sidebar { + float: left; + margin-left: pow(4, 3) * 1px; + } + + CSS + + .sidebar { + float: left; + margin-left: 64px; + } + +- What is nesting? Is it useful? Give an example of nesting + + Nesting is nesting your CSS code or SASS code using the exactly the same hierarchy as the one used in the HTML file that includes the CSS stylesheet. + The utility of nesting is that it allows the developer to have inner nested HTML elements inherit CSS from nested HTML elements that belong to upper layers in the hierarchy. + + Ex: + + SCSS + + nav { + ul { + margin: 0; + padding: 0; + list-style: none; + } + li { + display: inline-block; + } + a { + display: block; + padding: 6px 12px; + text-decoration: none; + } + } + + CSS + + nav ul { + margin: 0; + padding: 0; + list-style: none; + } + nav li { + display: inline-block; + } + nav a { + display: block; + padding: 6px 12px; + text-decoration: none; + } + +- Difference between @use & @import? Give an example + + @import is meant to be used as many times as required throughout the different files and once a file is imported if another file imports a file that includes imported files, these imported files are also imported along with the file they were included in. + @use is meant to be used only once per file and a file that already includes a used file will not have that used file imported along with itself. To import several files using @use a new file which includes all the files to be imported needs to be created. All files in this new file need to be imported using @forward. Then, finally using @use newFilePath the new file is imported when required. + The final difference is that @import imports every member despite the privacy level of the member in the file, whereas @use imports everything except private members. + +- How can we import other CSS/SASS files in SASS? Give an example + + Two methods are available for now. Those methods are @import and @use, although @import will be deprecated by around the end 2021. + + General Ex of a file to import: + + // _base.scss + + $font-stack: Helvetica, sans-serif; + $primary-color: #333; + + @import Ex: + + // styles.scss + + @import 'base'; + .inverse { + background-color: base.$primary-color; + color: white; + } + + @use Ex: + + // styles.scss + + @use 'base'; + .inverse { + background-color: base.$primary-color; + color: white; + } + + * It is important to note that there are some difference between the two methods. For more details about that check the previous question. + +- Explain the concept of inheritance in SASS. + + Preparing a block snippet of SASS code to be reused whenever it is required. Inheritance allows for not only the reusability of the snippet of code, but it also allows for its application on pseudo classes. This last mentioned feature is implemented by adding the “&” symbol just before the pseudo class. The “&” symbol works as a place-holder for the class or id that extends the inherited snippet of SASS code. + +- Why use @extend? Give an example + + Using @extend saves a lot of time in the long run if the snippets of SASS code are prepared properly due to the concept of inheritance. For further details check the previous question. + + Ex: + + SCSS + + %toolbelt { + box-sizing: border-box; + border-top: 1px rgba(#000, .12) solid; + padding: 16px 0; + width: 100%; + + &:hover { border: 2px rgba(#000, .5) solid; } + } + + .action-buttons { + @extend %toolbelt; + color: #4285f4; + } + + + .reset-buttons { + @extend %toolbelt; + color: #cddc39; + } + + CSS + + .action-buttons, .reset-buttons { + box-sizing: border-box; + border-top: 1px rgba(0, 0, 0, 0.12) solid; + padding: 16px 0; + width: 100%; + } + .action-buttons:hover, .reset-buttons:hover { + border: 2px rgba(0, 0, 0, 0.5) solid; + } + + .action-buttons { + color: #4285f4; + } + + .reset-buttons { + color: #cddc39; + } diff --git a/pages/home.html b/pages/home.html new file mode 100644 index 00000000..cc8fc6bf --- /dev/null +++ b/pages/home.html @@ -0,0 +1,408 @@ + + + + + + + + + Instagram + + + +
+
+
+ +
+
+ +
volleyballw...
+
+ +
+ +
nusr_et
+
+ +
+ +
+ +
+
+ +
+
volleyballworld
+
...
+
+ +
+
+ +
+ +
+ + + + +
+ +
+ + + +
+
+ + profile 1 Comment text 1 + +
+
+ + + +
+
+
+
+ + profile 2 Comment text 2 + +
+
+ + + +
+
+
+
3 hours ago
+
+ +
+
+ + + +
+ +
Post
+
+
+
+ + + +
+ +
+ +
+
+ +
+
elonrmuskk
+
...
+
+ +
+
+ +
+ +
+ + + + +
+ +
+ + + +
+
+ + profile 1 Comment text 1 + +
+
+ + + +
+
+
+
+ + profile 2 Comment text 2 + +
+
+ + + +
+
+
+
3 hours ago
+
+ +
+
+ + + +
+ +
Post
+
+
+
+ + + +
+
+ +
+
+
+ +
+
+ yourProfileName +
realName
+
+
+
+
Switch
+
+
+
+ +
+
+
Suggestions For You
+
See All
+
+
+ +
+
+
+ +
+
+ suggestedProfile1 +
Popular
+
+
+
+
+
Follow
+
+
+
+ +
+
+
+ +
+
+ suggestedProfile2 +
Popular
+
+
+
+
+
Follow
+
+
+
+ +
+
+
+ +
+
+ suggestedProfile3 +
Popular
+
+
+
+
+
Follow
+
+
+
+ +
+
+
+ +
+
+ suggestedProfile4 +
Popular
+
+
+
+
+
Follow
+
+
+
+ +
+
+
+ +
+
+ suggestedProfile5 +
Popular
+
+
+
+
+
Follow
+
+
+
+ +
+
+ +
+ +
© 2021 INSTAGRAM FROM FACEBOOK
+
+
+
+
+ + \ No newline at end of file diff --git a/pages/login.html b/pages/login.html new file mode 100644 index 00000000..31849554 --- /dev/null +++ b/pages/login.html @@ -0,0 +1,103 @@ + + + + + + + + + Instagram + + +
+
+
+
+ + + + + +
+
+
+
+
+
+ Instagram +
+
+ + +
+ +
+
+ + OR + +
+
+
+ +
+
+
+

Don't have an account? + Sign up +

+ +
+
+

Get the app.

+ + Avaiable on the App Store + + + Avaiable on the Google Play + +
+
+
+
+ + + \ No newline at end of file diff --git a/src/img/bundle.png b/src/img/bundle.png new file mode 100644 index 00000000..ac503810 Binary files /dev/null and b/src/img/bundle.png differ diff --git a/src/img/dwnAppStore.png b/src/img/dwnAppStore.png new file mode 100644 index 00000000..460f81ab Binary files /dev/null and b/src/img/dwnAppStore.png differ diff --git a/src/img/dwnGooglePlay.png b/src/img/dwnGooglePlay.png new file mode 100644 index 00000000..306aa45f Binary files /dev/null and b/src/img/dwnGooglePlay.png differ diff --git a/src/img/faceLogo.png b/src/img/faceLogo.png new file mode 100644 index 00000000..8c94602a Binary files /dev/null and b/src/img/faceLogo.png differ diff --git a/src/img/instaBackground.png b/src/img/instaBackground.png new file mode 100644 index 00000000..20208c8c Binary files /dev/null and b/src/img/instaBackground.png differ diff --git a/src/img/instaIcon.ico b/src/img/instaIcon.ico new file mode 100644 index 00000000..0c2473a0 Binary files /dev/null and b/src/img/instaIcon.ico differ diff --git a/src/img/instaLogin1.jpg b/src/img/instaLogin1.jpg new file mode 100644 index 00000000..574481bb Binary files /dev/null and b/src/img/instaLogin1.jpg differ diff --git a/src/img/instaLogin2.jpg b/src/img/instaLogin2.jpg new file mode 100644 index 00000000..cc053269 Binary files /dev/null and b/src/img/instaLogin2.jpg differ diff --git a/src/img/instaLogin3.jpg b/src/img/instaLogin3.jpg new file mode 100644 index 00000000..86edf0f3 Binary files /dev/null and b/src/img/instaLogin3.jpg differ diff --git a/src/img/instaLogin4.jpg b/src/img/instaLogin4.jpg new file mode 100644 index 00000000..40d177fd Binary files /dev/null and b/src/img/instaLogin4.jpg differ diff --git a/src/img/instaLogin5.jpg b/src/img/instaLogin5.jpg new file mode 100644 index 00000000..1cc29c52 Binary files /dev/null and b/src/img/instaLogin5.jpg differ diff --git a/src/img/instaSprite.png b/src/img/instaSprite.png new file mode 100644 index 00000000..426fc8fe Binary files /dev/null and b/src/img/instaSprite.png differ diff --git a/src/img/instagramLogo.png b/src/img/instagramLogo.png new file mode 100644 index 00000000..08b41fa0 Binary files /dev/null and b/src/img/instagramLogo.png differ diff --git a/src/img/postImg1.jpg b/src/img/postImg1.jpg new file mode 100644 index 00000000..96cc05ee Binary files /dev/null and b/src/img/postImg1.jpg differ diff --git a/src/img/postImg2.jpg b/src/img/postImg2.jpg new file mode 100644 index 00000000..c4430f7d Binary files /dev/null and b/src/img/postImg2.jpg differ diff --git a/src/img/profilePic.jpg b/src/img/profilePic.jpg new file mode 100644 index 00000000..7a8a8432 Binary files /dev/null and b/src/img/profilePic.jpg differ diff --git a/src/img/storyPic1.jpg b/src/img/storyPic1.jpg new file mode 100644 index 00000000..39e76f27 Binary files /dev/null and b/src/img/storyPic1.jpg differ diff --git a/src/img/storyPic2.jpg b/src/img/storyPic2.jpg new file mode 100644 index 00000000..33e13710 Binary files /dev/null and b/src/img/storyPic2.jpg differ diff --git a/src/img/storyPic3.jpg b/src/img/storyPic3.jpg new file mode 100644 index 00000000..972f1fd3 Binary files /dev/null and b/src/img/storyPic3.jpg differ diff --git a/src/sass/abstracts/_abstractsIndex.sass b/src/sass/abstracts/_abstractsIndex.sass new file mode 100644 index 00000000..1d08d1f0 --- /dev/null +++ b/src/sass/abstracts/_abstractsIndex.sass @@ -0,0 +1,3 @@ +@forward "../abstracts/mixins" +@forward "typography" +@forward "variables" \ No newline at end of file diff --git a/src/sass/abstracts/_mixins.sass b/src/sass/abstracts/_mixins.sass new file mode 100644 index 00000000..df5572f5 --- /dev/null +++ b/src/sass/abstracts/_mixins.sass @@ -0,0 +1,6 @@ +@mixin size($width, $height) + width:$width + height:$height + +@mixin allPaddings($top,$right,$bottom,$left) + padding: $top $right $bottom $left \ No newline at end of file diff --git a/src/sass/abstracts/_typography.sass b/src/sass/abstracts/_typography.sass new file mode 100644 index 00000000..e69de29b diff --git a/src/sass/abstracts/_variables.sass b/src/sass/abstracts/_variables.sass new file mode 100644 index 00000000..c179dc2c --- /dev/null +++ b/src/sass/abstracts/_variables.sass @@ -0,0 +1,3 @@ +// Colors +$background : #fafafa +$lightGray: #ececec diff --git a/src/sass/components/_componentsIndex.sass b/src/sass/components/_componentsIndex.sass new file mode 100644 index 00000000..eed1eca9 --- /dev/null +++ b/src/sass/components/_componentsIndex.sass @@ -0,0 +1,7 @@ +@forward "footer" +@forward "loginContent" +@forward "navbar" +@forward "suggestionsBar" +@forward "homeContent" + + diff --git a/src/sass/components/_footer.sass b/src/sass/components/_footer.sass new file mode 100644 index 00000000..0649c219 --- /dev/null +++ b/src/sass/components/_footer.sass @@ -0,0 +1 @@ +@use "../abstracts/abstractsIndex" as abs \ No newline at end of file diff --git a/src/sass/components/_homeContent.sass b/src/sass/components/_homeContent.sass new file mode 100644 index 00000000..f441d44b --- /dev/null +++ b/src/sass/components/_homeContent.sass @@ -0,0 +1,120 @@ +@use "../abstracts/abstractsIndex" as abs + +.main + background-color: #fafafa + +#newsContentBar + background-color: #fff + border: 1px solid #dbdbdb + display: flex + max-width: 614px + width: 100% + border-radius: 3px + padding: 16px 0 + margin: 0 0 24px + .profileLinkContainer + padding-left: 15px + height: 90px + width: 85px + .profileLinkBtn + border: none + background-color: #fff + padding: 2px + .profileName + text-align: center + font-size: 12px + color: #262626 + +.roundFrame + box-sizing: content-box + height: 66px + width: 66px + background-image: url(../img/bundle.png) + background-repeat: no-repeat + background-position: -305px -65px + .profilePic + height: 100% + img + height: 100% + padding: 5px + border-radius: 40px + +.post + background-color: #fff + border: 1px solid #dbdbdb + display: flex + flex-direction: column + margin-bottom: 60px + .postHeader + display: flex + height: 60px + padding: 16px + .profilePic + height: 32px + width: 32px + img + height: 100% + border-radius: 20px + .postOptions + position: relative + margin-left: auto + align-self: flex-end + font-size: 30px + .postProfileName + padding-left: 15px + font-weight: 600 + font-size: 14px + .postImg + max-width: -webkit-fill-available + .postLowerOptions + display: flex + height: 40px + margin-top: 4px + padding: 0 16px + button + border: none + background: #fff + .archiveBtn + margin-left: auto + .addCommentContainer + display: flex + height: 55px + padding: 0 16px + border-top: 1px solid #efefef + .emotes + align-self: center + padding-right: 10px + input + border: none + font-size: 14px + outline: none + .postCommentBtn + align-self: center + margin-left: auto + color: #0095f6 + opacity: 0.3 + font-size: 14px + font-weight: 600 + +.likes + @include abs.allPaddings(0, 16px, 0, 16px) + font-size: 14px + font-weight: bold + +.profile + @include abs.allPaddings(0, 16px, 0, 16px) + color: #000 + font-size: 14px + font-weight: bold + +.comment + display: flex + width: 100% + +.heartComment + justify-content: flex-end + +.postTime + @include abs.allPaddings(0, 16px, 0, 16px) + font-size: 14px + color:#969696 \ No newline at end of file diff --git a/src/sass/components/_loginContent.sass b/src/sass/components/_loginContent.sass new file mode 100644 index 00000000..ce40a833 --- /dev/null +++ b/src/sass/components/_loginContent.sass @@ -0,0 +1,2 @@ +@use "../abstracts/abstractsIndex" as abs + diff --git a/src/sass/components/_navbar.sass b/src/sass/components/_navbar.sass new file mode 100644 index 00000000..0622a137 --- /dev/null +++ b/src/sass/components/_navbar.sass @@ -0,0 +1,17 @@ +@use "../abstracts/abstractsIndex" as abs + +#searchPeopleInput + margin-top: 15px + padding: 7px + @include abs.size(215px,28px) + background: #f5f5f5 + border: 1px solid #ececec + +.navIcon + margin-left: 22px + @include abs.size(22px,22px) + +#profileIconImg + @include abs.size(22px,22px) + border: 1px transparent + border-radius: 11px \ No newline at end of file diff --git a/src/sass/components/_suggestionsBar.sass b/src/sass/components/_suggestionsBar.sass new file mode 100644 index 00000000..cb6b5f7d --- /dev/null +++ b/src/sass/components/_suggestionsBar.sass @@ -0,0 +1,53 @@ +@use "../abstracts/abstractsIndex" as abs + +.suggestionsBarProfilePic + @include abs.size(56px,56px) + border-radius: 30px + +#yourProfileName + color: rgb(38,38,38) + font-size:14px + font-weight: bold + +#yourRealName + color: #969696 + +#switch + font-size:12px + color:#0095f6 + +#suggestionsForYouTitle + color: #969696 + font-size: 14px + font-weight: bold + +#seeAll + font-size: 12px + +.profileName + color: rgb(38,38,38) + font-size:14px + font-weight: bold + +.nameAndPopularity + line-height: 1.3 + +.popularity + font-size: 12px + color: #969696 + +.suggestedFollow + font-size:12px + color:#0095f6 + +#suggestestionsFooter + @include abs.allPaddings(0, 0, 0, 0) + list-style: none + display: flex + flex-wrap: wrap + font-size: 11px + color: #c7c7c7 + +#faceBookShamelessAdvertisment + font-size: 11px + color: #c7c7c7 \ No newline at end of file diff --git a/src/sass/layout/_home.sass b/src/sass/layout/_home.sass new file mode 100644 index 00000000..1f26ae60 --- /dev/null +++ b/src/sass/layout/_home.sass @@ -0,0 +1,135 @@ +@use "../components/componentsIndex" as comp +@use "../abstracts/abstractsIndex" as abs + + +/*----------------- navBar ------------------*/ +#navGlobalContainer + @include abs.size(100%,54px) + border-bottom: 1px solid abs.$lightGray + +#navContainer + margin: 0 auto + display: flex + justify-content: space-between + @include abs.size(55%,54px) + +#logoContainer + padding-top: 15px + @include abs.size(33%, 36px) + +#iconsGlobalContainer + padding-top: 15px + padding-left: 24px + @include abs.size(33%,22px) + +#iconsContainer + display: flex + justify-content: flex-end + @include abs.size(100%,36px) + +/*------- middleContentMainContainer ------*/ +.main + margin: 0 auto + display: flex + justify-content: center + @include abs.size(100%,100%) + +.mainContainer + @include abs.allPaddings(30px,0,0,0) + display: flex + justify-content: space-between + @include abs.size(55%,100%) + + +/*------- middleContentLeftContainer ------*/ +#leftContainer + + display: flex + flex-direction: column + width: 66% + +/*------ middleContentRightContainer -----*/ +// profile +#rightContainer + display: flex + flex-direction: column + justify-content: flex-start + @include abs.size(30%, 33%) + width: 30% + +#yourProfileContainer + margin-bottom: 10px + display: flex + justify-content: space-between + +#yourProfileNameContainer + padding-top: 5px + width: 55% + +#switchContainer + display: flex + padding-top: 5px + align-items: center + +// suggestions +#suggestionsSectionContainer + display: flex + flex-direction: column + justify-content: space-between + +#suggestionsHeader + margin-bottom: 10px + display: flex + justify-content: space-between + +#suggestionsContainer + display: flex + flex-direction: column + justify-content: space-between + +.suggestion + margin-bottom: 10px + display: flex + justify-content: space-between + +.suggestionLefContainer + display: flex + justify-content: flex-start + @include abs.size(70%,32px) + +.profileSuggestedPicContainer + @include abs.size(20%, 32px) + +.profileSuggestedPic + @include abs.size(32px,32px) + border-radius: 15px + +.nameAndPopularity + display: flex + flex-direction: column + justify-content: flex-start + @include abs.size(70%,32px) + +// footer +#rightContainerFooter + margin-top: 20px + display: flex + flex-direction: column + @include abs.size(100%, 30%) + +// contentCommentsSection +.heartCommentContainer + display: flex + justify-content: flex-end + width: 54% + + + + + + + + + + + diff --git a/src/sass/layout/_layoutIndex.sass b/src/sass/layout/_layoutIndex.sass new file mode 100644 index 00000000..5206c402 --- /dev/null +++ b/src/sass/layout/_layoutIndex.sass @@ -0,0 +1,2 @@ +@forward "home" +@forward "login" diff --git a/src/sass/layout/_login.sass b/src/sass/layout/_login.sass new file mode 100644 index 00000000..ce21d82f --- /dev/null +++ b/src/sass/layout/_login.sass @@ -0,0 +1,167 @@ +@use "../components/componentsIndex" as comp +@use "../abstracts/abstractsIndex" as abs + +@mixin flexCenter($direction) + width: 50% + justify-content: center + align-items: center + flex-direction: $direction + box-sizing: border-box + +body + background-color: abs.$background + height: 100vh + display: flex + flex-direction: column + justify-content: space-between + overflow-y: scroll + +section + display: flex + height: 100% + justify-content: center + +.left + @include flexCenter(column) + display: flex + width: 451px + margin-left: -50px + margin-top:-14px + +.leftContent + background-image: url(../img/instaBackground.png) + height: 618px + background-size: 453px 618px + width: -webkit-fill-available + margin: 13px + .imgContainer + position: relative + margin: 99px 0 0 151px + img + width: 240px + +.right + @include flexCenter(column) + display: flex + max-width: 350px + margin-top: 10px +.rightContent + text-align: center + +.rightContent1 + background-color: #fff + border: 1px solid #dbdbdb + margin: 0 0 10px + padding: 10px 0 + .instaSprite + height: 89px + width: 175px + margin: 4px 0 18px 0 + .loginDiv + margin: 0 40px 6px + .loginForm + width: 100% + .loginInput + height: 38px + background: abs.$background + border: 1px solid #dbdbdb + border-radius: 3px + width: 100% + font-size: 12px + color: #8e8e8e + padding: 8px + margin: -1px + outline: none + .logIn + color: #fff + background-color: rgba(0,149,246) + opacity: .3 + border: 1px solid transparent + border-radius: 4px + width: 100% + height: 29px + margin: 8px 0 0 0 + outline: none + font-weight: 500 + font-size: 14px + &:hover + opacity: 1 + .dashDiv + display: flex + margin: 18px 40px 18px + .dashSpan + flex-grow: 1 + background-color: #dbdbdb + height: 2px + position: relative + top: .45em + .dashText + margin: 0 18px + color: #8e8e8e + font-size: 13px + font-weight: 600 + line-height: 15px + .contentButton + background-color: #fff + border: none + outline: none + margin: 2px + .faceLogo + height: 16px + width: 16px + margin-right: 4px + .faceText + color: #385185 + font-weight: 600 + font-size: 14px + .second + color: #00376b + font-size: 12px + margin-top: 12px + margin: 12px 0 7px 0 + +.rightContent2 + background-color: #fff + border: 1px solid #dbdbdb + padding: 7px 0 + p + margin: 12px + font-size: 14px + span + font-weight: 600 + color: #0095f6 + +.rightContent3 + margin: 20px 0 10px 0 + p + font-size: 14px + margin-bottom: 3px + img + height: 40px + margin: 15px 2px + +footer + text-align: center + color: #8e8e8e + .footer1 + margin-bottom: -3px + .footerText + font-size: 12px + line-height: 14px + margin-right: 10px + + .footer2 + margin-bottom: 12px + .footerText + font-size: 12px + line-height: 14px + margin-right: 10px + + .footer3 + margin-bottom: 56px + .footerText + font-size: 12px + line-height: 14px + margin-right: 7px + .downIcon + transform: rotate(180deg) diff --git a/src/sass/style.css b/src/sass/style.css new file mode 100644 index 00000000..23f8ca9a --- /dev/null +++ b/src/sass/style.css @@ -0,0 +1,585 @@ +#searchPeopleInput { + margin-top: 15px; + padding: 7px; + width: 215px; + height: 28px; + background: #f5f5f5; + border: 1px solid #ececec; +} + +.navIcon { + margin-left: 22px; + width: 22px; + height: 22px; +} + +#profileIconImg { + width: 22px; + height: 22px; + border: 1px transparent; + border-radius: 11px; +} + +.suggestionsBarProfilePic { + width: 56px; + height: 56px; + border-radius: 30px; +} + +#yourProfileName { + color: #262626; + font-size: 14px; + font-weight: bold; +} + +#yourRealName { + color: #969696; +} + +#switch { + font-size: 12px; + color: #0095f6; +} + +#suggestionsForYouTitle { + color: #969696; + font-size: 14px; + font-weight: bold; +} + +#seeAll { + font-size: 12px; +} + +.profileName { + color: #262626; + font-size: 14px; + font-weight: bold; +} + +.nameAndPopularity { + line-height: 1.3; +} + +.popularity { + font-size: 12px; + color: #969696; +} + +.suggestedFollow { + font-size: 12px; + color: #0095f6; +} + +#suggestestionsFooter { + padding: 0 0 0 0; + list-style: none; + display: flex; + flex-wrap: wrap; + font-size: 11px; + color: #c7c7c7; +} + +#faceBookShamelessAdvertisment { + font-size: 11px; + color: #c7c7c7; +} + +.main { + background-color: #fafafa; +} + +#newsContentBar { + background-color: #fff; + border: 1px solid #dbdbdb; + display: flex; + max-width: 614px; + width: 100%; + border-radius: 3px; + padding: 16px 0; + margin: 0 0 24px; +} +#newsContentBar .profileLinkContainer { + padding-left: 15px; + height: 90px; + width: 85px; +} +#newsContentBar .profileLinkBtn { + border: none; + background-color: #fff; + padding: 2px; +} +#newsContentBar .profileName { + text-align: center; + font-size: 12px; + color: #262626; +} + +.roundFrame { + box-sizing: content-box; + height: 66px; + width: 66px; + background-image: url(../img/bundle.png); + background-repeat: no-repeat; + background-position: -305px -65px; +} +.roundFrame .profilePic { + height: 100%; +} +.roundFrame .profilePic img { + height: 100%; + padding: 5px; + border-radius: 40px; +} + +.post { + background-color: #fff; + border: 1px solid #dbdbdb; + display: flex; + flex-direction: column; + margin-bottom: 60px; +} +.post .postHeader { + display: flex; + height: 60px; + padding: 16px; +} +.post .postHeader .profilePic { + height: 32px; + width: 32px; +} +.post .postHeader .profilePic img { + height: 100%; + border-radius: 20px; +} +.post .postHeader .postOptions { + position: relative; + margin-left: auto; + align-self: flex-end; + font-size: 30px; +} +.post .postHeader .postProfileName { + padding-left: 15px; + font-weight: 600; + font-size: 14px; +} +.post .postImg { + max-width: -webkit-fill-available; +} +.post .postLowerOptions { + display: flex; + height: 40px; + margin-top: 4px; + padding: 0 16px; +} +.post .postLowerOptions button { + border: none; + background: #fff; +} +.post .postLowerOptions .archiveBtn { + margin-left: auto; +} +.post .addCommentContainer { + display: flex; + height: 55px; + padding: 0 16px; + border-top: 1px solid #efefef; +} +.post .addCommentContainer .emotes { + align-self: center; + padding-right: 10px; +} +.post .addCommentContainer input { + border: none; + font-size: 14px; + outline: none; +} +.post .addCommentContainer .postCommentBtn { + align-self: center; + margin-left: auto; + color: #0095f6; + opacity: 0.3; + font-size: 14px; + font-weight: 600; +} + +.likes { + padding: 0 16px 0 16px; + font-size: 14px; + font-weight: bold; +} + +.profile { + padding: 0 16px 0 16px; + color: #000; + font-size: 14px; + font-weight: bold; +} + +.comment { + display: flex; + width: 100%; +} + +.heartComment { + justify-content: flex-end; +} + +.postTime { + padding: 0 16px 0 16px; + font-size: 14px; + color: #969696; +} + +/*----------------- navBar ------------------*/ +#navGlobalContainer { + width: 100%; + height: 54px; + border-bottom: 1px solid #ececec; +} + +#navContainer { + margin: 0 auto; + display: flex; + justify-content: space-between; + width: 55%; + height: 54px; +} + +#logoContainer { + padding-top: 15px; + width: 33%; + height: 36px; +} + +#iconsGlobalContainer { + padding-top: 15px; + padding-left: 24px; + width: 33%; + height: 22px; +} + +#iconsContainer { + display: flex; + justify-content: flex-end; + width: 100%; + height: 36px; +} + +/*------- middleContentMainContainer ------*/ +.main { + margin: 0 auto; + display: flex; + justify-content: center; + width: 100%; + height: 100%; +} + +.mainContainer { + padding: 30px 0 0 0; + display: flex; + justify-content: space-between; + width: 55%; + height: 100%; +} + +/*------- middleContentLeftContainer ------*/ +#leftContainer { + display: flex; + flex-direction: column; + width: 66%; +} + +/*------ middleContentRightContainer -----*/ +#rightContainer { + display: flex; + flex-direction: column; + justify-content: flex-start; + width: 30%; + height: 33%; + width: 30%; +} + +#yourProfileContainer { + margin-bottom: 10px; + display: flex; + justify-content: space-between; +} + +#yourProfileNameContainer { + padding-top: 5px; + width: 55%; +} + +#switchContainer { + display: flex; + padding-top: 5px; + align-items: center; +} + +#suggestionsSectionContainer { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +#suggestionsHeader { + margin-bottom: 10px; + display: flex; + justify-content: space-between; +} + +#suggestionsContainer { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.suggestion { + margin-bottom: 10px; + display: flex; + justify-content: space-between; +} + +.suggestionLefContainer { + display: flex; + justify-content: flex-start; + width: 70%; + height: 32px; +} + +.profileSuggestedPicContainer { + width: 20%; + height: 32px; +} + +.profileSuggestedPic { + width: 32px; + height: 32px; + border-radius: 15px; +} + +.nameAndPopularity { + display: flex; + flex-direction: column; + justify-content: flex-start; + width: 70%; + height: 32px; +} + +#rightContainerFooter { + margin-top: 20px; + display: flex; + flex-direction: column; + width: 100%; + height: 30%; +} + +.heartCommentContainer { + display: flex; + justify-content: flex-end; + width: 54%; +} + +body { + background-color: #fafafa; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + overflow-y: scroll; +} + +section { + display: flex; + height: 100%; + justify-content: center; +} + +.left { + width: 50%; + justify-content: center; + align-items: center; + flex-direction: column; + box-sizing: border-box; + display: flex; + width: 451px; + margin-left: -50px; + margin-top: -14px; +} + +.leftContent { + background-image: url(../img/instaBackground.png); + height: 618px; + background-size: 453px 618px; + width: -webkit-fill-available; + margin: 13px; +} +.leftContent .imgContainer { + position: relative; + margin: 99px 0 0 151px; +} +.leftContent .imgContainer img { + width: 240px; +} + +.right { + width: 50%; + justify-content: center; + align-items: center; + flex-direction: column; + box-sizing: border-box; + display: flex; + max-width: 350px; + margin-top: 10px; +} + +.rightContent { + text-align: center; +} + +.rightContent1 { + background-color: #fff; + border: 1px solid #dbdbdb; + margin: 0 0 10px; + padding: 10px 0; +} +.rightContent1 .instaSprite { + height: 89px; + width: 175px; + margin: 4px 0 18px 0; +} +.rightContent1 .loginDiv { + margin: 0 40px 6px; +} +.rightContent1 .loginDiv .loginForm { + width: 100%; +} +.rightContent1 .loginDiv .loginForm .loginInput { + height: 38px; + background: #fafafa; + border: 1px solid #dbdbdb; + border-radius: 3px; + width: 100%; + font-size: 12px; + color: #8e8e8e; + padding: 8px; + margin: -1px; + outline: none; +} +.rightContent1 .logIn { + color: #fff; + background-color: #0095f6; + opacity: 0.3; + border: 1px solid transparent; + border-radius: 4px; + width: 100%; + height: 29px; + margin: 8px 0 0 0; + outline: none; + font-weight: 500; + font-size: 14px; +} +.rightContent1 .logIn:hover { + opacity: 1; +} +.rightContent1 .dashDiv { + display: flex; + margin: 18px 40px 18px; +} +.rightContent1 .dashDiv .dashSpan { + flex-grow: 1; + background-color: #dbdbdb; + height: 2px; + position: relative; + top: 0.45em; +} +.rightContent1 .dashDiv .dashText { + margin: 0 18px; + color: #8e8e8e; + font-size: 13px; + font-weight: 600; + line-height: 15px; +} +.rightContent1 .contentButton { + background-color: #fff; + border: none; + outline: none; + margin: 2px; +} +.rightContent1 .contentButton .faceLogo { + height: 16px; + width: 16px; + margin-right: 4px; +} +.rightContent1 .contentButton .faceText { + color: #385185; + font-weight: 600; + font-size: 14px; +} +.rightContent1 .second { + color: #00376b; + font-size: 12px; + margin-top: 12px; + margin: 12px 0 7px 0; +} + +.rightContent2 { + background-color: #fff; + border: 1px solid #dbdbdb; + padding: 7px 0; +} +.rightContent2 p { + margin: 12px; + font-size: 14px; +} +.rightContent2 p span { + font-weight: 600; + color: #0095f6; +} + +.rightContent3 { + margin: 20px 0 10px 0; +} +.rightContent3 p { + font-size: 14px; + margin-bottom: 3px; +} +.rightContent3 img { + height: 40px; + margin: 15px 2px; +} + +footer { + text-align: center; + color: #8e8e8e; +} +footer .footer1 { + margin-bottom: -3px; +} +footer .footer1 .footerText { + font-size: 12px; + line-height: 14px; + margin-right: 10px; +} +footer .footer2 { + margin-bottom: 12px; +} +footer .footer2 .footerText { + font-size: 12px; + line-height: 14px; + margin-right: 10px; +} +footer .footer3 { + margin-bottom: 56px; +} +footer .footer3 .footerText { + font-size: 12px; + line-height: 14px; + margin-right: 7px; +} +footer .footer3 .downIcon { + transform: rotate(180deg); +} + +/*# sourceMappingURL=style.css.map */ diff --git a/src/sass/style.sass b/src/sass/style.sass new file mode 100644 index 00000000..279bf16e --- /dev/null +++ b/src/sass/style.sass @@ -0,0 +1 @@ +@use "./layout/layoutIndex" \ No newline at end of file