diff --git a/assets/images/banner-infra-300x250-1.webp b/assets/images/banner-infra-300x250-1.webp new file mode 100644 index 00000000..637c6be6 Binary files /dev/null and b/assets/images/banner-infra-300x250-1.webp differ diff --git a/assets/images/fav-icon.webp b/assets/images/fav-icon.webp new file mode 100644 index 00000000..2bd3adc3 Binary files /dev/null and b/assets/images/fav-icon.webp differ diff --git a/assets/images/logo-apiki-blog-wordpress-e1613483808992.webp b/assets/images/logo-apiki-blog-wordpress-e1613483808992.webp new file mode 100644 index 00000000..52013a69 Binary files /dev/null and b/assets/images/logo-apiki-blog-wordpress-e1613483808992.webp differ diff --git a/assets/images/marca-apiki-blog-h552.webp b/assets/images/marca-apiki-blog-h552.webp new file mode 100644 index 00000000..4f83e401 Binary files /dev/null and b/assets/images/marca-apiki-blog-h552.webp differ diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 00000000..1daa0c5c --- /dev/null +++ b/css/reset.css @@ -0,0 +1,156 @@ +/*Reset*/ +*, +*::before, +*::after { + box-sizing: border-box; +} +h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 { + margin-top: 0; + margin-bottom: 0.5rem; + font-family: var(--font); + font-weight: 700; + line-height: 1.2; +} + +a { + text-decoration: none; + text-decoration: none; + color: var(--bs-dark); +} + +h1, .h1 { + font-size: calc(1.375rem + 1.5vw); +} +@media (min-width: 1200px) { +h1, .h1 { + font-size: 2.5rem; +} +} + +h2, .h2 { + font-size: calc(1.325rem + 0.9vw); +} +@media (min-width: 1200px) { +h2, .h2 { + font-size: 2rem; +} +} + +h3, .h3 { + font-size: calc(1.3rem + 0.6vw); +} +@media (min-width: 1200px) { +h3, .h3 { + font-size: 1.75rem; +} +} + +h4, .h4 { + font-size: calc(1.275rem + 0.3vw); +} +@media (min-width: 1200px) { +h4, .h4 { + font-size: 1.5rem; +} +} + +h5, .h5 { + font-size: 1.25rem; +} + +h6, .h6 { + font-size: 1rem; +} + +p { + margin-top: 0; + margin-bottom: 1rem; + font-family: var(--font); +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +:root { + --bs-dark: #000; + --bs-light: #fff; + --bs-gray: #67666a; + --bs-light-gray: #cccc; + --bs-pink: #ba007c; + --font: 'Montserrat',Helvetica,Arial,sans-serif; +} +body { + line-height: 1; + margin: 0; + font-family: var(--font); + display: block; + position: relative; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +figure { + margin: 0; + padding: 0; +} + +.container { + width: 100%; + padding-right: var(--bs-gutter-x, 0.75rem); + padding-left: var(--bs-gutter-x, 0.75rem); + margin-right: auto; + margin-left: auto; +} + +@media (min-width: 576px) { + .container { + max-width: 540px; + } +} +@media (min-width: 768px) { + .container { + max-width: 720px; + } +} +@media (min-width: 992px) { + .container { + max-width: 960px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1140px; + } +} +@media (min-width: 1400px) { + .container { + max-width: 1320px; + } +} + +.text-center { + text-align: center; +} +.text-left { + text-align: left; +} +.text-right { + text-align: right; +} +.row { + display: flex; + flex-wrap: wrap; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..2fc69d69 --- /dev/null +++ b/css/style.css @@ -0,0 +1,226 @@ +/*Topo*/ +.topo { + background-color: var(--bs-dark); + padding: 10px 0; +} + +.header-page { + background-color: var(--bs-gray); + color: var(--bs-light); + padding: 20px 0; + margin-bottom: 40px; +} + +/*Listagem do blog*/ +#lista-posts { + width: 100%; + margin-bottom: 50px; + justify-content: center; +} +#lista-posts a { + display: block; + overflow: hidden; + margin-bottom: 30px; + transition: 00.2s; +} + +#lista-posts a .box-item-blog { + display: flex; + align-items: center; + border: 1px solid var(--bs-light-gray); + transition: 0.2s; + flex-wrap: wrap; +} + +#lista-posts a .box-item-blog img { + display: block; + width: 40%; + height: auto; + margin-right: 3%; + transition: .2s; +} +#lista-posts a .box-item-blog figcaption { + width: 57%; + padding: 1rem; +} + +#lista-posts a .box-item-blog h2 { + color: var(--bs-dark); +} + +#lista-posts a .box-item-blog p { + color: var(--bs-gray); +} + +#lista-posts a .box-item-blog h2, +#lista-posts a .box-item-blog p { + transition: 0.2s; +} + +#lista-posts a:hover { + box-shadow: 10px 11px 30px 0px rgb(168 163 168 / 49%); +} +#lista-posts a:hover img { + transform: scale(1.1); +} +#lista-posts a:hover .box-item-blog h2, +#lista-posts a:hover .box-item-blog p { + color: var(--bs-pink); +} + +@media (max-width: 768px) { + #lista-posts a .box-item-blog img{ + width: 40%; + } +} +@media (max-width: 600px) { + #lista-posts a .box-item-blog { + flex-direction: column; + } + #lista-posts a .box-item-blog img { + width: 100%; + } + #lista-posts a .box-item-blog figcaption { + width: 100%; + margin-top: 20px; + } +} + +.box-btns { + display: flex; + width: 100%; + justify-content: center; +} +.btn { + display: block; + padding: 20px; + font-weight: 500; + background-color: var(--bs-pink); + color: var(--bs-light); + font-size: 1.2rem; + transition: 00.2s; + font-family: var(--font); + border: 0; + cursor: pointer; +} +.btn:hover { + background-color: var(--bs-dark); +} + + +/*Interna*/ +#exibe-post { + width: 70%; + display: flex; + align-items: center; + flex-direction: column; +} +#exibe-post article { + width: 100%; +} +.wp-block-image, +.wp-block-image img, +.wp-caption, +.wp-caption img { + width: 100% !important; + height: auto !important; +} + +.box-image-internal { + width: 100%; + margin-bottom: 50px; +} +.box-image-internal img { + display: block; + width: 100%; +} +.content-blog { + justify-content: space-between; +} + + +.author { + display: flex; + border: 1px solid #ccc; + padding: 20px; + box-shadow: 10px 11px 30px 0px rgba(168,163,168,0.49); + border-radius: 20px; + margin-top: 40px; +} +.author img { + border-radius: 50%; + border: 6px solid var(--bs-pink); + margin-right: 1.2rem; + display: block; + width: 15%; +} +.author .box-text-author { + display: flex; + flex-direction: column; + justify-content: center; + width: 85%; +} +.author .box-text-author p.name { + font-weight: 700; + color: var(--bs-pink); + font-size: 20px; +} +.author .box-text-author p.description { + margin-bottom: 0; + color: var(--bs-gray); +} +@media (max-width: 1100px) { + .author img { + width: 40%; + } +} + +@media (max-width: 576px) { + .author { + flex-direction: column; + align-items: center; + } + .author img { + width: 40%; + } + .author .box-text-author { + text-align: center; + margin-top: 10px; + } +} +/*Side bar*/ +.side-bar { + width: 24%; +} +.side-bar a { + display: block; + width: 100%; +} +.side-bar a img { + display: block; + padding: 20px; + border: 1px solid var(--bs-light-gray); + box-shadow: 10px 11px 30px 0px rgba(168,163,168,0.49); + width: 100%; +} +@media (max-width: 768px) { + .side-bar { + width: 100%; + } + #exibe-post { + width: 100%; + } +} + + + +/*Footer*/ +footer { + background-color: var(--bs-dark); + margin-top: 100px; + padding: 50px 0; +} +footer p { + color: var(--bs-light); + margin: 0; +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..df98f3fc --- /dev/null +++ b/index.html @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + Blog Dev - Apiki + + +
+
+ + +
+
+
+
+
+

Blog Dev - Apiki

+
+
+
+
+
+
+
+ + + + + +
+
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/js/index.js b/js/index.js new file mode 100644 index 00000000..ad0f1f7a --- /dev/null +++ b/js/index.js @@ -0,0 +1,50 @@ +const httprequest = new XMLHttpRequest(); +const listaPosts = document.querySelector("#lista-posts"); + +httprequest.open("GET", "https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518"); +httprequest.send(); + +let posts; +httprequest.onreadystatechange = function() { + if (httprequest.readyState === 4 && httprequest.status === 200) { + posts = JSON.parse(httprequest.response); + exibePosts(); + } +} + +function exibePosts() { + let html = ""; + posts.forEach((post) => { + html += ` +
+ ${post.title.rendered} +
+

${post.title.rendered}

+

By: ${post._embedded['author'][0].name}

+

${post.excerpt.rendered}

+
+
+ ` + }); + + listaPosts.innerHTML += html; +} + +const btCarregarMais = document.querySelector("#load-more"); +btCarregarMais.addEventListener("click", carregarMais); + +let page = 1 + +function carregarMais() { + httprequest.open('GET', 'https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518&page=' + (page + 1), true) + httprequest.onload = function() { + + if (httprequest.status === 200 && httprequest.status === 400) { + exibePosts(); + } + } + httprequest.send() + page++ +} + + diff --git a/js/loader.js b/js/loader.js new file mode 100644 index 00000000..8e3cc634 --- /dev/null +++ b/js/loader.js @@ -0,0 +1,4 @@ +const loader = document.querySelector("#loader"); +window.onload = function () { + loader.parentNode.removeChild(loader); +} \ No newline at end of file diff --git a/js/single.js b/js/single.js new file mode 100644 index 00000000..8cec85bb --- /dev/null +++ b/js/single.js @@ -0,0 +1,39 @@ +const httprequest = new XMLHttpRequest(); +const listaPosts = document.querySelector("#exibe-post"); + +const params = new URL(location.href).searchParams; +const slug = params.get('slug'); + +httprequest.open("GET", "https://blog.apiki.com/wp-json/wp/v2/posts?_embed&slug="+slug); +httprequest.send(); + + + +let post; +httprequest.onreadystatechange = function(){ + if(httprequest.readyState === 4 && httprequest.status === 200){ + post = JSON.parse(httprequest.response); + exibePost(); + } +} + +function exibePost () { + let html = ""; + post.forEach((post) => { + //Altera h1 da página interna + document.querySelector(".title-page").innerHTML= post.title.rendered; + + html += `
+ ${post.title.rendered} +
+
${post.content.rendered}
+
+ ${post._embedded['author'][0].name} +
+

${post._embedded['author'][0].name}

+

${post._embedded['author'][0].description}

+
+
` + }); + listaPosts.innerHTML = html; +} \ No newline at end of file diff --git a/single.html b/single.html new file mode 100644 index 00000000..4373602d --- /dev/null +++ b/single.html @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + Blog Dev - Apiki + + +
+
+ + +
+
+
+
+

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