diff --git a/Thumbs.db b/Thumbs.db new file mode 100644 index 0000000..bb2ac03 Binary files /dev/null and b/Thumbs.db differ diff --git a/images/Thumbs.db b/images/Thumbs.db index 7360d0e..72200c6 100644 Binary files a/images/Thumbs.db and b/images/Thumbs.db differ diff --git a/images/icons/iconfinder_Behance_2745025.svg b/images/icons/iconfinder_Behance_2745025.svg new file mode 100644 index 0000000..e6c13b4 --- /dev/null +++ b/images/icons/iconfinder_Behance_2745025.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/iconfinder_LinkedIN_2744970.svg b/images/icons/iconfinder_LinkedIN_2744970.svg new file mode 100644 index 0000000..2948b75 --- /dev/null +++ b/images/icons/iconfinder_LinkedIN_2744970.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/iconfinder_github_287583.svg b/images/icons/iconfinder_github_287583.svg new file mode 100644 index 0000000..8c5a5df --- /dev/null +++ b/images/icons/iconfinder_github_287583.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..7253db1 --- /dev/null +++ b/index.html @@ -0,0 +1,195 @@ + + + + + Desafio 1 + + + + + + + + +
+ LogoWooMakeCoders + +
+ + + +
+ + +
+

BEM VIND@

+

Maiara Costa

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+ + + + + Borboleta + +
+ + + + +
+

Serviços

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +
+ +
+ +
+ Websites +

Websites

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed

+
+ +
+ Templates +

Templates

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed

+
+ +
+ Temas +

Temas Wordpress

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+
+ + +
+

Meus Trabalhos

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +
+ + + + + +
+
+ Website1 +
Thumbnail Thumbnail ThumbnailThumbnailThumbnailThumbnail
+
+ +
+ Website2 +
Thumbnail caption
+
+
+ Website3 +
Thumbnail caption
+ +
+ + +
+ +
+ + + + + + +
+ +

Quem sou eu

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +
+ +
+ Fotografia +
Joana D'arc
+
+ + + +

Sobre mim

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +

Habilidades

+ + +
+ + 70% + + + + 50% + + + + 70% + + + + 100% +
+ +
+ + +
+

Contato

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+ +
+ +
+ meuemail@mail.com

+ +55 21 987654-321 +
+ +

Mídias

