diff --git a/README.md b/README.md index 5e6faf7d..c093b8e4 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ - [Technologies used](#technologies-used) - [Project delivery](#project-delivery) - [Resources](#resources) +- [Questions](#questions) ## Requirements @@ -70,3 +71,107 @@ 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) + +## Questions + +• What is SASS? What does SASS stand for? +SASS (which stands for ‘Syntactically awesome style sheets’) is an areo f b 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 areo style sheets faster. + +• What is a CSS pre-processor? + +The pre-processor is areo f ble for transpiling scss files into browser-readable css code. + +• What does a pre-processor have to do with SASS? + +The preprocessor takes areo f translating scss to css + +• Why use SASS? + +Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help. + +Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff. + +• SASS has disadvantages? Which are? + +o The developer must have enough time to learn new features present in this preprocessor before using it. +o Using Sass may cause losing benefits of browser’s built-in element inspector. +o Code has to be compiled +o Difficult Troubleshooting + + +• What is a SASS Variable? Explain why are useful + +Think of variables as a way to store information that you want to reuse throughout your stylesheet. +You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. +• Explain the SASS variables property with an example. + + + +• 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. +To create a mixin you use the @mixin directive and give it a name. We've named our mixin transform. We're also using the variable $property inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin. + + + +• What is SCSS? Give an example + +SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax. It is the new version of SASS. + + + +• 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! + + + +• What is the difference between .scss and .sass syntax. + +.sass file extension use indentation and .scss use brackets + +• In which cases would we use SCSS? And in which cases would we use SASS? + + + +• Explain how traditional CSS and Preprocessed CSS workflows are different. + +The preprocessor will translate .scss to .css and the traditional scss will read css files from top to bottom. + +• Can we create functions with SASS? If it is true, give an example. + + + + + +• What is nesting? Is it useful? Give an example of nesting + +When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't. +Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. + +• Difference between @use & @import? Give an example + +The @import directive allows you to include the content of one file in another. (deprecated) + +The new @use is similar to @import. but has some notable differences: +- The file is only imported once, no matter how many times you @use it in a project. + +- Variables, mixins, and functions (what Sass calls “members”) that start with an underscore (_) or hyphen (-) are considered private, and not imported. + +- Members from the used file are only made available locally, but not passed along to future imports. +- All imported members are namespaced by default. + + +• How can we import other CSS/SASS files in SASS? Give an example + + +• Explain the concept of inheritance in SASS. + +If you want share a set of CSS properties from one selector to another. +• Why use @extend? Give an example + +Using @extend lets you share a set of CSS properties from one selector to another. +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. + + + + diff --git a/assets/images/1.jpg b/assets/images/1.jpg new file mode 100644 index 00000000..314457a2 Binary files /dev/null and b/assets/images/1.jpg differ diff --git a/assets/images/2.jpg b/assets/images/2.jpg new file mode 100644 index 00000000..db391280 Binary files /dev/null and b/assets/images/2.jpg differ diff --git a/assets/images/3.jpg b/assets/images/3.jpg new file mode 100644 index 00000000..42c97dcd Binary files /dev/null and b/assets/images/3.jpg differ diff --git a/assets/images/app-store.png b/assets/images/app-store.png new file mode 100644 index 00000000..d885f166 Binary files /dev/null and b/assets/images/app-store.png differ diff --git a/assets/images/google-play.png b/assets/images/google-play.png new file mode 100644 index 00000000..c7695db8 Binary files /dev/null and b/assets/images/google-play.png differ diff --git a/assets/images/image-login.png b/assets/images/image-login.png new file mode 100644 index 00000000..46dce6e7 Binary files /dev/null and b/assets/images/image-login.png differ diff --git a/assets/images/instagram_name.svg.webp b/assets/images/instagram_name.svg.webp new file mode 100644 index 00000000..05528d85 Binary files /dev/null and b/assets/images/instagram_name.svg.webp differ diff --git a/assets/images/logo.svg b/assets/images/logo.svg new file mode 100644 index 00000000..05528d85 Binary files /dev/null and b/assets/images/logo.svg differ diff --git a/assets/images/mario.jpg b/assets/images/mario.jpg new file mode 100644 index 00000000..ac2de39b Binary files /dev/null and b/assets/images/mario.jpg differ diff --git a/assets/images/profile1.jpg b/assets/images/profile1.jpg new file mode 100644 index 00000000..b62feb18 Binary files /dev/null and b/assets/images/profile1.jpg differ diff --git a/assets/images/profile2.jpg b/assets/images/profile2.jpg new file mode 100644 index 00000000..26e74b06 Binary files /dev/null and b/assets/images/profile2.jpg differ diff --git a/assets/images/profile3.jpg b/assets/images/profile3.jpg new file mode 100644 index 00000000..9452cae2 Binary files /dev/null and b/assets/images/profile3.jpg differ diff --git a/assets/images/profile4.png b/assets/images/profile4.png new file mode 100644 index 00000000..1f6d406f Binary files /dev/null and b/assets/images/profile4.png differ diff --git a/assets/images/profile5.jpg b/assets/images/profile5.jpg new file mode 100644 index 00000000..48cd8d9b Binary files /dev/null and b/assets/images/profile5.jpg differ diff --git a/assets/images/profile6.jpg b/assets/images/profile6.jpg new file mode 100644 index 00000000..a3b5d864 Binary files /dev/null and b/assets/images/profile6.jpg differ diff --git a/assets/images/profile7.jpg b/assets/images/profile7.jpg new file mode 100644 index 00000000..30363db3 Binary files /dev/null and b/assets/images/profile7.jpg differ diff --git a/assets/images/profile7.png b/assets/images/profile7.png new file mode 100644 index 00000000..43e4c151 Binary files /dev/null and b/assets/images/profile7.png differ diff --git a/assets/images/screenshot1.jpg b/assets/images/screenshot1.jpg new file mode 100644 index 00000000..fc1d26e1 Binary files /dev/null and b/assets/images/screenshot1.jpg differ diff --git a/assets/images/screenshot2.jpg b/assets/images/screenshot2.jpg new file mode 100644 index 00000000..6b4eae67 Binary files /dev/null and b/assets/images/screenshot2.jpg differ diff --git a/assets/images/screenshot3.jpg b/assets/images/screenshot3.jpg new file mode 100644 index 00000000..fabae2a4 Binary files /dev/null and b/assets/images/screenshot3.jpg differ diff --git a/assets/images/screenshot4.jpg b/assets/images/screenshot4.jpg new file mode 100644 index 00000000..baa021ee Binary files /dev/null and b/assets/images/screenshot4.jpg differ diff --git a/assets/images/screenshot5.jpg b/assets/images/screenshot5.jpg new file mode 100644 index 00000000..679321b1 Binary files /dev/null and b/assets/images/screenshot5.jpg differ diff --git a/assets/images/yoda.jpg b/assets/images/yoda.jpg new file mode 100644 index 00000000..5cf11af1 Binary files /dev/null and b/assets/images/yoda.jpg differ diff --git a/assets/index.scss b/assets/index.scss new file mode 100644 index 00000000..1cd59e65 --- /dev/null +++ b/assets/index.scss @@ -0,0 +1,2 @@ +@use './scss/components'; +@use './scss/abstract'; \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 00000000..1f455494 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,47 @@ +document.addEventListener("click", (e) => { + if (e.target.matches("[data-heart]")) { + console.log("heart"); + } +}); + +document.addEventListener("click", (e) => { + if (e.target.matches("[arrow-right]")) { + console.log("right"); + } +}); + +document.addEventListener("DOMContentLoaded", (e) => { + let index = 0; + const images = document.querySelector(".image-login").children; + images[index].style.opacity = "1"; + images[index].style.visibility = "visible"; + + setInterval(() => { + if (index < images.length - 1) { + index++; + } else { + transitionOpacity0(images); + index = 0; + } + + images[index].style.transition = "opacity 3s"; + images[index].style.visibility = "visible"; + images[index].style.opacity = "1"; + + if (index > 0) { + /* transitionOpacity0(); */ + } + }, 3000); +}); + +function transitionOpacity0(images) { + for (let index = 0; index < images.length; index++) { + if (index == 0) { + images[index].style.transition = "opacity 3s"; + images[index].style.visibility = "visible"; + images[index].style.opacity = "1"; + } + images[index].style.visibility = "hidden"; + images[index].style.opacity = "0"; + } +} diff --git a/assets/scss/abstract/_colors.scss b/assets/scss/abstract/_colors.scss new file mode 100644 index 00000000..aa5643b1 --- /dev/null +++ b/assets/scss/abstract/_colors.scss @@ -0,0 +1,8 @@ +$color-facebook: #385185; +$color-blue-light: #0095f6; +$color-grey: #8e8e8e; +$background-main: #fafafa; +$white: #FFFFFF; +$border-color-navbar: #dbdbdb; +$color-letters-post: #262626; +$color-mention: #00376b; \ No newline at end of file diff --git a/assets/scss/abstract/_index.scss b/assets/scss/abstract/_index.scss new file mode 100644 index 00000000..101e6494 --- /dev/null +++ b/assets/scss/abstract/_index.scss @@ -0,0 +1,3 @@ +@forward './colors'; +@forward './variables'; +@forward './mixins'; \ No newline at end of file diff --git a/assets/scss/abstract/_mixins.scss b/assets/scss/abstract/_mixins.scss new file mode 100644 index 00000000..13bf7d15 --- /dev/null +++ b/assets/scss/abstract/_mixins.scss @@ -0,0 +1,24 @@ +$ncols: 12; + +$breakpoints: ('xs': 0, + 'sm':576px, + 'md':768px, + 'lg':992px, + 'xl':1200px, + 'xxl':1400px); + +@mixin cols($bks, $ncols, $prefix) { + + @each $name, + $bk in $bks { + @media(min-width: $bk) { + @for $i from 1 to $ncols+1 { + .#{$prefix}-#{$name}-#{$i} { + width: (($i * 100) / $ncols) * 1%; + } + } + } + } +} + +@include cols($breakpoints, $ncols, 'col'); \ No newline at end of file diff --git a/assets/scss/abstract/_variables.scss b/assets/scss/abstract/_variables.scss new file mode 100644 index 00000000..51160877 --- /dev/null +++ b/assets/scss/abstract/_variables.scss @@ -0,0 +1,6 @@ +$font-size-normal: 14px; +$font-weight-600: 600; +$font-size-small: 12px; +$font-size-medium: 18px; +$font-size-xs: 10px; +$border-image-perfil: 3px solid rgb(255, 33, 0); \ No newline at end of file diff --git a/assets/scss/components/_footer.scss b/assets/scss/components/_footer.scss new file mode 100644 index 00000000..9d3a43f1 --- /dev/null +++ b/assets/scss/components/_footer.scss @@ -0,0 +1,19 @@ +@use '../abstract'as a; + +.footer { + text-align: center; + + &__link { + color: a.$color-grey; + padding: 0.5rem; + font-size: a.$font-size-small; + font-weight: 400; + } + + &__copyright { + width: 100%; + display: flex; + justify-content: center; + padding-top: 10px; + } +} \ No newline at end of file diff --git a/assets/scss/components/_header.scss b/assets/scss/components/_header.scss new file mode 100644 index 00000000..c41901fd --- /dev/null +++ b/assets/scss/components/_header.scss @@ -0,0 +1,77 @@ +@use '../abstract/'as a; + +.header { + max-width: 975px; + display: flex; + justify-content: center; + margin: 0 auto; + padding: 0 1rem; + + &__logo { + flex-grow: 1; + width: 33.33%; + + &__image--resize { + max-width: 100px; + } + } + + &__search { + flex-grow: 1; + width: 33.33%; + line-height: 2.5; + height: 28px; + display: none; + + @media (min-width: 576px) { + display: block; + } + + &>input { + border: solid 1px #dbdbdb; + border-radius: 3px; + outline: 0; + padding: 3px 10px 3px 26px; + background-color: a.$background-main; + text-align: center; + padding: 4px; + font-weight: 300; + font-size: a.$font-size-normal; + } + } + + &__icons { + flex-grow: 1; + min-width: 215px; + display: flex; + flex-direction: row; + justify-content: flex-end; + line-height: 3; + + &__icon { + padding: 0 0.5rem; + } + + &__icon-span { + height: 22px; + width: 22px; + display: block; + } + + &__icon--resize { + width: 100%; + border-radius: 50%; + } + } +} + +.navbar { + position: fixed; + top: 0; + align-items: center; + width: 100%; + padding: 0.5rem 0 0 0; + border-bottom: 1px solid a.$border-color-navbar; + background-color: a.$white; + z-index: 100; +} \ No newline at end of file diff --git a/assets/scss/components/_index.scss b/assets/scss/components/_index.scss new file mode 100644 index 00000000..3fbc454b --- /dev/null +++ b/assets/scss/components/_index.scss @@ -0,0 +1,8 @@ +@forward 'header'; +@forward 'left-login'; +@forward 'login'; +@forward 'posts'; +@forward 'footer'; +@forward 'layout'; +@forward 'reset'; +@forward 'stories'; \ No newline at end of file diff --git a/assets/scss/components/_layout.scss b/assets/scss/components/_layout.scss new file mode 100644 index 00000000..c58c82b7 --- /dev/null +++ b/assets/scss/components/_layout.scss @@ -0,0 +1,28 @@ +@use '../abstract'as a; + +.app{ + display: flex; + width: 100%; + justify-content: center; + align-items: center; + flex-wrap: wrap; + padding-bottom: 10px; + background-color: a.$background-main; + padding-top: 1rem; +} + +.image-login{ + width: 50%; +} + +.container-login{ + width: 50%; + max-width: 350px; +} + +.main{ + margin: 0 auto; + max-width: 600px; + position: relative; + width: 100%; +} diff --git a/assets/scss/components/_left-login.scss b/assets/scss/components/_left-login.scss new file mode 100644 index 00000000..0dca0ce2 --- /dev/null +++ b/assets/scss/components/_left-login.scss @@ -0,0 +1,27 @@ +@use '../abstract/'as a; + +.image-login { + display: none; + height: 618px; + background-image: url(/assets/images/image-login.png); + flex-basis: 454px; + margin-left: -35px; + margin-right: -15px; + position: relative; + + &>img { + height: 434px; + left: 147px; + opacity: 0; + position: absolute; + top: 96px; + visibility: hidden; + width: 248px; + } +} + +@media (min-width: 992px) { + .image-login { + display: block; + } +} \ No newline at end of file diff --git a/assets/scss/components/_login.scss b/assets/scss/components/_login.scss new file mode 100644 index 00000000..164b33d2 --- /dev/null +++ b/assets/scss/components/_login.scss @@ -0,0 +1,121 @@ +@use '../abstract'as a; + +.login { + background-color: #fff; + border: 1px solid #dbdbdb; + border-radius: 1px; + margin: 0 0 10px; + padding: 10px 0; + + &__title { + margin: 22px auto 12px; + text-align: center; + } + + &__facebook { + padding-top: 1rem; + text-align: center; + &__text{ + margin:0 0.3rem; + font-weight: a.$font-weight-600; + letter-spacing: -0.5px; + } + } + + &__remember { + text-align: center; + display: block; + font-size: 12px; + padding:1rem 0; + } + + &__separator { + padding: 0 2rem; + display: flex; + } + &-image-instagram{ + display: block; + width: 60%; + margin: 0 auto; + padding-top: 15px; + } +} + +.color-facebook { + color: a.$color-facebook; +} + +.separator { + flex-grow: 1; + flex-shrink: 1; + background-color: #dbdbdb; + height: 1px; + position: relative; + top: .45em; +} + +.cercle { + color: #8e8e8e; + padding: 0 1rem; + font-size: 1rem; + font-weight: a.$font-weight-600; + position: relative; + top: -0.4rem; +} + +.form-login { + padding: 2rem; + + &__input { + border: 1px solid #dbdbdb; + border-radius: 3px 3px 3px 3px; + margin: 0 0 10px; + padding: 10px 10px; + width: 92%; + outline: 0; + } + + &__submit { + background-color: a.$color-blue-light; + color: white; + border: 0; + cursor: pointer; + font-weight: a.$font-weight-600; + padding: 5px 9px; + text-align: center; + width: 100%; + border-radius: 3px 3px 3px 3px; + } +} + +.register { + text-align: center; + background-color: #fff; + border: 1px solid #dbdbdb; + border-radius: 1px; + margin: 0 0 10px; + padding: 20px; + font-size: a.$font-size-normal; + &--blue{ + font-weight: a.$font-weight-600; + font-size: a.$font-size-normal; + color: a.$color-blue-light; + } +} + +.apps { + &__download { + text-align: center; + margin: 20px; + } + + &__stores { + display: flex; + justify-content: space-evenly; + } + + &__img { + height: 40px; + } + +} \ No newline at end of file diff --git a/assets/scss/components/_posts.scss b/assets/scss/components/_posts.scss new file mode 100644 index 00000000..c9974ddc --- /dev/null +++ b/assets/scss/components/_posts.scss @@ -0,0 +1,159 @@ +@use '../abstract/'as a; + +.posts { + display: flex; + justify-content: center; + background-color: a.$background-main; + margin-bottom: 24px; + flex-wrap: wrap; +} + +.header__post { + border-bottom: 1px solid a.$border-color-navbar; + display: flex; + padding: 10px; + position: relative; + + &__image>img { + height: 32px; + width: 32px; + border-radius: 50%; + border: a.$border-image-perfil; + padding: 1px; + } + + &__nickname { + font-weight: 600; + line-height: 3; + font-size: a.$font-size-normal; + padding-left: 1rem; + cursor: pointer; + } + + &__options { + font-weight: bold; + position: absolute; + top: 17px; + right: 17px; + font-size: a.$font-size-medium; + box-sizing: border-box; + } +} + +.post { + border-radius: 3px; + border: 1px solid a.$border-color-navbar; + min-width: 50%; + margin-bottom: 1rem; + + &__image { + + &>img { + max-width: 600px; + width: 100%; + } + } + + &__icons { + margin-top: 8px; + padding-left: 8px; + padding-right: 16px; + + &__icon { + padding: 8px; + } + + + } + + &__likes { + padding-left: 16px; + padding-right: 16px; + margin-bottom: 8px; + font-weight: a.$font-weight-600; + font-size: a.$font-size-normal; + + &>span { + padding-right: 8px; + } + } + + &__comments { + padding: 0 16px; + } +} + +.save { + float: right; +} + +.comment { + font-size: a.$font-size-normal; + + &__name { + @extend .comment; + font-weight: a.$font-weight-600; + } + + &__message { + @extend .comment; + } + + &__date { + font-size: a.$font-size-xs; + text-transform: uppercase; + color: a.$color-grey; + padding: 0.5rem 0; + + } + &__mention{ + color: a.$color-mention; + } +} + +.write-comment { + display: flex; + border-top: 1px solid a.$border-color-navbar; + padding: 0.3rem; + + &__emoticon { + display: inline; + width: 5%; + padding: 0.5rem; + } + + &__textarea { + width: 83%; + padding-top: 0.8rem; + + &>textarea { + resize: none; + background: 0 0; + border: 0; + color: #262626; + color: rgba(var(--i1d, 38, 38, 38), 1); + height: 18px; + max-height: 88px; + outline: 0; + padding: 0; + line-height: 18px; + width: 100%; + font-family: inherit; + } + } + + &__send { + border: 0; + color: #0095f6; + padding: 0; + font-weight: 600; + cursor: pointer; + background: none; + opacity: .3; + width: 12%; + } +} + +svg { + cursor: pointer; +} \ No newline at end of file diff --git a/assets/scss/components/_reset.scss b/assets/scss/components/_reset.scss new file mode 100644 index 00000000..10b9a18c --- /dev/null +++ b/assets/scss/components/_reset.scss @@ -0,0 +1,18 @@ +@use '../abstract/'as a; + +html{ + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; +} + +body{ + margin: 0; + padding:0; + background-color: a.$background-main; +} + +a{ + text-decoration: none; +} \ No newline at end of file diff --git a/assets/scss/components/_stories.scss b/assets/scss/components/_stories.scss new file mode 100644 index 00000000..523e976f --- /dev/null +++ b/assets/scss/components/_stories.scss @@ -0,0 +1,67 @@ +@use '../abstract/'as a; + +.stories { + border: 1px solid a.$border-color-navbar; + margin: 100px auto 30px auto; + border-radius: 3px; + padding: 16px 0; + display: flex; + overflow: hidden; + padding: 10px; + position: relative; + + + &__image { + margin: 5px; + &__nickname { + font-size: 12px; + line-height: 14px; + overflow: hidden; + text-align: center; + padding-top: 0.3rem; + } + } + + &__image__profile { + position: relative; + padding: 0.2em 0.2em 0 0.2em; + box-sizing: border-box; + $border: 3px; + background: white; + background-clip: padding-box; + border: solid $border transparent; + border-radius: 100%; + + &:before { + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -$border; + border-radius: inherit; + background: -webkit-linear-gradient(right top, #e91ece 0%, #f90 100%); + } + } + + &__image__profile>img { + height: 56px; + width: 56px; + border-radius: 100%; + } +} + +.fa-chevron-circle-right { + filter: drop-shadow(0px 0px 5px black) +} + +.arrow-right { + position: absolute; + top: 40px; + right: 6px; + color: white; + font-size: 22px; + cursor: pointer; +} \ No newline at end of file diff --git a/css/index.css b/css/index.css new file mode 100644 index 00000000..cf427d9b --- /dev/null +++ b/css/index.css @@ -0,0 +1,747 @@ +@media (min-width: 0) { + .col-xs-1 { + width: 8.3333333333%; + } + + .col-xs-2 { + width: 16.6666666667%; + } + + .col-xs-3 { + width: 25%; + } + + .col-xs-4 { + width: 33.3333333333%; + } + + .col-xs-5 { + width: 41.6666666667%; + } + + .col-xs-6 { + width: 50%; + } + + .col-xs-7 { + width: 58.3333333333%; + } + + .col-xs-8 { + width: 66.6666666667%; + } + + .col-xs-9 { + width: 75%; + } + + .col-xs-10 { + width: 83.3333333333%; + } + + .col-xs-11 { + width: 91.6666666667%; + } + + .col-xs-12 { + width: 100%; + } +} +@media (min-width: 576px) { + .col-sm-1 { + width: 8.3333333333%; + } + + .col-sm-2 { + width: 16.6666666667%; + } + + .col-sm-3 { + width: 25%; + } + + .col-sm-4 { + width: 33.3333333333%; + } + + .col-sm-5 { + width: 41.6666666667%; + } + + .col-sm-6 { + width: 50%; + } + + .col-sm-7 { + width: 58.3333333333%; + } + + .col-sm-8 { + width: 66.6666666667%; + } + + .col-sm-9 { + width: 75%; + } + + .col-sm-10 { + width: 83.3333333333%; + } + + .col-sm-11 { + width: 91.6666666667%; + } + + .col-sm-12 { + width: 100%; + } +} +@media (min-width: 768px) { + .col-md-1 { + width: 8.3333333333%; + } + + .col-md-2 { + width: 16.6666666667%; + } + + .col-md-3 { + width: 25%; + } + + .col-md-4 { + width: 33.3333333333%; + } + + .col-md-5 { + width: 41.6666666667%; + } + + .col-md-6 { + width: 50%; + } + + .col-md-7 { + width: 58.3333333333%; + } + + .col-md-8 { + width: 66.6666666667%; + } + + .col-md-9 { + width: 75%; + } + + .col-md-10 { + width: 83.3333333333%; + } + + .col-md-11 { + width: 91.6666666667%; + } + + .col-md-12 { + width: 100%; + } +} +@media (min-width: 992px) { + .col-lg-1 { + width: 8.3333333333%; + } + + .col-lg-2 { + width: 16.6666666667%; + } + + .col-lg-3 { + width: 25%; + } + + .col-lg-4 { + width: 33.3333333333%; + } + + .col-lg-5 { + width: 41.6666666667%; + } + + .col-lg-6 { + width: 50%; + } + + .col-lg-7 { + width: 58.3333333333%; + } + + .col-lg-8 { + width: 66.6666666667%; + } + + .col-lg-9 { + width: 75%; + } + + .col-lg-10 { + width: 83.3333333333%; + } + + .col-lg-11 { + width: 91.6666666667%; + } + + .col-lg-12 { + width: 100%; + } +} +@media (min-width: 1200px) { + .col-xl-1 { + width: 8.3333333333%; + } + + .col-xl-2 { + width: 16.6666666667%; + } + + .col-xl-3 { + width: 25%; + } + + .col-xl-4 { + width: 33.3333333333%; + } + + .col-xl-5 { + width: 41.6666666667%; + } + + .col-xl-6 { + width: 50%; + } + + .col-xl-7 { + width: 58.3333333333%; + } + + .col-xl-8 { + width: 66.6666666667%; + } + + .col-xl-9 { + width: 75%; + } + + .col-xl-10 { + width: 83.3333333333%; + } + + .col-xl-11 { + width: 91.6666666667%; + } + + .col-xl-12 { + width: 100%; + } +} +@media (min-width: 1400px) { + .col-xxl-1 { + width: 8.3333333333%; + } + + .col-xxl-2 { + width: 16.6666666667%; + } + + .col-xxl-3 { + width: 25%; + } + + .col-xxl-4 { + width: 33.3333333333%; + } + + .col-xxl-5 { + width: 41.6666666667%; + } + + .col-xxl-6 { + width: 50%; + } + + .col-xxl-7 { + width: 58.3333333333%; + } + + .col-xxl-8 { + width: 66.6666666667%; + } + + .col-xxl-9 { + width: 75%; + } + + .col-xxl-10 { + width: 83.3333333333%; + } + + .col-xxl-11 { + width: 91.6666666667%; + } + + .col-xxl-12 { + width: 100%; + } +} +.header { + max-width: 975px; + display: flex; + justify-content: center; + margin: 0 auto; + padding: 0 1rem; +} +.header__logo { + flex-grow: 1; + width: 33.33%; +} +.header__logo__image--resize { + max-width: 100px; +} +.header__search { + flex-grow: 1; + width: 33.33%; + line-height: 2.5; + height: 28px; + display: none; +} +@media (min-width: 576px) { + .header__search { + display: block; + } +} +.header__search > input { + border: solid 1px #dbdbdb; + border-radius: 3px; + outline: 0; + padding: 3px 10px 3px 26px; + background-color: #fafafa; + text-align: center; + padding: 4px; + font-weight: 300; + font-size: 14px; +} +.header__icons { + flex-grow: 1; + min-width: 215px; + display: flex; + flex-direction: row; + justify-content: flex-end; + line-height: 3; +} +.header__icons__icon { + padding: 0 0.5rem; +} +.header__icons__icon-span { + height: 22px; + width: 22px; + display: block; +} +.header__icons__icon--resize { + width: 100%; + border-radius: 50%; +} + +.navbar { + position: fixed; + top: 0; + align-items: center; + width: 100%; + padding: 0.5rem 0 0 0; + border-bottom: 1px solid #dbdbdb; + background-color: #FFFFFF; + z-index: 100; +} + +.image-login { + display: none; + height: 618px; + background-image: url(/assets/images/image-login.png); + flex-basis: 454px; + margin-left: -35px; + margin-right: -15px; + position: relative; +} +.image-login > img { + height: 434px; + left: 147px; + opacity: 0; + position: absolute; + top: 96px; + visibility: hidden; + width: 248px; +} + +@media (min-width: 992px) { + .image-login { + display: block; + } +} +.login { + background-color: #fff; + border: 1px solid #dbdbdb; + border-radius: 1px; + margin: 0 0 10px; + padding: 10px 0; +} +.login__title { + margin: 22px auto 12px; + text-align: center; +} +.login__facebook { + padding-top: 1rem; + text-align: center; +} +.login__facebook__text { + margin: 0 0.3rem; + font-weight: 600; + letter-spacing: -0.5px; +} +.login__remember { + text-align: center; + display: block; + font-size: 12px; + padding: 1rem 0; +} +.login__separator { + padding: 0 2rem; + display: flex; +} +.login-image-instagram { + display: block; + width: 60%; + margin: 0 auto; + padding-top: 15px; +} + +.color-facebook { + color: #385185; +} + +.separator { + flex-grow: 1; + flex-shrink: 1; + background-color: #dbdbdb; + height: 1px; + position: relative; + top: 0.45em; +} + +.cercle { + color: #8e8e8e; + padding: 0 1rem; + font-size: 1rem; + font-weight: 600; + position: relative; + top: -0.4rem; +} + +.form-login { + padding: 2rem; +} +.form-login__input { + border: 1px solid #dbdbdb; + border-radius: 3px 3px 3px 3px; + margin: 0 0 10px; + padding: 10px 10px; + width: 92%; + outline: 0; +} +.form-login__submit { + background-color: #0095f6; + color: white; + border: 0; + cursor: pointer; + font-weight: 600; + padding: 5px 9px; + text-align: center; + width: 100%; + border-radius: 3px 3px 3px 3px; +} + +.register { + text-align: center; + background-color: #fff; + border: 1px solid #dbdbdb; + border-radius: 1px; + margin: 0 0 10px; + padding: 20px; + font-size: 14px; +} +.register--blue { + font-weight: 600; + font-size: 14px; + color: #0095f6; +} + +.apps__download { + text-align: center; + margin: 20px; +} +.apps__stores { + display: flex; + justify-content: space-evenly; +} +.apps__img { + height: 40px; +} + +.posts { + display: flex; + justify-content: center; + background-color: #fafafa; + margin-bottom: 24px; + flex-wrap: wrap; +} + +.header__post { + border-bottom: 1px solid #dbdbdb; + display: flex; + padding: 10px; + position: relative; +} +.header__post__image > img { + height: 32px; + width: 32px; + border-radius: 50%; + border: 3px solid #ff2100; + padding: 1px; +} +.header__post__nickname { + font-weight: 600; + line-height: 3; + font-size: 14px; + padding-left: 1rem; + cursor: pointer; +} +.header__post__options { + font-weight: bold; + position: absolute; + top: 17px; + right: 17px; + font-size: 18px; + box-sizing: border-box; +} + +.post { + border-radius: 3px; + border: 1px solid #dbdbdb; + min-width: 50%; + margin-bottom: 1rem; +} +.post__image > img { + max-width: 600px; + width: 100%; +} +.post__icons { + margin-top: 8px; + padding-left: 8px; + padding-right: 16px; +} +.post__icons__icon { + padding: 8px; +} +.post__likes { + padding-left: 16px; + padding-right: 16px; + margin-bottom: 8px; + font-weight: 600; + font-size: 14px; +} +.post__likes > span { + padding-right: 8px; +} +.post__comments { + padding: 0 16px; +} + +.save { + float: right; +} + +.comment, .comment__message, .comment__name { + font-size: 14px; +} +.comment__name { + font-weight: 600; +} +.comment__date { + font-size: 10px; + text-transform: uppercase; + color: #8e8e8e; + padding: 0.5rem 0; +} +.comment__mention { + color: #00376b; +} + +.write-comment { + display: flex; + border-top: 1px solid #dbdbdb; + padding: 0.3rem; +} +.write-comment__emoticon { + display: inline; + width: 5%; + padding: 0.5rem; +} +.write-comment__textarea { + width: 83%; + padding-top: 0.8rem; +} +.write-comment__textarea > textarea { + resize: none; + background: 0 0; + border: 0; + color: #262626; + color: rgba(var(--i1d, 38, 38, 38), 1); + height: 18px; + max-height: 88px; + outline: 0; + padding: 0; + line-height: 18px; + width: 100%; + font-family: inherit; +} +.write-comment__send { + border: 0; + color: #0095f6; + padding: 0; + font-weight: 600; + cursor: pointer; + background: none; + opacity: 0.3; + width: 12%; +} + +svg { + cursor: pointer; +} + +.footer { + text-align: center; +} +.footer__link { + color: #8e8e8e; + padding: 0.5rem; + font-size: 12px; + font-weight: 400; +} +.footer__copyright { + width: 100%; + display: flex; + justify-content: center; + padding-top: 10px; +} + +.app { + display: flex; + width: 100%; + justify-content: center; + align-items: center; + flex-wrap: wrap; + padding-bottom: 10px; + background-color: #fafafa; + padding-top: 1rem; +} + +.image-login { + width: 50%; +} + +.container-login { + width: 50%; + max-width: 350px; +} + +.main { + margin: 0 auto; + max-width: 600px; + position: relative; + width: 100%; +} + +html { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +} + +body { + margin: 0; + padding: 0; + background-color: #fafafa; +} + +a { + text-decoration: none; +} + +.stories { + border: 1px solid #dbdbdb; + margin: 100px auto 30px auto; + border-radius: 3px; + padding: 16px 0; + display: flex; + overflow: hidden; + padding: 10px; + position: relative; +} +.stories__image { + margin: 5px; +} +.stories__image__nickname { + font-size: 12px; + line-height: 14px; + overflow: hidden; + text-align: center; + padding-top: 0.3rem; +} +.stories__image__profile { + position: relative; + padding: 0.2em 0.2em 0 0.2em; + box-sizing: border-box; + background: white; + background-clip: padding-box; + border: solid 3px transparent; + border-radius: 100%; +} +.stories__image__profile:before { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + margin: -3px; + border-radius: inherit; + background: -webkit-linear-gradient(right top, #e91ece 0%, #f90 100%); +} +.stories__image__profile > img { + height: 56px; + width: 56px; + border-radius: 100%; +} + +.fa-chevron-circle-right { + filter: drop-shadow(0px 0px 5px black); +} + +.arrow-right { + position: absolute; + top: 40px; + right: 6px; + color: white; + font-size: 22px; + cursor: pointer; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/docs/Theory.docx b/docs/Theory.docx new file mode 100644 index 00000000..97318cc6 Binary files /dev/null and b/docs/Theory.docx differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..d7d15a7f --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + + + + Instagram Clone + + +
+
+ + + + + +
+
+ +
+ ¿No tienes una cuenta? Regístrate +
+
+
Descargar app
+
+ + download app store + + + download google play + +
+
+
+
+ + + diff --git a/posts.html b/posts.html new file mode 100644 index 00000000..079c8edc --- /dev/null +++ b/posts.html @@ -0,0 +1,291 @@ + + + + + + + + + + Instagram Clone + + +
+ +
+
+
+
+
+ image profile +
+
Adrian
+
+
+
+ image profile +
+
Gonzalo
+
+
+
+ image profile +
+
Daniella
+
+
+
+ image profile +
+
Josep
+
+
+
+ image profile +
+
Pere
+
+
+
+ image profile +
+
Marc
+
+
+
+ image profile +
+
Haroon
+
+
+
+ image profile +
+
Marcel
+
+
+
+ image profile +
+
Andres
+
+ +
+
+
+
+
+
Baby Yoda
+
...
+
+
+ super mario bros +
+
+ + + + + +
+ +
+
Pedro Como estas ?
+
Mario @Pedro Yo bien y tu ?
+
Cristian Muy bien
+
Hace 2 días
+
+
+
+ + + + +
+
+ +
+ +
+
+
+
+
+
Anna
+
...
+
+
+ super mario bros +
+
+ + + + + +
+ +
+
Pedro Como estas ?
+
Adrian Yo bien y tu ?
+
Pere Muy bien
+
Hace 10 días
+
+
+
+ + + + +
+
+ +
+ +
+
+
+
+
+
Andres
+
...
+
+
+ super mario bros +
+
+ + + + + +
+ +
+
Gonzalo Como estas ?
+
Josep Yo bien y tu ?
+
Daniella Muy bien
+
Hace 3 días
+
+
+
+ + + + +
+
+ +
+ +
+
+
+
+ +