An open API service indexing awesome lists of open source software.

https://github.com/pitercoding/minhas-redes-sociais

Site simples que apresenta minhas principais redes sociais de forma interativa e responsiva. EN: Simple website that presents my main social networks in an interactive and responsive way.
https://github.com/pitercoding/minhas-redes-sociais

css htm iframe project responsive-design social-media website

Last synced: 10 days ago
JSON representation

Site simples que apresenta minhas principais redes sociais de forma interativa e responsiva. EN: Simple website that presents my main social networks in an interactive and responsive way.

Awesome Lists containing this project

README

          

# 🌐 Minhas Redes Sociais

Este é um site simples desenvolvido apenas com **HTML5** e **CSS3**, que apresenta minhas principais redes sociais de forma interativa. O projeto foi criado durante o curso de **HTML e CSS** da empresa [Curso em Vídeo](https://www.cursoemvideo.com/).

[Acesse o site aqui.](https://pitercoding.github.io/minhas-redes-sociais/)

## 🎯 Objetivo

Praticar conceitos fundamentais de desenvolvimento web, como estruturação de páginas, navegação com `iframe`, centralização de elementos, efeitos visuais e layout responsivo.

## 💻 Tecnologias Utilizadas

- HTML5
- CSS3
- `iframe` para navegação interna
- Layout centrado e responsivo
- Efeitos com `hover` e `box-shadow`

## 🧑‍🎓 Sobre Mim

Sou estudante de **Ciência da Computação** e estou constantemente aprendendo e evoluindo na área de desenvolvimento web. Este projeto faz parte do meu portfólio de estudos.

## 📸 Visão Geral

A interface simula um smartphone com atalhos para acessar páginas como:

- GitHub
- LinkedIn
- Instagram
- Last.fm
- Facebook

## 🚀 Como Usar

1. Clone este repositório:
```
git clone https://github.com/seu-usuario/minhas-redes-sociais.git
```
2. Abra o arquivo `index.html` no navegador.

3. Clique nos ícones laterais para navegar pelas redes sociais.

## 📁 Estrutura do Projeto
```
minhas-redes-sociais/
├── index.html
├── estilos/
│ └── social.css
│ └── style.css
├── imagens/
│ ├── logo-github.jpg
│ ├── logo-instagram.jpg
│ ├── ...
│ └── frame-iphone.png
├── github.html
├── linkedin.html
└── ...
```

## 🧠 Aprendizados

* Uso de iframe para navegação interna
* Posicionamento com `position: absolute` e `transform`
* Criação de layout com imagens e efeitos visuais
* Personalização de botões e hover com CSS

## 📌 Licença
Projeto de uso educacional e pessoal, sem fins comerciais.