diff --git a/Thumbs.db b/Thumbs.db new file mode 100644 index 0000000..43245c8 Binary files /dev/null and b/Thumbs.db differ diff --git a/images/Thumbs.db b/images/Thumbs.db index 7360d0e..040d9ac 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..8e65b4b --- /dev/null +++ b/index.html @@ -0,0 +1,198 @@ + + + + + + + + + Portfolio Maiara Costa + + + + + +
+ + +
+ +
+ +
+

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.

+
+ +
+
+
+
+
+ + +
+ + +
+ +
+ + +
+

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. +

+ +
+ + + +
+
+ Projeto 1 +
+
Projeto 1
+ Thumbnail caption +
+ +
+ +
+ Projeto 2 + +
+
Projeto 2
+ Thumbnail caption +
+ +
+ +
+ Projeto 3 + +
+
Projeto 3
+ 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% + + + 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

+ +
+
+ Link para acessar meu Behance + Link para acessar meu GitHub + Link para acessar meu Linkedin +
+
+ + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..d291f1f --- /dev/null +++ b/main.js @@ -0,0 +1,74 @@ + +function remover(elem){ + elem.style.display = 'none'; + elem.remove(); + } + +var breakpoint = 767; + +if(window.innerWidth > breakpoint){ + const slides = document.querySelectorAll('.slide'); + const slider = document.querySelector('.slider'); + const anterior = document.querySelector('#anterior'); + const proximo = document.querySelector('#proximo'); + + const auto = true; + const intervalTime = 5000; + + let sliderInterval; + + const proximoSlide = function(){ + const current = document.querySelector('.current'); + + current.classList.remove('current'); + + if(current.nextElementSibling){ + current.nextElementSibling.classList.add('current'); + }else{ + slides[0].classList.add('current'); + } + + setTimeout(function(){ + current.classList.remove('current'); + }); +} + + const anteriorSlide = function() { + + const current = document.querySelector('.current'); + current.classList.remove('current'); + + if(current.previousElementSibling){ + current.previousElementSibling.classList.add('current'); + }else{ + slides[slides.length-1].classList.add('current'); + } + + setTimeout(function(){ + current.classList.remove('current'); + }); +} + +proximo.addEventListener('click', function(e){ + proximoSlide(); +}); + +anterior.addEventListener('click',function(e){ + anteriorSlide(); +}); + + +if(auto){ + slideInterval = setInterval(proximoSlide, intervalTime); +} + +} else { + + var elem = document.querySelector('.slider'); + var elem1 = document.querySelector('div.buttons'); + + remover(elem); + remover(elem1); + +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..114f1bc --- /dev/null +++ b/style.css @@ -0,0 +1,460 @@ +@import url('https://fonts.googleapis.com/css?family=Open+Sans|Raleway:700,800,900'); + +* { margin: 0; padding: 0; } + +body{ + background: #FFCC1D; + font-size: 1em; + font-family: 'Open Sans', sans-serif; +} + +h1, h2, h3{ + font-family: 'Raleway', sans-serif; + text-transform: uppercase; + text-align: center; +} + +h1{ + color: black; + font-weight: bolder; + text-align: left; + font-size: 3.5em; +} + +h2{ + color:#EE1E53; + font-size: 2.5em; + padding-bottom: 0.5em; +} + +h3 { color: #ED8731; } + +section{ + padding-top: 2em; + padding-bottom: 1em; +} + +section > p { + letter-spacing:1px; + word-wrap: break-word; + white-space: pre-wrap; + padding: 0.5em 7em; + text-align: center; + line-height: 1.5em; +} + +#trianglePath1 { + fill: #fdad1a; + stroke: #fdad1a; + } + +.line, #last-line{ + border: 0; + margin: 2em 5em; + height: 0.063em; + align-items: center; + background: #333; +} + +#last-line{ margin: 2em 10em; } + +header{ + display: flex; + flex-direction: row; + background: #000; + justify-content: space-between; + align-items: flex-start; + padding: 0.8em 6.5em; +} + +header img{ + max-width: 440px; + max-height: 40px; +} + +header nav{ align-self: center; } + +header ul{ + display: flex; + flex-direction: row; + list-style:none; + flex-wrap: wrap; +} + +header a { + text-decoration-line: none; + color: #fff; + padding: 0.4em 0.5em; +} + +header a:hover{ border: 1px solid #D9CE8F; } + +#welcome { + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + padding: 7.5em 0; + background: linear-gradient(rgba(238, 32, 84, 0.92), rgba(238, 32, 84, 0.92) ), + url("images/Slider.png"); + background-size: contain; +} + +#textos{ + width: 400px; + margin-left: 10em; +} + +#textos h2{ + color: #000; + font-weight: bolder; + font-size: 2.5em; + text-align: unset; +} + +#textos p{ + padding-top: 1em; + color:#fff; + line-height: 1.5em; +} + +.slider{ + position: relative; + overflow: hidden; + width: 22vw; + margin: 3em 0; +} + +.slide{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + transition: opacity 0.4s ease-in-out; + background-size: contain; +} + +.current{ opacity: 1; } + +.slide:first-child{ background: url("images/slider01.png"); } + +.slide:nth-child(2){ background: url("images/Slider02.png"); } + +.slide:nth-child(3){ background: url("images/Slider03.png"); } + +.slide:first-child, .slide:nth-child(2), .slide:nth-child(3){ + background-repeat: no-repeat; + background-size: contain; +} + +img.slider{ padding-right: 4em; } + +#proximo, #anterior{ + position: absolute; + top: 39em; +} + +#proximo{ right: 10em; } +#anterior{ left: 52em; } + +.buttons button{ + border: 2px solid #fff; + color: #fff; + background-color: transparent; + cursor: pointer; + padding: 13px 15px; + border-radius: 2em; + outline: none; +} + +.buttons button:hover{ + background: #fff; + color: gray; +} + +#servicos{ + background: #191A1C; + color: #fff; +} + +#container{ + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + padding: 3em 0; +} + +#container .container-items{ + flex-grow: 1; + flex-basis: 100px; + text-align: center; +} + +.container-items p{ + text-align: center; + padding: 0 6em; } + +#servicos h3{ margin: 1em 0; } + +#servicos img{ + border-radius: 50%; + width: 100px; + height: 100px; + border: 4px solid #fff; +} + +#portfolio{ background: #FDAD1A; } + +#portfolio nav ul{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + padding: 0 4.8em; +} + +#portfolio li{ + list-style: none; + border: 0.5px solid #000; + margin: 0.7em 0.3em; + padding: 0.5em 1em; +} + +#portfolio li:hover { + background: #000; + color:#fff; +} + +.works{ + padding: 0 2.500em; + display:flex; + flex-direction: row; + justify-content: space-around; + padding-bottom: 3.125em; + flex-wrap: wrap; +} + +.works figure{ padding: 2em 2em; } + +.works figure img { + width: 310px; + height: 310px; + border-bottom: 1px solid #000; + display: block; +} + +.works figure figcaption { + display: block; + padding: 2em 0; + text-indent: 0.5em; + text-align: center; + color: #fff; + font: italic smaller sans-serif; + background: #000; + width: 310px; +} + +.fig-title{ + color: #ffcc1d; + padding-bottom: 1em; + font-weight: 700; +} + +#sobreeu{ + background: #191A1C; + padding-bottom: 3em; +} + +#sobreeu figure img{ + padding: 2em 0; + display: block; + margin-left: auto; + margin-right: auto; + max-width: 50%; +} + +#sobreeu figure figcaption{ + color:#E27E28; + text-align: center; + padding-bottom: 1.5em; + font-weight: bolder; +} + +#sobreeu p{ + color: #C8905C; + text-align: center; +} + +p#desc-sobre{ color: #fff; } + +#habilidade { + margin: 1em 5em; + padding: 0.5em 0; + text-align: left; +} + +.habilidades{ + display: flex; + flex-direction: column; + align-items: flex-start; + margin: 0 2em; +} + +.habilidades label{ color: #fff; margin: 0.5em 3.8em; } + +progress { + background-color: #fff; + width: 18em; + height: 1.7em; + border: 1px solid #fff; + display: block; + margin: 0.5em 3.8em; +} + +progress::-webkit-progress-bar { background-color: #fff;} + +progress::-webkit-progress-value {background-color: #822051;} + +progress::-moz-progress-bar { background: #822051; } + +progress::before{ + content: attr(value)'%'; + background: transparent; + position:absolute; + color: #fff; + font-weight: bold; +} + +#contato{ background: #FDAD1A; } + +#contato h3{ color: #000; } + +address{ + text-align: center; + padding: 1em 0; + margin: 1em 0; +} + +a[href^="mailto:"] { + text-decoration-line: none; + border: 1px solid #fff; + color:#000; + padding: 0.8em 2em; + margin-bottom: 1em; + font-weight: 700; +} + +a[href^="tel:"] { + margin-top: 2em; + display: block; + text-decoration-line: none; + color:white; + padding: 0.4em 2.5em; + font-weight: 900; +} + +#icons{ + text-align: center; + display: flex; + flex-direction:row; + justify-content: center; +} + +#icons img{ + height: 3em; + width: 3em; + margin: 0.7em; +} + +footer{ + background: #191A1C; + color:white; + text-align: center; + padding: 0.3em 0; +} + +@media screen and (min-width: 768px) and (max-width: 1024px) { + .line{ margin: 2em 3em; } + + h1{ font-size: 3em; } + + h2, #textos h2{ font-size: 2.25em; } + + h3{ font-size: 1.75em; } + + section > p{ line-height: 1.375em; padding: 0 6em; text-align: center; } + + header{ padding: 0.8em 3em; } + + #welcome{ flex-wrap: nowrap; padding-bottom: 8em; } + + #textos, #textos h1, #habilidade{ text-align: center; } + + + .habilidades{ align-items: center;} + + #textos { width: 400px; margin-left: 20px; } + + #container{ flex-direction: column; } + + #container .container-items{ margin: 2.5em 0;} + + .works figure{ padding: 5% 0; } + + #portfolio ul, #textos p { padding: 0 3.1em;} + + .slider{ margin: 10em 0;} + + #proximo{ right: 5em;} + + #anterior{ left: 32em;} + +} + + +@media screen and (max-width: 767px){ + + .line{ margin: 2em 2em; } + + #last-line { margin: 2em 5em; } + + section > p , #textos p { line-height: 1.25em; padding: 1.5em 3em;} + + h1{ font-size: 2em; } + + h2, #textos h2{ font-size: 1.5em; } + + h3{ font-size: 1.375em; } + + header, header ul, #container{ flex-direction: column; align-items: center; padding-bottom: 0.5em; } + + header li{ padding: 0.5em 0 ; } + + header img{ max-width: 440px; max-height: 80px; } + + #welcome{ justify-content: center; padding: 4em 0; } + + #welcome > img{ display: none; } + + #textos, h1{ margin: 0; text-align: center; } + + #container{ flex-direction: column; padding: 1em 0; } + + .container-items{ padding-bottom: 4em;} + + .container-items p{ padding: 0em 3em; } + + .portfolio ul, .habilidades{ align-items: center; } + + #portfolio nav ul{ padding: 0; margin: 0; justify-content: center; } + + .works figure{ padding: 1em 0; display: block; margin-left: auto; margin-right: auto; + } + + .works figure img, .works figure figcaption{ width: 259px; } + +} + +