Responsibility in HTML CSS

Question

Responsibility in HTML CSS

Navigation

1

I wrote my portfolio at one time and tried to make it responsive. I used the First Mobile technique. In mobile resolution it got mass, but when I made the first responsiveness to 600px wide resolution, it only works when I run the code, when I put it active, it does not stay responsive. I will post the images and the code so that you can help me. thanks in advance!

/* ----------- RESET ----------- */
*{
	margin: 0; padding: 0; font-size: 100%; border: none; outline: none; font-weight: 300; box-sizing: border-box; font-family: 'Muli', sans-serif;
}
body {
	background-color: #f5f5f5;
}
a {
	text-decoration: none;
}
ul {
	list-style: none;
}
img {
	max-width: 100%;
}

@charset "UTF-8";

body {
	width: 100%;
	float: left;
	background-color: #DCDCDC;
}

a{
	text-decoration: none;
}

/*CABEÇALHO*/

.top_down_bc{
	background: linear-gradient(to top, #ffffff, #00BFFF);
	width: 100%;
}

header.cabecalho {
	position: fixed;	
	display: grid;
	grid-template-columns: 20% 60% 20%;
	justify-content: space-between;
	padding: 2% 3%;	
}


img#logo {
	width: 100%;
}

img#description {
	width: 100%;
	padding: 12.5% 5px 0 5px;
}

.btn-menu {
	width: 95%;
	height: 95%;
	float: right;
	text-align: center;
	color: #ffffff;
	border-radius: 50px;
	cursor:pointer;
	background: linear-gradient(to right,#09e7a7,#2cbfc8);
}


/*  MENU */
.menu {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0,0,0,0.5);
	top: 0;
	left: 0;
}

.btn-close {
	font-size: 3em; 
	color: #ffffff;
	float: right;
	cursor: pointer;
	margin-right: 5%;
}
.menu ul {
	width: 100%;
	float: left;
	text-align: center;
}
.menu li {
	padding: 1.5%;
}
.menu li a {
	font-size: 2em;
	color: #fff; padding: 1.5% 3%;
}
.menu li a:hover {
	border: 1px solid #2cbfc8;
}

.apresentations {
	width: 50%;
	margin: 20% 0 0 25%;
}

/* Apresentation */

