diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..4190647 --- /dev/null +++ b/css/style.css @@ -0,0 +1,337 @@ +body{ + margin: 0; + font-family: 'Roboto', sans-serif; + color: #ffffff; + background-color: #000000; +} + +h1{ + color: #fb396E; + font-size: 35px; + font-weight: normal; + margin: 0; + text-align: center; + padding-top: 10px; +} + +h2{ + color: #fdad1a; + font-size: 25px; + font-weight: normal; + margin: 0; + text-align: center; + padding-top: 10px; +} + +h3{ + color: #fdad1a; + font-size: 20px; + font-weight: normal; + text-align: center; +} + +h4{ + color: #202020; + font-size: 15px; + font-weight: normal; + text-align: center; + } + + + +.container{ + width: 95%; + max-width: 1000px; /*largura maxima*/ + margin: auto; + + +} + +.portfolio { + width: 95%; + /*max-width: 1000px; /*largura maxima*/ + background-color: #FDAD1A; + padding: 0px 70px 0px 70px; +} + + +.img-circle { + border-radius: 50%; + border:7px solid white; + max-width:200px; + max-height:200px; + width: auto; + height: auto; + + +} + +.flex-colunas{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; /* permite a queda de linhas */ + margin-top: 10px; + +} + + +.coluna-inferior{ + width: 30%; /* equivale a 300px */ + text-align: center; + margin-bottom: 30px; + margin-top: 20px; + +} + +.coluna-inferior img{ + width: 100%; /* para as imagens se ajustarem ao tamanho da tela */ + margin-bottom: 30px; + background-color: #000; +} + +.coluna-inferior2 { + width: 30%; /* equivale a 300px */ + margin-bottom: 20px; + background: #000; + text-align: center; + +} + +.coluna-inferior2 img{ + width: 100%; /* para as imagens se ajustarem ao tamanho da tela */ + +} + +.banner { + + position: relative; + width: 100%; + top: 0; + left: 0; + + } + +.banner p { + color: #fff; + font-size: 15px; + } + + + +.img-borb { + position: absolute; + top: 70px; + left: 850px; + width: 280px; + height: 250px; +} + + +.cor { + background : rgba(251, 57, 110, 0.77); + width: 100%; + height: 100%; + position: absolute; + top: 0; +} + +.textBanner { + position: absolute; + top: 30px; + left: 0; + color: #000; + font-weight: bold; + letter-spacing: 2px; + font-size: 35px; +} + +.textBanner2 { + position: relative; + top: 0; + left: 0; + color: #000; + letter-spacing: 2px; + font-size: 25px; + } + +#spaceTextBanner { + padding: 60px; + +} + +.barra { + height: 30px; + width: 500px; + background: #fff; + padding: 1px; + margin: 20px; + } + +.barra-bar { + color: #fff; + height: 30px; + text-align: left; + padding-left: 10px; + width: 300px; + background: #a24168; + +} + +.barra-bar2 { + color: #fff; + height: 30px; + text-align: left; + padding-left: 10px; + width: 200px; + background: #a24168; +} + +.barra-bar3 { + color: #fff; + height: 30px; + text-align: left; + padding-left: 10px; + width: 150px; + background: #a24168; +} + #topo{ + width: 100%; + height: 80px; + background-color: #000000; + } + + #logo{ + float: left; + margin-top: 15px; + margin-left: 2px; +} + +#menu{ + background-color: #000000; +} + +#menu ul{ + margin: 0; + padding: 0; + list-style: none; /* retira o marcador */ +} + +#menu ul li{ + display: inline-block; + padding: 20px 28px; + /* para que o sub-menu pegue este item com referencia no posicionamento */ + position: relative; +} + +#menu ul li a{ + color: #ffffff; + text-decoration: none; + letter-spacing: 2px; /* espaçamento entre as letras*/ + word-spacing: -3px; /* espaçamento entre palavras*/ +} + +/* posiciona o menu a direita */ +#menu{ + float: right; +} + +/* coloca a bordar quadrada nos itens do menu ao passar o mouse, padding coloca espaço dentro da borda*/ + +#menu a:hover{ + border: solid #FDAD1A; + padding: 5px; +} + + +button { + background: #FFA500; + border: 1px solid #000000; + color: #000000; + padding: 5px 20px 5px 20px; + margin-top: 10px; +} + +button:hover { + background: #000000; + color: #ffffff; +} + + +.fab { + color: #000; + background: yellow; + border-radius: 50%; + padding: 10px; + margin: 10px; + + +} + + + +#sobremim { + text-align: center; + height: 1150px; +} + +#sobremim p { + color: #ffffff; + +} + +#sobremim h2 { + text-align: left; + padding: 30px; + +} + +.sobre-image { + display: block; + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; +} + +.sobre-mim { + color: #FFA500; + text-align: center; + font-size: 20px; + +} + +#contato { + background: #FFA500; + padding: 50px; + text-align: center; + text-decoration: none; +} + +#contato a { + border: 2px #ffffbf solid; + color: #000; + padding: 10px 80px 10px 80px; + text-decoration: none; +} + + +#icones a { + border: 0; + padding: 4px; + + + +} +#contato p { + + color: #000000; + +} + +#contato h3 { + + color: #ffffff; +} + +#rodape { + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..52f3bfc --- /dev/null +++ b/index.html @@ -0,0 +1,202 @@ + + + + + Womarkers Code - Adail Sena + + + + + + + + +
+
+ + + +
+
+ + + + + + + +
+ +

Serviços

+

Área reservada para informações sobre os meus serviços...

+
+
+
+ + Websites +

Websites

+

Veja os Websites feito para diversos seguimentos

+
+ +
+ Templates +

Templates

+

Escolha um modelo para o seu website, podendo fazer as customizações desejadas

+ +
+ +
+ Temas Wordpress +

Temas Wordpress

+

Aqui você verá alguns temas

+
+
+ +
+ +
+ +

Meus Trabalhos

+

Trabalhos realizados em vários mercados do Brasil

+
+ + + + + + +
+
+ + imagem1 +

Mulheres na Tecnologia

+

Fazemos diversos encontros nas principais capitais do Brasil

+
+
+ + imagem2 +

Linguagens

+

Utilizamos as linguagens do mercado

+
+
+ + imagem3 +

Tendências

+

Estamos sempre antenados com as novas tendências

+
+ +
+
+ + +
+ +

Quem sou eu

+

Aqui você terá mais informações sobre mim.

+
+ +
+ +
+ Adail Sena +
+
+ + + + + + + + + + + + +

Sobre Mim

+

Sou formada em Análise de Sistemas e Administração de empresas pela Faculdade Integradas Anglo Americano.

+

Trabalho no PRODERJ (órgão de TI do Estado do Rio de Janeiro na área de análise de sistemas, atuando em projetos e desenvolvimento)

+ + +

Habilidades

+
+
HTML & CSS
+
+ +
+
Java Script
+
+ +
+
SQL
+
+ +
+
PHP
+
+ +
+ +
+

Contato

+

Abaixo todos os meus contatos.

+
+
+ aasena01@gmail.com +
+

WhatSapp: +55 21 997468667

+
+

Mídias

+
+
+ + + + + + + + + + + + + + + + + +
+ +
+ + + + \ No newline at end of file