Revisão de código HTML/CSS

Front-end
,
#1

OBJETIVO: Revisão de código para sugestões

Olá pessoal da comunidade, eu estou estudando HTML e CSS.
Criei uma página sem utilizar nenhum framework para praticar um pouco, gostaria de receber algum tipo de feedback de pessoas que já estão mais por dentro do universo do Front-End, o meu maior desafio no momento é conseguir criar uma página que seja responsiva e adeque-se a outros tipos de tamanhos e dispositivos, tentei usar @media, mas não consegui, porém aqui qualquer ajuda seria útil.
Lembrando que sou novo no site e não sei se este é o jeito certo de se fazer uma pergunta, caso eu esteja fazendo errado, por favor, me ajudem a melhorar.

PARTE HTML


 
	
		
		
		
		Jaíne Make-up
		
			
jaine make-up

maquiagem na pele negra

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in suscipit dui. Vestibulum euismod volutpat purus. Suspendisse pretium nisl eget laoreet interdum. Donec non odio urna. Aenean purus tortor, tincidunt in dolor eu, ultricies tincidunt nulla. Fusce scelerisque sem non felis ultricies aliquet. Curabitur auctor vehicula luctus. Integer id nisi ut mauris laoreet gravida ac ac leo. Proin ut nibh at velit porttitor pretium quis non sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in suscipit dui. Vestibulum euismod volutpat purus. Suspendisse pretium nisl eget laoreet interdum. Donec non odio urna. Aenean purus tortor, tincidunt in dolor eu, ultricies tincidunt nulla. Fusce scelerisque sem non felis ultricies aliquet. Curabitur auctor vehicula luctus.

®jaine santos rocha

PARTE CSS

/*Configurações gerais da página e do cabeçalho*/

body{
	padding: 1em;
	font-family: 'Syncopate', sans-serif;
	text-align: justify;
	color: #3c3c3c;
}
.cabecalho{
    background-image: url(backeyes.jpg);
    padding: 5em;
    text-align: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
	margin: -1.5em;
}
#titulo{
    text-transform: uppercase;
    font-size: 4em;
    color: #f0f8ff;
    text-shadow: 2px 2px 8px #000000;
}

/*/////////////////////////////*/

/*Configurações do conteúdo*/

.principal{
	padding: 2em 10em;
}
p{
	text-indent: 5em;
}
h2{
	font-size: 2em;
	text-align: center;
}

/*/////////////////////////////*/

/*Configurações do rodapé incluindo links para redes sociais*/

footer{
	background-color: #3c3c3c;
	padding: 2em;
	margin: -1.5em;
	display: flex;
    align-items: center;
    justify-content: space-between;
}
h5{
	color: white;
	text-transform: uppercase;
}
.redes_sociais a{
	width: 3em;
    height: 3em;
    display: inline-block;
    text-indent: -1000em;
    background-size: contain;
    background-repeat: no-repeat;
	transition: .5s;	
}
.redes_sociais{
	display: flex;
	justify-content: flex-end;
}
li{
	display: inline-block;
	margin-right: 2em;
}
.insta{
	background-image: url(icone_insta.png);
}
.insta:hover{
	opacity: .2;
}
.face{
	background-image: url(icone_face.png);
}
.face:hover{
	opacity: .2;	
}

/*/////////////////////////////*/

/*Confidurações dos Botões*/

.menu{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	margin-top: 3em;
	
}

.menu li{
		   
}

.menu ul{
	
}

.menu a{
	text-transform: uppercase;
    border: solid .05em #3c3c3c;
    padding: .5em 2em;
    margin: 1em;
	text-decoration: none;
	transition: .5s;
	border-radius: 4px;
	color: #3c3c3c;

}	

.botao_01:hover{
	background-color: #3c3c3c;
	opacity: .5;
	 
	 color: white;
}

.botao_02:hover{
	background-color: #3c3c3c;
	opacity: .5;
	 
	 color: white;
}
.botao_03:hover{
	background-color: #3c3c3c;
	opacity: .5;
	
	 color: white;
}
.botao_home:hover{
	background-color: #3c3c3c;
	opacity: .5;
	color: white;
}

/*////////////////////////////////////////////////*/