diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..64b3008
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+ "name": "T04-Project-1",
+ "lockfileVersion": 3,
+ "requires": true,
+ "packages": {}
+}
diff --git a/webdev-prosjekt1/src/App.css b/webdev-prosjekt1/src/App.css
index f90339d..7bb7cc9 100644
--- a/webdev-prosjekt1/src/App.css
+++ b/webdev-prosjekt1/src/App.css
@@ -1,184 +1,148 @@
-.counter {
- font-size: 16px;
- padding: 5px 10px;
- border-radius: 5px;
- color: var(--accent);
- background: var(--accent-bg);
- border: 2px solid transparent;
- transition: border-color 0.3s;
- margin-bottom: 24px;
-
- &:hover {
- border-color: var(--accent-border);
- }
- &:focus-visible {
- outline: 2px solid var(--accent);
- outline-offset: 2px;
- }
+:root {
+ font-family: 'Trebuchet MS', sans-serif;
+ color: #f8f0df;
+ background: #11100f;
}
-.hero {
- position: relative;
-
- .base,
- .framework,
- .vite {
- inset-inline: 0;
- margin: 0 auto;
- }
-
- .base {
- width: 170px;
- position: relative;
- z-index: 0;
- }
-
- .framework,
- .vite {
- position: absolute;
- }
+* { box-sizing: border-box; }
+body { min-width: 320px; }
- .framework {
- z-index: 1;
- top: 34px;
- height: 28px;
- transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
- scale(1.4);
- }
-
- .vite {
- z-index: 0;
- top: 107px;
- height: 26px;
- width: auto;
- transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
- scale(0.8);
- }
+.app-shell {
+ min-height: 100vh;
+ background: radial-gradient(circle at 78% 42%, #43331e 0, #1c1814 28%, #11100f 66%);
+ overflow: hidden;
}
-#center {
- display: flex;
- flex-direction: column;
- gap: 25px;
- place-content: center;
- place-items: center;
- flex-grow: 1;
-
- @media (max-width: 1024px) {
- padding: 32px 20px 24px;
- gap: 18px;
- }
+.main-header {
+ max-width: 1240px;
+ margin: 0 auto;
+ padding: 28px 48px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}
-#next-steps {
- display: flex;
- border-top: 1px solid var(--border);
- text-align: left;
-
- & > div {
- flex: 1 1 0;
- padding: 32px;
- @media (max-width: 1024px) {
- padding: 24px 20px;
- }
- }
-
- .icon {
- margin-bottom: 16px;
- width: 22px;
- height: 22px;
- }
-
- @media (max-width: 1024px) {
- flex-direction: column;
- text-align: center;
- }
+.app-title {
+ color: rgb(212, 175, 55);
+ text-decoration: none;
+ display: inline-flex;
+ flex-direction: column;
+ align-items: stretch;
}
-#docs {
- border-right: 1px solid var(--border);
-
- @media (max-width: 1024px) {
- border-right: none;
- border-bottom: 1px solid var(--border);
- }
+.app-title-text {
+ font-size: 56px;
+ margin: 0;
}
-#next-steps ul {
- list-style: none;
- padding: 0;
- display: flex;
- gap: 8px;
- margin: 32px 0 0;
-
- .logo {
- height: 18px;
- }
-
- a {
- color: var(--text-h);
- font-size: 16px;
- border-radius: 6px;
- background: var(--social-bg);
- display: flex;
- padding: 6px 12px;
- align-items: center;
- gap: 8px;
- text-decoration: none;
- transition: box-shadow 0.3s;
-
- &:hover {
- box-shadow: var(--shadow);
- }
- .button-icon {
- height: 18px;
- width: 18px;
- }
- }
-
- @media (max-width: 1024px) {
- margin-top: 20px;
- flex-wrap: wrap;
- justify-content: center;
+.header-note {
+ font-size: 15px;
+ margin: 0;
+ font-weight: 400;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ white-space: nowrap;
+ text-align: center;
+}
- li {
- flex: 1 1 calc(50% - 8px);
- }
+.search-section {
+ position: relative;
+ max-width: 1240px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 0.9fr 1.1fr;
+ padding: 30px 48px 70px;
+}
- a {
- width: 100%;
- justify-content: center;
- box-sizing: border-box;
- }
- }
+.search-section {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ width: 100%;
}
-#spacer {
- height: 88px;
- border-top: 1px solid var(--border);
- @media (max-width: 1024px) {
- height: 48px;
- }
+.hero-art {
+ display: flex;
+ justify-content: flex-end;
}
-.ticks {
- position: relative;
- width: 100%;
+.search-controls {
+ display: flex;
+ gap: 10px;
+ max-width: 480px;
+}
- &::before,
- &::after {
- content: '';
- position: absolute;
- top: -4.5px;
- border: 5px solid transparent;
- }
+.searchbar {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ min-width: 0;
+ padding: 0 16px;
+ border: 1px solid #716044;
+ border-radius: 4px;
+ background: rgba(20, 18, 15, 0.8);
+}
+.search-icon {
+ margin-right: 10px;
+ color: #eab342;
+ font-size: 1.6rem;
+ line-height: 1;
+}
+.searchbar input {
+ width: 100%;
+ padding: 15px 0;
+ border: 0;
+ outline: 0;
+ color: #f8f0df;
+ background: transparent;
+ font: inherit;
+}
+.searchbar input::placeholder {
+ color: #847b6c;
+}
+.search-controls button {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 0 18px;
+ border: 1px solid #eab342;
+ border-radius: 4px;
+ color: #17130d;
+ background: #eab342;
+ font: inherit;
+ font-weight: 700;
+ cursor: pointer;
+}
+.search-controls button:hover {
+ background: #f7ca65;
+}
+.search-controls button img {
+ width: 17px;
+ height: 17px;
+ object-fit: contain;
+}
- &::before {
- left: 0;
- border-left-color: var(--border);
- }
- &::after {
- right: 0;
- border-right-color: var(--border);
- }
+.hero-art {
+ position: relative;
+ align-self: stretch;
+ min-height: 600px;
+ display: grid;
+ place-items: center;
+}
+.hero-art img {
+ position: relative;
+ z-index: 1;
+ width: min(100%, 680px);
+ max-height: 760px;
+ object-fit: contain;
+ filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.45));
}
+.art-glow {
+ position: absolute;
+ width: 62%;
+ aspect-ratio: 1;
+ border-radius: 50%;
+ background: rgba(226, 157, 38, 0.13);
+ filter: blur(45px);
+}
\ No newline at end of file
diff --git a/webdev-prosjekt1/src/App.tsx b/webdev-prosjekt1/src/App.tsx
index 113a1b2..27caa3e 100644
--- a/webdev-prosjekt1/src/App.tsx
+++ b/webdev-prosjekt1/src/App.tsx
@@ -1,11 +1,35 @@
-import { useState } from 'react'
-import './App.css'
+import './App.css';
+import { Button } from './components/Button';
+import { Searchbar } from './components/Searchbar';
+import filterIcon from './assets/filter.png';
+import musicWizImage from './assets/musicwiz.png';
function App() {
return (
<>
+
+
+
+
+
+
+
+
+