Instagram

├── imagens ├── apple-button.png ├── instagram-logo.png ├── googleplay-button.png ├── instagram-celular.png └── WhatsApp Image 2021-03-12 at 12.40.27.jpeg ├── index.HTML └── style.css /imagens/apple-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Brunodias101/Pagina-Instragan/HEAD/imagens/apple-button.png -------------------------------------------------------------------------------- /imagens/instagram-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Brunodias101/Pagina-Instragan/HEAD/imagens/instagram-logo.png -------------------------------------------------------------------------------- /imagens/googleplay-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Brunodias101/Pagina-Instragan/HEAD/imagens/googleplay-button.png -------------------------------------------------------------------------------- /imagens/instagram-celular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Brunodias101/Pagina-Instragan/HEAD/imagens/instagram-celular.png -------------------------------------------------------------------------------- /imagens/WhatsApp Image 2021-03-12 at 12.40.27.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Brunodias101/Pagina-Instragan/HEAD/imagens/WhatsApp Image 2021-03-12 at 12.40.27.jpeg -------------------------------------------------------------------------------- /index.HTML: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Instagram 8 | 9 | 10 | 11 |

12 |

13 |

14 |

15 | 16 |

17 | 18 |

19 |

20 |

21 |

22 |

23 | 24 | Remover conta 25 |

26 |

27 |

Não é brunocarvalhodias101 ?

28 |

29 | Alternar contas 30 | ou 31 | Inscreva-se 32 |

33 |

34 |

35 |

Baixe o aplicativo

36 |

37 | 38 | 39 |

40 |

41 |

42 |

43 | 44 | 45 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | text-decoration: none; 6 | font-family: sans-serif; 7 | font-size: 14px; 8 | } 9 | 10 | body { 11 | width: 100%; 12 | min-height: 100vh; 13 | background-color: rgb(243, 243, 243); 14 | margin: 0; 15 | padding: 0; 16 | display: flex; 17 | justify-content: center; 18 | } 19 | 20 | .instagram-wrapper { 21 | display: flex; 22 | align-items: center; 23 | justify-content: start; 24 | width: 60%; 25 | height: 100vh; 26 | } 27 | 28 | .instagram-phone { 29 | display: flex; 30 | align-items: center; 31 | justify-content: center; 32 | width: 50%; 33 | } 34 | 35 | .instagram-phone img { 36 | height: 50rem; 37 | } 38 | 39 | .instagram-continue { 40 | display: flex; 41 | align-items: center; /* horizontal */ 42 | justify-content: space-around; /* vertical */ 43 | flex-direction: column; 44 | width: 50%; 45 | min-height: 34rem; 46 | } 47 | 48 | .group { 49 | display: flex; 50 | justify-content: space-between; 51 | align-items: center; 52 | flex-direction: column; 53 | background-color: #ffffff; 54 | width: 100%; 55 | padding: 1.3rem 0; 56 | border: 1px solid lightgray; 57 | } 58 | 59 | .group:nth-child(1) { 60 | min-height: 19rem; 61 | } 62 | 63 | .instagram-logo { 64 | height: 3rem; 65 | } 66 | 67 | .profile-photo { 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | border-radius: 50%; 72 | overflow: hidden; 73 | } 74 | 75 | .profile-photo img { 76 | height: 6rem; 77 | } 78 | 79 | .instagram-login { 80 | background-color: #0095f6; 81 | color: #ffffff; 82 | padding: 8px; 83 | border-radius: 4px; 84 | } 85 | 86 | .instagram-logout { 87 | color: #0095f6; 88 | margin-top: 1rem; 89 | } 90 | 91 | .not-account { 92 | color: rgb(160, 160, 160); 93 | } 94 | 95 | .link-blue { 96 | color: #0095f6; 97 | } 98 | 99 | .get-the-app { 100 | display: flex; 101 | flex-direction: column; 102 | align-items: center; 103 | justify-content: center; 104 | width: 100%; 105 | padding: 1.3rem 0; 106 | } 107 | 108 | .download { 109 | display: flex; 110 | width: 100%; 111 | justify-content: space-evenly; 112 | align-items: center; 113 | padding: 1rem; 114 | } 115 | 116 | .app-download { 117 | height: 3rem; 118 | width: 10rem; 119 | background-size: cover; 120 | } 121 | 122 | .app-download:nth-child(1) { 123 | background-image: url('./imagens/apple-button.png'); 124 | } 125 | 126 | .app-download:nth-child(2) { 127 | background-image: url('./imagens/googleplay-button.png'); 128 | } 129 | 130 | /* media queries */ 131 | 132 | 133 | @media (max-width: 1024px) { 134 | .instagram-wrapper { 135 | width: 90%; 136 | } 137 | } 138 | 139 | @media (max-width: 650px) { 140 | body { 141 | background-color: #ffffff; 142 | } 143 | 144 | .instagram-wrapper { 145 | width: 90%; 146 | } 147 | 148 | .instagram-phone { 149 | display: none; 150 | } 151 | 152 | .instagram-continue { 153 | width: 100%; 154 | } 155 | 156 | .group { 157 | border: 1px solid transparent; 158 | } 159 | } --------------------------------------------------------------------------------