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

+
+
+
+ + +