diff --git a/README.md b/README.md index 5e6faf7d..c7af1875 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,7 @@ ## Index - [Requirements](#requirements) +- [Theory Questions](#questions) - [Repository](#repository) - [Technologies used](#technologies-used) - [Project delivery](#project-delivery) @@ -25,6 +26,119 @@ - You must use inheritance at least once in the project. - You cannot use third party libraries for the development of this pill +## Questions + + What is SASS? What does SASS stand for? + >Is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organised and allows you to create style sheets faster + > + What is a CSS pre-processor? + >CSS preprocessors are scripting languages that extend the default capabilities of CSS. They enable us to use logic in our CSS code, such as variables, nesting, inheritance, mixins, functions, and mathematical operations. CSS preprocessors make it easy to automate repetitive tasks. + > + What does a pre-processor have to do with SASS? + >Processes the information and compiles it before sending it to the CSS reader. + > + Why use SASS? + > -It offers variables for whatever you want + -It's CSS syntax friendly + -It uses nested syntax + -It includes mixins + -If you know SASS, you can customize Bootstrap 4. + > + SASS has disadvantages? Which are? + > -Using Sass may cause losing benefits of browser's built-in element inspector. + -Code has to be compiled. + -Difficult Troubleshooting. + -The developer must have enough time to learn new features present in this preprocessor before using it. + > + What is a SASS Variable? Explain why are useful + >A variable allows you to store a value or a set of values, and to reuse these variables throughout your SASS files as many times you want and wherever you want. + Explain the SASS variables property with an example. + ``` + $blue: #004BB4; + $ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif; + $nunito-font: 'Nunito', 'Arial', 'Helvetica', sans-serif; + ``` + >Once you have created the variables, you can use them wherever you need to, like this: + ``` + h1 { + font: $ubuntu-font; + color: $blue; + } + a { + font: $nunito-font; + background-color: $blue; + padding: 6px; + } + ``` + What is a mixin? Why is it important? Give an example + >Mixins are like functions in other programming languages. They return a value or set of values and can take parameters including default values. + ``` + @mixin set-color($color){ + border-color:$color; + background-color:$color; + color:$color; + } + div{ + @include set-color(red); + } + ``` + What is SCSS? Give an example + > SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension. + > + What is SASS? Give an example + >The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension. + > + What is the difference between .scss and .sass syntax. + >The difference is syntax. in .sass extension you don't have to put brackets, neither ";". + > + In which cases would we use SCSS? And in which cases would we use SASS? + >We should use SCSS everycase, because SASS will be deprecated soon. + Explain how traditional CSS and Preprocessed CSS workflows are different. + > + Can we create functions with SASS? If it is true, give an example. + >Yes, we can create it with mixin rule. + ``` + @mixin set-color($color){ + border-color:$color; + background-color:$color; + color:$color; + } + div{ + @include set-color(red); + } + ``` + What is nesting? Is it useful? Give an example of nesting + > is a type of rule in css, it allow us to select multiple tags in CSS, it's more easier in SASS. + >Example + ``` + 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 + >@use will import the file only once, @import will import all the entire document, including other imports in the imported file, it's more usefull the @use. + > + How can we import other CSS/SASS files in SASS? Give an example + > @import/@use "urlFile"; + > + Explain the concept of inheritance in SASS. + >Using @extend lets you share a set of CSS properties from one selector to another. In our example we're going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean. + > + Why use @extend? Give an example + >The @extend directive lets you share a set of CSS properties from one selector to another. + ## Repository First of all you must fork this project into your GitHub account. diff --git a/assets/css/index.css b/assets/css/index.css new file mode 100644 index 00000000..65bc83b6 --- /dev/null +++ b/assets/css/index.css @@ -0,0 +1,516 @@ +@charset "UTF-8"; +#loginForm button { + margin-top: 8px; + color: #FFFFFF; + background-color: #0095F6; + border-style: none; + padding: 7px; + cursor: pointer; + border-radius: 3px; +} + +.noBtn, #facebookContainer #facebookBtn { + border-style: none; + cursor: pointer; + color: #0095F6; + background-color: inherit; +} + +#facebookContainer #facebookBtn { + color: #385185; +} +#facebookContainer span { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 5px; +} +#facebookContainer img { + width: 5%; + height: 5%; +} + +.suggestBtn { + color: inherit; +} + +#mobiles { + position: relative; +} +#mobiles #templateImg { + position: absolute; + top: 100px; + right: 63px; +} + +@media (max-width: 880px) { + #mobiles { + display: none; + } +} +.downloadContainer img { + width: 40%; +} + +#loginForm input { + border: 1px solid #DBDBDB; + background-color: #FAFAFA; + padding: 10px 5px; + border-radius: 3px; +} +#loginForm input:focus { + outline: none; + border: 1px solid #A8A8A8; +} + +.searchBar { + position: relative; +} +.searchBar svg { + position: absolute; + top: 10px; + left: 12px; +} +.searchBar input { + width: 85%; + padding: 10px 35px 10px 35px; + background-color: #efefef; + border-radius: 5px; + border-style: none; +} +.searchBar input:focus { + outline: none; +} + +#commentToPost { + width: 100%; + padding: 15px 15px 15px 40px; + border: none; +} +#commentToPost:focus { + outline: none; +} + +.or { + text-align: center; + position: relative; + color: #8e8e8e; + margin-bottom: 20px; +} +.or p:before { + content: ""; + background-color: #DBDBDB; + height: 5%; + position: absolute; + width: 30%; + top: 10px; + left: 35px; +} +.or p:after { + content: ""; + background-color: #DBDBDB; + width: 30%; + position: absolute; + height: 5%; + top: 10px; + right: 35px; +} + +.instaText { + display: flex; + flex-direction: row; + justify-content: center; + padding: 30px 0; +} +.instaText img { + width: 55%; +} + +.imgProfileHeader, .imgProfileSmall, .imgProfile { + border-radius: 50px; + width: 22px; + height: 22px; +} + +.containerHist { + position: relative; +} + +.historiesNav .specialBorder { + position: absolute; + width: 66px; + top: -3px; + left: -3px; +} + +.imgProfile { + width: inherit; + height: inherit; + object-fit: cover; + overflow: hidden; +} + +.imgProfileSmall { + width: 30px; + height: 30px; +} + +.postsNav { + width: 100%; +} + +.post { + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #FFFFFF; + border: 1px solid #A8A8A8; + border-radius: 5px; + margin-bottom: 15px; +} +.post .headerPost { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 15px; + border-bottom: 1px solid #DBDBDB; +} +.post .headerPost .profilePost { + display: flex; + flex-direction: row; + align-items: center; + gap: 10px; +} +.post .postImg { + text-align: center; +} +.post .postImg img { + max-width: 100%; + max-height: 100%; +} +.post .footerPost { + padding: 10px 10px; +} +.post .options { + display: flex; + flex-direction: row; + justify-content: space-between; +} +.post .options .socialIcons { + display: flex; + flex-direction: row; + gap: 7px; +} +.post .views { + display: flex; + flex-direction: row; + align-items: center; +} +.post #formComment { + display: flex; + flex-direction: row; + position: relative; + border-top: 1px solid #DBDBDB; +} +.post #formComment svg { + position: absolute; + top: 10px; + left: 10px; + cursor: pointer; +} +.post #formComment button { + position: absolute; + top: 14px; + right: 10px; + font-size: 15px; +} +@media (max-width: 736px) { + .post { + border: none; + } + .post #formComment { + display: none; + } +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; +} + +.submitText { + font-weight: 550; + font-family: sans-serif; +} + +.or p { + font-size: small; +} + +a { + text-decoration: none; +} + +#facebookContainer span { + font-weight: 600; +} + +#forgotPass { + text-align: center; + font-size: 12px; +} +#forgotPass a:visited { + color: #385185; +} + +.downloadContainer { + text-align: center; + font-size: 14px; +} + +#loginFooter, +#asideFooter { + font-size: 12px; +} +#loginFooter a, +#asideFooter a { + color: #A8A8A8; +} +#loginFooter a:visited, +#asideFooter a:visited { + color: #A8A8A8; +} +#loginFooter .copy, +#asideFooter .copy { + color: #A8A8A8; +} + +.historiesNav .profileUsername { + font-size: 12px; +} + +.profileName, .suggestTitle { + color: #A8A8A8; + font-size: small; +} + +.suggestTitle { + font-weight: 700; +} + +.smallUsername { + font-size: 15px; +} + +.infoText { + color: #A8A8A8; + font-size: 12px; +} + +.usernamePost { + font-size: 14px; + font-weight: 600; +} + +.markedText { + font-weight: 600; +} + +.text { + font-size: 14px; +} + +.littleText { + font-size: 10px; +} + +.grayText { + color: #A8A8A8; +} + +body { + margin: 0; +} + +.loginPage, .mainContent { + display: flex; + flex-direction: column; + justify-content: space-around; + height: 100vh; +} + +.loginMain, .dashboard { + display: flex; + flex-direction: row; + justify-content: center; + width: 100%; +} + +.right-container { + display: flex; + flex-direction: column; + width: 50%; +} + +.mainContent { + align-items: center; + height: auto; + margin-right: 40px; + max-width: 100%; +} +@media (max-width: 736px) { + .mainContent { + margin: auto; + } +} + +#loginFooter { + width: 100%; + justify-self: flex-end; +} +#loginFooter .row { + display: flex; + flex-direction: row; + gap: 10px; + justify-content: center; + margin-top: 15px; +} + +#asideFooter a::after { + content: "·"; + margin: 0 0.25em 0 0.25em; +} + +header { + display: flex; + flex-direction: row; + justify-content: center; + background-color: #FFFFFF; + border-bottom: 1px solid #DBDBDB; + padding: 5px; + margin-bottom: 40px; + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 100; +} +header .logoHeader { + display: flex; + flex-direction: row; + width: 20%; +} +header .logoHeader img { + width: 120px; +} +@media (max-width: 736px) { + header { + justify-content: space-between; + } + header .searchBar { + display: none; + } +} +header .headerNav { + display: flex; + flex-direction: row; + align-items: center; + gap: 70px; +} +header .icons { + display: flex; + flex-direction: row; + gap: 20px; +} + +.histories { + width: 100%; +} + +.historiesNav { + display: flex; + flex-direction: row; + gap: 28px; + margin: 0 0 30px 0; + border: 1px solid #DBDBDB; + border-radius: 5px; + padding: 20px 20px 5px 20px; + overflow: hidden; +} +.historiesNav .containerHist { + display: flex; + flex-direction: column; + width: 60px; + height: 80px; + gap: 5px; + align-items: center; +} + +.rightContainer { + width: 350px; +} + +.formContainer { + background-color: #FFFFFF; + border: 1px solid #DBDBDB; +} + +#loginForm { + display: flex; + flex-direction: column; + gap: 7px; + margin: 0px 35px; +} + +.register { + margin-top: 10px; + padding: 8px; + text-align: center; + background-color: #FFFFFF; + border: 1px solid #DBDBDB; +} +.register a { + color: #0095F6; +} + +aside { + display: flex; + flex-direction: column; + width: 21%; + position: -webkit-sticky; + position: sticky; +} +aside .asideRow { + display: flex; + flex-direction: row; + justify-content: space-between; +} +aside .userProfile { + display: flex; + flex-direction: row; + align-items: center; + gap: 15px; + width: 110px; + height: 60px; +} +aside .userProfile .userData { + display: flex; + flex-direction: column; +} +aside .suggestions { + display: flex; + flex-direction: column; + margin-bottom: 30px; + gap: 10px; +} + +@media (max-width: 900px) { + aside { + display: none; + } +} +body { + background-color: #FAFAFA; +} + +/*# sourceMappingURL=index.css.map */ diff --git a/assets/img/Instagram.png b/assets/img/Instagram.png new file mode 100644 index 00000000..bdad6fa9 Binary files /dev/null and b/assets/img/Instagram.png differ diff --git a/assets/img/appStore.png b/assets/img/appStore.png new file mode 100644 index 00000000..460f81ab Binary files /dev/null and b/assets/img/appStore.png differ diff --git a/assets/img/borderHistories.png b/assets/img/borderHistories.png new file mode 100644 index 00000000..881a897a Binary files /dev/null and b/assets/img/borderHistories.png differ diff --git a/assets/img/faceLogo.png b/assets/img/faceLogo.png new file mode 100644 index 00000000..1e789345 Binary files /dev/null and b/assets/img/faceLogo.png differ diff --git a/assets/img/favicon.ico b/assets/img/favicon.ico new file mode 100644 index 00000000..3a7f2067 Binary files /dev/null and b/assets/img/favicon.ico differ diff --git a/assets/img/font.png b/assets/img/font.png new file mode 100644 index 00000000..55118d3f Binary files /dev/null and b/assets/img/font.png differ diff --git a/assets/img/googlePlay.png b/assets/img/googlePlay.png new file mode 100644 index 00000000..306aa45f Binary files /dev/null and b/assets/img/googlePlay.png differ diff --git a/assets/img/iphones.png b/assets/img/iphones.png new file mode 100644 index 00000000..46dce6e7 Binary files /dev/null and b/assets/img/iphones.png differ diff --git a/assets/img/mobilemockup/chatWhiteMobile.jpg b/assets/img/mobilemockup/chatWhiteMobile.jpg new file mode 100644 index 00000000..fabae2a4 Binary files /dev/null and b/assets/img/mobilemockup/chatWhiteMobile.jpg differ diff --git a/assets/img/mobilemockup/dashWhiteMobile.jpg b/assets/img/mobilemockup/dashWhiteMobile.jpg new file mode 100644 index 00000000..fc1d26e1 Binary files /dev/null and b/assets/img/mobilemockup/dashWhiteMobile.jpg differ diff --git a/assets/img/mobilemockup/photoWhiteMobile.jpg b/assets/img/mobilemockup/photoWhiteMobile.jpg new file mode 100644 index 00000000..baa021ee Binary files /dev/null and b/assets/img/mobilemockup/photoWhiteMobile.jpg differ diff --git a/assets/img/mobilemockup/profileWhiteMobile.jpg b/assets/img/mobilemockup/profileWhiteMobile.jpg new file mode 100644 index 00000000..679321b1 Binary files /dev/null and b/assets/img/mobilemockup/profileWhiteMobile.jpg differ diff --git a/assets/img/posts/meme1.png b/assets/img/posts/meme1.png new file mode 100644 index 00000000..d21feb08 Binary files /dev/null and b/assets/img/posts/meme1.png differ diff --git a/assets/img/posts/meme2.png b/assets/img/posts/meme2.png new file mode 100644 index 00000000..f4dca61c Binary files /dev/null and b/assets/img/posts/meme2.png differ diff --git a/assets/img/posts/meme3.png b/assets/img/posts/meme3.png new file mode 100644 index 00000000..d1fbee33 Binary files /dev/null and b/assets/img/posts/meme3.png differ diff --git a/assets/img/profiles/arturo.jpg b/assets/img/profiles/arturo.jpg new file mode 100644 index 00000000..9b9c7d4c Binary files /dev/null and b/assets/img/profiles/arturo.jpg differ diff --git a/assets/img/profiles/chandri.jpg b/assets/img/profiles/chandri.jpg new file mode 100644 index 00000000..259494c8 Binary files /dev/null and b/assets/img/profiles/chandri.jpg differ diff --git a/assets/img/profiles/dog.jpg b/assets/img/profiles/dog.jpg new file mode 100644 index 00000000..58b0e63c Binary files /dev/null and b/assets/img/profiles/dog.jpg differ diff --git a/assets/img/profiles/jungleGirl.jpg b/assets/img/profiles/jungleGirl.jpg new file mode 100644 index 00000000..3df08c0f Binary files /dev/null and b/assets/img/profiles/jungleGirl.jpg differ diff --git a/assets/img/profiles/mathGirl.jpg b/assets/img/profiles/mathGirl.jpg new file mode 100644 index 00000000..171a3677 Binary files /dev/null and b/assets/img/profiles/mathGirl.jpg differ diff --git a/assets/img/profiles/nathani.jpg b/assets/img/profiles/nathani.jpg new file mode 100644 index 00000000..7f7e1813 Binary files /dev/null and b/assets/img/profiles/nathani.jpg differ diff --git a/assets/img/profiles/quinn.jpg b/assets/img/profiles/quinn.jpg new file mode 100644 index 00000000..ee0b2141 Binary files /dev/null and b/assets/img/profiles/quinn.jpg differ diff --git a/assets/img/profiles/rex.jpg b/assets/img/profiles/rex.jpg new file mode 100644 index 00000000..45987caf Binary files /dev/null and b/assets/img/profiles/rex.jpg differ diff --git a/assets/img/profiles/rex2.jpg b/assets/img/profiles/rex2.jpg new file mode 100644 index 00000000..06bb2ba9 Binary files /dev/null and b/assets/img/profiles/rex2.jpg differ diff --git a/assets/img/profiles/roland.jpg b/assets/img/profiles/roland.jpg new file mode 100644 index 00000000..00136a01 Binary files /dev/null and b/assets/img/profiles/roland.jpg differ diff --git a/assets/img/profiles/scot.jpg b/assets/img/profiles/scot.jpg new file mode 100644 index 00000000..da21ff1c Binary files /dev/null and b/assets/img/profiles/scot.jpg differ diff --git a/assets/img/profiles/scot2.jpg b/assets/img/profiles/scot2.jpg new file mode 100644 index 00000000..b4b775fc Binary files /dev/null and b/assets/img/profiles/scot2.jpg differ diff --git a/assets/img/profiles/sergey.jpg b/assets/img/profiles/sergey.jpg new file mode 100644 index 00000000..7dc73909 Binary files /dev/null and b/assets/img/profiles/sergey.jpg differ diff --git a/assets/img/profiles/serious.jpg b/assets/img/profiles/serious.jpg new file mode 100644 index 00000000..0df7cfe8 Binary files /dev/null and b/assets/img/profiles/serious.jpg differ diff --git a/assets/img/profiles/takashi.jpg b/assets/img/profiles/takashi.jpg new file mode 100644 index 00000000..5ab7344f Binary files /dev/null and b/assets/img/profiles/takashi.jpg differ diff --git a/assets/img/profiles/wedding.jpg b/assets/img/profiles/wedding.jpg new file mode 100644 index 00000000..a8603317 Binary files /dev/null and b/assets/img/profiles/wedding.jpg differ diff --git a/assets/img/profiles/windowGirl.jpg b/assets/img/profiles/windowGirl.jpg new file mode 100644 index 00000000..b8568aa3 Binary files /dev/null and b/assets/img/profiles/windowGirl.jpg differ diff --git a/assets/img/profiles/windowboy.jpg b/assets/img/profiles/windowboy.jpg new file mode 100644 index 00000000..124aa404 Binary files /dev/null and b/assets/img/profiles/windowboy.jpg differ diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 00000000..3a43188a --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,26 @@ +const templates = [ + "chatWhiteMobile", + "dashWhiteMobile", + "photoWhiteMobile", + "profileWhiteMobile" +]; +var i = 1; + +window.onload = () => { + setInterval(function () { + $("#templateImg").children().fadeOut(1000); + setTimeout(function () { + $("#templateImg").children().remove(); + $("#templateImg").fadeIn(1000).append(` + + `) + $('#templateImg').children().hide().fadeIn(300); + }, 800) + if (i < 3) { + i++; + } else { + i = 0; + } + + }, 5000) +} \ No newline at end of file diff --git a/assets/sass/abstracts/_breakpoints.scss b/assets/sass/abstracts/_breakpoints.scss new file mode 100644 index 00000000..62e98d65 --- /dev/null +++ b/assets/sass/abstracts/_breakpoints.scss @@ -0,0 +1,23 @@ +@mixin hideMobiles($point) { + @if $point==mobile { + @media (max-width:880px) { + @content; + } + } +} + +@mixin hideAside($point) { + @if $point==mobile { + @media (max-width:900px) { + @content; + } + } +} + +@mixin responsiveDash($point) { + @if $point==mobile { + @media(max-width:736px) { + @content; + } + } +} \ No newline at end of file diff --git a/assets/sass/abstracts/_fonts.scss b/assets/sass/abstracts/_fonts.scss new file mode 100644 index 00000000..4d95bcec --- /dev/null +++ b/assets/sass/abstracts/_fonts.scss @@ -0,0 +1,8 @@ +$default-font-family: -apple-system, +BlinkMacSystemFont, +"Segoe UI", +Roboto, +Helvetica, +Arial, +sans-serif; +; \ No newline at end of file diff --git a/assets/sass/abstracts/_index.scss b/assets/sass/abstracts/_index.scss new file mode 100644 index 00000000..e0272943 --- /dev/null +++ b/assets/sass/abstracts/_index.scss @@ -0,0 +1,4 @@ +@forward "breakpoints"; +@forward "fonts"; +@forward "mixins"; +@forward "variables"; \ No newline at end of file diff --git a/assets/sass/abstracts/_mixins.scss b/assets/sass/abstracts/_mixins.scss new file mode 100644 index 00000000..83624e82 --- /dev/null +++ b/assets/sass/abstracts/_mixins.scss @@ -0,0 +1,9 @@ +@mixin flex-column { + display: flex; + flex-direction: column; +} + +@mixin flex-row { + display: flex; + flex-direction: row; +} \ No newline at end of file diff --git a/assets/sass/abstracts/_variables.scss b/assets/sass/abstracts/_variables.scss new file mode 100644 index 00000000..bd59fc08 --- /dev/null +++ b/assets/sass/abstracts/_variables.scss @@ -0,0 +1,11 @@ +//color variables +$blue-light : #0095F6; +$blue-text:#385185; +$gray:#DBDBDB; +$bg-color-default:#FAFAFA; +$bg-white:#FFFFFF; +$mediumGray:#efefef; +$darkGray:#A8A8A8; + +//font +$smallText : 12px; \ No newline at end of file diff --git a/assets/sass/base/_index.scss b/assets/sass/base/_index.scss new file mode 100644 index 00000000..aea6f069 --- /dev/null +++ b/assets/sass/base/_index.scss @@ -0,0 +1 @@ +@forward "typography"; \ No newline at end of file diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss new file mode 100644 index 00000000..f7b333f8 --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,107 @@ +@use "../abstracts/"as a; + +body { + font-family: a.$default-font-family; +} + +.submitText { + font-weight: 550; + font-family: sans-serif; +} + +.or { + p { + font-size: small; + } +} + +a { + text-decoration: none; +} + +#facebookContainer { + span { + font-weight: 600; + } + +} + +#forgotPass { + text-align: center; + font-size: a.$smallText; + + a:visited { + color: a.$blue-text; + } +} + +.downloadContainer { + text-align: center; + font-size: 14px; +} + +#loginFooter, +#asideFooter { + font-size: a.$smallText; + + a { + color: a.$darkGray; + } + + a:visited { + color: a.$darkGray; + } + + .copy { + color: a.$darkGray; + } +} + +//dash +.historiesNav { + .profileUsername { + font-size: 12px; + } +} + +//aside profile data +.profileName { + color: a.$darkGray; + font-size: small; +} + +.suggestTitle { + @extend .profileName; + font-weight: 700; +} + +.smallUsername { + font-size: 15px; + +} + +.infoText { + color: a.$darkGray; + font-size: 12px; +} + +.usernamePost { + font-size: 14px; + font-weight: 600; +} + +.markedText { + font-weight: 600; +} + +.text { + font-size: 14px; +} + +.littleText { + font-size: 10px; +} + +.grayText { + color: a.$darkGray; +} \ No newline at end of file diff --git a/assets/sass/components/_buttons.scss b/assets/sass/components/_buttons.scss new file mode 100644 index 00000000..a465d439 --- /dev/null +++ b/assets/sass/components/_buttons.scss @@ -0,0 +1,46 @@ +@use "./../abstracts"as a; + + +#loginForm { + + button { + margin-top: 8px; + color: a.$bg-white; + background-color: a.$blue-light; + border-style: none; + padding: 7px; + cursor: pointer; + border-radius: 3px; + } + +} + +.noBtn { + border-style: none; + cursor: pointer; + color: a.$blue-light; + background-color: inherit; +} + +#facebookContainer { + #facebookBtn { + @extend .noBtn; + color: a.$blue-text; + } + + span { + @include a.flex-row; + justify-content: center; + align-items: center; + gap: 5px; + } + + img { + width: 5%; + height: 5%; + } +} + +.suggestBtn { + color: inherit; +} \ No newline at end of file diff --git a/assets/sass/components/_images.scss b/assets/sass/components/_images.scss new file mode 100644 index 00000000..1674e0ee --- /dev/null +++ b/assets/sass/components/_images.scss @@ -0,0 +1,8 @@ +@use "../abstracts/"as a; + +.downloadContainer { + + img { + width: 40%; + } +} \ No newline at end of file diff --git a/assets/sass/components/_imgProfile.scss b/assets/sass/components/_imgProfile.scss new file mode 100644 index 00000000..a9331fec --- /dev/null +++ b/assets/sass/components/_imgProfile.scss @@ -0,0 +1,33 @@ +.imgProfileHeader { + border-radius: 50px; + width: 22px; + height: 22px; +} + +.containerHist { + position: relative; +} + +.historiesNav { + .specialBorder { + position: absolute; + width: 66px; + top: -3px; + left: -3px; + } +} + +.imgProfile { + @extend .imgProfileHeader; + width: inherit; + height: inherit; + object-fit: cover; + overflow: hidden; +} + +.imgProfileSmall { + @extend .imgProfileHeader; + width: 30px; + height: 30px; + +} \ No newline at end of file diff --git a/assets/sass/components/_index.scss b/assets/sass/components/_index.scss new file mode 100644 index 00000000..386054eb --- /dev/null +++ b/assets/sass/components/_index.scss @@ -0,0 +1,8 @@ +@forward "buttons"; +@forward "mobileMockup"; +@forward "images"; +@forward "input"; +@forward "orAlternative"; +@forward "instaLogo"; +@forward "imgProfile"; +@forward "post"; \ No newline at end of file diff --git a/assets/sass/components/_input.scss b/assets/sass/components/_input.scss new file mode 100644 index 00000000..e76baf77 --- /dev/null +++ b/assets/sass/components/_input.scss @@ -0,0 +1,50 @@ +@use "../abstracts/"as a; + +#loginForm { + input { + border: 1px solid a.$gray; + background-color: a.$bg-color-default; + padding: 10px 5px; + border-radius: 3px; + } + + input:focus { + outline: none; + border: 1px solid a.$darkGray; + } + +} + +.searchBar { + position: relative; + + //glass icon + svg { + position: absolute; + top: 10px; + left: 12px; + } + + input { + width: 85%; + padding: 10px 35px 10px 35px; + background-color: a.$mediumGray; + border-radius: 5px; + border-style: none; + } + + input:focus { + outline: none; + } +} + +#commentToPost { + width: 100%; + padding: 15px 15px 15px 40px; + border: none; + + + &:focus { + outline: none; + } +} \ No newline at end of file diff --git a/assets/sass/components/_instaLogo.scss b/assets/sass/components/_instaLogo.scss new file mode 100644 index 00000000..f6f6acda --- /dev/null +++ b/assets/sass/components/_instaLogo.scss @@ -0,0 +1,13 @@ +@use "../abstracts/"as a; + +//instagram text-img login +.instaText { + @include a.flex-row; + justify-content: center; + + padding: 30px 0; + + img { + width: 55%; + } +} \ No newline at end of file diff --git a/assets/sass/components/_mobileMockup.scss b/assets/sass/components/_mobileMockup.scss new file mode 100644 index 00000000..27352c2a --- /dev/null +++ b/assets/sass/components/_mobileMockup.scss @@ -0,0 +1,17 @@ +@use "./../abstracts"as a; + +#mobiles { + position: relative; + + #templateImg { + position: absolute; + top: 100px; + right: 63px; + } +} + +@include a.hideMobiles(mobile) { + #mobiles { + display: none; + } +} \ No newline at end of file diff --git a/assets/sass/components/_orAlternative.scss b/assets/sass/components/_orAlternative.scss new file mode 100644 index 00000000..e13dd2c7 --- /dev/null +++ b/assets/sass/components/_orAlternative.scss @@ -0,0 +1,30 @@ +//After form +@use "../abstracts/"as a; + +.or { + text-align: center; + position: relative; + color: #8e8e8e; + + p:before { + content: ""; + background-color: a.$gray; + height: 5%; + position: absolute; + width: 30%; + top: 10px; + left: 35px; + } + + p:after { + content: ""; + background-color: a.$gray; + width: 30%; + position: absolute; + height: 5%; + top: 10px; + right: 35px; + } + + margin-bottom:20px; +} \ No newline at end of file diff --git a/assets/sass/components/_post.scss b/assets/sass/components/_post.scss new file mode 100644 index 00000000..df2436cb --- /dev/null +++ b/assets/sass/components/_post.scss @@ -0,0 +1,89 @@ +@use "../abstracts/"as a; + +.postsNav { + width: 100%; +} + +.post { + @include a.flex-column; + justify-content: space-between; + background-color: a.$bg-white; + border: 1px solid a.$darkGray; + border-radius: 5px; + margin-bottom: 15px; + + .headerPost { + @include a.flex-row; + justify-content: space-between; + align-items: center; + padding: 15px; + border-bottom: 1px solid a.$gray; + + .profilePost { + @include a.flex-row; + align-items: center; + gap: 10px; + } + } + + .postImg { + text-align: center; + + img { + max-width: 100%; + max-height: 100%; + } + } + + .footerPost { + padding: 10px 10px; + } + + .options { + @include a.flex-row; + justify-content: space-between; + + .socialIcons { + @include a.flex-row; + gap: 7px; + + } + } + + .views { + @include a.flex-row; + align-items: center; + } + + + #formComment { + @include a.flex-row; + position: relative; + border-top: 1px solid a.$gray; + + svg { + position: absolute; + top: 10px; + left: 10px; + cursor: pointer; + } + + button { + position: absolute; + top: 14px; + right: 10px; + font-size: 15px; + } + } + + @include a.responsiveDash(mobile) { + & { + border: none; + } + + #formComment { + display: none; + } + + } +} \ No newline at end of file diff --git a/assets/sass/index.scss b/assets/sass/index.scss new file mode 100644 index 00000000..77821213 --- /dev/null +++ b/assets/sass/index.scss @@ -0,0 +1,8 @@ +@use "abstracts"as a; +@use "components"as c; +@use "base"as b; +@use "layout"as l; + +body { + background-color: a.$bg-color-default; +} \ No newline at end of file diff --git a/assets/sass/layout/_aside.scss b/assets/sass/layout/_aside.scss new file mode 100644 index 00000000..790a6a1b --- /dev/null +++ b/assets/sass/layout/_aside.scss @@ -0,0 +1,40 @@ +@use "../abstracts/"as a; + +aside { + @include a.flex-column; + width: 21%; + position: -webkit-sticky; + position: sticky; + + + + .asideRow { + @include a.flex-row; + justify-content: space-between; + } + + .userProfile { + @include a.flex-row; + align-items: center; + gap: 15px; + width: 110px; + height: 60px; + + .userData { + @include a.flex-column; + } + } + + //SUGGESTIONS + .suggestions { + @include a.flex-column; + margin-bottom: 30px; + gap: 10px; + } +} + +@include a.hideAside(mobile) { + aside { + display: none; + } +} \ No newline at end of file diff --git a/assets/sass/layout/_flex.scss b/assets/sass/layout/_flex.scss new file mode 100644 index 00000000..1bf1dd0a --- /dev/null +++ b/assets/sass/layout/_flex.scss @@ -0,0 +1,45 @@ +@use "../abstracts/"as a; + +body { + margin: 0; +} + +//body login +.loginPage { + @include a.flex-column; + justify-content: space-around; + height: 100vh; +} + +.loginMain { + @include a.flex-row; + justify-content: center; + width: 100%; +} + +.right-container { + @include a.flex-column; + width: 50%; +} + +//body dash + +.dashboard { + @extend .loginMain; + +} + +//dash +.mainContent { + @extend .loginPage; + align-items: center; + height: auto; + margin-right: 40px; + max-width: 100%; + + @include a.responsiveDash(mobile) { + & { + margin: auto; + } + } +} \ No newline at end of file diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss new file mode 100644 index 00000000..094a871d --- /dev/null +++ b/assets/sass/layout/_footer.scss @@ -0,0 +1,21 @@ +@use "../abstracts/"as a; + +#loginFooter { + width: 100%; + justify-self: flex-end; + + .row { + @include a.flex-row; + gap: 10px; + justify-content: center; + margin-top: 15px; + } +} + +#asideFooter { + + a::after { + content: "\00B7"; + margin: 0 .25em 0 .25em; + } +} \ No newline at end of file diff --git a/assets/sass/layout/_forms.scss b/assets/sass/layout/_forms.scss new file mode 100644 index 00000000..98600a14 --- /dev/null +++ b/assets/sass/layout/_forms.scss @@ -0,0 +1,32 @@ +@use "../abstracts/"as a; + +.rightContainer { + width: 350px; +} + +.formContainer { + + background-color: a.$bg-white; + border: 1px solid a.$gray; +} + + +#loginForm { + @include a.flex-column; + gap: 7px; + margin: 0px 35px; +} + +//sign up + +.register { + margin-top: 10px; + padding: 8px; + text-align: center; + background-color: a.$bg-white; + border: 1px solid a.$gray; + + a { + color: a.$blue-light; + } +} \ No newline at end of file diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss new file mode 100644 index 00000000..36062c2c --- /dev/null +++ b/assets/sass/layout/_header.scss @@ -0,0 +1,45 @@ +@use "../abstracts/"as a; + +header { + @include a.flex-row; + justify-content: center; + background-color: a.$bg-white; + border-bottom: 1px solid a.$gray; + padding: 5px; + margin-bottom: 40px; + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 100; + + .logoHeader { + @include a.flex-row; + width: 20%; + + img { + width: 120px; + } + } + + @include a.responsiveDash(mobile) { + & { + justify-content: space-between; + } + + .searchBar { + display: none; + } + + } + + .headerNav { + @include a.flex-row; + align-items: center; + gap: 70px; + } + + .icons { + @include a.flex-row; + gap: 20px; + } +} \ No newline at end of file diff --git a/assets/sass/layout/_index.scss b/assets/sass/layout/_index.scss new file mode 100644 index 00000000..7db60865 --- /dev/null +++ b/assets/sass/layout/_index.scss @@ -0,0 +1,6 @@ +@forward "flex"; +@forward "footer"; +@forward "header"; +@forward "navigation"; +@forward "forms"; +@forward "aside"; \ No newline at end of file diff --git a/assets/sass/layout/_navigation.scss b/assets/sass/layout/_navigation.scss new file mode 100644 index 00000000..1b0bcd66 --- /dev/null +++ b/assets/sass/layout/_navigation.scss @@ -0,0 +1,23 @@ +@use "../abstracts/"as a; + +.histories { + width: 100%; +} + +.historiesNav { + @include a.flex-row; + gap: 28px; + margin: 0 0 30px 0; + border: 1px solid a.$gray; + border-radius: 5px; + padding: 20px 20px 5px 20px; + overflow: hidden; + + .containerHist { + @include a.flex-column; + width: 60px; + height: 80px; + gap: 5px; + align-items: center; + } +} \ No newline at end of file diff --git a/dashboard.html b/dashboard.html new file mode 100644 index 00000000..be9b1e1a --- /dev/null +++ b/dashboard.html @@ -0,0 +1,561 @@ + + + + + + + + Instagram + + + + + + +
+
+ +
+ +
+
+ +
+
+ +
+
+
+
+
+ profile image + SamuelBlogs +
+ +
+ + +
+
+
+ meme +
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ profile image +
+ + Liked by UserDefault  and 32 + others +
+
+ Yisucrist Watch this meme! It's so + funny +
+
+ View all 91 comments +
+
+ 8 HOURS AGO +
+
+
+
+
+
+ + + + +
+ + +
+
+ +
+
+
+
+ profile image + SamuelBlogs +
+ +
+ + +
+
+
+ meme +
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ profile image +
+ + Liked by UserDefault  and 32 + others +
+
+ Yisucrist Watch this meme! It's so + funny +
+
+ View all 91 comments +
+
+ 8 HOURS AGO +
+
+
+
+
+
+ + + + +
+ + +
+
+ +
+
+
+
+ profile image + SamuelBlogs +
+ +
+ + +
+
+
+ meme +
+
+
+
+
+
+
+ +
+ +
+
+
+
+
+ profile image +
+ + Liked by UserDefault  and 32 + others +
+
+ Yisucrist Watch this meme! It's so + funny +
+
+ View all 91 comments +
+
+ 8 HOURS AGO +
+
+
+
+
+
+ + + + +
+ + +
+
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 00000000..79034093 --- /dev/null +++ b/login.html @@ -0,0 +1,99 @@ + + + + + + + + Instagram + + + + + + + + +
+
+ Iphones template +
+ Template instagram mobile +
+
+
+
+ +
+ Instagram text +
+ + +
+ + + +
+
+

OR

+
+
+ +
+ +
+
+

Don't have an account? Sign up

+
+
+

Get the app

+
+ App store + Google play +
+ +
+
+
+ + + + \ No newline at end of file diff --git a/screenshots/dashboardFullScreen.png b/screenshots/dashboardFullScreen.png new file mode 100644 index 00000000..cf2f24a9 Binary files /dev/null and b/screenshots/dashboardFullScreen.png differ diff --git a/screenshots/dashboardMobile.png b/screenshots/dashboardMobile.png new file mode 100644 index 00000000..4c782c82 Binary files /dev/null and b/screenshots/dashboardMobile.png differ diff --git a/screenshots/dashboardTablet.png b/screenshots/dashboardTablet.png new file mode 100644 index 00000000..1eb27a57 Binary files /dev/null and b/screenshots/dashboardTablet.png differ diff --git a/screenshots/loginFullScreen.png b/screenshots/loginFullScreen.png new file mode 100644 index 00000000..7904fa80 Binary files /dev/null and b/screenshots/loginFullScreen.png differ diff --git a/screenshots/loginMobileScreen.png b/screenshots/loginMobileScreen.png new file mode 100644 index 00000000..4c0a628c Binary files /dev/null and b/screenshots/loginMobileScreen.png differ