div.banner {
	margin: 1% 0 0 0;
	width: 100%;
	float: left;
	text-align: center;
	padding: 1% 5%;
	background: linear-gradient( to top, #58FA82, #58FAAC, #58FAD0);
	border-radius: 50px;
	line-height: 1.8em; 
}


p.coment {
	text-align: justify;
}

h1.titulo {
	font-size: 2em;
	font-weight: 700;
}

h2.coment {
	padding: 1% 0;
	font-weight: 600;
}

/* About Me */


button.btn-ensino {	
	transition: background-color 2s, font-size 1s;
	border: double 5px;
	font-size: 1.2em;
	cursor: pointer;
	width: 100%;
	border-radius: 25%;
	padding: 5%;
	margin: 1%	0%;
	background: linear-gradient(to right, #4169E1, #1E90FF, #00BFFF);
}

button.btn-ensino:hover {
	cursor: pointer;
	color: #fff;
	font-size: 1.4em;
	text-shadow: 5px 5px #000;
	width: 100%;
	border-radius: 25%;
	padding: 8%;
	margin: 1%	0%;
	background: linear-gradient(to right, #00BFFF, #1E90FF, #4169E1);
}

div#about_me {
	width: 100%;
	float: left;
	text-align: center;
	padding: 3% 4%;
	background: linear-gradient(to top, #FFFF00, #FFD700, #FFA500, #FF8C00, #FF4500);
	border-radius: 50px; 
}

div.ensinos {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	background: linear-gradient(to top, #000000, #696969, #808080);
	top: 0;
	left: 0;
}
h2.titulo_ensino {
	margin: 25% 0;
	color: #DCDCDC;
	font-size: 1.3em;
	font-weight: 980;
}

p.paragrafo_ensino {
	font-size: 1.1em;
}

div.ensino-tecnico {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0,0,0,0.5);
	top: 0;
	left: 0;
}
div.ensino-superior {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	background-color: rgba(0,0,0,0.5);
	top: 0;
	left: 0;
}

button.btn-cert {
	transition: font-size 1s;
	cursor: pointer;
	background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
	width: 100%;
	margin: 2% 0;
	padding: 5%;
	border-radius: 15px;
}

button.btn-cert:hover {
	cursor: pointer;
	background: linear-gradient(to right, #A9A9A9, #808080, #696969, #000);
	width: 100%;
	margin: 2% 0;
	padding: 5%;
	border-radius: 15px;
	color: #fff;
	font-size: 1.3em;
}

i.far {
	padding: 2%;
}

/* Exemplos de sites */

div#sites {
	background: linear-gradient(to top, #00FA9A, #00FF7F, #98FB98, #90EE90);
	width: 100%;
	border-radius: 18px;
}
header#sites_titulo {
	margin: auto;
	font-size: 2em;
	font-weight: 700;
	text-align: center;
}

img#img_banner {
	float: right;
	margin: auto;
}

button.btn-sites {
	transition: font-size 1s;
	cursor: pointer;
	background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
	width: 100%;
	margin: 2% 0;
	padding: 5%;
	border-radius: 15px;
}

button.btn-sites:hover {
	cursor: pointer;
	background: linear-gradient(to right, #A9A9A9, #808080, #696969, #000);
	width: 100%;
	margin: 2% 0;
	padding: 5%;
	border-radius: 15px;
	color: #fff;
	font-size: 1.3em;	
}

/* Contacts */

div#corpo {
	background: linear-gradient(to bottom, #8B0000, #FF4500, #FF8C00, #FFA500);
	width: 100%;
	border-radius: 18px;
	padding: 5% 0;
}

table#tabela {
	width: 70%;
	margin: auto;
	border: double;
	border-radius: 25px;
	border-spacing: 20px;
}
th.titulos {
	border-bottom: solid 0.1em;
	font-size: 1.5em;
}

#number_phone {
	font-size: 1.2em;
	text-align: center;
	font-weight: 800;
}

.link_dados {
	font-size: 3em;
	color: #191970;
	padding-left: 25%;
}

footer {
	margin-top: 10%;
}

.footer_information {
	text-align: center;
	font-weight: 800;
	padding: 2px;
}

/*================================Mobile First========================*/
/*================================	600px	========================*/
@media screen and (min-width: 600px) {

	.top_down_bc{
		background: linear-gradient(to top, #ffffff, #00BFFF);
		width: 100%;
	}

	header.cabecalho {
		position: fixed;	
		display: grid;
		grid-template-columns: 20% 60% 20%;
		justify-content: space-between;
		padding: 0% 0%;	
	}


	img#logo {
		width: 60%;
		margin: auto;
	}

	img#description {
		width: 60%;
		margin: -6% auto;
	}

	.btn-menu {
		width: 50%;
		height: 80%;
		margin: auto;
		text-align: center;
		color: #ffffff;
		border-radius: 50px;
		cursor:pointer;
		background: linear-gradient(to right,#09e7a7,#2cbfc8);
	}
	/*  MENU */

	.menu {
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0,0,0,0.5);
		top: 0;
		left: 0;
	}

	.btn-close {
		font-size: 3em; 
		color: #ffffff;
		float: right;
		cursor: pointer;
		margin-right: 5%;
	}
	.menu ul {
		width: 100%;
		float: left;
		margin: -10% auto;
		text-align: center;
	}
	.menu li {
		padding: 1.5%;
	}
	.menu li a {
		font-size: 1.6em;
		color: #fff; padding: 1.5% 3%;
	}
	.menu li a:hover {
		border: 1px solid #2cbfc8;
	}

	.apresentations {
		width: 20%;
		margin: 10% 0% 0% 40%;
	}
	/* Apresentation */

	div.banner {
		width: 100%;
		float: none;
		text-align: center;
		padding: 1.5% 0%;
		background: linear-gradient( to top, #58FA82, #58FAAC, #58FAD0);
		border-radius: 50px;
		line-height: 1.6em;
	}

	h1.titulo {
		font-size: 2.3em;
		font-weight: 700;
	}

	h2.coment {
		padding: 1% 0;
		font-weight: 600;
	}

	/* About Me */


	button.btn-ensino {	
		transition: background-color 2s, font-size 1s;
		border: double 5px;
		font-size: 1.2em;
		cursor: pointer;
		width: 50%;
		border-radius: 25%;
		padding: 5%;
		margin: 1%	0%;
		background: linear-gradient(to right, #4169E1, #1E90FF, #00BFFF);
	}

	button.btn-ensino:hover {
		cursor: pointer;
		color: #fff;
		font-size: 1.4em;
		text-shadow: 5px 5px #000;
		width: 60%;
		border-radius: 25%;
		padding: 8%;
		margin: 1%	0%;
		background: linear-gradient(to right, #00BFFF, #1E90FF, #4169E1);
	}

	div#about_me {
		width: 100%;
		float: left;
		text-align: center;
		padding: 3% 4%;
		background: linear-gradient(to top, #FFFF00, #FFD700, #FFA500, #FF8C00, #FF4500);
		border-radius: 50px; 
	}

	div.ensinos {
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		background: linear-gradient(to top, #000000, #696969, #808080);
		top: 0;
		left: 0;
	}
	h2.titulo_ensino {
		margin: 10% 25% 10% 25%;
		color: #DCDCDC;
		font-size: 1.3em;
		font-weight: 980;
	}

	p.paragrafo_ensino {
		font-size: 1.2em;
	}

	div.ensino-tecnico {
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0,0,0,0.5);
		top: 0;
		left: 0;
	}
	div.ensino-superior {
		display: none;
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0,0,0,0.5);
		top: 0;
		left: 0;
	}

	p.paragrafo_certificado {
		text-align: center;
	}

	button.btn-cert {
		transition: font-size 1s;
		cursor: pointer;
		background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
		width: 30%;
		margin: 2% 35%;
		padding: 1%;
		border-radius: 15px;
	}

	button.btn-cert:hover {
		transition: font-size 1s;
		cursor: pointer;
		background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
		width: 32%;
		margin: 2% 35%;
		padding: 1%;
		border-radius: 15px;
	}

	i.far {
		padding: 2%;
	}

	/* Exemplos de sites */

	div#sites {
		background: linear-gradient(to top, #00FA9A, #00FF7F, #98FB98, #90EE90);
		width: 100%;
		border-radius: 18px;
	}
	header#sites_titulo {
		margin: auto;
		font-size: 2em;
		font-weight: 700;
		text-align: center;
	}

	img#img_banner {
		float: right;
		margin: auto;
	}

	button.btn-sites {
		transition: font-size 1s;
		cursor: pointer;
		background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
		width: 50%;
		margin: 2% 25%;
		padding: 5%;
		border-radius: 15px;
	}

	button.btn-sites:hover {
		transition: font-size 1s;
		cursor: pointer;
		background: linear-gradient(to right, #000000, #696969, #808080, #A9A9A9);
		width: 51%;
		margin: 2% 25%;
		padding: 5%;
		border-radius: 15px;	
	}

	/* Contacts */

	div#corpo {
		background: linear-gradient(to bottom, #8B0000, #FF4500, #FF8C00, #FFA500);
		width: 100%;
		border-radius: 18px;
		padding: 5% 0;
	}

	table#tabela {
		width: 70%;
		margin: auto;
		border: double;
		border-radius: 25px;
		border-spacing: 20px;
	}
	th.titulos {
		border-bottom: solid 0.1em;
		font-size: 1.5em;
	}

	#number_phone {
		font-size: 1.2em;
		text-align: center;
		font-weight: 800;
	}

	.link_dados {
		font-size: 3em;
		color: #191970;
		padding-left: 40%;
	}
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="utf-8"/>	
	<meta name="description" content="This page it's my portfolio. Here you can know me and see my specifications.">
	<meta name="keywords" content="portfolio, Harysson, Haryinfo, desenvolvimento, web"/>
	<meta name="robots" content="index, follows"/>
	<meta name="author" content="Harysson Soares"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Haryinfo</title>
	<link rel="stylesheet" type="text/css" href="CSS/main_estilo.css"/>	
	<script language="javascript" src="JavaScript/funcoes.js" type="text/javascript"></script>	
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><linkrel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"/>	
	<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Ultra" rel="stylesheet">
	<link rel="icon" href="_images/logo_home.png"/>
