diff --git a/.gitignore b/.gitignore index 159f5151..bacc77e6 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ *.css.map *.sass.map *.scss.map +node_modules \ No newline at end of file diff --git a/assets/css/components/components.scss b/assets/css/components/components.scss new file mode 100644 index 00000000..b9a9deb7 --- /dev/null +++ b/assets/css/components/components.scss @@ -0,0 +1,128 @@ +@use "../root/root.scss" as root; + +.left-login { + align-self: center; + background-image: url(../img/43cc71bb1b43.png); + background-position: 0 0; + background-size: 454px 618px; + height: 618px; + margin-left: -35px; + margin-right: -15px; + flex-basis: 454px; + position: relative; +} + +.right-login { + display: flex; + flex-direction: column; + margin-top: 12px; + max-width: 350px; + flex-grow: 1; + align-items: stretch; + justify-content: center; +} + +.box { + background-color: white; + border: 1px solid root.$border; + border-radius: 1px; + padding: 10px 0; + margin-bottom: 10px; +} + +.main-logo { + background-repeat: no-repeat; + background-position: 0; + height: 51px; + width: 175px; + background-image: url(../img/Instagram-Logo.png); + background-size: cover; +} + +.logo-fb { + background-image: url(../img/fb.png); + margin-right: 8px; + display: inline-block; + position: relative; + top: 3; + background-repeat: no-repeat; + height: 16px; + width: 16px; + background-size: cover; +} + +.blue-font { + color: root.$fb; +} + +.font14 { + font-size: 14px; + font-weight: 600; +} + +.font12 { + font-size: 12px; + font-weight: 500; +} + +.app-store { + margin-right: 8px; +} + +.font-prim { + color: root.$black-font; +} + +.fw400 { + font-weight: 400; +} + +.get { + line-height: 18px; + margin: 10px 20px; + text-align: center; + font-weight: 400; +} + +.icons-div { + margin: 10px 0; + align-items: stretch; +} + +.h40 { + height: 40px; +} + +.map-foot { + margin: -2px 8px 9px; + color: root.$grey-font; + font-size: 12px; + line-height: 14px; + cursor: pointer; +} + +.legal-cont { + margin: 12px 0; +} + +.legal-foot { + color: root.$grey-font; + font-size: 12px; + line-height: 14px; +} + +.sel { + margin: -2px 0 -3px; + border: none; + background-color: transparent; +} + +.ml16 { + margin-left: 16px; +} + +.img-inside { + margin: 99px 0 0 151px; + height: 427px; + width: 240px; +} diff --git a/assets/css/components/hcomponents.scss b/assets/css/components/hcomponents.scss new file mode 100644 index 00000000..9e75d3d4 --- /dev/null +++ b/assets/css/components/hcomponents.scss @@ -0,0 +1,161 @@ +@use '../root/root.scss' as root; +@use '../root/hroot.scss' as hroot; + +.story-post { + @include hroot.story-post(42px); + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + .whiteb { + width: 34px; + height: 34px; + border: 2px solid transparent; + border-radius: 50%; + background-color: white; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + } + img { + width: 100%; + height: 100%; + object-fit: cover; + } +} + +.postUser { + .my-user-info { + margin-left: 14px; + height: 41px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + .info { + color: root.$black-font; + font-size: 14px; + font-weight: 600; + max-width: 220px; + padding: 2px; + top: 1px; + } + + .info2 { + color: root.$black-font; + font-size: 12px; + line-height: 15px; + padding: 2px; + bottom: 1px; + } + } +} + +.post { + width: 100%; + height: max-content; + overflow: hidden; + img { + width: 100%; + height: 100%; + } +} + +.p-foot { + padding-left: 16px; + padding-right: 16px; +} + +.mb4 { + margin-bottom: 4px; +} + +.mb8 { + margin-bottom: 8px; +} + +.bar-i { + display: flex; + align-items: center; +} + +.icon-f { + padding: 8px; + height: 24px; + width: 24px; + display: block; + position: relative; +} + +.icon-c { + height: 24px; + width: 24px; + padding: 8px 16px 8px 0; +} + +.c { + width: 100%; +} + +.mneg6 { + margin-left: -8px; +} + +.r { + margin-left: auto; + margin-right: -10px; +} + +.text-f { + font-size: 14px; + color: root.$black-font; +} + +.bold { + font-weight: 600; +} + +.grey { + color: root.$grey-font; +} + +.text-s { + height: 16px; + font-size: 10px; + color: root.$grey-font; + text-transform: uppercase; +} + +.mt8 { + margin-top: 8px; +} + +.nc-div { + border-top: 1px solid root.$border; + min-height: 56px; + display: flex; + align-items: center; + position: relative; +} + +.blue { + color: root.$blue; +} + +.w100 { + width: 100%; +} + +.disabled { + opacity: 0.3; + justify-self: flex-end; +} + +.icon-h { + height: 12px; +} + +.row { + display: flex; +} diff --git a/assets/css/home.css b/assets/css/home.css new file mode 100644 index 00000000..64e03291 --- /dev/null +++ b/assets/css/home.css @@ -0,0 +1,746 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, blockquote:after { + content: ""; + content: none; +} + +q:before, q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +button { + background-color: transparent; + outline: none; + border: 0; + cursor: pointer; +} + +* { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; +} + +html { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; +} + +body { + background-color: #fafafa; +} + +.img { + width: 95%; + height: 95%; + object-fit: cover; + border-radius: 25px; + margin-top: 1.2px; +} + +.imgsugg { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 25px; +} + +body { + background-color: #fafafa; +} + +.navBar { + background-color: #ffffff; + height: 54px; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + border-bottom: 1px solid #dbdbdb; +} + +.navContent { + width: 975px; + display: flex; + padding-left: 20px; + padding-right: 20px; + align-items: center; + justify-content: space-between; + box-sizing: border-box; +} +.navContent .logo { + width: 103px; + height: 29px; + background-image: url("../img/logoInsta.PNG"); + background-repeat: no-repeat; + background-size: contain; +} +.navContent .search { + height: 28px; + width: 215px; + border-radius: 3px; + background: rgba(var(--b3f, 250, 250, 250), 1); + border: solid 1px rgba(var(--b6a, 219, 219, 219), 1); + padding-left: 75px; + font-size: 14px; + padding-top: 7px; + box-sizing: border-box; + color: #afaeae; +} +.navContent .icons { + width: 222px; + height: 25px; + box-sizing: border-box; + display: flex; +} +.navContent .icons .icon { + width: 22px; + height: 22px; + padding: 0px 0px 0px 24px; + border: 0; +} +.navContent .icons .user-icon { + width: 22px; + height: 22px; + border: 1px solid grey; + border-radius: 11px; + margin: 0px 0px 0px 24px; + box-sizing: border-box; + background-color: white; +} + +.container { + width: 935px; + margin: 0 auto; + height: auto; + margin-top: 30px; + display: flex; +} + +.left-section { + width: 600px; + height: auto; +} +.left-section .stories { + background-color: #ffffff; + width: 95%; + height: 100px; + margin-left: 2.5%; + display: flex; + padding-top: 3px; + padding-left: 12px; + box-sizing: border-box; + border: 1px solid #dbdbdb; +} +.left-section .stories .story { + margin-left: 10px; + margin-top: 11px; + width: 66px; + height: 84px; + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + text-align: center; +} +.left-section .stories .story .story-border { + width: 54px; + height: 54px; + border-radius: 28px; + background: #f09433; + justify-content: center; + background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f09433", endColorstr="#bc1888",GradientType=1 ); +} +.left-section .stories .story .story-image { + width: 50px; + height: 50px; + margin-left: 2px; + margin-top: 2px; + border-radius: 25px; + background: #fffdfd; + overflow: hidden; +} +.left-section .stories .story-user { + width: 66px; + height: 13px; + font-size: 11px; + margin-top: 4px; +} +.left-section .posts { + background-color: white; + width: 95%; + height: auto; + margin-left: 2.5%; + border-radius: 3px; + margin-bottom: 60px; + overflow: hidden; + border: 1px solid #dbdbdb; + margin-top: 30px; +} +.left-section .posts .postUser { + width: 100%; + height: 60px; + padding: 16px; + box-sizing: border-box; + display: flex; + align-items: center; + border-bottom: 1px solid #dbdbdb; +} +.left-section .posts .postUser .story { + margin-left: 10px; + margin-top: 0px; + width: 66px; + height: 84px; + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + text-align: center; +} +.left-section .posts .postUser .story .story-border { + width: 54px; + height: 54px; + border-radius: 28px; + background: #f09433; + justify-content: center; + background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f09433", endColorstr="#bc1888",GradientType=1 ); +} +.left-section .posts .postUser .story .story-image { + width: 50px; + height: 50px; + margin-left: 2px; + margin-top: 2px; + border-radius: 25px; + background: #fffdfd; + overflow: hidden; +} +.left-section .posts .post { + width: 100%; + height: max-content; + overflow: hidden; +} +.left-section .posts .post img { + width: 100%; + height: 100%; +} +.left-section .posts .postFoot { + width: 100%; +} + +.right-section { + width: 335px; + height: auto; +} +.right-section .my-user-suggestions { + width: 325px; + height: 56px; + display: flex; + margin-top: 16px; + margin-left: 15px; +} +.right-section .my-user-suggestions .story { + margin-left: 10px; + margin-top: 0px; + width: 66px; + height: 84px; + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + text-align: center; +} +.right-section .my-user-suggestions .story .story-border { + width: 54px; + height: 54px; + border-radius: 28px; + background: #f09433; + justify-content: center; + background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f09433", endColorstr="#bc1888",GradientType=1 ); +} +.right-section .my-user-suggestions .story .story-image { + width: 50px; + height: 50px; + margin-left: 2px; + margin-top: 2px; + border-radius: 25px; + background: #fffdfd; + overflow: hidden; +} +.right-section .my-user-suggestions .my-user-info { + width: 186px; + height: 56px; + justify-content: center; + margin-left: 2%; + display: flex; + flex-direction: column; +} +.right-section .my-user-suggestions .my-user-info .info { + margin-bottom: 3px; +} +.right-section .my-user-suggestions .my-user-info .info2 { + color: #b8b8b8; +} +.right-section .my-user-suggestions .change-user { + width: 50px; + justify-content: center; +} +.right-section .my-user-suggestions .change-user p { + margin-top: 48%; + font-size: 12px; + color: #008cff; +} +.right-section .suggestions { + width: 325px; + height: 300px; + margin-top: 25px; + margin-left: 15px; +} +.right-section .suggestions .sugg { + width: 325px; + height: 20px; + display: flex; +} +.right-section .suggestions .sugg .sfy { + width: 246px; + height: 20px; + margin-left: 15px; + margin-right: 5px; + color: #a7a7a7; + font-weight: bold; + font-size: 11px; +} +.right-section .suggestions .sugg .see { + width: 80px; + height: 20px; + margin-right: 15px; + margin-top: 5px; + font-size: 10px; + text-align: center; +} +.right-section .suggestions .user-suggestion { + width: 320px; + height: 48px; +} +.right-section .suggestions .user-suggestion .user { + width: 279px; + height: 42px; + display: flex; + margin-left: 21px; + margin-top: 8px; +} +.right-section .suggestions .user-suggestion .user .image-cont { + width: 42px; + height: 42px; +} +.right-section .suggestions .user-suggestion .user .image-cont .user-image { + width: 32px; + height: 32px; + margin-top: 5px; + margin-left: 5px; + border-radius: 16px; + background-color: black; +} +.right-section .suggestions .user-suggestion .user .user-info { + width: 202px; + height: 42px; + padding-top: 3px; + box-sizing: border-box; +} +.right-section .suggestions .user-suggestion .user .user-info .info-sugg { + justify-content: center; + margin-left: 2%; + display: flex; + flex-direction: column; + margin-bottom: 3px; + font-size: 13px; +} +.right-section .suggestions .user-suggestion .user .user-info .info2-sugg { + justify-content: center; + margin-left: 2%; + display: flex; + flex-direction: column; + color: #b8b8b8; + font-size: 11px; +} +.right-section .suggestions .user-suggestion .user .follow { + width: 42px; + height: 42px; +} +.right-section .suggestions .user-suggestion .user .follow p { + margin-top: 20%; + margin-left: 5px; + justify-content: center; + font-size: 12px; + color: #008cff; +} +.right-section .information { + width: 300px; + height: 120px; + margin-top: 25px; + margin-left: 25px; + text-align: justify; + color: #b8b8b8; + font-size: 12px; + text-decoration: none; +} +.right-section .information .fromFaceboock { + margin-top: 15px; +} + +html { + height: 100%; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + height: 100%; + overflow-y: scroll; +} + +.full-height-main { + height: 100%; + overflow: hidden; + flex-grow: 1; +} + +* { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; +} + +.bg-grey { + background-color: #fafafa; +} + +button { + font-size: 14px; + line-height: 18px; + font-weight: 600; + margin: 0; + border-radius: 4px; + position: relative; + color: white; + background-color: #0095f6; + padding: 5px 9px; + border: 1px solid transparent; +} + +input { + font-size: 16px; + border-radius: 3px; + border: 1px solid #dbdbdb; + padding: 9px 8px 7px 8px; + background-color: #fafafa; + color: #262626; +} + +input::placeholder { + font-size: 12px; +} + +input:focus { + outline: none; +} + +a { + color: #385185; + line-height: 14px; + margin-top: 12px; + text-align: center; + text-decoration: none; +} + +.story-post { + width: 42px; + height: 42px; + border-radius: 28px; + background: #f09433; + justify-content: center; + background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f09433", endColorstr="#bc1888",GradientType=1 ); + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; +} +.story-post .whiteb { + width: 34px; + height: 34px; + border: 2px solid transparent; + border-radius: 50%; + background-color: white; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; +} +.story-post img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.postUser .my-user-info { + margin-left: 14px; + height: 41px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} +.postUser .my-user-info .info { + color: #262626; + font-size: 14px; + font-weight: 600; + max-width: 220px; + padding: 2px; + top: 1px; +} +.postUser .my-user-info .info2 { + color: #262626; + font-size: 12px; + line-height: 15px; + padding: 2px; + bottom: 1px; +} + +.post { + width: 100%; + height: max-content; + overflow: hidden; +} +.post img { + width: 100%; + height: 100%; +} + +.p-foot { + padding-left: 16px; + padding-right: 16px; +} + +.mb4 { + margin-bottom: 4px; +} + +.mb8 { + margin-bottom: 8px; +} + +.bar-i { + display: flex; + align-items: center; +} + +.icon-f { + padding: 8px; + height: 24px; + width: 24px; + display: block; + position: relative; +} + +.icon-c { + height: 24px; + width: 24px; + padding: 8px 16px 8px 0; +} + +.c { + width: 100%; +} + +.mneg6 { + margin-left: -8px; +} + +.r { + margin-left: auto; + margin-right: -10px; +} + +.text-f { + font-size: 14px; + color: #262626; +} + +.bold { + font-weight: 600; +} + +.grey { + color: #8e8e8e; +} + +.text-s { + height: 16px; + font-size: 10px; + color: #8e8e8e; + text-transform: uppercase; +} + +.mt8 { + margin-top: 8px; +} + +.nc-div { + border-top: 1px solid #dbdbdb; + min-height: 56px; + display: flex; + align-items: center; + position: relative; +} + +.blue { + color: #0095f6; +} + +.w100 { + width: 100%; +} + +.disabled { + opacity: 0.3; + justify-self: flex-end; +} + +.icon-h { + height: 12px; +} + +.row { + display: flex; +} + +/*# sourceMappingURL=home.css.map */ diff --git a/assets/css/home.scss b/assets/css/home.scss new file mode 100644 index 00000000..e0d55df1 --- /dev/null +++ b/assets/css/home.scss @@ -0,0 +1,4 @@ +@forward './root/reset.scss'; +@forward "./layout/hlayout.scss"; +@forward "./root/hroot.scss"; +@forward './components/hcomponents.scss'; diff --git a/assets/css/layout/hlayout.scss b/assets/css/layout/hlayout.scss new file mode 100644 index 00000000..9a204815 --- /dev/null +++ b/assets/css/layout/hlayout.scss @@ -0,0 +1,259 @@ +@use "../root/hroot.scss" as hroot; +body { + background-color: hroot.$bg; +} +.navBar { + background-color: hroot.$bg2; + height: 54px; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + @include hroot.borders-bottom(); +} +.navContent { + width: 975px; + display: flex; + + padding-left: 20px; + padding-right: 20px; + align-items: center; + justify-content: space-between; + box-sizing: border-box; + .logo { + width: 103px; + height: 29px; + background-image: url("../img/logoInsta.PNG"); + background-repeat: no-repeat; + background-size: contain; + } + .search { + height: 28px; + width: 215px; + border-radius: 3px; + background: rgba(var(--b3f, 250, 250, 250), 1); + border: solid 1px rgba(var(--b6a, 219, 219, 219), 1); + padding-left: 75px; + font-size: 14px; + padding-top: 7px; + box-sizing: border-box; + color: rgb(175, 174, 174); + } + + .icons { + width: 222px; + height: 25px; + box-sizing: border-box; + display: flex; + .icon { + width: 22px; + height: 22px; + padding: 0px 0px 0px 24px; + border: 0; + } + .user-icon { + width: 22px; + height: 22px; + border: 1px solid grey; + border-radius: 11px; + margin: 0px 0px 0px 24px; + box-sizing: border-box; + background-color: rgb(255, 255, 255); + } + } +} +.container { + width: 935px; + margin: 0 auto; + height: auto; + margin-top: hroot.$mt-containers; + display: flex; +} +.left-section { + width: 600px; + height: auto; + .stories { + background-color: hroot.$bg2; + width: 95%; + height: 100px; + margin-left: 2.5%; + display: flex; + padding-top: 3px; + padding-left: 12px; + box-sizing: border-box; + @include hroot.borders(); + @include hroot.story(11px); + .story-user { + width: 66px; + height: 13px; + font-size: 11px; + margin-top: 4px; + } + } + .posts { + background-color: white; + width: 95%; + height: auto; + margin-left: 2.5%; + border-radius: 3px; + margin-bottom: 60px; + overflow: hidden; + @include hroot.borders(); + margin-top: hroot.$mt-containers; + .postUser { + width: 100%; + height: 60px; + padding: 16px; + box-sizing: border-box; + display: flex; + align-items: center; + @include hroot.borders-bottom(); + @include hroot.story(0px); + } + .post { + width: 100%; + height: max-content; + overflow: hidden; + img { + width: 100%; + height: 100%; + } + } + .postFoot { + width: 100%; + } + } +} +.right-section { + width: 335px; + height: auto; + .my-user-suggestions { + width: 325px; + height: 56px; + display: flex; + margin-top: hroot.$mt-containers - 14px; + margin-left: hroot.$mt-containers / 2; + @include hroot.story(0px); + .my-user-info { + width: 186px; + height: 56px; + justify-content: center; + margin-left: 2%; + display: flex; + flex-direction: column; + .info { + margin-bottom: 3px; + } + .info2 { + color: rgb(184, 184, 184); + } + } + .change-user { + width: 50px; + justify-content: center; + p { + margin-top: 48%; + font-size: 12px; + color: rgb(0, 140, 255); + } + } + } + .suggestions { + width: 325px; + height: 300px; + margin-top: hroot.$mt-containers - 5px; + margin-left: hroot.$mt-containers / 2; + .sugg { + width: 325px; + height: 20px; + display: flex; + .sfy { + width: 246px; + height: 20px; + margin-left: 15px; + margin-right: 5px; + color: rgb(167, 167, 167); + font-weight: bold; + font-size: 11px; + } + .see { + width: 80px; + height: 20px; + margin-right: 15px; + margin-top: 5px; + font-size: 10px; + text-align: center; + } + } + .user-suggestion { + width: 320px; + height: 48px; + .user { + width: 279px; + height: 42px; + display: flex; + margin-left: 21px; + margin-top: 8px; + .image-cont { + width: 42px; + height: 42px; + .user-image { + width: 32px; + height: 32px; + margin-top: 5px; + margin-left: 5px; + border-radius: 16px; + background-color: rgb(0, 0, 0); + } + } + .user-info { + width: 202px; + height: 42px; + padding-top: 3px; + box-sizing: border-box; + .info-sugg { + justify-content: center; + margin-left: 2%; + display: flex; + flex-direction: column; + margin-bottom: 3px; + font-size: 13px; + } + .info2-sugg { + justify-content: center; + margin-left: 2%; + display: flex; + flex-direction: column; + color: rgb(184, 184, 184); + font-size: 11px; + } + } + .follow { + width: 42px; + height: 42px; + p { + margin-top: 20%; + margin-left: 5px; + justify-content: center; + font-size: 12px; + color: rgb(0, 140, 255); + } + } + } + } + } + .information { + width: 300px; + height: 120px; + margin-top: hroot.$mt-containers - 5px; + margin-left: 25px; + text-align: justify; + color: rgb(184, 184, 184); + font-size: 12px; + text-decoration: none; + .fromFaceboock { + margin-top: 15px; + } + } +} diff --git a/assets/css/layout/layout.scss b/assets/css/layout/layout.scss new file mode 100644 index 00000000..45910422 --- /dev/null +++ b/assets/css/layout/layout.scss @@ -0,0 +1,144 @@ +@use "../root/root.scss" as root; + +.full-height { + min-height: 100%; + overflow: hidden; +} + +.two-sides { + max-width: 935px; + margin: 32px auto 0; + padding-bottom: 32px; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: stretch; +} + +.margin-logo-login { + margin: 22px auto 12px; +} + +.flex-c-center { + display: flex; + flex-direction: column; + position: relative; + justify-content: center; + align-items: stretch; +} + +.flex-c { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: space-between; +} + +.flex-r-center { + display: flex; + position: relative; + justify-content: center; + align-items: stretch; +} + +.form-content { + margin-bottom: 10px; + max-width: 350px; + width: 100%; +} + +.margin-form { + margin-top: 24px; +} + +.i-login-m { + margin: 0 40px 6px; +} + +.m-btn { + @extend .i-login-m; + margin-top: 8px; + margin-bottom: 8px; +} + +.sep { + @extend .i-login-m; + margin-top: 10px; + margin-bottom: 18px; + display: flex; + align-items: stretch; +} + +.line { + background-color: root.$border; + flex-grow: 1; + flex-shrink: 1; + height: 1px; + position: relative; + top: 0.45em; +} + +.or { + color: root.$grey-font; + font-size: 13px; + font-weight: 600; + line-height: 15px; + margin: 0 18px; + text-transform: uppercase; +} + +.fb-log { + @extend .i-login-m; + margin-top: 8px; + margin-bottom: 8px; + display: flex; + align-items: stretch; + justify-content: center; +} + +.blue-ig { + color: root.$blue; +} + +.fw600 { + font-weight: 600; +} + +.m15 { + margin: 15px; +} + +.mb52 { + margin-bottom: 52px; +} + +.mt24 { + margin-top: 24px; +} + +.mneg { + margin: -2px 0 -3px; +} + +.foot-cont { + justify-content: flex-start; + align-content: stretch; + align-items: stretch; +} + +.foot-div { + display: flex; + align-items: stretch; + box-sizing: border-box; + flex-direction: column; + margin: 0; + position: relative; + padding: 0 20px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, + Arial, sans-serif; +} + +.wrap { + flex-wrap: wrap; +} diff --git a/assets/css/root/hroot.scss b/assets/css/root/hroot.scss new file mode 100644 index 00000000..6f5b997c --- /dev/null +++ b/assets/css/root/hroot.scss @@ -0,0 +1,131 @@ +* { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, + Arial, sans-serif; +} + +html { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, + Arial, sans-serif; +} + +$blue: #0095f6; +$black-font: #262626; +$grey-font: #8e8e8e; +$bg: #fafafa; +$border: #dbdbdb; +$bg2: #ffffff; +$mt-containers: 30px; +$ml-suggestions: 35px; + +body { + background-color: $bg; +} + +@mixin borders() { + border: 1px solid $border; +} +@mixin borders-bottom() { + border-bottom: 1px solid $border; +} + +@mixin story($mt-story) { + .story { + margin-left: 10px; + margin-top: $mt-story; + width: 66px; + height: 84px; + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + text-align: center; + + .story-border { + width: 54px; + height: 54px; + border-radius: 28px; + background: #f09433; + justify-content: center; + background: -moz-linear-gradient( + 45deg, + #f09433 0%, + #e6683c 25%, + #dc2743 50%, + #cc2366 75%, + #bc1888 100% + ); + background: -webkit-linear-gradient( + 45deg, + #f09433 0%, + #e6683c 25%, + #dc2743 50%, + #cc2366 75%, + #bc1888 100% + ); + background: linear-gradient( + 45deg, + #f09433 0%, + #e6683c 25%, + #dc2743 50%, + #cc2366 75%, + #bc1888 100% + ); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); + } + .story-image { + width: 50px; + height: 50px; + margin-left: 2px; + margin-top: 2px; + border-radius: 25px; + background: rgb(255, 253, 253); + overflow: hidden; + } + } +} + +@mixin story-post($size) { + width: $size; + height: $size; + border-radius: 28px; + background: #f09433; + justify-content: center; + background: -moz-linear-gradient( + 45deg, + #f09433 0%, + #e6683c 25%, + #dc2743 50%, + #cc2366 75%, + #bc1888 100% + ); + background: -webkit-linear-gradient( + 45deg, + #f09433 0%, + #e6683c 25%, + #dc2743 50%, + #cc2366 75%, + #bc1888 100% + ); + background: linear-gradient( + 45deg, + #f09433 0%, + #e6683c 25%, + #dc2743 50%, + #cc2366 75%, + #bc1888 100% + ); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 ); +} +.img { + width: 95%; + height: 95%; + object-fit: cover; + border-radius: 25px; + margin-top: 1.2px; +} +.imgsugg { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 25px; +} diff --git a/assets/css/root/reset.scss b/assets/css/root/reset.scss new file mode 100644 index 00000000..dc6f3e52 --- /dev/null +++ b/assets/css/root/reset.scss @@ -0,0 +1,146 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote { + &:before, + &:after { + content: ""; + content: none; + } +} + +q { + &:before, + &:after { + content: ""; + content: none; + } +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +button { + background-color: transparent; + outline: none; + border: 0; + cursor: pointer; +} diff --git a/assets/css/root/root.scss b/assets/css/root/root.scss new file mode 100644 index 00000000..796a9c5b --- /dev/null +++ b/assets/css/root/root.scss @@ -0,0 +1,70 @@ +html { + height: 100%; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, + Arial, sans-serif; + height: 100%; + overflow-y: scroll; +} + +.full-height-main { + height: 100%; + overflow: hidden; + flex-grow: 1; +} + +* { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, + Arial, sans-serif; +} + +$blue: #0095f6; +$black-font: #262626; +$grey-font: #8e8e8e; +$bg: #fafafa; +$border: #dbdbdb; +$fb: #385185; + +.bg-grey { + background-color: $bg; +} + +button { + font-size: 14px; + line-height: 18px; + font-weight: 600; + margin: 0; + border-radius: 4px; + position: relative; + color: white; + background-color: $blue; + padding: 5px 9px; + border: 1px solid transparent; +} + +input { + font-size: 16px; + border-radius: 3px; + border: 1px solid $border; + padding: 9px 8px 7px 8px; + background-color: $bg; + color: $black-font; +} + +input::placeholder { + font-size: 12px; +} + +input:focus { + outline: none; +} + +a { + color: $fb; + line-height: 14px; + margin-top: 12px; + text-align: center; + text-decoration: none; +} diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 00000000..65d421ed --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,469 @@ +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote:before, blockquote:after { + content: ""; + content: none; +} + +q:before, q:after { + content: ""; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +button { + background-color: transparent; + outline: none; + border: 0; + cursor: pointer; +} + +html { + height: 100%; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + height: 100%; + overflow-y: scroll; +} + +.full-height-main { + height: 100%; + overflow: hidden; + flex-grow: 1; +} + +* { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; +} + +.bg-grey { + background-color: #fafafa; +} + +button { + font-size: 14px; + line-height: 18px; + font-weight: 600; + margin: 0; + border-radius: 4px; + position: relative; + color: white; + background-color: #0095f6; + padding: 5px 9px; + border: 1px solid transparent; +} + +input { + font-size: 16px; + border-radius: 3px; + border: 1px solid #dbdbdb; + padding: 9px 8px 7px 8px; + background-color: #fafafa; + color: #262626; +} + +input::placeholder { + font-size: 12px; +} + +input:focus { + outline: none; +} + +a { + color: #385185; + line-height: 14px; + margin-top: 12px; + text-align: center; + text-decoration: none; +} + +.full-height { + min-height: 100%; + overflow: hidden; +} + +.two-sides { + max-width: 935px; + margin: 32px auto 0; + padding-bottom: 32px; + width: 100%; + display: flex; + flex-direction: row; + justify-content: center; + align-items: stretch; +} + +.margin-logo-login { + margin: 22px auto 12px; +} + +.flex-c-center { + display: flex; + flex-direction: column; + position: relative; + justify-content: center; + align-items: stretch; +} + +.flex-c { + display: flex; + flex-direction: column; + align-items: stretch; + justify-content: space-between; +} + +.flex-r-center { + display: flex; + position: relative; + justify-content: center; + align-items: stretch; +} + +.form-content { + margin-bottom: 10px; + max-width: 350px; + width: 100%; +} + +.margin-form { + margin-top: 24px; +} + +.i-login-m, .fb-log, .sep, .m-btn { + margin: 0 40px 6px; +} + +.m-btn { + margin-top: 8px; + margin-bottom: 8px; +} + +.sep { + margin-top: 10px; + margin-bottom: 18px; + display: flex; + align-items: stretch; +} + +.line { + background-color: #dbdbdb; + flex-grow: 1; + flex-shrink: 1; + height: 1px; + position: relative; + top: 0.45em; +} + +.or { + color: #8e8e8e; + font-size: 13px; + font-weight: 600; + line-height: 15px; + margin: 0 18px; + text-transform: uppercase; +} + +.fb-log { + margin-top: 8px; + margin-bottom: 8px; + display: flex; + align-items: stretch; + justify-content: center; +} + +.blue-ig { + color: #0095f6; +} + +.fw600 { + font-weight: 600; +} + +.m15 { + margin: 15px; +} + +.mb52 { + margin-bottom: 52px; +} + +.mt24 { + margin-top: 24px; +} + +.mneg { + margin: -2px 0 -3px; +} + +.foot-cont { + justify-content: flex-start; + align-content: stretch; + align-items: stretch; +} + +.foot-div { + display: flex; + align-items: stretch; + box-sizing: border-box; + flex-direction: column; + margin: 0; + position: relative; + padding: 0 20px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; +} + +.wrap { + flex-wrap: wrap; +} + +.left-login { + align-self: center; + background-image: url(../img/43cc71bb1b43.png); + background-position: 0 0; + background-size: 454px 618px; + height: 618px; + margin-left: -35px; + margin-right: -15px; + flex-basis: 454px; + position: relative; +} + +.right-login { + display: flex; + flex-direction: column; + margin-top: 12px; + max-width: 350px; + flex-grow: 1; + align-items: stretch; + justify-content: center; +} + +.box { + background-color: white; + border: 1px solid #dbdbdb; + border-radius: 1px; + padding: 10px 0; + margin-bottom: 10px; +} + +.main-logo { + background-repeat: no-repeat; + background-position: 0; + height: 51px; + width: 175px; + background-image: url(../img/Instagram-Logo.png); + background-size: cover; +} + +.logo-fb { + background-image: url(../img/fb.png); + margin-right: 8px; + display: inline-block; + position: relative; + top: 3; + background-repeat: no-repeat; + height: 16px; + width: 16px; + background-size: cover; +} + +.blue-font { + color: #385185; +} + +.font14 { + font-size: 14px; + font-weight: 600; +} + +.font12 { + font-size: 12px; + font-weight: 500; +} + +.app-store { + margin-right: 8px; +} + +.font-prim { + color: #262626; +} + +.fw400 { + font-weight: 400; +} + +.get { + line-height: 18px; + margin: 10px 20px; + text-align: center; + font-weight: 400; +} + +.icons-div { + margin: 10px 0; + align-items: stretch; +} + +.h40 { + height: 40px; +} + +.map-foot { + margin: -2px 8px 9px; + color: #8e8e8e; + font-size: 12px; + line-height: 14px; + cursor: pointer; +} + +.legal-cont { + margin: 12px 0; +} + +.legal-foot { + color: #8e8e8e; + font-size: 12px; + line-height: 14px; +} + +.sel { + margin: -2px 0 -3px; + border: none; + background-color: transparent; +} + +.ml16 { + margin-left: 16px; +} + +.img-inside { + margin: 99px 0 0 151px; + height: 427px; + width: 240px; +} + +/*# sourceMappingURL=style.css.map */ diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 00000000..dd451360 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,4 @@ +@forward './root/reset.scss'; +@forward "./root/root.scss"; +@forward "./layout/layout.scss"; +@forward "./components/components.scss"; diff --git a/assets/img/43cc71bb1b43.png b/assets/img/43cc71bb1b43.png new file mode 100644 index 00000000..46dce6e7 Binary files /dev/null and b/assets/img/43cc71bb1b43.png differ diff --git a/assets/img/AppleStore.png b/assets/img/AppleStore.png new file mode 100644 index 00000000..460f81ab Binary files /dev/null and b/assets/img/AppleStore.png differ diff --git a/assets/img/Instagram-Logo.png b/assets/img/Instagram-Logo.png new file mode 100644 index 00000000..61b250ab Binary files /dev/null and b/assets/img/Instagram-Logo.png differ diff --git a/assets/img/favicon.png b/assets/img/favicon.png new file mode 100644 index 00000000..1e098b88 Binary files /dev/null and b/assets/img/favicon.png differ diff --git a/assets/img/fb.png b/assets/img/fb.png new file mode 100644 index 00000000..bea2a02b Binary files /dev/null and b/assets/img/fb.png differ diff --git a/assets/img/ff2c097a681e.jpg b/assets/img/ff2c097a681e.jpg new file mode 100644 index 00000000..86edf0f3 Binary files /dev/null and b/assets/img/ff2c097a681e.jpg 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/logoInsta.PNG b/assets/img/logoInsta.PNG new file mode 100644 index 00000000..fff2d36e Binary files /dev/null and b/assets/img/logoInsta.PNG differ diff --git a/assets/img/marlon-alves-xr2Adh2YwMk-unsplash.jpg b/assets/img/marlon-alves-xr2Adh2YwMk-unsplash.jpg new file mode 100644 index 00000000..51eb58ea Binary files /dev/null and b/assets/img/marlon-alves-xr2Adh2YwMk-unsplash.jpg differ diff --git a/assets/img/profile-icon.png b/assets/img/profile-icon.png new file mode 100644 index 00000000..424266b5 Binary files /dev/null and b/assets/img/profile-icon.png differ diff --git a/assets/img/profile1.jpg b/assets/img/profile1.jpg new file mode 100644 index 00000000..59757dba Binary files /dev/null and b/assets/img/profile1.jpg differ diff --git a/assets/img/profile10.jpg b/assets/img/profile10.jpg new file mode 100644 index 00000000..f2038b5c Binary files /dev/null and b/assets/img/profile10.jpg differ diff --git a/assets/img/profile11.jpg b/assets/img/profile11.jpg new file mode 100644 index 00000000..c934f2bb Binary files /dev/null and b/assets/img/profile11.jpg differ diff --git a/assets/img/profile12.jpg b/assets/img/profile12.jpg new file mode 100644 index 00000000..c98dd337 Binary files /dev/null and b/assets/img/profile12.jpg differ diff --git a/assets/img/profile13.jpg b/assets/img/profile13.jpg new file mode 100644 index 00000000..89010241 Binary files /dev/null and b/assets/img/profile13.jpg differ diff --git a/assets/img/profile14.jpg b/assets/img/profile14.jpg new file mode 100644 index 00000000..4762762e Binary files /dev/null and b/assets/img/profile14.jpg differ diff --git a/assets/img/profile15.jpg b/assets/img/profile15.jpg new file mode 100644 index 00000000..f26404ab Binary files /dev/null and b/assets/img/profile15.jpg differ diff --git a/assets/img/profile2.jpg b/assets/img/profile2.jpg new file mode 100644 index 00000000..5f4b6e28 Binary files /dev/null and b/assets/img/profile2.jpg differ diff --git a/assets/img/profile3.jpg b/assets/img/profile3.jpg new file mode 100644 index 00000000..aaec6ef6 Binary files /dev/null and b/assets/img/profile3.jpg differ diff --git a/assets/img/profile4.jpg b/assets/img/profile4.jpg new file mode 100644 index 00000000..8b57f07b Binary files /dev/null and b/assets/img/profile4.jpg differ diff --git a/assets/img/profile6.jpg b/assets/img/profile6.jpg new file mode 100644 index 00000000..8da375e5 Binary files /dev/null and b/assets/img/profile6.jpg differ diff --git a/assets/img/profile7.jpg b/assets/img/profile7.jpg new file mode 100644 index 00000000..ddf6e00d Binary files /dev/null and b/assets/img/profile7.jpg differ diff --git a/assets/img/profile8.jpg b/assets/img/profile8.jpg new file mode 100644 index 00000000..f65d0934 Binary files /dev/null and b/assets/img/profile8.jpg differ diff --git a/assets/img/profile9.jpg b/assets/img/profile9.jpg new file mode 100644 index 00000000..dcd093db Binary files /dev/null and b/assets/img/profile9.jpg differ diff --git a/assets/img/proflie5.jpg b/assets/img/proflie5.jpg new file mode 100644 index 00000000..d988c193 Binary files /dev/null and b/assets/img/proflie5.jpg differ diff --git a/assets/img/the-blowup-Gsp5HcMAYWU-unsplash.jpg b/assets/img/the-blowup-Gsp5HcMAYWU-unsplash.jpg new file mode 100644 index 00000000..0f14869f Binary files /dev/null and b/assets/img/the-blowup-Gsp5HcMAYWU-unsplash.jpg differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1 @@ + diff --git a/home.html b/home.html new file mode 100644 index 00000000..81dd49ad --- /dev/null +++ b/home.html @@ -0,0 +1,476 @@ + + + + + + + Instagram SASS + + + + + + +
+
+ + +
+ + Search +
+
+ + + + + + + + + + + + + + + + +
+ myprofile +
+
+
+
+
+
+
+
+
+
+ +
+
+
ethxn08_
+
+ +
+
+
+ +
+
+
angelillo__
+
+ +
+
+
+ +
+
+
02santiago
+
+ +
+
+
+ +
+
+
RobStark
+
+ +
+
+
+ +
+
+
Mariina.09
+
+ +
+
+
+ +
+
+
lucii23
+
+ +
+
+
+ +
+
+
_leurenn87
+
+
+ + +
+
+
+
+ +
+
+ +
+
+ +
+
+
+ + + + + + + + + + + +
+
+

200 likes

+
+
+

Lorem ipsum

+   +

+ Lorem fistrum te voy a borrar el cerito a peich apetecan +

+
+
+
+

View all 76 comments

+
+
+
+

Username

+   +

el cerito a peich apetecan

+
+ + + +
+ +
+
+

lanatarner

+   +

😂😮

+
+ + + +
+
+
9 minutes ago
+
+ + + + +

Add a comment...

+

Post

+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+ + + + + + + + + + + +
+
+

200 likes

+
+
+

Lorem ipsum

+   +

+ Lorem fistrum te voy a borrar el cerito a peich apetecan +

+
+
+
+

View all 76 comments

+
+
+
+

Username

+   +

el cerito a peich apetecan

+
+ + + +
+ +
+
+

lanatarner

+   +

😂😮

+
+ + + +
+
+
9 minutes ago
+
+ + + + +

Add a comment...

+

Post

+
+
+
+ +
+
+
+
+
+
+ +
+
+
+ +

Change

+
+
+
+

Suggestions for you

+

See everything

+
+
+
+
+
+ +
+
+ + +
+
+ +
+
+
+
+ +
+
+ + +
+
+ +
+
+
+
+ +
+
+ + +
+
+ +
+
+
+
+ +
+
+ + +
+
+ +
+
+
+
+ +
+
+ + +
+
+
+
+

+ Informacion - Auda - + Prensa - Api - Empleo - Privacidad - Condiciones - Ubicaciones - + Cuentas destacadas - Hashtag - + Idioma +

+

2021 INSTAGRAM FROM FACEBOOCK

+
+
+
+ + diff --git a/login.html b/login.html new file mode 100644 index 00000000..b9bf0335 --- /dev/null +++ b/login.html @@ -0,0 +1,117 @@ + + + + + + + Instagram SASS + + + + +
+
+
+ + +
+
+ +
+ + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..4205ab59 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,127 @@ +{ + "name": "sass-clone-instagram", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "anymatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", + "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" + }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "requires": { + "fill-range": "^7.0.1" + } + }, + "chokidar": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", + "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", + "requires": { + "anymatch": "~3.1.1", + "braces": "~3.0.2", + "fsevents": "~2.3.1", + "glob-parent": "~5.1.0", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.5.0" + } + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "optional": true + }, + "glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "requires": { + "is-glob": "^4.0.1" + } + }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "requires": { + "binary-extensions": "^2.0.0" + } + }, + "is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" + }, + "is-glob": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz", + "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==", + "requires": { + "is-extglob": "^2.1.1" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" + }, + "normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" + }, + "picomatch": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.3.tgz", + "integrity": "sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==" + }, + "readdirp": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", + "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", + "requires": { + "picomatch": "^2.2.1" + } + }, + "sass": { + "version": "1.32.12", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.12.tgz", + "integrity": "sha512-zmXn03k3hN0KaiVTjohgkg98C3UowhL1/VSGdj4/VAAiMKGQOE80PFPxFP2Kyq0OUskPKcY5lImkhBKEHlypJA==", + "requires": { + "chokidar": ">=3.0.0 <4.0.0" + } + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "requires": { + "is-number": "^7.0.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..9a8218db --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "sass-clone-instagram", + "version": "1.0.0", + "description": "Copy of Instagram styles using sass", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/Nachomontoya/sass-clone-instagram.git" + }, + "author": "Nacho Montoya, Ethan Alfaro", + "license": "ISC", + "bugs": { + "url": "https://github.com/Nachomontoya/sass-clone-instagram/issues" + }, + "homepage": "https://github.com/Nachomontoya/sass-clone-instagram#readme", + "dependencies": { + "sass": "^1.32.12" + } +}