0

Desafio Bootcamp - Recriando Página Do Instagram

#HTML #JavaScript #CSS
Rafael Andrade
Rafael Andrade

Desafio do Bootcamp Game-Development com JavaScript, um tela criada com HTML5 e CSS3, utilizando Flex-Box, tentei desenvolver com o máximo de fidelidade da tela original do Instagram, me baseando nas nomenclaturas das classes do Bootstrap, implementei o estilo baseado em Flaxbox para projetar o layout e posicionamento dos elementos, outro aspecto referente ao projeto, é que na aula foi utilizada um exemplo ou pouco mais antigo da tela do Instagram, neste projeto desenvolvi a tela mais atual respeitando os elementos que estão presentes na interface.

<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <link rel="stylesheet" href="css/style.css">
	    <title>Document</title>
	</head>
	<body>
	    <section class="container">
	        <div class="row justify-content-center align-itens-center ">
	            <div class="box-imagem">
	                <img src="img/Ativo 2.png" alt="Smartphone" srcset="">
	            </div>
	            
	            <div class="text-center border align-itens-center box-profile">
	                <div class="">
	                    <img src="img/instagram-logo.png" class="img-title" alt="logo-instagrm" srcset="">
	                </div>
	                <div class="">
	                    <img src="img/avata.jpg" class="img-circle " alt="PhotoProfile">
	                </div>
	                <div class="">
	                    <button class="btn">Continuar como rafael.andradejp</button>
	                </div>
	                <div class="box-footer-profile">
	                    <span>Não é rafael.andradejp? <a href="" style="color: rgb(66, 143, 231);">Trocar de Conta</a></span>
	                </div>
	            </div>
	        </div>
	    </section>
	    <section class="container">
	        <nav class="">
	            <ul>
	                <li><a href="">Sobre</a></li>
	                <li><a href="">Blog</a></li>
	                <li><a href="">Careiras</a></li>
	                <li><a href="">Ajuda</a></li>
	                <li><a href="">API</a></li>
	                <li><a href="">Privacidade</a></li>
	                <li><a href="">Termos</a></li>
	                <li><a href="">Principais Contas</a></li>
	                <li><a href="">Hashtags</a></li>
	                <li><a href="">Localizações</a></li>
	            </ul>
	        </nav av>
	       
	    </section>
	    <footer >
	        <div class="text-center">
	            <span>Português(Brasil)</span>
	            <span>&copy; 2021 Instagram do Facebook</span>
	        </div>
	    </footer>
	</body>
	</html>
© 2021 GitHub


/**** Folha de estilo  ******/


	*{ 
	    padding: 0%; 
	    margin: 0%; 
	    box-sizing: border-box; 
	    text-decoration: none;
	    text-decoration-style:none;
	}
	

	body{ 
	    width: 100%;
	    height: 100vh;
	    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",'Roboto',Helvetica,Arial,sans-serif !important;
	    font-weight: 500;
	    font-size: 14px;
	    font-weight: 500;
	    color:rgb(44, 44, 44) ;
	    background: rgb(230, 230, 230);   
	   
	}
	

	.border{
	    border:solid 1px rgb(175, 175, 175);
	}
	

	.container{
	    width: 85%;
	    display: flex;
	    margin: auto;
	    flex-direction: column;
	    padding:30px 5px 5px 5px;
	}
	

	.row{
	    flex-direction: row;
	    flex-wrap: wrap;
	    display: flex;
	    padding: 5px;
	}
	

	.justify-content-center{
	    justify-content: center;
	}
	

	.text-center{
	    text-align: center;
	}
	

	.box-imagem{
	    /* display: none; */
	    flex-basis: 454px;
	    height: 618px;
	    margin-left: -35px;
	    margin-right: -15px;
	}
	

	.align-itens-center{
	    align-items: center;
	   
	}
	

	.box-profile{
	    width: 353px;
	    height: 342px;
	    border-radius: 1px;
	    margin: 0 0 10px;
	    padding: 10px 0;
	    background: rgb(247, 247, 247);
	}
	

	.img-circle{
	    border-radius: 50%;
	    width: 105px;
	    height: 105px;
	    margin: 5px 0px 15px;
	    overflow: hidden;
	}
	

	.btn{
	    width: 75%;
	    padding: 6px;
	    margin: 3px;
	    border: 1px solid rgb(58, 156, 201);
	    border-radius: 3px;
	    background: rgb(58, 156, 201);
	    color: whitesmoke;
	    font-size: 14px;
	}
	

	.img-title{
	    width: 55%;
	    margin: 40px auto 10px auto;
	}
	

	.box-footer-profile{
	    width: 100%;
	    height: 70px;
	    margin: auto;
	    display: inline-flex;
	    justify-content: center;
	    align-items: center;
	    
	}
	

	nav{
	    width: 100%;
	    display: flex;
	    justify-content: center;
	}
	

	ul{
	    width: 60%;
	    text-align: center;
	    display: block;
	    font-size: 12px;
	}
	

	ul li {
	    display: inline;
	    padding: 3px;
	    margin: 5px;
	    text-decoration: none;
	}
	

	li a {
	    text-decoration-style: none;
	    color: rgb(131, 131, 131);
	    font-weight: 400;
	}
	

	footer{
	     width: 100%;
	     padding: 13px;
	     box-sizing: border-box;
	     flex: 0 0 auto;
	}
	

	footer span{
	    padding: 5px;
	    margin: 10px;
	    font-size: 11px;
	    font-weight: 400;
	    text-decoration: none;
	    text-decoration-style: none;
	    color: rgb(131, 131, 131);
	}
	

	@media screen and (max-width: 945px)  {
	    body{
	        height: 100vh;
	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	        align-items: center;
	    }
	

	    .box-imagem{
	        display: none;
	    }
	

	    .box-profile{
	        align-items: center;
	        width: 353px;
	        height: 342px;
	        border-radius: 1px;
	        margin: auto;
	        padding: 10px 0;
	        background: rgb(247, 247, 247);
	    }
	    
	}



0
20

Comentários (1)

0
J

Jonathas Araujo

31/05/2021 12:30

Boa, ficou muito bom. Em breve vvou colocar o meu, poderia deixar o código com link do git hub.

Desenvolvedor de Sistemas

Brasil