diff --git a/2024/fn_ux_1/index.html b/2024/fn_ux_1/index.html new file mode 100644 index 0000000..b3602e2 --- /dev/null +++ b/2024/fn_ux_1/index.html @@ -0,0 +1,102 @@ + + + + + + + My Tailwind Site + + + + + + +
+
+ + + +
+ +
+ +
+ +
+

Get Free Money 2024 (ไม่เล่น)

+

Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.

+
+ Get started + Learn more +
+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/2024/fn_ux_2/index.html b/2024/fn_ux_2/index.html new file mode 100644 index 0000000..f5a0906 --- /dev/null +++ b/2024/fn_ux_2/index.html @@ -0,0 +1,184 @@ + + + + + + + My Product Site + + + + + + + +
+
+

Customers also purchased

+ +
+
+
+ Front of men's Basic Tee in black. +
+
+
+

+ + + Basic Tee + +

+

Black

+
+

$35

+
+
+ +
+
+ Front of men's Basic Tee in gray. +
+
+
+

+ + + Gray Tee + +

+

Gray

+
+

$50

+
+
+ +
+
+ Front of men's Basic Tee in gray. +
+
+
+

+ + + Purple Tee + +

+

Purple

+
+

$50

+
+
+ +
+
+ Front of men's Basic Tee in gray. +
+
+
+

+ + + Purple Tee + +

+

Purple

+
+

$50

+
+
+ +
+
+ Front of men's Basic Tee in gray. +
+
+
+

+ + + Red Tee + +

+

Red

+
+

$60

+
+
+ +
+
+ Front of men's Basic Tee in gray. +
+
+
+

+ + + Pink Crop + +

+

Pink

+
+

$35

+
+
+ +
+
+ Front of men's Basic Tee in gray. +
+
+
+

+ + + Pink Tee + +

+

Pink

+
+

$40

+
+
+ +
+
+ Front of men's Basic Tee in gray. +
+
+
+

+ + + Gray Tee + +

+

Gray

+
+

$25

+
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/2024/fn_ux_3/index.html b/2024/fn_ux_3/index.html new file mode 100644 index 0000000..c215656 --- /dev/null +++ b/2024/fn_ux_3/index.html @@ -0,0 +1,63 @@ + + + + + + + My Website + + + + +
+ + +
+ +
+
+

Welcome to my website

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem dolores corporis placeat itaque quidem iure aliquid commodi quia nulla molestiae maxime temporibus deserunt nostrum necessitatibus, explicabo sint vitae doloribus sapiente. +

+ Learn More +
+
+ +
+
+

Person 1

+ +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam architecto animi corrupti earum veritatis rerum magni recusandae eaque error aliquid officiis, accusantium at quis dolorem ab ea libero sit? Beatae?

+ Contact +
+ +
+

Person 2

+ +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam architecto animi corrupti earum veritatis rerum magni recusandae eaque error aliquid officiis, accusantium at quis dolorem ab ea libero sit? Beatae?

+ Contact +
+ +
+

Person 3

+ +

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Numquam architecto animi corrupti earum veritatis rerum magni recusandae eaque error aliquid officiis, accusantium at quis dolorem ab ea libero sit? Beatae?

