diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..5008ddfcf Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100755 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/challange/1/index.html b/challange/1/index.html new file mode 100755 index 000000000..9520dd526 --- /dev/null +++ b/challange/1/index.html @@ -0,0 +1,47 @@ + + + + + + + Challenge 3 + + + +
+
+

Converse chuck taylor all star low top

+
+
+ converse-chuck-taylor +

$65.00

+

Free shipping

+
+
+

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple. +
+ More information → +

+

+

+
+
+
+
+
+

+

+

Product details

+ +

+ +
+
+ + \ No newline at end of file diff --git a/challange/1/style.css b/challange/1/style.css new file mode 100755 index 000000000..052697041 --- /dev/null +++ b/challange/1/style.css @@ -0,0 +1,138 @@ +body { + font-family: 'Courier New', Courier, monospace; + margin: 0; + padding: 0; +} + +.container { + width: 60%; + margin: 0 auto; + border: 4px solid black; + margin-top: 50px; +} + +header { + background-color: #eee; +} + +.header-title { + text-align: center; + text-transform: uppercase; + margin: 0; + padding: 0.5em 0.75em; + position: relative; +} + +.header-title::before { + content: "SALE"; + font-size: 0.7em; + position: absolute; + top: -15px; + left: -15px; + color: white; + background-color: red; + padding: 0.3em; +} + +.item-head__image { + width: 20%; + margin: 1em 0 0 0; +} + +.price { + margin: 0; +} + +.shipping { + margin: 0; + text-transform: uppercase; + font-weight: 700; + font-size: 0.85em; + color: #777; + /* transition: text-transform ease-in-out 2000ms; */ +} + +.information__link:link { + color: black; +} + +.information__link:hover { + text-decoration: none; +} +.information__link:focus, +.information__link:visited { + color: black; +} + +.color__black { + background-color: black; + height: 25px; + width: 25px; + display: inline-block; +} + +.color__blue { + background-color: rgb(55, 121, 235); + height: 25px; + width: 25px; + display: inline-block; +} + +.color__red { + background-color: rgb(219, 57, 57); + height: 25px; + width: 25px; + display: inline-block; +} + +.color__yellow { + background-color: rgb(221, 215, 56); + height: 25px; + width: 25px; + display: inline-block; +} + +.color__green { + background-color: rgb(56, 221, 97); + height: 25px; + width: 25px; + display: inline-block; +} + +.color__brown { + background-color: rgb(53, 39, 13); + height: 25px; + width: 25px; + display: inline-block; +} + +.detail__title { + margin: 0; +} + +.detail__title { + text-transform: uppercase; +} + +.detail__list { + list-style-type: square; +} + +.btn { + background-color: black; + color: white; + width: 100%; + padding: 1em; + border: none; + text-transform: uppercase; + font-weight: 700; + font-size: 1em; + transition: background-color ease-in-out 250ms; + border-top: 4px solid black; + cursor: pointer; +} + +.btn:hover { + color: black; + background-color: white; +} diff --git a/challange/2/index.html b/challange/2/index.html new file mode 100755 index 000000000..3ac3d56fb --- /dev/null +++ b/challange/2/index.html @@ -0,0 +1,68 @@ + + + + + + + Challenge 4 + + + +
+
+

Converse chuck taylor all star low top

+
+
+
+ converse-chuck-taylor +
+
+

$65.00

+

Free shipping

+

+

+ Ready to dress up or down, these classic canvas Chucks are an everyday wardrobe staple. +
+ More information → +

+

+

+
+
+
+
+
+

+
+
+

Product details

+
    +
  • Lightweight, durable canvas sneaker
    • +
  • Lightly padded footbed for added comfort
    • +
  • Iconic Chuck Taylor ankle patch.
    • +
+
+
+ + + + +
+ + \ No newline at end of file diff --git a/challange/2/style.css b/challange/2/style.css new file mode 100755 index 000000000..5b871fd87 --- /dev/null +++ b/challange/2/style.css @@ -0,0 +1,168 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Courier New', Courier, monospace; +} + +.container { + width: 80%; + margin: 0 auto; + border: 4px solid black; + margin-top: 50px; +} + +header { + background-color: #eee; +} + +.header-title { + text-align: center; + text-transform: uppercase; + margin: 0; + padding: 0.5em 0.75em; + position: relative; +} + +.header-title::before { + content: "SALE"; + font-size: 0.7em; + position: absolute; + top: -15px; + left: -15px; + color: white; + background-color: red; + padding: 0.5em 0.6em; +} + +.img { + float: left; + width: 33%; +} + +.item-head__image { + width: 100%; +} + +.short-info { + float: left; + padding: 2em; + width: 33%; +} + +.price { + float: left; + margin: 0; +} + +.shipping { + float: right; + margin: 0; + text-transform: uppercase; + font-weight: 700; + margin-top: .1em; + color: #777; + /* transition: text-transform ease-in-out 2000ms; */ +} + +.information { + clear: both; +} + +.information__link:link { + color: black; +} + +.information__link:hover { + text-decoration: none; +} +.information__link:focus, +.information__link:visited { + color: black; +} + +.color { + padding: 1em 0 0 0; +} + +.color__black { + background-color: black; + height: 20px; + width: 20px; + display: inline-block; +} + +.color__blue { + background-color: rgb(55, 121, 235); + height: 20px; + width: 20px; + display: inline-block; +} + +.color__red { + background-color: rgb(219, 57, 57); + height: 20px; + width: 20px; + display: inline-block; +} + +.color__yellow { + background-color: rgb(221, 215, 56); + height: 20px; + width: 20px; + display: inline-block; +} + +.color__green { + background-color: rgb(56, 221, 97); + height: 20px; + width: 20px; + display: inline-block; +} + +.color__brown { + background-color: rgb(53, 39, 13); + height: 20px; + width: 20px; + display: inline-block; +} + +.detail-info { + float: left; + width: 33%; + padding: 2em; +} + +.detail__title { + margin: 0; +} + +.detail__title { + text-transform: uppercase; +} + +.detail__list { + list-style-type: square; +} + +.btn { + background-color: black; + color: white; + width: 100%; + padding: 1em; + border: none; + text-transform: uppercase; + font-weight: 700; + font-size: 1em; + transition: background-color ease-in-out 250ms; + border-top: 4px solid black; + cursor: pointer; +} + +.btn:hover { + color: black; + background-color: white; +} diff --git a/custom/box-model/index.html b/custom/box-model/index.html new file mode 100755 index 000000000..5717620e7 --- /dev/null +++ b/custom/box-model/index.html @@ -0,0 +1,20 @@ + + + + + + + Box model + + + +
+ This is box content +
+ Lorem ipsum dolor sit. + Totam, fugit nam! Ab. + Amet accusamus odit mollitia! + Ab cum dicta quas! + adventure-characters + + \ No newline at end of file diff --git a/custom/box-model/style.css b/custom/box-model/style.css new file mode 100755 index 000000000..6f7a67f95 --- /dev/null +++ b/custom/box-model/style.css @@ -0,0 +1,16 @@ +.box { + border: 2px solid black; + padding: 1em 2em; + background-color: red; +} + +.post-img { + width: 300px; + margin: 50px; +} + +a:link { + padding: 20px; + background-color: aquamarine; + display: inline-block; +} \ No newline at end of file diff --git a/custom/float-layout/index.html b/custom/float-layout/index.html new file mode 100644 index 000000000..fc085198c --- /dev/null +++ b/custom/float-layout/index.html @@ -0,0 +1,16 @@ + + + + + + + Float layout + + + +
Float
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus soluta nam quae numquam suscipit itaque, facere accusamus assumenda. Atque, nobis nam, sunt architecto consectetur autem deserunt repellat quidem, tenetur ipsam ducimus sed. Repellendus, repellat quidem. Nisi itaque distinctio vel, maxime assumenda neque quam nostrum quas rem quos molestias corrupti. Accusamus in nobis placeat laboriosam perferendis officiis, nisi ipsam esse sapiente fugit magni dignissimos earum commodi nostrum quas rerum culpa nam consectetur dicta reprehenderit illo eum cum? In repellat accusamus dolore.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia earum optio, explicabo quibusdam corporis fuga vitae et quo. Aliquid debitis modi quisquam, quasi exercitationem odio eius reprehenderit ipsum ex, alias voluptatibus harum, ab dolores. Neque dicta consectetur cum saepe sit magnam? Minus maxime alias rerum esse fugiat placeat consequuntur dignissimos perferendis sapiente dolor omnis, porro explicabo id mollitia illo veritatis beatae dolore, assumenda eaque eveniet iste quidem pariatur tenetur vitae! Iusto voluptates, vitae corporis incidunt quam at perspiciatis harum quas nostrum laborum laboriosam nesciunt porro quod dolores eaque natus odio, soluta dolor quibusdam fuga iure earum veniam perferendis sed. Blanditiis sapiente inventore ipsam ipsum eveniet! Suscipit corporis ipsa magnam adipisci, aperiam, laboriosam quaerat officiis asperiores consequatur saepe minima, ducimus sit fugiat facilis omnis quia ratione dignissimos? Eveniet atque molestias nobis totam molestiae non porro at vel ex officia impedit rerum est, blanditiis voluptatum voluptas sint eaque dignissimos temporibus neque magni asperiores ab excepturi? Praesentium vero voluptatibus reprehenderit quam facere soluta eveniet eligendi nostrum aliquam voluptate fugiat, doloremque nulla eum officiis architecto numquam. Tempore quo consequuntur voluptatem asperiores atque quos eos placeat dolore. Numquam fuga unde tempore vitae consequuntur. Necessitatibus soluta ad ex hic in cumque, dolore aliquid eveniet excepturi optio!

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam totam quo voluptatibus fuga veniam? Laboriosam, aperiam! Aspernatur, quia animi unde, recusandae quasi maiores at aperiam minus harum iste voluptatem id iusto asperiores, blanditiis ipsum enim vero vel eveniet assumenda! Labore magnam eaque voluptatibus, quas expedita voluptates odio aperiam architecto deleniti eum tenetur rem beatae sed, ea excepturi fugit ad molestiae. Temporibus similique modi voluptatibus architecto, impedit voluptates aut sed vel quam eum exercitationem asperiores aspernatur blanditiis reprehenderit, natus, est inventore! Tenetur consequuntur tempora fugiat harum quasi earum optio, beatae ratione laudantium soluta molestias dolor quidem velit nam obcaecati laboriosam est minima eveniet nesciunt suscipit, omnis officiis, autem iure. Ratione, laudantium suscipit. Molestias nemo a qui. Tempore esse facere labore, nisi voluptas veniam libero quae nobis fuga quisquam corporis nemo autem quibusdam doloribus laborum eligendi impedit ab vero consequatur delectus, sit est doloremque dolores aliquam. Perferendis quo minus excepturi fugit distinctio quasi ad non beatae magni placeat, laboriosam, nobis voluptate atque totam rerum sint consectetur sapiente voluptatibus consequatur? Neque quisquam quidem at. Ad, exercitationem voluptates cupiditate consectetur nesciunt nostrum beatae corrupti sed tempora dicta similique voluptate fugit aut eligendi praesentium! Perspiciatis dignissimos officiis aut ratione, facilis laudantium sequi repudiandae voluptatem, laboriosam veniam porro officia minus provident quas maiores ea reiciendis. Quaerat veniam consequatur, asperiores quo sit id autem ad pariatur unde quas tempore error est odio aut excepturi, aliquid esse accusantium, sint assumenda consequuntur commodi voluptas? Voluptatibus illum animi ratione id consequatur veritatis nisi impedit, minus temporibus iusto quos corrupti ea vitae maiores error itaque exercitationem quas! Non officia debitis dicta quod facilis velit aut ipsam repellat error, commodi deleniti ducimus! Aut soluta amet eos hic dolor! Consectetur, quod quis! Quia autem iste, quaerat nemo excepturi hic id, nostrum reprehenderit alias, voluptas iure! Odio esse ipsum adipisci impedit quam velit, sint aspernatur officiis fuga neque repudiandae blanditiis ad amet architecto odit reprehenderit illum porro, animi corporis. Doloremque excepturi similique, deserunt tempora consequatur deleniti laudantium nihil saepe. Neque officiis fugiat ipsam molestiae aliquid excepturi enim, optio vel iure possimus cum minima rerum provident laudantium est a necessitatibus iste aut repudiandae recusandae accusantium. Accusamus voluptatibus, quidem illo eligendi dolore beatae numquam voluptatum vero deleniti dignissimos enim delectus. Nihil officia assumenda ipsa at sapiente itaque illo magnam quidem consectetur nulla quas corporis repellat maxime adipisci vel soluta placeat vero, odio molestias ex deleniti blanditiis. Natus nihil, non aspernatur blanditiis perspiciatis dolorem quae numquam hic, ut ullam iste illo. Corrupti temporibus repudiandae molestias laborum veniam id adipisci accusamus error? Dolore consectetur quod quo consequuntur esse autem optio error eius aspernatur voluptatem! Nam delectus assumenda quo nulla provident nostrum quia cupiditate fugiat veritatis nihil ullam eius saepe consectetur, quidem corporis reprehenderit voluptatibus iste nemo alias accusamus exercitationem beatae vitae rerum? Eius ullam et sint hic? Veniam nostrum nam aliquam magni illum! Velit minima praesentium mollitia. Ab quia necessitatibus delectus omnis cupiditate, aut iure consequuntur quod perferendis ducimus ut commodi repellendus magni perspiciatis aperiam ipsam tempora ad amet autem veritatis quos sunt facilis nesciunt tempore! Tenetur, sunt?

+ + \ No newline at end of file diff --git a/custom/float-layout/style.css b/custom/float-layout/style.css new file mode 100644 index 000000000..b116885b5 --- /dev/null +++ b/custom/float-layout/style.css @@ -0,0 +1,15 @@ +.float { + float: left; + margin: 15px; + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.text { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} \ No newline at end of file diff --git a/custom/layout/c1.txt b/custom/layout/c1.txt new file mode 100755 index 000000000..e178bd4d7 --- /dev/null +++ b/custom/layout/c1.txt @@ -0,0 +1,23 @@ +Số hóa +Sản phẩm +Thứ ba, 12/7/2022, 19:00 (GMT+7) +Người dùng Việt thờ ơ với MacBook Pro M2 +Doanh số MacBook Pro M2 không được như mong đợi khi nhiều người cho biết thất vọng với thiết kế và hiệu năng trên model mới. + +Huy Tuấn, nhân viên thiết kế đồ họa đang làm việc tại TP HCM, dự định lên đời MacBook Pro M2. Tuy nhiên, sau khi trải nghiệm trực tiếp tại cửa hàng, anh đã quyết định chọn sản phẩm khác dù giá đắt hơn. + +Tuấn cho biết anh đã đọc thông tin trên một số trang công nghệ uy tín rằng mẫu laptop M2 mới của Apple có tốc độ đọc ghi SSD thấp hơn bản tiền nhiệm và gặp vấn đề về tản nhiệt. "Khi dùng thử ở cửa hàng, tôi càng thất vọng hơn về thiết kế của MacBook Pro M2. Máy không thay đổi gì so với Pro M1, chỉ có hai cổng Thunderbolt, rất bất tiện", Tuấn nói. + +Sau khi cân nhắc, anh quyết định mua MacBook Pro 14 inch. Với cùng cấu hình RAM 16 GB, bộ nhớ trong 512 GB, Pro 14 inch (2021) hiện có giá 48,5 triệu đồng, cao hơn 4,5 triệu đồng so với MacBook Pro M2. + +Huy Tuấn cho biết so với MacBook Pro M2, bản Pro 14 inch không bị lỗi thời về thiết kế, có thêm cổng HDMI, khe đọc thẻ nhớ SD và sạc MagSafe. Ngoài ra, máy được trang bị màn hình Liquid XDR HDR, độ phân giải 3.456 x 2.234 pixel, độ sáng 1.000 nit, trong khi màn hình của MacBook Pro M2 chỉ có độ phân giải 2.560 x 1.600 pixel, độ sáng 500 nit. + +MacBook Pro M2 chính hãng bán ra thị trường Việt Nam từ 7/7. + +Ông Nguyễn Lạc Huy, đại diện hệ thống CellphoneS, cho biết: "Trước khi MacBook Pro M2 về hàng, nhiều người đánh giá chip M2 sẽ mạnh vượt trội. Tuy nhiên, thực tế chip M2 chỉ tăng hiệu năng xử lý khoảng 20-25% so với M1 và chưa thể vượt M1 Pro. Với người dùng chuyên nghiệp, thường xuyên sử dụng tác vụ đồ họa nặng như render video, làm phim ... cần xử lý kỹ xảo chuyên sâu, dựng/xuất file 3D và các tác vụ liên quan đến AI, Macbook Pro 14 là sự lựa chọn hợp lý hơn", ông Huy phân tích. + +Đại diện hệ thống Minh Tuấn Mobile cũng xác nhận MacBook Pro M2 không phải model được người Việt ưa chuộng, lượng đặt mua thấp. Chính vì vậy, ngay khi lên kệ vào tuần trước, MacBook Pro M2 đã được các hệ thống giảm giá sâu đến 5 triệu đồng, nhưng doanh số vẫn không như kỳ vọng. + +Theo các chuyên gia, một trong những lý do khiến MacBook Pro M2 không được đón nhận là do chip mới không thực sự tạo khác biệt về hiệu năng. Sau hai tuần trải nghiệm, cây viết Tony Polanco của Tom’s Guide nhận xét: "Tôi không hiểu sao Apple lại tạo ra MacBook Pro M2. Với người dùng phổ thông, chip M2 quá dư thừa. Với các chuyên gia làm về đồ họa, âm thanh, MacBook Pro 14 inch với chip M1 là lựa chọn hợp lý hơn". + +Các hệ thống phân phối tại Việt Nam cho biết, từ khi ra mắt, doanh số MacBook Pro 14 inch luôn nằm trong danh sách laptop bán chạy. Khi Apple giới thiệu M2, lượng đặt mua sụt nhẹ do nhiều người chờ MacBook mới. Đến khi model mới lên kệ và người dùng không thấy sự chênh lệch rõ ràng giữa chip M1 và M2, doanh số MacBook Pro 14 bắt đầu tăng trưởng trở lại. \ No newline at end of file diff --git a/custom/layout/index.html b/custom/layout/index.html new file mode 100755 index 000000000..3400fcdec --- /dev/null +++ b/custom/layout/index.html @@ -0,0 +1,35 @@ + + + + + + C1 + + + +
+
+

Lorem, ipsum dolor.

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit, error.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores vero mollitia, expedita et inventore ducimus molestiae quasi. Sapiente praesentium id eaque illum, deserunt quidem illo, iste et maxime, magnam expedita libero a veniam accusamus aliquam similique explicabo vel. Ipsam quibusdam ut voluptatum velit optio, tempora id aliquid suscipit sint earum aspernatur sit a corporis at sed fugiat labore maiores porro quasi commodi fugit consectetur quo dicta. Eum rerum sapiente, atque deleniti esse distinctio eveniet facere unde, id ad autem commodi perferendis labore. Quis deleniti magni at placeat odio sequi voluptatum earum dolor voluptatibus velit ratione, nesciunt molestiae iusto exercitationem, veniam quam. Dolor illo debitis amet voluptatibus dolores quasi explicabo nisi labore adipisci vitae at ratione ab quos, nulla, autem molestias obcaecati voluptatem magni reprehenderit alias corrupti! Commodi voluptate tenetur dignissimos dolorum quae est. Esse praesentium vel hic ullam, soluta, dolores sit adipisci blanditiis sed eaque minima vitae eveniet id ipsam, similique excepturi animi itaque mollitia minus libero consequatur quisquam qui. Sed, doloribus temporibus eius quidem recusandae, sequi eos facilis sint aut quis officiis. Ad tenetur temporibus odit perspiciatis suscipit repellat aliquam aperiam voluptate tempore nulla delectus dolore, nemo quibusdam qui praesentium numquam saepe neque minima quaerat amet est! Nemo, pariatur!

+ Normal +
+
+
+
+

Lorem, ipsum.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, necessitatibus.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus obcaecati, velit, accusantium ab atque sed tempora amet quos culpa architecto porro facere alias molestias vel necessitatibus fuga laborum minima! Eum qui in explicabo. Aliquam, rem. Quibusdam nostrum a aperiam blanditiis non aspernatur iusto ipsum ipsam deleniti similique. Voluptas optio, placeat inventore vero praesentium id quae voluptatum iste dolor, dolorem maxime? Maiores ullam facilis voluptas consequuntur sint dolores aliquam aspernatur impedit voluptatem, voluptatum quis exercitationem asperiores illo maxime. Ipsum placeat doloribus vel quae architecto nesciunt eaque nulla voluptatem saepe deserunt hic nihil vero nobis ab sapiente quaerat eius, similique quos iure?

+ Ghost +
+
+
+
+

Lorem ipsum dolor sit.

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, itaque ipsa.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente numquam accusamus quisquam eum, officia at quia ratione accusantium voluptatum libero quod quae harum, ducimus dolor facere dolores aperiam, nesciunt optio placeat sit? Id, aspernatur! Repellendus, fugit provident ullam dolorum in delectus ducimus, tempora vero quod reprehenderit impedit! Maiores labore quas facere a repudiandae sed vel reprehenderit blanditiis unde dolor doloribus sit magni architecto nesciunt illum quae repellendus quisquam consequatur quod nostrum, est officiis. Saepe deleniti in voluptatum exercitationem reprehenderit. Cumque exercitationem nostrum quae dignissimos cum nulla eum sunt et adipisci odit excepturi eveniet reprehenderit commodi nesciunt repudiandae tempora, hic architecto, provident dolor ut debitis quas! Laborum sapiente quaerat perspiciatis adipisci aspernatur cum nam illo rem dignissimos soluta eum ipsam consectetur labore maxime, vel, quod omnis. Adipisci exercitationem in tempore aut nobis, blanditiis earum aperiam quaerat minima voluptates cumque labore deserunt eligendi quia. Optio amet nihil eveniet quidem consectetur tenetur praesentium, harum nam corporis excepturi earum odio unde suscipit rem cum hic qui placeat quo, molestias aspernatur, neque quaerat voluptates? Totam aliquid suscipit provident animi esse ex porro inventore repellendus est voluptatem minus quis velit sapiente, non iure ea minima nulla, ad soluta natus blanditiis excepturi? Officia molestiae ipsa suscipit perspiciatis.

+ Advance +
+
+ + \ No newline at end of file diff --git a/custom/layout/style.css b/custom/layout/style.css new file mode 100755 index 000000000..f1419a6b0 --- /dev/null +++ b/custom/layout/style.css @@ -0,0 +1,57 @@ +body { + margin: 0; + padding: 0; + font-family: 'Courier New', Courier, monospace; +} + +.container { + margin: 0 auto; +} + +section { + padding: 8em 6em; +} + +.start { + background-color: rgba(41, 62, 70, 1); + color: white; +} + +.middle { + background-color: rgb(44, 184, 182); +} + +.end { + background-color: rgb(250,250,250); +} + +a { + color: inherit; +} + +h1 { + margin: 0; + font-size: 2.5em; + font-weight: 700; +} + +h2 { + margin-top: 0; + font-size: 1.25em; + font-weight: 500; +} + +.btn { + padding: 1em 2.5em; + display: inline-block; + transition: all ease-out 250ms; +} + +.normal { + background-color: rgb(44, 184, 182); + +} + +.normal:hover { + background-color: rgba(35, 110, 75, 1); +} \ No newline at end of file diff --git a/custom/outline/index.html b/custom/outline/index.html new file mode 100755 index 000000000..b87034d66 --- /dev/null +++ b/custom/outline/index.html @@ -0,0 +1,16 @@ + + + + + + + Outline + + + +
+

Lorem ipsum dolor sit amet.

+ Button +
+ + \ No newline at end of file diff --git a/custom/outline/style.css b/custom/outline/style.css new file mode 100755 index 000000000..8ff875273 --- /dev/null +++ b/custom/outline/style.css @@ -0,0 +1,46 @@ +html { + font-family: 'Courier New', Courier, monospace; +} + +body { + margin: 0; +} + +.box { + width: 50%; + margin: 0 auto; +} + +h1 { + background-color: steelblue; + padding: 1em 3em; + outline: 5px solid steelblue; + outline-offset: 5px; + margin-bottom: 50px; + color: white; +} + +.button { + background-color: aquamarine; + display: inline-block; + text-decoration: none; + padding: 1em 3em; + outline: 3px solid white; + transition: outline-offset 250ms ease-in-out; + /* transition-duration: 250ms; */ + /* animation: move 3s ease infinite; */ + border-radius: 4px; + color: black; +} + +.button:hover { + outline-offset: -8px; + /* transform: rotate(45deg); */ +} + +/* +@keyframes move { + 50% { + transform: translate(calc(90vw - 200px), calc(90vh - 160px)); + } +} */ \ No newline at end of file diff --git a/custom/viewport-units/index.html b/custom/viewport-units/index.html new file mode 100755 index 000000000..68752e14e --- /dev/null +++ b/custom/viewport-units/index.html @@ -0,0 +1,18 @@ + + + + + + + Viewport Units + + + +
+

+ Lorem, ipsum dolor. +

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat velit odio illo dolores quis, nam accusamus quisquam, ducimus veniam, sapiente id. Facere expedita officia est minima officiis voluptate inventore. Error quod quasi, adipisci esse itaque maxime magni, omnis saepe sint, inventore dolorem ut facilis quibusdam cumque beatae corrupti laborum. Incidunt.

+ + \ No newline at end of file diff --git a/custom/viewport-units/style.css b/custom/viewport-units/style.css new file mode 100755 index 000000000..b0ef5c335 --- /dev/null +++ b/custom/viewport-units/style.css @@ -0,0 +1,10 @@ +body { + margin: 0; +} + +header { + background-color: purple; + /*10% of viewport's width of lesser demension*/ + width: 10vmin; + text-align: center; +} \ No newline at end of file diff --git a/final/02-HTML-Fundamentals/blog.html b/final/02-HTML-Fundamentals/blog.html old mode 100644 new mode 100755 diff --git a/final/02-HTML-Fundamentals/content.txt b/final/02-HTML-Fundamentals/content.txt old mode 100644 new mode 100755 diff --git a/final/02-HTML-Fundamentals/img/challenges.jpg b/final/02-HTML-Fundamentals/img/challenges.jpg old mode 100644 new mode 100755 diff --git a/final/02-HTML-Fundamentals/img/laura-jones.jpg b/final/02-HTML-Fundamentals/img/laura-jones.jpg old mode 100644 new mode 100755 diff --git a/final/02-HTML-Fundamentals/img/post-img.jpg b/final/02-HTML-Fundamentals/img/post-img.jpg old mode 100644 new mode 100755 diff --git a/final/02-HTML-Fundamentals/img/related-1.jpg b/final/02-HTML-Fundamentals/img/related-1.jpg old mode 100644 new mode 100755 diff --git a/final/02-HTML-Fundamentals/img/related-2.jpg b/final/02-HTML-Fundamentals/img/related-2.jpg old mode 100644 new mode 100755 diff --git a/final/02-HTML-Fundamentals/img/related-3.jpg b/final/02-HTML-Fundamentals/img/related-3.jpg old mode 100644 new mode 100755 diff --git a/final/02-HTML-Fundamentals/index.html b/final/02-HTML-Fundamentals/index.html old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/blog.html b/final/03-CSS-Fundamentals/blog.html old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/content.txt b/final/03-CSS-Fundamentals/content.txt old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/img/challenges.jpg b/final/03-CSS-Fundamentals/img/challenges.jpg old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/img/laura-jones.jpg b/final/03-CSS-Fundamentals/img/laura-jones.jpg old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/img/post-img.jpg b/final/03-CSS-Fundamentals/img/post-img.jpg old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/img/related-1.jpg b/final/03-CSS-Fundamentals/img/related-1.jpg old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/img/related-2.jpg b/final/03-CSS-Fundamentals/img/related-2.jpg old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/img/related-3.jpg b/final/03-CSS-Fundamentals/img/related-3.jpg old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/index.html b/final/03-CSS-Fundamentals/index.html old mode 100644 new mode 100755 diff --git a/final/03-CSS-Fundamentals/style.css b/final/03-CSS-Fundamentals/style.css old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/blog.html b/final/04-CSS-Layouts/blog.html old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/content.txt b/final/04-CSS-Layouts/content.txt old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/css-grid.html b/final/04-CSS-Layouts/css-grid.html old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/flexbox.html b/final/04-CSS-Layouts/flexbox.html old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/img/challenges.jpg b/final/04-CSS-Layouts/img/challenges.jpg old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/img/laura-jones.jpg b/final/04-CSS-Layouts/img/laura-jones.jpg old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/img/post-img.jpg b/final/04-CSS-Layouts/img/post-img.jpg old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/img/related-1.jpg b/final/04-CSS-Layouts/img/related-1.jpg old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/img/related-2.jpg b/final/04-CSS-Layouts/img/related-2.jpg old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/img/related-3.jpg b/final/04-CSS-Layouts/img/related-3.jpg old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/index.html b/final/04-CSS-Layouts/index.html old mode 100644 new mode 100755 diff --git a/final/04-CSS-Layouts/style.css b/final/04-CSS-Layouts/style.css old mode 100644 new mode 100755 diff --git a/final/05-Design/chair-1.jpg b/final/05-Design/chair-1.jpg old mode 100644 new mode 100755 diff --git a/final/05-Design/chair-2.jpg b/final/05-Design/chair-2.jpg old mode 100644 new mode 100755 diff --git a/final/05-Design/chair-3.jpg b/final/05-Design/chair-3.jpg old mode 100644 new mode 100755 diff --git a/final/05-Design/customers.jpg b/final/05-Design/customers.jpg old mode 100644 new mode 100755 diff --git a/final/05-Design/hero.jpg b/final/05-Design/hero.jpg old mode 100644 new mode 100755 diff --git a/final/05-Design/index.html b/final/05-Design/index.html old mode 100644 new mode 100755 diff --git a/final/05-Design/style.css b/final/05-Design/style.css old mode 100644 new mode 100755 diff --git a/final/06-Components/01-accordion.html b/final/06-Components/01-accordion.html old mode 100644 new mode 100755 diff --git a/final/06-Components/02-carousel.html b/final/06-Components/02-carousel.html old mode 100644 new mode 100755 diff --git a/final/06-Components/03-table.html b/final/06-Components/03-table.html old mode 100644 new mode 100755 diff --git a/final/06-Components/04-pagination.html b/final/06-Components/04-pagination.html old mode 100644 new mode 100755 diff --git a/final/06-Components/05-hero.html b/final/06-Components/05-hero.html old mode 100644 new mode 100755 diff --git a/final/06-Components/06-app-layout.html b/final/06-Components/06-app-layout.html old mode 100644 new mode 100755 diff --git a/final/06-Components/component.html b/final/06-Components/component.html old mode 100644 new mode 100755 diff --git a/final/06-Components/hero.jpg b/final/06-Components/hero.jpg old mode 100644 new mode 100755 diff --git a/final/06-Components/maria.jpg b/final/06-Components/maria.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/content.md b/final/07-Omnifood-Desktop/content.md old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/css/general.css b/final/07-Omnifood-Desktop/css/general.css old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/css/style.css b/final/07-Omnifood-Desktop/css/style.css old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/app/app-screen-1.png b/final/07-Omnifood-Desktop/img/app/app-screen-1.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/app/app-screen-2.png b/final/07-Omnifood-Desktop/img/app/app-screen-2.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/app/app-screen-3.png b/final/07-Omnifood-Desktop/img/app/app-screen-3.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/ben.jpg b/final/07-Omnifood-Desktop/img/customers/ben.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/customer-1.jpg b/final/07-Omnifood-Desktop/img/customers/customer-1.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/customer-2.jpg b/final/07-Omnifood-Desktop/img/customers/customer-2.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/customer-3.jpg b/final/07-Omnifood-Desktop/img/customers/customer-3.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/customer-4.jpg b/final/07-Omnifood-Desktop/img/customers/customer-4.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/customer-5.jpg b/final/07-Omnifood-Desktop/img/customers/customer-5.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/customer-6.jpg b/final/07-Omnifood-Desktop/img/customers/customer-6.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/dave.jpg b/final/07-Omnifood-Desktop/img/customers/dave.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/hannah.jpg b/final/07-Omnifood-Desktop/img/customers/hannah.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/customers/steve.jpg b/final/07-Omnifood-Desktop/img/customers/steve.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/eating.jpg b/final/07-Omnifood-Desktop/img/eating.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/favicon.png b/final/07-Omnifood-Desktop/img/favicon.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-1.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-1.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-10.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-10.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-11.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-11.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-12.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-12.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-2.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-2.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-3.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-3.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-4.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-4.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-5.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-5.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-6.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-6.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-7.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-7.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-8.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-8.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/gallery/gallery-9.jpg b/final/07-Omnifood-Desktop/img/gallery/gallery-9.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/hero.png b/final/07-Omnifood-Desktop/img/hero.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/logos/business-insider.png b/final/07-Omnifood-Desktop/img/logos/business-insider.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/logos/forbes.png b/final/07-Omnifood-Desktop/img/logos/forbes.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/logos/techcrunch.png b/final/07-Omnifood-Desktop/img/logos/techcrunch.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/logos/the-new-york-times.png b/final/07-Omnifood-Desktop/img/logos/the-new-york-times.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/logos/usa-today.png b/final/07-Omnifood-Desktop/img/logos/usa-today.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/meals/meal-1.jpg b/final/07-Omnifood-Desktop/img/meals/meal-1.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/meals/meal-2.jpg b/final/07-Omnifood-Desktop/img/meals/meal-2.jpg old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/img/omnifood-logo.png b/final/07-Omnifood-Desktop/img/omnifood-logo.png old mode 100644 new mode 100755 diff --git a/final/07-Omnifood-Desktop/index.html b/final/07-Omnifood-Desktop/index.html old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/content.md b/final/08-Omnifood-Responsive/content.md old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/css/general.css b/final/08-Omnifood-Responsive/css/general.css old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/css/queries.css b/final/08-Omnifood-Responsive/css/queries.css old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/css/style.css b/final/08-Omnifood-Responsive/css/style.css old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/app/app-screen-1.png b/final/08-Omnifood-Responsive/img/app/app-screen-1.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/app/app-screen-2.png b/final/08-Omnifood-Responsive/img/app/app-screen-2.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/app/app-screen-3.png b/final/08-Omnifood-Responsive/img/app/app-screen-3.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/ben.jpg b/final/08-Omnifood-Responsive/img/customers/ben.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/customer-1.jpg b/final/08-Omnifood-Responsive/img/customers/customer-1.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/customer-2.jpg b/final/08-Omnifood-Responsive/img/customers/customer-2.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/customer-3.jpg b/final/08-Omnifood-Responsive/img/customers/customer-3.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/customer-4.jpg b/final/08-Omnifood-Responsive/img/customers/customer-4.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/customer-5.jpg b/final/08-Omnifood-Responsive/img/customers/customer-5.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/customer-6.jpg b/final/08-Omnifood-Responsive/img/customers/customer-6.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/dave.jpg b/final/08-Omnifood-Responsive/img/customers/dave.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/hannah.jpg b/final/08-Omnifood-Responsive/img/customers/hannah.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/customers/steve.jpg b/final/08-Omnifood-Responsive/img/customers/steve.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/eating.jpg b/final/08-Omnifood-Responsive/img/eating.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/favicon.png b/final/08-Omnifood-Responsive/img/favicon.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-1.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-1.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-10.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-10.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-11.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-11.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-12.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-12.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-2.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-2.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-3.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-3.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-4.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-4.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-5.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-5.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-6.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-6.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-7.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-7.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-8.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-8.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/gallery/gallery-9.jpg b/final/08-Omnifood-Responsive/img/gallery/gallery-9.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/hero.png b/final/08-Omnifood-Responsive/img/hero.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/logos/business-insider.png b/final/08-Omnifood-Responsive/img/logos/business-insider.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/logos/forbes.png b/final/08-Omnifood-Responsive/img/logos/forbes.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/logos/techcrunch.png b/final/08-Omnifood-Responsive/img/logos/techcrunch.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/logos/the-new-york-times.png b/final/08-Omnifood-Responsive/img/logos/the-new-york-times.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/logos/usa-today.png b/final/08-Omnifood-Responsive/img/logos/usa-today.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/meals/meal-1.jpg b/final/08-Omnifood-Responsive/img/meals/meal-1.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/meals/meal-2.jpg b/final/08-Omnifood-Responsive/img/meals/meal-2.jpg old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/img/omnifood-logo.png b/final/08-Omnifood-Responsive/img/omnifood-logo.png old mode 100644 new mode 100755 diff --git a/final/08-Omnifood-Responsive/index.html b/final/08-Omnifood-Responsive/index.html old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/content.md b/final/09-Omnifood-Optimizations/content.md old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/css/general.css b/final/09-Omnifood-Optimizations/css/general.css old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/css/queries.css b/final/09-Omnifood-Optimizations/css/queries.css old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/css/style.css b/final/09-Omnifood-Optimizations/css/style.css old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/app/app-screen-1.png b/final/09-Omnifood-Optimizations/img/app/app-screen-1.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/app/app-screen-2.png b/final/09-Omnifood-Optimizations/img/app/app-screen-2.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/app/app-screen-3.png b/final/09-Omnifood-Optimizations/img/app/app-screen-3.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/apple-touch-icon.png b/final/09-Omnifood-Optimizations/img/apple-touch-icon.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/ben.jpg b/final/09-Omnifood-Optimizations/img/customers/ben.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/customer-1.jpg b/final/09-Omnifood-Optimizations/img/customers/customer-1.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/customer-2.jpg b/final/09-Omnifood-Optimizations/img/customers/customer-2.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/customer-3.jpg b/final/09-Omnifood-Optimizations/img/customers/customer-3.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/customer-4.jpg b/final/09-Omnifood-Optimizations/img/customers/customer-4.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/customer-5.jpg b/final/09-Omnifood-Optimizations/img/customers/customer-5.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/customer-6.jpg b/final/09-Omnifood-Optimizations/img/customers/customer-6.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/dave.jpg b/final/09-Omnifood-Optimizations/img/customers/dave.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/hannah.jpg b/final/09-Omnifood-Optimizations/img/customers/hannah.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/customers/steve.jpg b/final/09-Omnifood-Optimizations/img/customers/steve.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/eating.jpg b/final/09-Omnifood-Optimizations/img/eating.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/favicon-192.png b/final/09-Omnifood-Optimizations/img/favicon-192.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/favicon-512.png b/final/09-Omnifood-Optimizations/img/favicon-512.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/favicon.png b/final/09-Omnifood-Optimizations/img/favicon.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg b/final/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/hero-min.png b/final/09-Omnifood-Optimizations/img/hero-min.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/hero.png b/final/09-Omnifood-Optimizations/img/hero.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/hero.webp b/final/09-Omnifood-Optimizations/img/hero.webp old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/logos/business-insider.png b/final/09-Omnifood-Optimizations/img/logos/business-insider.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/logos/forbes.png b/final/09-Omnifood-Optimizations/img/logos/forbes.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/logos/techcrunch.png b/final/09-Omnifood-Optimizations/img/logos/techcrunch.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/logos/the-new-york-times.png b/final/09-Omnifood-Optimizations/img/logos/the-new-york-times.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/logos/usa-today.png b/final/09-Omnifood-Optimizations/img/logos/usa-today.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/meals/meal-1.jpg b/final/09-Omnifood-Optimizations/img/meals/meal-1.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/meals/meal-2.jpg b/final/09-Omnifood-Optimizations/img/meals/meal-2.jpg old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/img/omnifood-logo.png b/final/09-Omnifood-Optimizations/img/omnifood-logo.png old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/index.html b/final/09-Omnifood-Optimizations/index.html old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/js/script.js b/final/09-Omnifood-Optimizations/js/script.js old mode 100644 new mode 100755 diff --git a/final/09-Omnifood-Optimizations/manifest.webmanifest b/final/09-Omnifood-Optimizations/manifest.webmanifest old mode 100644 new mode 100755 diff --git a/starter/01-Start/background.jpg b/starter/01-Start/background.jpg new file mode 100755 index 000000000..1df614b00 Binary files /dev/null and b/starter/01-Start/background.jpg differ diff --git a/starter/01-Start/index.html b/starter/01-Start/index.html new file mode 100755 index 000000000..6b1b71ed2 --- /dev/null +++ b/starter/01-Start/index.html @@ -0,0 +1,42 @@ + + + + + + + Text + + + +
+

Basic Layout

+
+
+
+
+

Section 1

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum voluptatum blanditiis accusamus, autem, odit amet a esse facilis magnam mollitia vel ad labore aut tempora excepturi ex, illo inventore deserunt. +

+
+
+

Section 2

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum voluptatum blanditiis accusamus, autem, odit amet a esse facilis magnam mollitia vel ad labore aut tempora excepturi ex, illo inventore deserunt. +

+
+
+ +
+ + + diff --git a/starter/01-Start/leaves.webp b/starter/01-Start/leaves.webp new file mode 100755 index 000000000..8fd3e3300 Binary files /dev/null and b/starter/01-Start/leaves.webp differ diff --git a/starter/01-Start/restaurant.webp b/starter/01-Start/restaurant.webp new file mode 100755 index 000000000..5d4120d67 Binary files /dev/null and b/starter/01-Start/restaurant.webp differ diff --git a/starter/01-Start/style.css b/starter/01-Start/style.css new file mode 100755 index 000000000..ea6b3a656 --- /dev/null +++ b/starter/01-Start/style.css @@ -0,0 +1,29 @@ +body { + margin: 0 auto; + background-image: url(restaurant.webp); + background-size: cover; + background-position: center; +} + + +header { + background: #1F3265; + text-align: center; +} + +main { + background: #FF6239; + float: left; + width: 70%; +} + +aside { + background: #FFE209; + float: right; + width: 25%; +} + +footer { + background: #00FF09; + clear: both; +} \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/blog.html b/starter/02-HTML-Fundamentals/blog.html new file mode 100755 index 000000000..300fb26d8 --- /dev/null +++ b/starter/02-HTML-Fundamentals/blog.html @@ -0,0 +1,14 @@ + + + + + Blog + + + Back +

+ This is my blog +

+ + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/content.txt b/starter/02-HTML-Fundamentals/content.txt old mode 100644 new mode 100755 diff --git a/starter/02-HTML-Fundamentals/challenges.jpg b/starter/02-HTML-Fundamentals/img/challenges.jpg old mode 100644 new mode 100755 similarity index 100% rename from starter/02-HTML-Fundamentals/challenges.jpg rename to starter/02-HTML-Fundamentals/img/challenges.jpg diff --git a/starter/02-HTML-Fundamentals/laura-jones.jpg b/starter/02-HTML-Fundamentals/img/laura-jones.jpg old mode 100644 new mode 100755 similarity index 100% rename from starter/02-HTML-Fundamentals/laura-jones.jpg rename to starter/02-HTML-Fundamentals/img/laura-jones.jpg diff --git a/starter/02-HTML-Fundamentals/post-img.jpg b/starter/02-HTML-Fundamentals/img/post-img.jpg old mode 100644 new mode 100755 similarity index 100% rename from starter/02-HTML-Fundamentals/post-img.jpg rename to starter/02-HTML-Fundamentals/img/post-img.jpg diff --git a/starter/02-HTML-Fundamentals/related-1.jpg b/starter/02-HTML-Fundamentals/img/related-1.jpg old mode 100644 new mode 100755 similarity index 100% rename from starter/02-HTML-Fundamentals/related-1.jpg rename to starter/02-HTML-Fundamentals/img/related-1.jpg diff --git a/starter/02-HTML-Fundamentals/related-2.jpg b/starter/02-HTML-Fundamentals/img/related-2.jpg old mode 100644 new mode 100755 similarity index 100% rename from starter/02-HTML-Fundamentals/related-2.jpg rename to starter/02-HTML-Fundamentals/img/related-2.jpg diff --git a/starter/02-HTML-Fundamentals/related-3.jpg b/starter/02-HTML-Fundamentals/img/related-3.jpg old mode 100644 new mode 100755 similarity index 100% rename from starter/02-HTML-Fundamentals/related-3.jpg rename to starter/02-HTML-Fundamentals/img/related-3.jpg diff --git a/starter/02-HTML-Fundamentals/index.html b/starter/02-HTML-Fundamentals/index.html new file mode 100755 index 000000000..f530d87fd --- /dev/null +++ b/starter/02-HTML-Fundamentals/index.html @@ -0,0 +1,111 @@ + + + + + Basic language of Web + + + +
+

📘 The Code Magazine

+ + +
+ +
+
+

The Basic Language of the Web: HTML

+ Headshot of Laura Jones + +

+ Posted by Laura Jones on Monday, June 21st 2027 +

+ + HTML coed on a screen +
+ +

+ All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web. +

+ +

In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.

+ +

What is HTML?

+

+ HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language). +

+

+ HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites. +

+ +

In HTML, each element is made up of 3 parts:

+
    +
  1. The opening tag
    2. +
  2. The closing tag
    3. +
  3. The actual element
    4. +
+

+ You can learn more at the + MDN Web Docs. +

+ +

+ Why should you learn HTML? +

+ +

+ There are countless reasons for learning the fundamental language of the web. Here are 5 of them: +

+ +

+ Hopefully you learned something new here. See you next time! +

+
+ + + + + + \ No newline at end of file diff --git a/starter/02-HTML-Fundamentals/style.css b/starter/02-HTML-Fundamentals/style.css new file mode 100755 index 000000000..790d3dfd0 --- /dev/null +++ b/starter/02-HTML-Fundamentals/style.css @@ -0,0 +1,4 @@ +* { + box-sizing: border-box; + /* outline: 1px solid limegreen !important; */ +} \ No newline at end of file diff --git a/starter/03-CSS-Fundamentals/blog.html b/starter/03-CSS-Fundamentals/blog.html old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/content.txt b/starter/03-CSS-Fundamentals/content.txt old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/challenges.jpg b/starter/03-CSS-Fundamentals/img/challenges.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/laura-jones.jpg b/starter/03-CSS-Fundamentals/img/laura-jones.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/post-img.jpg b/starter/03-CSS-Fundamentals/img/post-img.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/related-1.jpg b/starter/03-CSS-Fundamentals/img/related-1.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/related-2.jpg b/starter/03-CSS-Fundamentals/img/related-2.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/img/related-3.jpg b/starter/03-CSS-Fundamentals/img/related-3.jpg old mode 100644 new mode 100755 diff --git a/starter/03-CSS-Fundamentals/index.html b/starter/03-CSS-Fundamentals/index.html old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/blog.html b/starter/04-CSS-Layouts/blog.html old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/content.txt b/starter/04-CSS-Layouts/content.txt old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/css-grid.html b/starter/04-CSS-Layouts/css-grid.html old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/flexbox.html b/starter/04-CSS-Layouts/flexbox.html old mode 100644 new mode 100755 index 496ef372a..3ce8fa826 --- a/starter/04-CSS-Layouts/flexbox.html +++ b/starter/04-CSS-Layouts/flexbox.html @@ -11,6 +11,7 @@ } .el--2 { background-color: orangered; + height: 250px; } .el--3 { background-color: green; @@ -40,6 +41,21 @@ margin: 40px; /* FLEXBOX */ + display: flex; + align-items: center; + justify-content: center; + } + + .el { + flex-basis: 210px; + /* flex-basis: 50px; */ + flex-grow: 1; + } + + .el--1 { + flex-grow: 2; + /* flex-grow: 1; */ + /* flex-grow: 1; */ } diff --git a/starter/04-CSS-Layouts/img/challenges.jpg b/starter/04-CSS-Layouts/img/challenges.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/laura-jones.jpg b/starter/04-CSS-Layouts/img/laura-jones.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/post-img.jpg b/starter/04-CSS-Layouts/img/post-img.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/related-1.jpg b/starter/04-CSS-Layouts/img/related-1.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/related-2.jpg b/starter/04-CSS-Layouts/img/related-2.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/img/related-3.jpg b/starter/04-CSS-Layouts/img/related-3.jpg old mode 100644 new mode 100755 diff --git a/starter/04-CSS-Layouts/index.html b/starter/04-CSS-Layouts/index.html old mode 100644 new mode 100755 index 15ecbeb77..41a9b9eb2 --- a/starter/04-CSS-Layouts/index.html +++ b/starter/04-CSS-Layouts/index.html @@ -25,8 +25,8 @@

📘 The Code Magazine

Blog Challenges - Flexbox - CSS Grid + Flexbox + CSS Grid @@ -38,10 +38,11 @@

The Basic Language of the Web: HTML

src="img/laura-jones.jpg" alt="Headshot of Laura Jones" height="50" - width="50" + width="50"\ + class="author-img" /> -

+

Posted by Laura Jones on Monday, June 21st 2027

diff --git a/starter/04-CSS-Layouts/style.css b/starter/04-CSS-Layouts/style.css old mode 100644 new mode 100755 index c879e79d2..d1dcd972f --- a/starter/04-CSS-Layouts/style.css +++ b/starter/04-CSS-Layouts/style.css @@ -2,6 +2,7 @@ /* border-top: 10px solid #1098ad; */ margin: 0; padding: 0; + box-sizing: border-box; } /* PAGE SECTIONS */ @@ -48,10 +49,7 @@ aside { background-color: #f7f7f7; border-top: 5px solid #1098ad; border-bottom: 5px solid #1098ad; - /* padding-top: 50px; - padding-bottom: 50px; */ - padding: 50px 0; - width: 500px; + padding: 50px 40px; } /* SMALLER ELEMENTS */ @@ -82,6 +80,8 @@ h4 { font-size: 20px; text-transform: uppercase; text-align: center; + margin-bottom: 20px; + } p { @@ -134,6 +134,7 @@ li:last-child { .related { list-style: none; + margin-left: 0; } body { @@ -265,3 +266,25 @@ footer p { nav p { font-size: 18px; } */ + +article { + width: 450px; + float: left; +} + +aside { + width: 300px; + float: right; +} + +footer { + clear: both; +} + +.author-img { + float: left; +} + +.author { + padding-left: 10px; +} \ No newline at end of file diff --git a/starter/05-Design/chair-1.jpg b/starter/05-Design/chair-1.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/chair-2.jpg b/starter/05-Design/chair-2.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/chair-3.jpg b/starter/05-Design/chair-3.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/customers.jpg b/starter/05-Design/customers.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/hero.jpg b/starter/05-Design/hero.jpg old mode 100644 new mode 100755 diff --git a/starter/05-Design/index.html b/starter/05-Design/index.html old mode 100644 new mode 100755 diff --git a/starter/05-Design/style.css b/starter/05-Design/style.css old mode 100644 new mode 100755 index 77dfdffa3..f5094ca1b --- a/starter/05-Design/style.css +++ b/starter/05-Design/style.css @@ -1,11 +1,18 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); + /* SPACING SYSTEM (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + +MAIN COLOR: #087f5b +GREY COLOR: #343a40 */ + + * { margin: 0; padding: 0; @@ -16,7 +23,8 @@ FONT SIZE SYSTEM (px) /* GENERAL STYLES */ /* ------------------------ */ body { - font-family: sans-serif; + font-family: 'Inter', sans-serif; + color: #343a40; } .container { @@ -39,6 +47,23 @@ h2 { column-gap: 80px; } +.btn:link, +.btn:visited { + background-color: #087f5b; + color: #fff; + text-decoration: none; + text-transform: uppercase; + padding: 16px 32px; + font-weight: 500; + font-size: 18px; + display: inline-block; +} + +.btn:hover, +.btn:active { + background-color: #099268; +} + /* ------------------------ */ /* COMPONENT STYLES */ /* ------------------------ */ @@ -57,10 +82,16 @@ header { h1 { margin-bottom: 24px; + font-size: 44px; + line-height: 1.1; + letter-spacing: -1px; } .header-text { margin-bottom: 24px; + font-size: 18px; + line-height: 1.6; + letter-spacing: 0.5px; } img { diff --git a/starter/06-Components/01-accordion.html b/starter/06-Components/01-accordion.html new file mode 100644 index 000000000..de5e925f4 --- /dev/null +++ b/starter/06-Components/01-accordion.html @@ -0,0 +1,74 @@ + + + + + + + Accordion Component + + + +
+
01
+
What is HTML?
+ + + +
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam consequatur fugit itaque tempore qui aliquid! Quod impedit cumque tenetur odit?

+ +
+
+ + \ No newline at end of file diff --git a/starter/06-Components/02-carousel.html b/starter/06-Components/02-carousel.html new file mode 100644 index 000000000..b27f3cc40 --- /dev/null +++ b/starter/06-Components/02-carousel.html @@ -0,0 +1,124 @@ + + + + + + + Carousel Document + + + +
+ Maria +
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt debitis vitae molestiae, velit aut facilis praesentium, quaerat earum a voluptate dolores quam sequi unde iure quia corrupti, repellendus eos animi! Accusantium voluptatum culpa tempore distinctio architecto odio minima qui provident.

+

Maria Deia Kiags

+

Content Manager of Momo

+
+ + +
+ + + + +
+
+ + \ No newline at end of file diff --git a/starter/06-Components/05-hero.html b/starter/06-Components/05-hero.html new file mode 100644 index 000000000..f9029f594 --- /dev/null +++ b/starter/06-Components/05-hero.html @@ -0,0 +1,129 @@ + + + + + + + + Document + + + + + + + +
+ +
+
+

Lorem ipsum dolor sit amet consectetur.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet ratione perspiciatis maxime magni + expedita + dicta exercitationem reprehenderit assumenda quam recusandae!

+ Start eating well +
+
+
+
+
+

Some random heading

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque exercitationem ratione numquam ab + ducimus + reprehenderit. Soluta accusamus minus quas iusto dignissimos quidem debitis, ipsum quod adipisci + praesentium cum, vel hic quam molestias tempore ad excepturi error iste fuga harum, obcaecati + molestiae. + Earum dicta ab sint odio? Aspernatur earum placeat blanditiis. Lorem ipsum dolor, sit amet + consectetur + adipisicing elit. Suscipit vel laborum sunt. Eos maxime quidem dicta tempora odio tempore + dignissimos? +

+
+
+ + + \ No newline at end of file diff --git a/starter/06-Components/06-app-layout.html b/starter/06-Components/06-app-layout.html new file mode 100644 index 000000000..c6249edf8 --- /dev/null +++ b/starter/06-Components/06-app-layout.html @@ -0,0 +1,88 @@ + + + + + + + App Layout Document + + + + + + MENU +
+
Email 12
+
Email 12
+
Email 12
+
Email 12
+
Email 12
+
Email 12
+
Email 12
+
Email 12
+
Email 12
+
Email 12
+
+
MAIN
+ + + + \ No newline at end of file diff --git a/starter/06-Components/hero.jpg b/starter/06-Components/hero.jpg old mode 100644 new mode 100755 diff --git a/starter/06-Components/maria.jpg b/starter/06-Components/maria.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/content.md b/starter/07-Omnifood-Desktop/content/content.md old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png b/starter/07-Omnifood-Desktop/content/img/app/app-screen-1.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png b/starter/07-Omnifood-Desktop/content/img/app/app-screen-2.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png b/starter/07-Omnifood-Desktop/content/img/app/app-screen-3.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg b/starter/07-Omnifood-Desktop/content/img/customers/ben.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-1.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-2.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-3.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-4.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-5.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg b/starter/07-Omnifood-Desktop/content/img/customers/customer-6.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg b/starter/07-Omnifood-Desktop/content/img/customers/dave.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg b/starter/07-Omnifood-Desktop/content/img/customers/hannah.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg b/starter/07-Omnifood-Desktop/content/img/customers/steve.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/eating.jpg b/starter/07-Omnifood-Desktop/content/img/eating.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/favicon.png b/starter/07-Omnifood-Desktop/content/img/favicon.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-1.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-10.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-11.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-12.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-2.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-3.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-4.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-5.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-6.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-7.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-8.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg b/starter/07-Omnifood-Desktop/content/img/gallery/gallery-9.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/hero.png b/starter/07-Omnifood-Desktop/content/img/hero.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png b/starter/07-Omnifood-Desktop/content/img/logos/business-insider.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/forbes.png b/starter/07-Omnifood-Desktop/content/img/logos/forbes.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png b/starter/07-Omnifood-Desktop/content/img/logos/techcrunch.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png b/starter/07-Omnifood-Desktop/content/img/logos/the-new-york-times.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png b/starter/07-Omnifood-Desktop/content/img/logos/usa-today.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg b/starter/07-Omnifood-Desktop/content/img/meals/meal-1.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg b/starter/07-Omnifood-Desktop/content/img/meals/meal-2.jpg old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png b/starter/07-Omnifood-Desktop/content/img/omnifood-logo.png old mode 100644 new mode 100755 diff --git a/starter/07-Omnifood-Desktop/css/genreral.css b/starter/07-Omnifood-Desktop/css/genreral.css new file mode 100644 index 000000000..a1309af6c --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/genreral.css @@ -0,0 +1,257 @@ +/*****************************************/ +/************** GENERAL *************/ +/*****************************************/ + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +body { + font-family: "Rubik", sans-serif; + font-weight: 400; + color: #555; + line-height: 1; +} + +.container { + max-width: 120rem; + padding: 0 3.2rem; + margin: 0 auto; +} + +/* FLEX */ +.flex { + display: flex; +} + +.justify-content--space-between { + justify-content: space-between; +} + +.justify-content--space-around { + justify-content: space-around; +} + +.align-item--center { + align-items: center; +} + +/* GRID */ +.grid { + display: grid; + column-gap: 4.8rem; + row-gap: 9.6rem; +} + +.grid--center-v { + align-items: center; +} + +.grid--center-h { + justify-items: center; +} + +.grid--2-cols { + grid-template-columns: repeat(2, 1fr); +} + +.grid--3-cols { + grid-template-columns: repeat(3, 1fr); +} + +.grid--4-cols { + grid-template-columns: repeat(4, 1fr); +} + +.grid--5-cols { + grid-template-columns: repeat(5, 1fr); +} + +.gap-sm { + gap: 1.6rem; +} + +.gap-md { + gap: 2.4rem; +} + +.gap-semi-lg { + gap: 4.4rem; +} + +.gap-lg { + gap: 9.6rem; +} + +/* HEADING */ +.heading-primary, +.heading-secondary { + font-weight: 600; + letter-spacing: -0.25px; +} + +.heading-primary { + font-size: 5.2rem; + line-height: 1.05; +} + +.heading-secondary { + font-size: 4.4rem; + line-height: 1.2; + margin-bottom: 9.6rem; +} + +.subheading { + display: block; + font-size: 1.6rem; + font-weight: 500; + text-transform: uppercase; + margin-bottom: 1.6rem; + letter-spacing: 0.75px; +} + +.heading-tertiary { + font-size: 3.6rem; + list-style: 1.2; + margin-bottom: 3.2rem; +} + +.background-primary { + background-color: #e67e22; +} + +.background-primary-shade { + background-color: #cf711f; +} + +.background-tints--0 { + background-color: #fdf2e9; +} + +.background-tints--1 { + background-color: #fff; +} + +.background-shade { + +} + +.color-primary { + color: #555; +} + +.color-tints { + +} + +.color-shade { + color: #333; +} + +.color--background-primary { + color: #e67e22; +} + +.color--background-primary-shade { + color: #cf711f; +} + +.color--background-tints { + color: #fdf2e9; +} + +.btn:link, +.btn:visited { + display: inline-block; + border-radius: 0.8rem; + text-decoration: none; + font-weight: 500; + font-size: 1.6rem; + transition: all 0.3s; +} + +.btn-padding-sm { + padding: 1.6rem 3.2rem; +} + +.link:link, +.link:visited { + display: inline-block; + color: #e67e22; + text-decoration: none; + border-bottom: 1px solid currentColor; + padding-bottom: 2px; + transition: all 0.3s; +} + +.link:hover, +.link:active { + color: #cf711f; + border-bottom: 1px solid transparent; +} + +.margin-right-sm { + margin-right: 1.6rem; +} + +.margin-left-sm { + margin-left: 1.6rem; +} + +.margin-top-sm { + margin-top: 1.6rem; +} + +.margin-top-med { + margin-top: 3.2rem; +} + +.margin-top-semi-lg { + margin-top: 4.4rem; +} + +.margin-top-lg { + margin-top: 5.2rem; +} + +.margin-bottom-sm { + margin-bottom: 1.6rem; +} + +.margin-bottom-md { + margin-bottom: 4.8rem !important; +} + +.center-text { + text-align: center; +} + +.list { + list-style: none; + display: flex; + flex-direction: column; + gap: 1.6rem; +} + +.list-item { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.list-icon { + width: 3rem; + height: 3rem; + color: #e67e22; +} + +strong { + font-weight: 500; +} \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/css/style.css b/starter/07-Omnifood-Desktop/css/style.css new file mode 100644 index 000000000..8563b561f --- /dev/null +++ b/starter/07-Omnifood-Desktop/css/style.css @@ -0,0 +1,392 @@ +/* + SPACING SYSTEM (px) + 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 + + FONT SIZE SYSTEM (px) + 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 + + main-color: #e67e22 + grey-color: + tints: #fdf2e9 + shades: #cf711f +*/ + + +/*****************************************/ +/************** HEDAER *************/ +/*****************************************/ +.header { + padding: 3.2rem 0 0 0; +} + +.logo { + height: 2.4rem; +} + +.main-nav { + font-size: 1.6rem; + font-weight: 500; +} + +.main-nav-list { + list-style-type: none; +} + +.main-nav-link:link, +.main-nav-link:visited { + display: inline-block; + text-decoration: none; + color: #333; + padding: 1.2rem 2.4rem; + border-radius: 0.8rem; + transition: background-color,color 0.3s; +} + +.main-nav-link:hover, +.main-nav-link:active { + background-color: #e67e22; + color: #fff; +} + +.main-nav-link-active:link, +.main-nav-link-active:visited { + background-color: #e67e22; + color: #fff; +} + +/*****************************************/ +/************** HERO SECTION *************/ +/*****************************************/ +.hero { + padding: 3.2rem 0 9.6rem 0; +} + +.hero-text-box { + display: flex; + flex-direction: column; + justify-content: center; +} + +.hero-text { + font-size: 1.6rem; + font-weight: 400; + line-height: 1.2; +} + +.hero-img-box { + +} + +.hero-img { + width: 100%; +} + +.hero-btn-main:hover, +.hero-btn-main:active { + background-color: #cf711f; +} + +.hero-btn-sub:hover, +.hero-btn-sub:active { + background-color: #fdf2e9; + box-shadow: inset 0 0 0 3px #fff; +} + +.delivered-meals-box { + display: flex; + align-items: center; +} + +.delivered-img { + width: 4.4rem; + height: 4.4rem; + border-radius: 50%; + border: 3px solid #fdf2e9; + margin-left: -1.2rem; +} + +.delivered-img:first-child { + margin: 0; +} + +.delivered-text { + font-size: 1.4rem; + font-weight: 500; +} + +/* FEATURED-IN SECTION */ +.featured-in { + padding: 4.8rem 0 3.2rem 0; +} +.featured-in-tile { + font-size: 1.4rem; + text-transform: uppercase; + letter-spacing: 0.75px; + font-weight: 500; + text-align: center; + margin-bottom: 2.4rem; + text-align: center; + color: #888; +} +.featured-in-logo { + height: 3.2rem; + filter: brightness(0); + opacity: 50%; +} + + +/*****************************************/ +/************** HOW IT WORKS SECTION *************/ +/*****************************************/ + +.how { + padding: 9.6rem 0; +} + +.step-number { + font-size: 8.6rem; + font-weight: 600; + color: #ddd; + margin: 0 0 1.2rem 0; +} + +.step-description { + font-size: 1.8rem; + line-height: 1.8; +} + +.step-img-box { + display: flex; + align-items: center; + justify-content: center; + + position: relative; +} + +.step-img-box::before, +.step-img-box::after { + content: ""; + display: block; + border-radius: 50%; + + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.step-img-box::before { + width: 60%; + padding-bottom: 60%; + background-color: #fdf2e9; + z-index: -2; +} + +.step-img-box::after { + width: 45%; + padding-bottom: 45%; + background: #fae5d3; + z-index: -1; +} + +.step-text-box { + +} + +.step-img { + width: 35%; +} + +/*****************************************/ +/************** MEALS SECTION *************/ +/*****************************************/ + +.meals { + padding: 9.6rem 0; +} + +.meal { + box-shadow: 0 2.4rem 4.8rem rgba(0,0,0,0.075); + border-radius: 11px; + overflow: hidden; + transition: transform 0.3s; +} + +.meal:hover { + transform: translateY(-1.2rem); + box-shadow: 0 2.4rem 6.4rem rgba(0,0,0,0.06); +} + +.meal-content { + padding: 3.2rem 4.8rem 4.8rem 4.8rem; +} + +.meal-tags { + margin-bottom: 1.2rem; + display: flex; + gap: 0.4rem; +} + +.tag { + display: inline-block; + padding: 0.4rem 0.8rem; + font-size: 1.2rem; + text-transform: uppercase; + color:#333; + border-radius: 100px; + font-weight: 600; +} + +.tag--vegeterian { + background-color: #51cf66; +} +.tag--vegan { + background-color: #94d82d; +} +.tag--paleo { + background-color: #ffd43b; +} + + +.meal-title { + font-size: 2rem; + color: #333; + font-weight: 600; + margin-bottom: 3.2rem; +} + +.meal-attributes { + list-style: none; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.meal-attribute { + font-size: 1.8rem; + display: flex; + align-items: center; + gap: 1.6rem; +} + +.meal-icon { + height: 2.4rem; + width: 2.4rem; + color: #e67e22; +} + +.meal-img { + width: 100%; +} + +.all-receipes { + text-align: center; + font-size: 1.8rem; +} + +/*****************************************/ +/************** TESTIMONIALS SECTION *************/ +/*****************************************/ +.testimonials { + background-color: #fdf2e9; + display: grid; + grid-template-columns: 55fr 45fr; + align-items: center; +} + +.testimonials-container { + padding: 9.6rem; +} + +.testimonials-side { + display: grid; + grid-template-columns: 1fr 1fr; + row-gap: 4.8rem; + column-gap: 8rem; +} + +.testimonial-img { + width: 6.4rem; + border-radius: 50%; + margin-bottom: 1.2rem; +} + +.testimonial-text { + font-size: 1.8rem; + line-height: 1.8; + margin-bottom: 1.6rem; +} + +.testimonial-name { + font-size: 1.6rem; + color: #6f6f6f; +} + +.gallery { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.6rem; + padding: 1.6rem; +} + +.gallery-item { + overflow: hidden; +} + +.gallery-item img { + display: block; + width: 100%; + transition: transform 0.4s; +} + +.gallery-item img:hover { + transform: scale(1.1); +} + +/*****************************************/ +/************** PRICING SECTION *************/ +/*****************************************/ +.pricing { + padding: 9.6rem 0; +} +.pricing-plan { + background-color: #fdf2e9; + border-radius: 11px; + padding: 4.8rem; + width: 75%; +} +.pricing-plan--stater { + justify-self: end; +} +.plan-header { + text-align: center; + margin-bottom: 4.8rem; +} +.plan-name { + color: #cf711f; + font-weight: 600; + font-size: 2rem; + text-transform: uppercase; + letter-spacing: 0.75; + margin-bottom: 3.2rem; +} +.plan-price { + font-size: 6.2rem; + font-weight: 600; + color: #333; + margin-bottom: 1.6rem; +} +.plan-price span { + font-size: 3rem; + font-weight: 500; + margin-right: 0.8rem; +} +.plan-text { + font-size: 1.6rem; + line-height: 1.6; + color: #6f6f6f; +} +.plan-sign-up { + text-align: center; + margin-top: 4.8rem; +} \ No newline at end of file diff --git a/starter/07-Omnifood-Desktop/index.html b/starter/07-Omnifood-Desktop/index.html new file mode 100644 index 000000000..e1b089974 --- /dev/null +++ b/starter/07-Omnifood-Desktop/index.html @@ -0,0 +1,566 @@ + + + + + + + Omnifood + + + + + + + + + + + + +
+
+ + +
+
+
+
+
+
+

+ A healthy meal delivered to your door, every single day +

+

+ The smart 365-days-per-year food subscription that will make you + eat healthy again. Tailored to your personal tastes and + nutritional needs. +

+
+ Start earing well + Learn more ↓ +
+
+ Customer + Customer + Customer + Customer + Customer +

+ 250,000+ + meals delivered last year! +

+
+
+
+ Mixed meals +
+
+
+ +
+
+

As featured in

+
+ + + + + +
+
+
+ +
+
+ How it works +

+ Your daily dose of health in 3 simple steps +

+
+ +
+ +
+

01

+

+ Tell us what you like (and what not) +

+

+ Never again waste time thinking about what to eat! Omnifood AI + will create a 100% personalized weekly meal plan just for you. It + makes sure you get all the nutrients and vitamins you need, no + matter what diet you follow! +

+
+
+ Iphone app delivery screen +
+ +
+ Iphone app delivery screen +
+
+

02

+

Approve your weekly meal plan:

+

+ Once per week, approve the meal plan generated for you by Omnifood + AI. You can change ingredients, swap entire meals, or even add + your own recipes. +

+
+ +
+

03

+

Receive meals at convenient time:

+

+ Best chefs in town will cook your selected meal every day, and we + will deliver it to your door whenever works best for you. You can + change delivery schedule and address daily! +

+
+
+ Iphone app delivery screen +
+
+
+ +
+
+ Meals +

+ Omnifood AI chooses from 5,000+ recipes +

+
+ +
+
+ Japanese Gyozas +
+
+ Vegetarian +
+

Japanese Gyozas

+
    +
  • + + 650 calories +
    • +
  • + + NutriScores ® 74 +
    • +
  • + + 4.9 rating (537) +
    • +
+
+
+
+ Japanese Gyozas +
+
+ Vegan + Paleo +
+

Avocado Salad

+
    +
  • + + 400 calories +
    • +
  • + + NutriScores ® 92 +
    • +
  • + + 4.8 rating (441) +
    • +
+
+
+
+

Work with any diet:

+ +
    +
  • + + Vegetarian +
    • +
  • + + Vegan +
    • +
  • + + Pescatarian +
    • +
  • + + Gluten-free +
    • +
  • + + VKetto +
    • +
  • + + Vegetarian +
    • +
  • + + Vegetarian +
    • +
  • + + Low FODMAP +
    • +
+
+
+ +
+ See all recipes → +
+
+ +
+
+ Testimonials +

Once you try it, you can't go back

+ +
+
+ Dave +
+ Inexpensive, healthy and great-tasting meals, without even + having to order manually! It feels truly magical. +
+

— Dave Bryson

+
+ +
+ Ben +
+ The AI algorithm is crazy good, it chooses the right meals for + me every time. It's amazing not to worry about food anymore! +
+

— Ben Hadley

+
+ +
+ Steve +
+ Omnifood is a life saver! I just started a company, so there's + no time for cooking. I couldn't live without my daily meals now! +
+

— Steve Miller

+
+ +
+ Hannah +
+ I got Omnifood for the whole family, and it frees up so much + time! Plus, everything is organic and vegan and without plastic. +
+

— Hannah Smith

+
+
+
+ +
+
+ Photo of beatifully arrangend food +
Caption
+
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+ Photo of beatifully arrangend food + +
+
+
+ +
+
+ Pricing +

+ Eating well without breaking the bank +

+
+ +
+
+
+

Statter

+

$399

+

per month. That's just $13 per meal!

+
+
    +
  • + + 1 meal per day +
    • +
  • + + Order times are between 11am and 9pm +
    • +
  • + + Delivery is free +
    • +
+ +
+
+
+

Complete

+

$649

+

per month. That's just $11 per meal!

+
+
    +
  • + + 2 meal per day +
    • +
  • + + Order 24/7 +
    • +
  • + + Delivery is free +
    • +
  • + + Get access to latest recipes +
    • +
+ +
+
+
+
+ + diff --git a/starter/08-Omnifood-Responsive/content.md b/starter/08-Omnifood-Responsive/content.md old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/css/general.css b/starter/08-Omnifood-Responsive/css/general.css old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/css/style.css b/starter/08-Omnifood-Responsive/css/style.css old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-1.png b/starter/08-Omnifood-Responsive/img/app/app-screen-1.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-2.png b/starter/08-Omnifood-Responsive/img/app/app-screen-2.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/app/app-screen-3.png b/starter/08-Omnifood-Responsive/img/app/app-screen-3.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/ben.jpg b/starter/08-Omnifood-Responsive/img/customers/ben.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-1.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-1.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-2.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-2.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-3.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-3.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-4.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-4.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-5.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-5.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/customer-6.jpg b/starter/08-Omnifood-Responsive/img/customers/customer-6.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/dave.jpg b/starter/08-Omnifood-Responsive/img/customers/dave.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/hannah.jpg b/starter/08-Omnifood-Responsive/img/customers/hannah.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/customers/steve.jpg b/starter/08-Omnifood-Responsive/img/customers/steve.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/eating.jpg b/starter/08-Omnifood-Responsive/img/eating.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/favicon.png b/starter/08-Omnifood-Responsive/img/favicon.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-1.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-10.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-11.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-12.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-2.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-3.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-4.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-5.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-6.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-7.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-8.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg b/starter/08-Omnifood-Responsive/img/gallery/gallery-9.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/hero.png b/starter/08-Omnifood-Responsive/img/hero.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/business-insider.png b/starter/08-Omnifood-Responsive/img/logos/business-insider.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/forbes.png b/starter/08-Omnifood-Responsive/img/logos/forbes.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/techcrunch.png b/starter/08-Omnifood-Responsive/img/logos/techcrunch.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/the-new-york-times.png b/starter/08-Omnifood-Responsive/img/logos/the-new-york-times.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/logos/usa-today.png b/starter/08-Omnifood-Responsive/img/logos/usa-today.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/meals/meal-1.jpg b/starter/08-Omnifood-Responsive/img/meals/meal-1.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/meals/meal-2.jpg b/starter/08-Omnifood-Responsive/img/meals/meal-2.jpg old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/img/omnifood-logo.png b/starter/08-Omnifood-Responsive/img/omnifood-logo.png old mode 100644 new mode 100755 diff --git a/starter/08-Omnifood-Responsive/index.html b/starter/08-Omnifood-Responsive/index.html old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/content.md b/starter/09-Omnifood-Optimizations/content.md old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/css/general.css b/starter/09-Omnifood-Optimizations/css/general.css old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/css/queries.css b/starter/09-Omnifood-Optimizations/css/queries.css old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/css/style.css b/starter/09-Omnifood-Optimizations/css/style.css old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/app/app-screen-1.png b/starter/09-Omnifood-Optimizations/img/app/app-screen-1.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/app/app-screen-2.png b/starter/09-Omnifood-Optimizations/img/app/app-screen-2.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/app/app-screen-3.png b/starter/09-Omnifood-Optimizations/img/app/app-screen-3.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/ben.jpg b/starter/09-Omnifood-Optimizations/img/customers/ben.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-1.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-1.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-2.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-2.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-3.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-3.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-4.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-4.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-5.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-5.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/customer-6.jpg b/starter/09-Omnifood-Optimizations/img/customers/customer-6.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/dave.jpg b/starter/09-Omnifood-Optimizations/img/customers/dave.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/hannah.jpg b/starter/09-Omnifood-Optimizations/img/customers/hannah.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/customers/steve.jpg b/starter/09-Omnifood-Optimizations/img/customers/steve.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/eating.jpg b/starter/09-Omnifood-Optimizations/img/eating.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/favicon.png b/starter/09-Omnifood-Optimizations/img/favicon.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-1.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-10.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-11.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-12.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-2.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-3.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-4.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-5.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-6.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-7.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-8.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg b/starter/09-Omnifood-Optimizations/img/gallery/gallery-9.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/hero.png b/starter/09-Omnifood-Optimizations/img/hero.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/business-insider.png b/starter/09-Omnifood-Optimizations/img/logos/business-insider.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/forbes.png b/starter/09-Omnifood-Optimizations/img/logos/forbes.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/techcrunch.png b/starter/09-Omnifood-Optimizations/img/logos/techcrunch.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/the-new-york-times.png b/starter/09-Omnifood-Optimizations/img/logos/the-new-york-times.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/logos/usa-today.png b/starter/09-Omnifood-Optimizations/img/logos/usa-today.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/meals/meal-1.jpg b/starter/09-Omnifood-Optimizations/img/meals/meal-1.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/meals/meal-2.jpg b/starter/09-Omnifood-Optimizations/img/meals/meal-2.jpg old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/img/omnifood-logo.png b/starter/09-Omnifood-Optimizations/img/omnifood-logo.png old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/index.html b/starter/09-Omnifood-Optimizations/index.html old mode 100644 new mode 100755 diff --git a/starter/09-Omnifood-Optimizations/script.js b/starter/09-Omnifood-Optimizations/script.js old mode 100644 new mode 100755 diff --git a/vscode-setup.md b/vscode-setup.md old mode 100644 new mode 100755