diff --git a/css/capa.css b/css/capa.css
new file mode 100644
index 0000000..3e0903a
--- /dev/null
+++ b/css/capa.css
@@ -0,0 +1,3 @@
+main .capa {
+ width: 100%;
+}
diff --git a/css/footer.css b/css/footer.css
new file mode 100644
index 0000000..31f765e
--- /dev/null
+++ b/css/footer.css
@@ -0,0 +1,17 @@
+footer {
+ background-color: black;
+ color: white;
+ padding: 1em;
+}
+
+footer div,
+footer p {
+ /* padding: 1em; */
+ display: flex;
+ justify-content: center;
+ gap: 1em;
+}
+
+footer p {
+ font-size: small;
+}
diff --git a/css/header.css b/css/header.css
new file mode 100644
index 0000000..330984b
--- /dev/null
+++ b/css/header.css
@@ -0,0 +1,20 @@
+header {
+ width: 100%;
+}
+
+header div {
+ min-height: 20px;
+ background-color: black;
+}
+
+header div {
+ display: flex;
+ justify-content: center;
+ padding: 10px;
+}
+
+header .capa {
+ width: 100%;
+ min-height: 300px;
+ object-fit: cover;
+}
diff --git a/css/p1.css b/css/p1.css
new file mode 100644
index 0000000..31d728a
--- /dev/null
+++ b/css/p1.css
@@ -0,0 +1,28 @@
+main {
+ padding: 2em 0;
+}
+
+main .p1 {
+ display: flex;
+ gap: 1em;
+ align-items: center;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ padding: 1em;
+}
+
+main .p1 * {
+ flex: 1 1 300px;
+}
+
+main .p1 div {
+ /* width: 500px; */
+ max-width: 100%;
+}
+
+main .p1 img {
+ height: 300px;
+ /* flex: 1 1 100px; */
+ object-fit: contain;
+ margin: auto;
+}
diff --git a/css/p2.css b/css/p2.css
new file mode 100644
index 0000000..42d4a4b
--- /dev/null
+++ b/css/p2.css
@@ -0,0 +1,21 @@
+.p2 {
+ display: flex;
+ gap: 1em;
+ flex-wrap: wrap;
+ background-color: #ddd;
+ padding: 1em;
+}
+
+.p2 div {
+ box-shadow: 0px 4px 20px #0000003b;
+ text-align: center;
+ padding: 1em;
+ flex: 1 1 250px;
+ background-color: white;
+ padding: 3em 0;
+ align-items: center;
+}
+
+.p2 img {
+ width: 70px;
+}
diff --git a/css/p3.css b/css/p3.css
new file mode 100644
index 0000000..e2078b4
--- /dev/null
+++ b/css/p3.css
@@ -0,0 +1,22 @@
+.p3 {
+ background-color: #00c8ff;
+}
+
+.p3 section {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1em;
+ flex-wrap: 1 1 100px;
+ justify-content: center;
+}
+
+.p3 section div {
+ background-color: white;
+ box-shadow: 0px 0px 3px black;
+ padding: 5em 10px;
+ box-shadow: 0px 4px 16px #00000055;
+ text-align: center;
+ translate: 0px -75px;
+ width: 400px;
+ margin: 1em;
+}
diff --git a/css/p4.css b/css/p4.css
new file mode 100644
index 0000000..e23af4d
--- /dev/null
+++ b/css/p4.css
@@ -0,0 +1,25 @@
+/* .p4 {
+ display: flex;
+} */
+
+.p4 section {
+ gap: 1em;
+ align-items: center;
+ display: flex;
+ flex: 1 1 200px;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.p4 section div {
+ padding: 1em;
+}
+
+.p4 section div,
+.p4 section img {
+ width: 400px;
+}
+
+/* .p4 section img {
+ width: 100%;
+} */
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..58af355
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,31 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
+
+@import "header.css";
+@import "p1.css";
+@import "p2.css";
+@import "p3.css";
+@import "p4.css";
+@import "capa.css";
+@import "footer.css";
+
+* {
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+ font-family: "Inter";
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0px;
+}
+
+h1 {
+ font-size: 3rem;
+ padding: 0px;
+ margin: 0px;
+}
+
+.container {
+ width: 900px;
+ max-width: 100%;
+ margin: auto;
+}
diff --git a/imgs/Group 7.png b/imgs/Group 7.png
new file mode 100644
index 0000000..1c314d5
Binary files /dev/null and b/imgs/Group 7.png differ
diff --git a/imgs/bag.png b/imgs/bag.png
new file mode 100644
index 0000000..cc589c4
Binary files /dev/null and b/imgs/bag.png differ
diff --git a/imgs/bill.svg b/imgs/bill.svg
new file mode 100644
index 0000000..ef7dde1
--- /dev/null
+++ b/imgs/bill.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/imgs/coin.png b/imgs/coin.png
new file mode 100644
index 0000000..d24ad6a
Binary files /dev/null and b/imgs/coin.png differ
diff --git a/imgs/coin.svg b/imgs/coin.svg
new file mode 100644
index 0000000..a35b36f
--- /dev/null
+++ b/imgs/coin.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/imgs/facebook.svg b/imgs/facebook.svg
new file mode 100644
index 0000000..932e61b
--- /dev/null
+++ b/imgs/facebook.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/imgs/glass.png b/imgs/glass.png
new file mode 100644
index 0000000..ee68371
Binary files /dev/null and b/imgs/glass.png differ
diff --git a/imgs/instagram.svg b/imgs/instagram.svg
new file mode 100644
index 0000000..b4ca66b
--- /dev/null
+++ b/imgs/instagram.svg
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/imgs/laptop.svg b/imgs/laptop.svg
new file mode 100644
index 0000000..10f0b00
--- /dev/null
+++ b/imgs/laptop.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/imgs/m3.png b/imgs/m3.png
new file mode 100644
index 0000000..ed64203
Binary files /dev/null and b/imgs/m3.png differ
diff --git a/imgs/mobile.svg b/imgs/mobile.svg
new file mode 100644
index 0000000..be408ca
--- /dev/null
+++ b/imgs/mobile.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/imgs/note.png b/imgs/note.png
new file mode 100644
index 0000000..94c5574
Binary files /dev/null and b/imgs/note.png differ
diff --git a/imgs/notebook.png b/imgs/notebook.png
new file mode 100644
index 0000000..5d94877
Binary files /dev/null and b/imgs/notebook.png differ
diff --git a/imgs/pcs.png b/imgs/pcs.png
new file mode 100644
index 0000000..b715118
Binary files /dev/null and b/imgs/pcs.png differ
diff --git a/imgs/pcs.svg b/imgs/pcs.svg
new file mode 100644
index 0000000..63349f5
--- /dev/null
+++ b/imgs/pcs.svg
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/imgs/shop.png b/imgs/shop.png
new file mode 100644
index 0000000..5940676
Binary files /dev/null and b/imgs/shop.png differ
diff --git a/imgs/youtube.svg b/imgs/youtube.svg
new file mode 100644
index 0000000..c2ef882
--- /dev/null
+++ b/imgs/youtube.svg
@@ -0,0 +1,3 @@
+
+
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2ccb237
--- /dev/null
+++ b/index.html
@@ -0,0 +1,117 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
Teste
+
Título
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
+ quae ad, neque tenetur voluptatem porro est. Impedit nobis sed
+ libero repellat quidem velit molestias, expedita dolore dolor
+ voluptates dolores consequuntur.
+
+
+
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+ euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Cras euismod enim non dui fringilla
+ interdum.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+ euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Cras euismod enim non dui fringilla
+ interdum.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+ euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Cras euismod enim non dui fringilla
+ interdum.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+ euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit. Cras euismod enim non dui fringilla
+ interdum.
+
+
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
+ vulputate sapien non libero faucibus interdum. In eget tincidunt
+ ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique
+ auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis
+ venenatis.
+
+
+
+
+
+
+