+ Contact +
+
+ + + + + + \ No newline at end of file diff --git a/2024/fn_ux_3/style.css b/2024/fn_ux_3/style.css new file mode 100644 index 0000000..c8ca90f --- /dev/null +++ b/2024/fn_ux_3/style.css @@ -0,0 +1,101 @@ +body { + margin: 0; + padding: 0; +} + +.navbar { + display: flex; + /* border: 1px solid red; */ + background-color: #333333; + color: #ffffff; +} + +.logo { + padding-left: 5%; + width: 20; + display: flex; + justify-content: center; + align-items: center; + /* border: 1px solid red; */ +} + +ul { + width: 100%; + display: flex; + justify-content: center; + align-items: center; + /* border: 1px solid red; */ + list-style: none; +} + +ul li { + margin: 0 1rem; +} + +ul li a { + color: #ffffff; + text-decoration: none; +} + +header { + height: 500px; + display: flex; + justify-content: center; + align-items: center; + /* border: 1px solid red; */ + background: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ffiverr-res.cloudinary.com%2Fimages%2Fq_auto%2Cf_auto%2Fgigs%2F169030111%2Foriginal%2F6941e8700afcb68ab2010c7211f702d3ddfc0a2a%2Fteach-you-the-basics-of-roblox-lua-scripting-31ab.png&f=1&nofb=1&ipt=7d482d94db89d2ef52fd9c2bb378b87cb6682928258566c9fa551dfedf722b32&ipo=images"); +} + +.header-info { + text-align: center; + width: 650px; + height: 250px; + /* border: 1px solid red; */ + color: #ffffff; +} + +.header-info a { + display: block; + width: 80px; + margin-top: 2rem; + margin-left: auto; + margin-right: auto; + background-color: #ffffff; + color: #000000; + padding: 0.5rem 1rem; + text-decoration: none; +} + +.teams { + display: grid; + grid-template-columns: repeat(3, 1fr); + /* Could also use "1fr fr fr" */ +} + +.teams-items { + /* border: 1px solid red; */ + padding: 2rem; + background: #339CFF; + color: #ffffff; + text-align: center; +} + +.teams-items img { + width: 150px; + border-radius: 100%; + box-shadow: 0 0 10px #333333; +} + +.teams-items a { + text-decoration: none; + color: #000000; + background: #ffffff; + padding: 0.5rem; +} + +footer { + background: #333333; + padding: 1rem; + text-align: center; + color: #ffffff; +} \ No newline at end of file diff --git a/2024/fn_ux_4/index.html b/2024/fn_ux_4/index.html new file mode 100644 index 0000000..ba74121 --- /dev/null +++ b/2024/fn_ux_4/index.html @@ -0,0 +1,38 @@ + + + + + + + My Website + + + + + +
+ Man Face +
+
+

+ Arnold Lindford +

+

+ Product Engineer +

+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/2024/fn_ux_5/index.html b/2024/fn_ux_5/index.html new file mode 100644 index 0000000..843482a --- /dev/null +++ b/2024/fn_ux_5/index.html @@ -0,0 +1,53 @@ + + + + + + Document + + + + + + + +
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos exercitationem asperiores praesentium quo consequatur ipsa fugiat, natus qui, recusandae sint harum? Optio magnam dignissimos facilis aspernatur, delectus voluptas qui deserunt dolorum. Animi fuga accusantium labore quidem in ea voluptas dolore, cum maiores reiciendis praesentium doloribus ad! Molestiae totam quidem voluptatem deserunt neque dignissimos, eos soluta et debitis aspernatur esse perspiciatis. Eaque repellat fuga natus incidunt laborum cumque ipsa accusantium, quia rerum reprehenderit. Cumque minus delectus repudiandae voluptatum soluta, beatae culpa totam. Iste, animi repudiandae ab explicabo consequatur aperiam nesciunt modi unde porro quibusdam quae voluptatum commodi pariatur impedit veritatis praesentium libero recusandae amet blanditiis distinctio inventore dolor! Quia animi delectus nam officiis ratione voluptatibus magni optio neque accusamus vero quo iusto qui nihil explicabo deleniti, at autem eveniet fugiat sint quos. Laudantium voluptates molestiae dolor, in laborum iste blanditiis exercitationem pariatur recusandae hic consectetur illum nihil voluptatum ab distinctio optio sit placeat, provident autem obcaecati voluptatem nisi sapiente ex id. Eius sed cumque deleniti. Ipsa voluptatibus inventore quia ratione voluptates nesciunt sint in ducimus, reprehenderit, velit quae quo nulla corporis nemo? Eum, similique accusamus. Maxime laboriosam, obcaecati voluptate, ipsum amet ipsam hic, repellendus possimus corrupti id fugiat. Alias at modi temporibus fugiat est fugit recusandae voluptatem tempora quisquam voluptatum asperiores, molestiae ducimus provident eum blanditiis eveniet laudantium accusantium natus aspernatur exercitationem enim? Magni repellendus natus a ullam eaque voluptatum vero error unde repudiandae culpa! Explicabo non eos enim veritatis optio, aperiam fuga repellendus quibusdam! Rem ut praesentium, dolor mollitia ea at eaque illum illo libero molestias fugiat, odit provident doloremque consequuntur minus soluta fugit? Vero molestiae, natus laudantium officiis repellat provident earum? Sint voluptatem voluptas sapiente tempore minima blanditiis quod molestiae eum optio recusandae, dolorum inventore dicta adipisci consectetur quia ipsum fugiat doloremque delectus quasi odit quos. Aut ut distinctio mollitia ex officia minima dolores repellendus soluta, culpa officiis nihil aspernatur sit perspiciatis inventore iste numquam magni sequi perferendis, consequatur quos sapiente voluptatum. Dolorum magni, assumenda officiis tempore, nulla enim perferendis ipsum ipsa praesentium placeat quam molestias numquam vel aliquid vitae culpa perspiciatis reprehenderit? Eligendi corrupti doloremque vero nemo, unde porro eius illum error eos assumenda velit totam excepturi ex? Dolor placeat sit, nobis alias ducimus ab tenetur nostrum nulla esse, enim, harum iure. Enim ipsum ut nobis itaque debitis alias perferendis placeat, eum, culpa obcaecati quia voluptatibus atque officia sequi dignissimos aut commodi? Officia ea repellendus recusandae beatae sunt ad esse animi, obcaecati repudiandae architecto. Sunt ad accusamus quo veniam sapiente doloremque omnis doloribus soluta molestias ratione tenetur deserunt rerum, quam harum nisi? Reiciendis nam debitis beatae magnam quo earum repudiandae perferendis. In eaque facilis porro quisquam minus doloribus, molestias dolorum, eveniet, nostrum consequuntur voluptatem corporis. Minima dolore eos adipisci minus voluptatum, quasi quod voluptatibus veritatis perferendis exercitationem dicta quaerat! Minus impedit cum explicabo consectetur porro laudantium illum optio, aliquid ducimus provident qui totam blanditiis natus architecto officia earum omnis laborum veniam eaque labore quis et quibusdam assumenda. Provident sequi facere impedit odit! Ipsam aliquid molestias similique aut voluptates placeat commodi totam quisquam laudantium vel dicta fugiat laboriosam reiciendis dolorum esse sunt facere, minima perferendis ex cum impedit sapiente adipisci quam explicabo. Accusamus ipsum quae pariatur nostrum hic nesciunt veniam molestiae suscipit quas dicta! Commodi, molestiae nihil! Qui nulla rerum, alias deserunt ipsam distinctio rem quibusdam cum consectetur veritatis porro voluptates nesciunt optio hic natus earum mollitia dolorum in corporis voluptatem. Soluta dignissimos asperiores quasi, provident aliquam perspiciatis porro, deleniti quas quia voluptatibus distinctio? Dignissimos distinctio temporibus deserunt hic velit magnam iste. Alias praesentium nostrum quasi veritatis nobis minus accusantium laboriosam. Expedita culpa ex, quas architecto itaque illo voluptatem. +

+
+
+ + + + + + \ No newline at end of file diff --git a/2024/fn_ux_5/script.js b/2024/fn_ux_5/script.js new file mode 100644 index 0000000..566ad22 --- /dev/null +++ b/2024/fn_ux_5/script.js @@ -0,0 +1,11 @@ +function toggleHam(x) { + x.classList.toggle("change"); + + let myMenu = document.getElementById("myMenu"); + + if (myMenu.className == "menu") { + myMenu.className += " menu-active" + } else { + myMenu.className = "menu"; + } +} diff --git a/2024/fn_ux_5/style.css b/2024/fn_ux_5/style.css new file mode 100644 index 0000000..730a453 --- /dev/null +++ b/2024/fn_ux_5/style.css @@ -0,0 +1,124 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.container { + max-width: 1140px; + margin: 0 auto; +} + +nav { + background-color: #333333; +} + +.nav-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + height: 60px; + position: relative; +} + +.nav-wrapper .logo h3 { + color: #ffffff; +} + +.menu { + display: flex; + list-style: none; +} + +.menu li { + margin-left: 20px; +} + +.menu li a { + color: #ffffff; + text-decoration: none; +} + +main { + padding: 2rem 0; +} + +p { + margin-left: 1rem; + margin-right: 0.5rem; +} + +footer { + background-color: #333333; + color: #ffffff; + text-align: center; + padding: 2rem; +} + +/* Hamburger Menu CSS */ + +.ham-menu { + display: inline-block; + cursor: pointer; + position: absolute; + right: 1rem; + top: 0.5rem; +} + +.bar1, .bar2, .bar3 { + width: 35px; + height: 5px; + background-color: #ffffff; + margin: 6px 0; + transition: 0.4s; +} + +/* Rotate first bar */ +.change .bar1 { + transform: translate(0, 11px) rotate(-45deg); +} + +/* Fade out the second bar */ +.change .bar2 {opacity: 0;} + +/* Rotate last bar */ +.change .bar3 { + transform: translate(0, -11px) rotate(45deg); +} + +@media only screen and (min-width: 360px) { + .ham-menu { + display: none; + } +} + +@media only screen and (max-width: 360px) { + .menu { + display: none; + } + + .nav-wrapper { + padding: 1rem; + height: auto; + flex-direction: column; + align-items: flex-start; + } + + .menu { + width: 100%; + } + + .menu li { + margin: 2rem 0; + padding: 1rem 0.5rem; + transform: 0.3s; + } + + .menu li:hover { + background-color: #2a2a2a; + } + + .menu-active { + display: block; + } +} \ No newline at end of file