├── README.md
├── animate-scrollreveal
├── assets
│ ├── css
│ │ └── styles.css
│ ├── js
│ │ └── main.js
│ └── scss
│ │ └── styles.scss
└── index.html
└── variables-css
├── assets
├── css
│ └── styles.css
└── scss
│ └── styles.scss
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # IG Projects
2 |
3 | En este repositorio estare compartiendo los proyectos de las publicaciones de Instagram.
4 |
--------------------------------------------------------------------------------
/animate-scrollreveal/assets/css/styles.css:
--------------------------------------------------------------------------------
1 | /*========== BASE ==========*/
2 | *, ::before, ::after {
3 | box-sizing: border-box;
4 | }
5 |
6 | body {
7 | margin: 0;
8 | padding: 0;
9 | }
10 |
11 | /*========== SECTION ==========*/
12 | .section {
13 | padding: 4rem 0;
14 | }
15 |
16 | .section__container {
17 | display: flex;
18 | flex-direction: column;
19 | align-items: center;
20 | justify-content: space-evenly;
21 | }
22 |
23 | .section__box {
24 | width: 200px;
25 | height: 200px;
26 | border-radius: .5rem;
27 | margin-bottom: 2rem;
28 | }
29 |
30 | .section__box-color1 {
31 | background-color: #4D5BF9;
32 | }
33 |
34 | .section__box-color2 {
35 | background-color: #4DCEF9;
36 | }
37 |
38 | /*========== MEDIA QUERIES==========*/
39 | @media screen and (min-width: 768px) {
40 | .section {
41 | padding: 0;
42 | }
43 | .section__container {
44 | height: 100vh;
45 | flex-direction: row;
46 | align-items: center;
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/animate-scrollreveal/assets/js/main.js:
--------------------------------------------------------------------------------
1 | const sr = ScrollReveal({
2 | origin: 'top',
3 | distance: '100px',
4 | duration: 1500,
5 | reset: true,
6 | })
7 |
8 | sr.reveal('.section__box', {interval: 200,})
--------------------------------------------------------------------------------
/animate-scrollreveal/assets/scss/styles.scss:
--------------------------------------------------------------------------------
1 | /*========== BASE ==========*/
2 | *,::before,::after{
3 | box-sizing: border-box;
4 | }
5 |
6 | body{
7 | margin: 0;
8 | padding: 0;
9 | }
10 |
11 | /*========== SECTION ==========*/
12 | .section{
13 | padding: 4rem 0;
14 |
15 | &__container{
16 | display: flex;
17 | flex-direction: column;
18 | align-items: center;
19 | justify-content: space-between;
20 | }
21 |
22 | &__box{
23 | width: 200px;
24 | height: 200px;
25 | border-radius: .5rem;
26 | margin-bottom: 2rem;
27 |
28 | &-color1{
29 | background-color: #4D5BF9;
30 | }
31 |
32 | &-color2{
33 | background-color: #4DCEF9;
34 | }
35 | }
36 | }
37 |
38 | /*========== MEDIA QUERIES==========*/
39 | @media screen and (min-width: 768px){
40 | .section{
41 | padding: 0;
42 |
43 | &__container{
44 | height: 100vh;
45 | flex-direction: row;
46 | align-items: center;
47 | }
48 | }
49 | }
--------------------------------------------------------------------------------
/animate-scrollreveal/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Animate ScrollReveal
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
15 |
Facebook
16 |
10K
17 |
20 |
Instagram
21 |
23K
22 |
25 |
YouTube
26 |
50K
27 |