</head>
<body id="inicio">
	<header class="cabecalho top_down_bc">
		<a href="index.html" id="link_home"><img src="_images/logo_home.png" id="logo"/></a>
		<img src="_images/web_development.png" id="description">
		<button class="btn-menu" alt="Menu"> <i class="fas fa-bars fa-lg" id="menu_icon"></i></button>
		<nav class="menu">
			<a class="btn-close"><i class="fa fa-times"></i> </a>			
			<ul>
				<li onmouseover="mudaFoto('_images/logo_home.png')" onmouseout="mudaFoto('_images/logo_home.png')" class="list_menu"> <a href="#inicio" id="index" class="link_menu">HOME</a> </li>
				<li onmouseover="mudaFoto('_images/about_me.png')" onmouseout="mudaFoto('_images/main.png')" class="list_menu"> <a href="#img_about_me" id="link_sobre_mim" class="link_menu" target="">SOBRE MIM</a> </li>
				<li onmouseover="mudaFoto('_images/meus_trabalhos.png')" onmouseout="mudaFoto('_images/main.png')" class="list_menu"> <a href="#img_my_jobs" id="link_meus_trabalhos" class="link_menu">VITRINE DE SITES</a> </li>
				<li onmouseover="mudaFoto('_images/contato.png')" onmouseout="mudaFoto('_images/main.png')" class="list_menu"> <a href="#img_contacts" id="link_contatos" class="link_menu">CONTATOS</a> </li>
				<img src="_images/main.png" id="icone"/>
			</ul>			
		</nav>

		<script>
		$(".btn-menu").click(function(){
			$(".menu").show();
		});

		$(".btn-close").click(function(){
			$(".menu").hide();
		});
		
		$(document).ready(function(){
    		$(document).keydown(function(e){
    			if (e.keyCode == 27){
        			$(".menu").hide();
        		}
    		});
		});
		$(".menu").click(function(){
			$(".menu").hide();
		});
		

	</script> 
	</header>
	<div class="img_principal">
		<img src="_images/main.png"/ id="hi" class="apresentations"/>
	</div>
	<div class="banner">
		<h1 class="titulo">Bem vindo ao futuro</h1>
		<h2 class="coment">Quanto você gasta em um anúncio da sua empresa?</h2>
		<h2 class="coment">Qual o alcance do tipo de anúncio usado por sua empresa?</h2>
		<h2 class="coment">O sua empresa possui um site? Acha que ela representa bem a sua empresa?</h2>
		<h2 class="coment">Você acha que um site serve apenas como propaganda e portfolio para sua empresa?</h2>
	</div>	

	<div>
		<img src="_images/about_me.png" id="img_about_me" class="apresentations">
	</div>

	<div id="about_me">		
		<header id="cabecalho" class="topico">
			<h1 class="titulo">SOBRE MIM</h1>
		</header>
				<h2 class="coment">Meus conhecimentos</h2>
				<p class="paragrafo coment">Atualmente possuo conhecimento em HTML5, CSS e JavaScript para o desenvolvimento Web. Além de conhecimentos para desenvolvimento Web, também possuo conhecimento sobre SQL, para banco de dados, PHP e Java.Esse conhecimento foi adquirido através de cursos com certificação. Para conferir essa certificação, acesse o link acima com o nome "CERTIFICAÇÕES".</p>
				
				<h2 class="coment">Progresso Educacional</h1>
				<button id="btn-basico" class="btn-ensino">Ensino Básico <i class="fas fa-angle-double-right"></i></button>
				<button id="btn-tecnico" class="btn-ensino">Ensino Técnico <i class="fas fa-angle-double-right"></i></button>
				<button id="btn-superior" class="btn-ensino">Ensino Superior <i class="fas fa-angle-double-right"></i></button> 
				
				<div id="ensino-basico" class="ensinos">
					<a class="btn-close"><i class="fa fa-times"></i></a>
					<h2 id="ensino_basico" class="titulo_ensino">Ensino Básico (fundamental e médio)</h2>
					<p class="paragrafo_ensino">Todo meu ensino básico foi feito no Instituto Reis Magos (IRM). Escola privada que me deu bolsa desde a pre-escola, sobre a condição de manter notas boas e evitar as recuperações.</p>
				</div>

				<div id="ensino-tecnico" class="ensinos">
					<a class="btn-close"><i class="fa fa-times"></i></a>
					<h2 id="ensino_tecnico" class="titulo_ensino">Ensino Técnico</h2>
					<p class="paragrafo_ensino">Atualmente estou cursando ensino técnico no Instituto Metrópole Digital (IMD). O IMD possui vínculo com UFRN e empresas do ramo da tecnologia, como Microsoft e CISCO.</p>
					<p class="paragrafo_ensino">Pretendo fazer o ensino superior na UFRN (Bacharel em Tecnologia da Informação - BTI), porém sempre estou estudando e fazendo cursos sobre desenvolvimento Web e demais tecnologias.</p>
				</div>

				<div id="ensino-superior" class="ensinos">
					<a class="btn-close"><i class="fa fa-times"></i></a>
					<h2 id="ensino_superior" class="titulo_ensino">Ensino Superior</h2>
					<p class="paragrafo_ensino">Minha formação é em Bacharel Ciências Biológicas, com ênfase em microbiologia. Essa área me trouxe muitos questionamentos sobre a Biotecnologia, o que me levou a estudar mais sobre programação.</p>
				</div>


				<script>
					$("#btn-basico").click(function(){
						$("#ensino-basico").show();
					});
					$(".btn-close").click(function(){
						$("#ensino-basico").hide();
					});
					$(document).ready(function(){
    					$(document).keydown(function(e){
    						if (e.keyCode == 27){
        						$("#ensino-basico").hide();
        					}
    					});
					});
					$("#btn-tecnico").click(function(){
						$("#ensino-tecnico").show();
					});
					$(".btn-close").click(function(){
						$("#ensino-tecnico").hide();
					});
					$(document).ready(function(){
    					$(document).keydown(function(e){
    						if (e.keyCode == 27){
        						$("#ensino-tecnico").hide();
        					}
    					});
					});
					$("#btn-superior").click(function(){
						$("#ensino-superior").show();
					});
					$(".btn-close").click(function(){
						$("#ensino-superior").hide();
					});
					$(document).ready(function(){
    					$(document).keydown(function(e){
    						if (e.keyCode == 27){
        						$("#ensino-superior").hide();
        					}
    					});
					});
				</script>

			<section id="da_biologia_para_tecnologia" class="topico">
				<h2 class="coment">Da Biologia para Tecnologia</h2>

				<p class="paragrafo coment">Diante de vários questionamentos sobre a mudança de área, ou mesmo qual a relação entre elas, a resposta é bem simples. O ramo da Biotecnologia me fez ver que no Brasil há uma carência muito grande do uso e do desenvolvimento de ferramentas tecnológicas. Acredito que vai além do ramo da biologia. A carência de programadores é muito grande, e isso não só no Brasil, mas no mundo inteiro. Então fica claro ver que não só a Biologia possui relação com a tecnologia, mas todas as áreas convergem para ela.</p>
			</section>

			<section id="certificacoes" class="topico">
				<h2 class="coment">Certificações</h2>
				<p class="paragrafo_certificado">HTML, CSS e JavaScript:<a href="_images/HTML5.jpg" target="_blank"><button class="btn-cert">Certificado<i class="far fa-file-alt"></i></button></a></p>
				<p class="paragrafo_certificado">Java:<a href="_images/certificado Java.pdf" target="_blank"><button class="btn-cert"> Certificado<i class="far fa-file-alt"></i></button></a></p>
				<p class="paragrafo_certificado">Montagem e Manutenção de computadores:<a href="_images/certificado Montagem e Manutenção de computadores.pdf" target="_blank"><button class="btn-cert">Certificado<i class="far fa-file-alt"></i></button></a></p>
				<p class="paragrafo_certificado">Congresso Online de Tecnologia da Informação:<a href="_images/Certificado TI.pdf" target="_blank"><button class="btn-cert">Certificado<i class="far fa-file-alt"></i></button></a></p>
			</section>
	</div>

	<div id="my_jobs">
		<img src="_images/meus_trabalhos.png" id="img_my_jobs" class="apresentations" />
		
		<div id="sites">
			<img src="_images/projects.png" id="img_banner"/>	
			<header id="sites_titulo">
				<h1 id="titulo">Sites criados por mim</h1>
			</header>
			<section id="lista_sites">
				<h2 id="google_glass"> <a href="projeto-glass-html5/index_google_glass.html"  class="link_sites" target="_blank" onmouseover="mudaFotoMyJobs('_images/google-glasses_mobile.png')" onmouseout="mudaFotoMyJobs('_images/projects.png')"><button class="btn-sites" id="btn-google-glass"> Site sobre Google Glass <i class="fas fa-external-link-alt"></i></button></a></h2>

				<h2 id="cpc"> <a href="Site_CPC/index_CPC.html" class="link_sites" target="_blank" onmouseout="mudaFotoMyJobs('_images/projects.png')" onmouseover="mudaFotoMyJobs('Site_CPC/image/logo_CPC_200x200_mobile.png')"><button class="btn-sites" id="btn-cpc"> Site para o Centro Pedagógico de Candelária (CPC)<i class="fas fa-external-link-alt"></i></button></a></h2>

				<h2 id="hi"> <a href="index.html" class="link_sites" target="_blank" onmouseout="mudaFotoMyJobs('_images/projects.png')" onmouseover="mudaFotoMyJobs('_images/logo_home_mobile.png')"><button class="btn-sites" id="btn-home"> Este que vos é apresentado(Hi Tech)<i class="fas fa-external-link-alt"></i></button></a></h2>

				<h2> <p onmouseout="mudaFotoMyJobs('_images/projects.png')" onmouseover="mudaFotoMyJobs('_images/emoticon_mobile.png')"> <button class="btn-sites" id="btn-nothing-do">O Próximo da lista, poderia ser sua empresa!</button></p></h2>		
			</section>
		</div>
	</div>

	<div id="contacts">
		<img src="_images/contato.png" id="img_contacts" class="apresentations"/>
		<div id="corpo">
			<table id="tabela">
				<tr class="linha_titulo">
					<th class="titulos" colspan="2">Telefone/WhatsApp</th>
				</tr>
				<tr class="linha_information">
					<td colspan="2" class="dados"><h1 id="number_phone">(84)99819-0309</h1></td>
				</tr>
				<tr class="linha_titulo">
					<th class="titulos" colspan="2">Redes Sociais</th>
				</tr>
				<tr class="linha_information">
					<td class="dados"><a href="https://www.facebook.com/profile.php?id=100011284782564" target="_blank" class="link_dados" onmouseover="mudaFoto('_images/facebook.png')" onmouseout="mudaFoto('_images/contato.png')"><i class="fab fa-facebook-square facebook"></i></a></td>
					<td class="dados"><a href="https://twitter.com/haryssonsoares" target="_blank" class="link_dados" onmouseover="mudaFoto('_images/twitter.png')" onmouseout="mudaFoto('_images/contato.png')"><i class="fab fa-twitter-square twitter"></i></a></td>
				</tr>
				<tr class="linha_titulo">
					<th class="titulos" colspan="2">Redes Profissionais</th>
				</tr>
				<tr class="linha_information">
					<td class="dados"><a href="https://www.linkedin.com/in/harysson-soares-96476099/" target="_blank" class="link_dados" onmouseover="mudaFoto('_images/linkedin.png')" onmouseout="mudaFoto('_images/contato.png')"><i class="fab fa-linkedin linkedin"></i></a></td>
					<td class="dados"><a href="https://github.com/Rharuow" target="_blank" class="link_dados" onmouseover="mudaFoto('_images/github.png')" onmouseout="mudaFoto('_images/contato.png')"><i class="fab fa-github-square github"></i></a></td>
				</tr>
			</table>
		</div>
	</div>

	<div id="rodape">
		<footer class="top_down_bc">
			<h1 class="footer_information">Todos direitos reservados por:</h1>
			<h1 class="footer_information"><i class="far fa-copyright"></i>HI Tech Web Development</h1>
			<h1 class="footer_information">Last Update: 26/05/2018</h1>
		</footer>
	</div>

</body>
</html>

html css layout-responsivo

asked by anonymous 28.05.2018 / 16:11

0 answers

Excel (VBA) - Copy file data Aligning objects on the screen using bootstrap