diff --git a/README.md b/README.md index 5e6faf7d..0fc4d7c8 100644 --- a/README.md +++ b/README.md @@ -1,37 +1,26 @@ -`#sass` `#css` `#html` `#master-in-software-engineering` +`#sass` `#css` `#html` # SASS - Clone Instagram

- Version + login page +

+

+ login page

> Sass (which stands for 'Syntactically awesome style sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more -> -> The purpose of this project is to learn the basics of SASS and put them into practice by building a visual replica of Instagram ## Index -- [Requirements](#requirements) -- [Repository](#repository) -- [Technologies used](#technologies-used) -- [Project delivery](#project-delivery) +- [Description](#description) +- [Installation](#installation) - [Resources](#resources) +- [Theory](#theory) -## Requirements - -- You must use variables at least once in the project. -- You must use nesting. -- You must use inheritance at least once in the project. -- You cannot use third party libraries for the development of this pill - -## Repository - -First of all you must fork this project into your GitHub account. +## Description -To create a fork on GitHub is as easy as clicking the “fork” button on the repository page. - -Fork on GitHub +This project aims to improve HTML skils, learn how to work with HTML and SASS, to improve front end and SASS knowledge. ### Installing @@ -57,12 +46,6 @@ If you want to change some configuration of "Live SASS Compiler" you can check t \* HTML -## Project delivery - -To deliver this project you must follow the steps indicated in the document: - -- [Submitting a solution](https://www.notion.so/Submitting-a-solution-524dab1a71dd4b96903f26385e24cdb6) - ## Resources - [SASS documentation](https://sass-lang.com/) @@ -70,3 +53,18 @@ 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) + +## Theory + +- SASS is a tool known as a CSS preprocessor, a scripting language that extend the default capabilities of CSS. +- SASS stands for Syntactically Awesome Style Sheet. +- CSS pre-processor is a program that let you generate CSS from the preprocessor’s own unique syntax. +- Using SASS we can write more readable, maintainable and reusable code. +- Using SASS variable is a way to store values for colors, fonts or any CSS value that you want to reuse. Use the $ symbol. This becomes extremely powerful when working on large Project. +- Mixins is a method to group together multiple CSS declarations for reuse throughout your project. To add mixin into our code, use @include directive. +- Sass functions can receive arguments and return a single value. We can do standard math: +, -, \*, /. +- Nesting is used nesting to nest child selectors inside of the parent selector as CSS lacks a visual structure to make it easier to read. The code will be cleaner and less repetitive. +- To import other CSS/SASS files in SASS, we divide up our Sass into separate files representing different components. Then we import the partial using an @import directive. +- Inheritance allows multiple classes to share a common set of properties with one another. We implement this using the @extend directive. +- The ampersand & operator is often used when nesting in SASS and is an extremely useful feature. +- Placeholder selectors are mainly useful when writing a SASS library where each style rule is optional. diff --git a/assets/img/home-page.PNG b/assets/img/home-page.PNG new file mode 100644 index 00000000..35810a16 Binary files /dev/null and b/assets/img/home-page.PNG differ diff --git a/assets/img/login-page.PNG b/assets/img/login-page.PNG new file mode 100644 index 00000000..04161f39 Binary files /dev/null and b/assets/img/login-page.PNG differ diff --git a/assets/img/logo.png b/assets/img/logo.png new file mode 100644 index 00000000..426fc8fe Binary files /dev/null and b/assets/img/logo.png differ diff --git a/assets/img/post-1.jpg b/assets/img/post-1.jpg new file mode 100644 index 00000000..651e636b Binary files /dev/null and b/assets/img/post-1.jpg differ diff --git a/assets/img/post-2.jpg b/assets/img/post-2.jpg new file mode 100644 index 00000000..12cf20dd Binary files /dev/null and b/assets/img/post-2.jpg differ diff --git a/assets/img/post-3.jpg b/assets/img/post-3.jpg new file mode 100644 index 00000000..ba517423 Binary files /dev/null and b/assets/img/post-3.jpg differ diff --git a/assets/img/post-4.jpg b/assets/img/post-4.jpg new file mode 100644 index 00000000..324f47d2 Binary files /dev/null and b/assets/img/post-4.jpg differ diff --git a/assets/img/profile-1.jpg b/assets/img/profile-1.jpg new file mode 100644 index 00000000..8b5cfb08 Binary files /dev/null and b/assets/img/profile-1.jpg differ diff --git a/assets/img/profile-2.jpg b/assets/img/profile-2.jpg new file mode 100644 index 00000000..6da8f171 Binary files /dev/null and b/assets/img/profile-2.jpg differ diff --git a/assets/img/profile-3.jpg b/assets/img/profile-3.jpg new file mode 100644 index 00000000..7dbb7c33 Binary files /dev/null and b/assets/img/profile-3.jpg differ diff --git a/assets/img/profile-4.jpg b/assets/img/profile-4.jpg new file mode 100644 index 00000000..3cd62cf8 Binary files /dev/null and b/assets/img/profile-4.jpg differ diff --git a/assets/sass/base/_index.scss b/assets/sass/base/_index.scss new file mode 100644 index 00000000..bb67f232 --- /dev/null +++ b/assets/sass/base/_index.scss @@ -0,0 +1,2 @@ +@forward 'reset'; +@forward 'variables'; \ No newline at end of file diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss new file mode 100644 index 00000000..331a65af --- /dev/null +++ b/assets/sass/base/_reset.scss @@ -0,0 +1,15 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Roboto,Helvetica,Arial,sans-serif; +} + +// .main { +// display: flex; +// align-items: center; +// justify-content: center; +// } + + + diff --git a/assets/sass/base/_variables.scss b/assets/sass/base/_variables.scss new file mode 100644 index 00000000..a12f92bd --- /dev/null +++ b/assets/sass/base/_variables.scss @@ -0,0 +1,14 @@ +// Color + +$text-footer-color: rgba(var(--f52,142,142,142),1); +$title-color: #262626; +$bg-color: rgba(var(--b3f,250,250,250),1); +$bg-color-form: rgba(var(--d87,255,255,255),1); +$post-border-color: rgb(219, 219, 219); +$nav-border-color: rgb(219, 219, 219); +$comment-color: rgb(142, 142, 142); +$post-cmt-color: rgb(0, 149, 246); + +// Border Radius: +$border-wrapper: 1px; +$border: 1px solid rgba(var(--b6a,219,219,219),1); \ No newline at end of file diff --git a/assets/sass/components/_footer.scss b/assets/sass/components/_footer.scss new file mode 100644 index 00000000..44f437c3 --- /dev/null +++ b/assets/sass/components/_footer.scss @@ -0,0 +1,23 @@ +.footer__content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.footer__content_first ul, +.footer__content_second ul, +.footer__content_third ul { + display: flex; + align-items: center; + li { + list-style-type:none; + display: inline-block; + margin: 0 0.4rem; + } + justify-content: space-around; +} + + + + diff --git a/assets/sass/components/_index.scss b/assets/sass/components/_index.scss new file mode 100644 index 00000000..01292bf5 --- /dev/null +++ b/assets/sass/components/_index.scss @@ -0,0 +1,4 @@ +@forward 'footer'; +@forward 'nav'; +@forward 'post'; +@forward 'slider'; \ No newline at end of file diff --git a/assets/sass/components/_nav.scss b/assets/sass/components/_nav.scss new file mode 100644 index 00000000..f77a33c0 --- /dev/null +++ b/assets/sass/components/_nav.scss @@ -0,0 +1,69 @@ +@use '../base/' as b; + +.nav__container { + position: sticky; + top: 0; + z-index: 1; + height: 54px; + background-color: #fff; + display: flex; + flex-wrap: nowrap; + justify-content: space-around; + align-items: center; + border-bottom: 1px solid b.$nav-border-color; +} + +.nav__container_logo img{ + height: 50px; + display: flex; + justify-content: center; + align-items: center; +} + +.nav__container_search { + position: relative; + i { + position: absolute; + left: 63px; + top: 8px; + color: b.$nav-border-color; + font-weight: bold; + } + input[type="search"] { + width: 220px; + padding: 0.4rem; + text-align: center; + border: 1px solid b.$nav-border-color; + border-radius: 3px; + background-color: b.$bg-color; + } +} + + + +.nav__container_extends { + width: 115px; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + i { + font-size: 24px; + &:hover { + cursor: pointer; + } + } +} + +.nav__container_extends-profile { + height: 26px; + width: 26px; + border-radius: 50%; + background-image: url("../assets/img/profile-2.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + &:hover { + cursor: pointer; + } +} \ 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..9a926758 --- /dev/null +++ b/assets/sass/components/_post.scss @@ -0,0 +1,156 @@ +@use '../base/' as b; + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.main__container_post { + width: 600px; + margin: 2rem auto; + border: 1px solid b.$post-border-color; + margin-bottom: 1rem; +} + +.main__container_post-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + flex-wrap: nowrap; + border-bottom: 1px solid b.$post-border-color; + background-color: #fff; +} + +.main__container_post-header--info { + display: flex; + p { + line-height: 1.6; + } +} + +.post__profile_info-name { + font-size: 14px; + font-weight: bold; +} + +.post__profile_info-extra { + font-size: 12px; +} + +.post__profile-circle--large { + width: 40px; + height: 40px; + border-radius: 50%; + background: linear-gradient(45deg, orange, purple); +} + +.post__profile-circle--small { + width: 38px; + height: 38px; + border-radius: 50%; + background: linear-gradient(45deg, orange, purple); + position: relative; + left: 2px; + top: 2px; +} + +.post__profile-img { + width: 32px; + height: 32px; + border-radius: 50%; + position: relative; + left: 2px; + top: 2px; + &:hover { + cursor: pointer; + } +} + +.post__profile_info { + margin-left: 1rem; +} + +.main__container_post-img { + height: 600px; + border-bottom: 1px solid b.$post-border-color; +} + +.main__container_post-interactions { + border-bottom: 1px solid b.$post-border-color; + padding: 1rem; + background-color: #fff; +} + +.post__interactions_icons { + display: flex; + justify-content: space-between; + flex-wrap: nowrap; + margin-bottom: 0.9rem; + i { + font-size: 24px; + &:hover { + cursor: pointer; + } + } +} + +.post__interactions_icons-left { + display: flex; + align-items: center; + i { + margin-right: 1rem; + } +} + +.post__interactions_users { + margin-bottom: 0.9rem; +} + +.post__interactions_comments-user { + display: flex; + justify-content: space-between; + margin-bottom: 0.9rem; +} + +.post__interactions_comments-load { + margin-bottom: 0.9rem; + p { + color: b.$comment-color; + font-size: 14px; + } +} + +.post__interactions_comments-extra { + display: flex; + justify-content: space-between; + margin-bottom: 0.9rem; +} + +.post__interactions_date { + font-size: 10.5px; + color: b.$comment-color; + text-transform: uppercase; +} + +.main__container_post-new { + display: flex; + position: relative; + padding: 1rem; + input { + width: 100%; + border: none; + padding: 1 rem; + } +} + +.main__container_post-new-cmt p { + font-size: 14px; + color: b.$post-cmt-color; + opacity: 0.3; + font-weight: bold; + &:hover { + opacity: 1; + } +} \ No newline at end of file diff --git a/assets/sass/components/_slider.scss b/assets/sass/components/_slider.scss new file mode 100644 index 00000000..e69de29b diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 00000000..49f12099 --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,191 @@ +@use './base/' as b; +@use './components/nav'; +@use './components/post'; +@use './components/footer'; + +// Home page + +body { + background-color: b.$bg-color; +} + +.main__container { + background-color: b.$bg-color; +} + +@mixin bg-img { + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +$post: "post-1", "post-2", "post-3", "post-4"; +@each $post in $post { + .img-#{$post} { + @include bg-img; + background-image: url("../assets/img/#{$post}.jpg"); + } +} + + +$profile: "profile-1", "profile-2", "profile-3", "profile-4"; +@each $profile in $profile { + .img-#{$profile} { + @include bg-img; + background-image: url("../assets/img/#{$profile}.jpg"); + } +} + + +// Login page + +%display-flex { + display: flex; + justify-content: center; + align-items: center; + align-content: center; +} + +.wrapper { + @extend %display-flex; + margin: 0 auto; + width: 55vw; + margin-bottom: 5rem; +} + +.wrapper__left, +.wrapper__right { + margin-top: 3.5rem; +} + +.wrapper__img { + position: relative; +} + +.wrapper__img_fix { + img { + height: 618px; + } +} + +.wrapper__img_filled { + position: absolute; + transform: translate(63%, -121.3%) +} + +.wrapper__login_content { + border: b.$border; + background-color: white; + padding: 1rem 2rem; + margin: 0.8rem 0; + padding: 0.6rem 1.8rem +} + +.wrapper__login_content--logo { + text-align: center; + margin: 0.5rem 0; + img { + width: 55%; + } +} + +.wrapper__login_content--form input { + display: block; + padding: 9px 0 7px 8px; + width: 100%; + margin: 0.5rem auto; + border-radius: 3px; + color: rgba(var(--i1d,38,38,38),1); + border: 1px solid rgba(var(--ca6,219,219,219),1); + border-radius: 3px; + background: rgba(var(--b3f,250,250,250),1); +} + +.wrapper__login_content--form input[type="submit"] { + background-color: rgba(var(--d69,0,149,246),.3); + opacity: 1; + border: 1px solid transparent; + border-radius: 4px; + color: rgba(var(--eca,255,255,255),1); +} + +.wrapper__login_separateLine { + padding: 10px 0; + text-align: center; + margin: 1rem 0; + div { + text-align: center; + display: inline-block; + &.wrapper__login_separateLine-bar { + width: 40%; + position: relative; + bottom: 0.2rem; + } + p { + color: b.$text-footer-color; + } + hr { + border: b.$border; + } + } +} + +.wrapper__login_facebook { + text-align: center; + color: #385185; + font-size: 14px; + p, small { + margin: 1rem auto; + } +} + +.wrapper__login_signup { + text-align: center; + a { + text-decoration: none; + font-weight: bold; + color: #262626; + } + margin: 0 0 10px; + padding: 20px 0; + border: b.$border; +} + +.wrapper__login_getapp { + text-align: center; + margin-bottom: 1rem; + font-size: 14px; + color: #262626; +} + +.wrapper__login_app { + @extend %display-flex; + font-size: 14px; +} + +.wrapper__login_app-apple, +.wrapper__login_app-google { + img { + height: 40px; + } + margin-right: 0.8rem; +} + +.footer__content { + color: b.$text-footer-color; + font-size: 12px; +} + +.footer__content_first { + margin-bottom: 1rem; +} + +.footer__content_second { + margin-bottom: 1.5rem; +} + + + + + + diff --git a/css/main.css b/css/main.css new file mode 100644 index 00000000..f28aa153 --- /dev/null +++ b/css/main.css @@ -0,0 +1,455 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Roboto, Helvetica, Arial, sans-serif; +} + +.nav__container { + position: sticky; + top: 0; + z-index: 1; + height: 54px; + background-color: #fff; + display: flex; + flex-wrap: nowrap; + justify-content: space-around; + align-items: center; + border-bottom: 1px solid #dbdbdb; +} + +.nav__container_logo img { + height: 50px; + display: flex; + justify-content: center; + align-items: center; +} + +.nav__container_search { + position: relative; +} +.nav__container_search i { + position: absolute; + left: 63px; + top: 8px; + color: #dbdbdb; + font-weight: bold; +} +.nav__container_search input[type=search] { + width: 220px; + padding: 0.4rem; + text-align: center; + border: 1px solid #dbdbdb; + border-radius: 3px; + background-color: rgba(var(--b3f, 250, 250, 250), 1); +} + +.nav__container_extends { + width: 115px; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; +} +.nav__container_extends i { + font-size: 24px; +} +.nav__container_extends i:hover { + cursor: pointer; +} + +.nav__container_extends-profile { + height: 26px; + width: 26px; + border-radius: 50%; + background-image: url("../assets/img/profile-2.jpg"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} +.nav__container_extends-profile:hover { + cursor: pointer; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.main__container_post { + width: 600px; + margin: 2rem auto; + border: 1px solid #dbdbdb; + margin-bottom: 1rem; +} + +.main__container_post-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem; + flex-wrap: nowrap; + border-bottom: 1px solid #dbdbdb; + background-color: #fff; +} + +.main__container_post-header--info { + display: flex; +} +.main__container_post-header--info p { + line-height: 1.6; +} + +.post__profile_info-name { + font-size: 14px; + font-weight: bold; +} + +.post__profile_info-extra { + font-size: 12px; +} + +.post__profile-circle--large { + width: 40px; + height: 40px; + border-radius: 50%; + background: linear-gradient(45deg, orange, purple); +} + +.post__profile-circle--small { + width: 38px; + height: 38px; + border-radius: 50%; + background: linear-gradient(45deg, orange, purple); + position: relative; + left: 2px; + top: 2px; +} + +.post__profile-img { + width: 32px; + height: 32px; + border-radius: 50%; + position: relative; + left: 2px; + top: 2px; +} +.post__profile-img:hover { + cursor: pointer; +} + +.post__profile_info { + margin-left: 1rem; +} + +.main__container_post-img { + height: 600px; + border-bottom: 1px solid #dbdbdb; +} + +.main__container_post-interactions { + border-bottom: 1px solid #dbdbdb; + padding: 1rem; + background-color: #fff; +} + +.post__interactions_icons { + display: flex; + justify-content: space-between; + flex-wrap: nowrap; + margin-bottom: 0.9rem; +} +.post__interactions_icons i { + font-size: 24px; +} +.post__interactions_icons i:hover { + cursor: pointer; +} + +.post__interactions_icons-left { + display: flex; + align-items: center; +} +.post__interactions_icons-left i { + margin-right: 1rem; +} + +.post__interactions_users { + margin-bottom: 0.9rem; +} + +.post__interactions_comments-user { + display: flex; + justify-content: space-between; + margin-bottom: 0.9rem; +} + +.post__interactions_comments-load { + margin-bottom: 0.9rem; +} +.post__interactions_comments-load p { + color: #8e8e8e; + font-size: 14px; +} + +.post__interactions_comments-extra { + display: flex; + justify-content: space-between; + margin-bottom: 0.9rem; +} + +.post__interactions_date { + font-size: 10.5px; + color: #8e8e8e; + text-transform: uppercase; +} + +.main__container_post-new { + display: flex; + position: relative; + padding: 1rem; +} +.main__container_post-new input { + width: 100%; + border: none; + padding: 1 rem; +} + +.main__container_post-new-cmt p { + font-size: 14px; + color: #0095f6; + opacity: 0.3; + font-weight: bold; +} +.main__container_post-new-cmt p:hover { + opacity: 1; +} + +.footer__content { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.footer__content_first ul, +.footer__content_second ul, +.footer__content_third ul { + display: flex; + align-items: center; + justify-content: space-around; +} +.footer__content_first ul li, +.footer__content_second ul li, +.footer__content_third ul li { + list-style-type: none; + display: inline-block; + margin: 0 0.4rem; +} + +body { + background-color: rgba(var(--b3f, 250, 250, 250), 1); +} + +.main__container { + background-color: rgba(var(--b3f, 250, 250, 250), 1); +} + +.img-post-1 { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url("../assets/img/post-1.jpg"); +} + +.img-post-2 { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url("../assets/img/post-2.jpg"); +} + +.img-post-3 { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url("../assets/img/post-3.jpg"); +} + +.img-post-4 { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url("../assets/img/post-4.jpg"); +} + +.img-profile-1 { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url("../assets/img/profile-1.jpg"); +} + +.img-profile-2 { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url("../assets/img/profile-2.jpg"); +} + +.img-profile-3 { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url("../assets/img/profile-3.jpg"); +} + +.img-profile-4 { + background-size: cover; + background-repeat: no-repeat; + background-position: center; + background-image: url("../assets/img/profile-4.jpg"); +} + +.wrapper__login_app, .wrapper { + display: flex; + justify-content: center; + align-items: center; + align-content: center; +} + +.wrapper { + margin: 0 auto; + width: 55vw; + margin-bottom: 5rem; +} + +.wrapper__left, +.wrapper__right { + margin-top: 3.5rem; +} + +.wrapper__img { + position: relative; +} + +.wrapper__img_fix img { + height: 618px; +} + +.wrapper__img_filled { + position: absolute; + transform: translate(63%, -121.3%); +} + +.wrapper__login_content { + border: 1px solid rgba(var(--b6a, 219, 219, 219), 1); + background-color: white; + padding: 1rem 2rem; + margin: 0.8rem 0; + padding: 0.6rem 1.8rem; +} + +.wrapper__login_content--logo { + text-align: center; + margin: 0.5rem 0; +} +.wrapper__login_content--logo img { + width: 55%; +} + +.wrapper__login_content--form input { + display: block; + padding: 9px 0 7px 8px; + width: 100%; + margin: 0.5rem auto; + border-radius: 3px; + color: rgba(var(--i1d, 38, 38, 38), 1); + border: 1px solid rgba(var(--ca6, 219, 219, 219), 1); + border-radius: 3px; + background: rgba(var(--b3f, 250, 250, 250), 1); +} + +.wrapper__login_content--form input[type=submit] { + background-color: rgba(var(--d69, 0, 149, 246), 0.3); + opacity: 1; + border: 1px solid transparent; + border-radius: 4px; + color: rgba(var(--eca, 255, 255, 255), 1); +} + +.wrapper__login_separateLine { + padding: 10px 0; + text-align: center; + margin: 1rem 0; +} +.wrapper__login_separateLine div { + text-align: center; + display: inline-block; +} +.wrapper__login_separateLine div.wrapper__login_separateLine-bar { + width: 40%; + position: relative; + bottom: 0.2rem; +} +.wrapper__login_separateLine div p { + color: rgba(var(--f52, 142, 142, 142), 1); +} +.wrapper__login_separateLine div hr { + border: 1px solid rgba(var(--b6a, 219, 219, 219), 1); +} + +.wrapper__login_facebook { + text-align: center; + color: #385185; + font-size: 14px; +} +.wrapper__login_facebook p, .wrapper__login_facebook small { + margin: 1rem auto; +} + +.wrapper__login_signup { + text-align: center; + margin: 0 0 10px; + padding: 20px 0; + border: 1px solid rgba(var(--b6a, 219, 219, 219), 1); +} +.wrapper__login_signup a { + text-decoration: none; + font-weight: bold; + color: #262626; +} + +.wrapper__login_getapp { + text-align: center; + margin-bottom: 1rem; + font-size: 14px; + color: #262626; +} + +.wrapper__login_app { + font-size: 14px; +} + +.wrapper__login_app-apple, +.wrapper__login_app-google { + margin-right: 0.8rem; +} +.wrapper__login_app-apple img, +.wrapper__login_app-google img { + height: 40px; +} + +.footer__content { + color: rgba(var(--f52, 142, 142, 142), 1); + font-size: 12px; +} + +.footer__content_first { + margin-bottom: 1rem; +} + +.footer__content_second { + margin-bottom: 1.5rem; +}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/home.html b/home.html new file mode 100644 index 00000000..29a2cdc3 --- /dev/null +++ b/home.html @@ -0,0 +1,409 @@ + + + + + + + Instagram Home + + + + + + +
+ +
+ +
+
+
+
+
+
+
+
+
+

moonlight

+
+
+

Morning Calm Village

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

Like by landscapes and others

+
+ + + +
+
+
+

@faroeisland for more content like this

+
+
+ +
+
+
+

View all 14 comments

+
+
+
+

+ landscapes Sunset in Norway follow + @mittnorge + for more video like this ! +

+
+
+ +
+
+
+ + + +
+

1 day ago

+
+ +
+ + +
+ +
+

Post

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

finland

+
+
+

...

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

Like by tinkerbelltiger and others

+
+ + + +
+
+
+

finland Sunset at Santa's cabin

+
+
+ +
+
+
+

View all 14 comments

+
+
+
+

+ Photo by + @hammermake +

+
+
+ +
+
+
+ + + +
+

18 hours ago

+
+ +
+ + +
+ +
+

Post

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

iceland

+
+
+

iceland

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

Like by landscape and others

+
+ + + +
+
+
+

icelandEpic sunset in Iceland

+
+
+ +
+
+
+

View all 14 comments

+
+
+
+

+ Video by + @jonfromiceland +

+
+
+ +
+
+
+ + + +
+

14 hours ago

+
+ +
+ + +
+ +
+

Post

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

nordic.iceland

+
+
+

Iceland

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

Like by simonisfunk and others

+
+ + + +
+
+
+

Unknow user comment

+
+
+ +
+
+
+

View all 14 comments

+
+
+
+

+ folkscenery Our most saved posts for August + @thestrawhatbackpacker +

+
+
+ +
+
+
+ + + +
+

14 hours ago

+
+ +
+ + +
+ +
+

Post

+
+
+
+ +
+ + diff --git a/login.html b/login.html new file mode 100644 index 00000000..063f1dad --- /dev/null +++ b/login.html @@ -0,0 +1,142 @@ + + + + + + + Instagram LogIn + + + + + +
+
+ +
+
+ background-img +
+
+ background-img +
+
+ + + +
+
+ + + + + + + +
+
+ +
+
+ + + + + + +