+ +
+ +
+ behance icon + github icon + linkedin icon +
+ +
+ + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a4a374b --- /dev/null +++ b/style.css @@ -0,0 +1,409 @@ +@import url('https://fonts.googleapis.com/css?family=Lato|Source+Sans+Pro:600'); + + +*{ + margin: 0; + padding: 0; +} + +#servicos, #contato, #trabalhos, #sobreeu { + padding: 3% 1%; +} + + + +#trabalhos p, #sobreeu p, #contato p , #servicos p{ + letter-spacing:1px; + word-wrap: break-word; + white-space: pre-wrap; + padding: 0 5%; + text-align: center; + +} + + + +body{ + background: #FFCC1D; + font-family: 'Lato', sans-serif; +} + + +#trianglePath1 { + fill: #fdad1a; + stroke: #fdad1a; +} + +hr{ + border: 0; + margin: 1% 2%; + height: 1px; + align-items: center; + background: #333; +} + + +section > h1 { + color:#EE1E53; + text-align: center; + padding-bottom: 2%; + font-family: 'Source Sans Pro', sans-serif; + font-size: 30px; +} + +header{ + display: flex; + flex-direction: row; + background: black; + justify-content: space-between; + align-items: flex-start; + padding: 1% 3%; +} + +header img{ + max-width: 440px; + max-height: 40px; + +} + +header nav{ + align-self: center; +} + +header nav ul{ + display: flex; + flex-direction: row; + list-style:none; +} + + +header nav ul li a { + text-decoration-line: none; + color:white; + margin-right: 20px; + padding: 10px; +} + +header nav ul li a:hover{ + border: 1px solid #D9CE8F; +} + +#welcome { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + padding: 30px; + + background: + + linear-gradient( + rgba(238, 32, 84, 0.92), + rgba(238, 32, 84, 0.92) + ), + + url("images/Slider.png"); + + padding-top: 5%; + background-size: contain; + padding-bottom: 10%; +} + + + + +#textos{ + width: 400px; + margin-left: 160px; +} + +#textos h1{ + padding-top: 70px; + padding-bottom: 20px; + color: black; + font-weight: bolder; +} + +#textos p{ + padding-top: 20px; + color:white; + +} + + +#welcome img{ + max-width: 300px; + max-height: 300px; + padding-right: 80px; +} + +/* SERVICOS 8 */ + + +#servicos{ + background: #191A1C; +} + +#servicos p { + text-align: center; + color: #C8905C; +} + + +#container{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + padding-bottom: 4%; + padding-top: 4%; +} + + + +#container div{ + flex-grow: 1; + flex-basis: 100px; + text-align: center; + margin: 0 3%; +} + + +#servicos div h3{ + color: #ED8731; +} + +#servicos div p{ + color: white; +} + +#servicos div h3, #servicos div p{ + padding: 10px 0; + +} + +#servicos div img{ + border-radius: 50%; + width: 100px; + height: 100px; + border: 4px solid white; +} + +/* trabalhos */ + +#trabalhos{ + background: #FDAD1A; +} + +#trabalhos nav ul{ + display: flex; + flex-direction: row; + justify-content: flex-start; + padding: 2px 30px; +} + + + +#trabalhos nav ul li{ + padding: 5px 20px; + list-style: none; + border: 1px solid black; + margin: 10px 0 10px 0; +} + +nav ul li:hover { + background: black; + color:white; +} + + +#trabalhos div.works{ + padding: 0 40px; + display:flex; + flex-direction: row; + justify-content: space-between; + padding-bottom: 50px; + flex-wrap: wrap; +} + +#trablahos div.works figure{ + border: thin #c0c0c0 solid; + display: flex; + flex-flow: column; + padding: 5px; + max-width: 220px; + margin: auto; +} + +#trabalhos div.works figure img { + width: 310px; + height: 310px; + border-bottom: 1px solid black; + display: block; +} + +#trabalhos div.works figure figcaption { + + display: block; + padding: 30px 0px; + text-indent: 20px; + text-align: center; + + color: #fff; + font: italic smaller sans-serif; + + background: black; + width: 310px; + word-break: break-all; + +} + +/* quem sou eu */ + +#sobreeu{ + + background: #191A1C; + align-items: center; + padding-bottom: 3%; +} + +#sobreeu figure img{ + padding: 20px 0; + display: block; + margin-left: auto; + margin-right: auto; + +} + +#sobreeu figure figcaption{ + color:#E27E28; + text-align: center; + padding-bottom: 10px; + font-weight: bolder; + +} + +#sobreeu p{ + color: #C8905C; +} + +#icons{ +text-align: center; +display: flex; +flex-direction:row; +justify-content: center; +} + +#icons img{ +height: 30px; + margin: 10px; +} + + +section#sobreeu h3:nth-of-type(1){ + color:#E27E28; + text-align: center; + padding-top: 10px; + font-weight: bold; + padding-bottom: 2%; + font-family: 'Source Sans Pro', sans-serif; + + +} + +section#sobreeu h3:nth-of-type(2){ + color:#E27E28; + margin: 1% 5%; + padding: 30px 0; + font-family: 'Source Sans Pro', sans-serif; + + +} + + + +#sobreeu h3 + p{ /* pega o p que esta abaixo do h3 */ + color:white; + text-align: center; +} + + +progress { + background-color: white; + width: 300px; + height: 26px; + border: 1px solid white; + display: block; + margin: 1% 5%; + +} + +progress::-webkit-progress-bar { + background-color: white; + + +} +progress::-webkit-progress-value { + background-color: #822051; +} + + +progress::-moz-progress-bar { /* Firefox */ + background: #822051; +} + + #sobreeu label { + color:white; + margin: 1% 5%; +} + + +/* CONTATO */ + +#contato{ + background: #FDAD1A; +} + + address, #contato h3{ + text-align: center; +} + +#contato h3{ + font-family: 'Source Sans Pro', sans-serif; +} + +address{ + padding: 2% 0; +} + + +#contato h3 + hr { + margin: 1% 15%; +} + + + +a[href^="mailto:"] { + text-decoration-line: none; + border: 1px solid white; + color:black; + padding: 5px 40px; + margin-bottom: 20px; +} + +a[href^="tel:"] { + text-decoration-line: none; + color:white; + padding: 5px 40px; +} + + +footer{ + background: #191A1C; + color:white; + text-align: center; + padding-top: 4px; + padding-bottom: 2px; +} + +