diff --git a/assets/cpp-logo.png b/assets/cpp-logo.png new file mode 100755 index 0000000..af460f0 Binary files /dev/null and b/assets/cpp-logo.png differ diff --git a/assets/cpp-primary.png b/assets/cpp-primary.png new file mode 100755 index 0000000..ee9cddd Binary files /dev/null and b/assets/cpp-primary.png differ diff --git a/assets/favicon.png b/assets/favicon.png new file mode 100755 index 0000000..97ecb2f Binary files /dev/null and b/assets/favicon.png differ diff --git a/assets/fb.svg b/assets/fb.svg new file mode 100755 index 0000000..b541d64 --- /dev/null +++ b/assets/fb.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/green-rip.svg b/assets/green-rip.svg new file mode 100755 index 0000000..e8d68ef --- /dev/null +++ b/assets/green-rip.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/insta.svg b/assets/insta.svg new file mode 100755 index 0000000..e2cd445 --- /dev/null +++ b/assets/insta.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/li.svg b/assets/li.svg new file mode 100755 index 0000000..420402f --- /dev/null +++ b/assets/li.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/menu-icon.svg b/assets/menu-icon.svg new file mode 100755 index 0000000..4636b19 --- /dev/null +++ b/assets/menu-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/search-icon.svg b/assets/search-icon.svg new file mode 100755 index 0000000..cad5593 --- /dev/null +++ b/assets/search-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/x.svg b/assets/x.svg new file mode 100755 index 0000000..6a286ac --- /dev/null +++ b/assets/x.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/yt.svg b/assets/yt.svg new file mode 100755 index 0000000..42dae6e --- /dev/null +++ b/assets/yt.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/package-lock.json b/package-lock.json old mode 100644 new mode 100755 index d27ab35..75caa55 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "js-tailwind", + "name": "Assignment-3", "lockfileVersion": 3, "requires": true, "packages": { @@ -1315,6 +1315,7 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1339,6 +1340,7 @@ "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -1533,6 +1535,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -3290,9 +3293,9 @@ "license": "MIT" }, "node_modules/js-yaml": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", - "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz", + "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==", "dev": true, "license": "MIT", "dependencies": { @@ -4180,6 +4183,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", @@ -5113,10 +5117,10 @@ } }, "node_modules/tar": { - "version": "7.5.1", - "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz", - "integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==", - "license": "ISC", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/tar/-/tar-7.5.2.tgz", + "integrity": "sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==", + "license": "BlueOak-1.0.0", "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", @@ -5247,7 +5251,8 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "license": "0BSD" + "license": "0BSD", + "peer": true }, "node_modules/type-is": { "version": "1.6.18", @@ -5381,6 +5386,7 @@ "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.102.1.tgz", "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==", "license": "MIT", + "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.8", @@ -5430,6 +5436,7 @@ "integrity": "sha512-MfwFQ6SfwinsUVi0rNJm7rHZ31GyTcpVE5pgVA3hwFRb7COD4TzjUUwhGWKfO50+xdc2MQPuEBBJoqIMGt3JDw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@discoveryjs/json-ext": "^0.6.1", "@webpack-cli/configtest": "^3.0.1", diff --git a/package.json b/package.json old mode 100644 new mode 100755 index 19964a0..71986dc --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "html-loader": "^5.1.0" }, "scripts": { - "build" : "webpack", + "build": "webpack", "dev": "webpack serve", "deploy": "git subtree push --prefix dist origin gh-pages" } diff --git a/src/fonts/TransducerExtendedBold.otf b/src/fonts/TransducerExtendedBold.otf new file mode 100755 index 0000000..c784ee7 Binary files /dev/null and b/src/fonts/TransducerExtendedBold.otf differ diff --git a/src/fonts/TransducerExtendedMedium.otf b/src/fonts/TransducerExtendedMedium.otf new file mode 100755 index 0000000..1f6084b Binary files /dev/null and b/src/fonts/TransducerExtendedMedium.otf differ diff --git a/src/index.html b/src/index.html index c771fbf..ab3c6c6 100644 --- a/src/index.html +++ b/src/index.html @@ -3,10 +3,223 @@ - Title Here + Computer Science + + + -
Hello There, if this is styled then tailwind build has worked
+
+
+ +
+ + +
+
Computer Science
+
+
+ +
+ + + + + + +
+ +
+ +
+ +
+ +
+
+
Welcome!
+
+         + The Computer Science Department conducts both an undergraduate and a graduate program in + Computer Science. The undergraduate program offers a dynamic curriculum with a strong emphasis + on software design. Students navigate the intricacies of their project-oriented coursework as + they learn to design, build, and implement computer software from the ground up. +

        + The program provides an extensive background in computer programming languages, computer architecture, and the + design and application of computer algorithms. Progress through this diverse curriculum leads to + concentrated instruction on topics such as Cyber Security and Operations, cloud computing, mobile computing, + software entrepreneurship, wireless communication networks, machine learning, data mining, high performance + computing, robotics, human computer interaction, 3D game programming, and data science. +

        + Please see the elective courses we offer here based on different career interests. + The department's Bachelor of Science program has been fully + accredited by the Computing Accreditation Commission of ABET since 1994. For + further information visit the Program Accreditation & Assessment page. +
+
+ + +
+

Contact Information:

+

Building 3 - Room 1645

+

Email: cs@cpp.edu

+

Phone: 909.869.3440

+

Fax: 909.869.4733

+
+
+
+
+
+
+
+ + + +
+

News & Announcements

+ +
+ + +
+

The CS department invites applications for two tenure-track faculty positions at the rank of Assistant Professor to start in Fall 2024. Candidates in all Major Computer Science areas will be considered and are thus encouraged to apply. + Please see the complete ad here for more details. +

+ +

The Data Science Center is established to train students in competencies and skills in data science. We service both CS and non-CS majors. Please visit the + data science hub for more information. +

+ +

Interested in the state of the art in Computer Science? Check out the + Computer Science Seminar Series. +

+ +

Google exploreCSR program on Data Science and Artificial Intelligence at Cal Poly Pomona for AY 2022–23.

+

Lecturers – The Computer Science Department invites applications for lecturers. An advanced degree in Computer Science, or a related field, is desirable. Please download the + Lecturer Information Sheet (DOCX) for more information. +

+
+ + +
+

Download a digital copy of our + CS brochure (PDF). +

+

Coming up in Fall 2024:

+ +
+
+
+ + +
+
+

Undergraduate Studies

+
+ +
+

Graduate Studies

+
+ +
+

Student Resources

+
+ +
+

Community & Outreach

+
+
+ +
+ + + + +
+ + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 3a6a768..b03b641 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,2 @@ import "./styles.css"; -console.log("Webpack success!"); \ No newline at end of file diff --git a/src/styles.css b/src/styles.css index 751c07d..baac479 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,2 +1,199 @@ @import "tailwindcss"; +@font-face { + font-family: 'Transducer-Extended-Medium'; + src: url("./fonts/TransducerExtendedMedium.otf") format("opentype"); + font-weight: 400; + font-style: normal; +} + +@font-face { + font-family: 'Transducer-Extended-Bold'; + src: url("./fonts/TransducerExtendedBold.otf") format("opentype"); + font-weight: 700; + font-style: normal +} + +@layer components { + .content { + @apply flex flex-col; + } + + .header { + @apply fixed top-0 left-0 w-full bg-white z-50; + } + + .header-inner { + @apply max-w-[1400px] mx-auto w-full flex flex-row justify-between items-start + px-13 pt-3.5; + } + + .header-buttons { + @apply flex flex-row gap-5 pt-6.5 pr-3; + } + + .header-link { + @apply relative cursor-pointer inline-block leading-none text-[var(--cppgreen)] text-[14px] + self-baseline pb-[2px] after:content-[''] after:absolute after:left-0 after:bottom-0 + after:h-[2px] after:w-0 after:bg-current after:transition-all after:duration-300 + hover:after:w-full translate-y-1; + + + font-family: 'Transducer-Extended-Bold'; + font-weight: 900; + } + + .header-link-img { + @apply cursor-pointer; + } + + .cpp-nav-logo { + @apply h-[66px] w-[300px] cursor-pointer; + } + + .footer { + @apply w-full h-1/12 overflow-hidden; + } + + .footer-wrap { + @apply w-full h-full bg-[var(--cppgreen)] flex flex-col justify-around; + } + + .footer-container { + @apply max-w-[1400px] mx-auto w-full flex flex-col px-13 pt-10; + } + + .footer-content { + @apply flex flex-col justify-between pt-10; + } + + .footer-links { + @apply bg-[var(--cppgreen)] flex flex-row justify-between; + } + + + .footer-buttons { + @apply flex flex-row justify-end gap-[20px] w-[50%]; + } + + .footer-button { + @apply hover:text-[var(--cppgreen)] font-bold uppercase text-white px-10 max-w-35 h-[65%] + flex items-center justify-center border-2 border-transparent [border-image-slice:1] + [border-image-source:linear-gradient(to_left,#ffb81c,#a4d65e)] bg-transparent + hover:bg-gradient-to-r hover:from-[#a4d65e] hover:to-[#ffb81c] text-center + transition-all duration-300 ease-in-out hover:underline hover:underline-offset-1 + cursor-pointer text-[12px] leading-none; + + font-family: 'Transducer-Extended-Bold'; + font-weight: 900; + } + + .footer-text { + @apply flex flex-row; + + font-family: Arial; + } + + .socials-links { + @apply flex flex-row w-full justify-end gap-6 pr-3; + } + + .social-link { + @apply cursor-pointer hover:outline-white hover:outline-2 rounded-2xl; + } + + .footer-bottom-link { + @apply text-[13px] hover:underline cursor-pointer; + } + + .page-heading { + @apply shadow-[0_3px_6px_-4px_rgba(0,0,0,0.1)] shadow-gray-300 text-[2.5em] + px-[15px] pl-[30px] pt-24.5 pb-1 text-[var(--heading-font-color)]; + + font-family: Arial; + } + + .cpp-nav { + @apply flex flex-col items-start p-4 pl-12 gap-3; + + font-family: Arial; + } + + .nav-button { + @apply flex py-2 pl-4 pr-2 w-[225px] rounded-sm hover:bg-gray-200 hover:font-bold cursor-pointer; + } + + .nav-button .nav-closed { + @apply font-bold pl-2 -translate-y-1.5; + } + + .selected { + @apply text-white bg-[var(--heading-font-color)] hover:bg-[var(--heading-font-color)] + cursor-default hover:font-normal; + } + + .home-welcome-bg { + @apply bg-[var(--cppgreen)] ml-40 rounded-[25px] mt-8; + } + + .home-welcome-title { + @apply text-center text-2xl mt-4 pt-2 text-[var(--cppgold)] font-bold; + } + + .home-welcome-message { + @apply pt-2 px-10 text-white pb-5; + } + .yellow-container{ + @apply bg-yellow-400 text-green-900 rounded-[6rem] w-[95%] ml-[8.5%] mt-[-1rem] py-8 px-11 + flex flex-col items-start text-left justify-between items-center shadow-lg relative z-10; + } + .yellow-container-h2{ + @apply text-xl font-semibold mb-3; + } + .news-section { + @apply bg-gray-100 rounded-3xl w-full md:w-5/6 mx-auto mt-10 p-8 md:p-10 shadow-md; + } + .news-section-h2 { + @apply text-2xl font-bold text-center text-green-900 mb-6; + } + .news-grid{ + @apply grid grid-cols-1 md:grid-cols-2 gap-8 text-green-900; + } + .news-text { + @apply space-y-6 leading-relaxed; + } + .news-text2 { + @apply text-3xl font-bold; + } + .news-text3 { + @apply text-green-700 underline hover:text-green-800; + } + .news-right-column { + @apply space-y-4 leading-relaxed + } + .right-column-text{ + @apply text-green-700 underline hover:text-green-800; + } + .bottom-bubbles-section{ + @apply w-[83%] ml-[8.5%] mt-10 flex flex-wrap justify-center gap-6 text-center; + } + .bottom-bubbles-section-h3{ + @apply text-lg font-semibold; + } + .bottom-bubbles-icons{ + @apply flex justify-center w-full space-x-6 mt-6 text-2xl; + } + + .bottom-bubbles{ + @apply bg-green-900 text-yellow-300 rounded-full py-6 px-10 shadow-md w-64 hover:bg-green-800 transition-all; + } +} + +@layer base { + :root { + --cppgreen: #005030; + --cppgold: #ffb400; + --greenhover: #007530; + --heading-font-color: #01426a; + } +} diff --git a/tailwind.config.js b/tailwind.config.js index 2032925..386d518 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,6 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/**/*.{html,js}"], + content: ["./src/**/*.{html,js,jsx,ts,tsx}"], theme: { extend: {}, },