diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..c6a474df6 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index a15b0ecb9..079597ad8 100644 --- a/README.md +++ b/README.md @@ -1 +1,6 @@ -# js-project-business-site \ No newline at end of file +# js-project-business-site + +section 1: toppmeny (logga location IG) +section 2: hero image (header) +section 3: menybar (bilder) zoomas vid hover +section 4: menybar (text). länkar till 1. dropdown meny 2. dropdown meny 3. form diff --git a/coffeecup.png b/coffeecup.png new file mode 100644 index 000000000..ba7ab9f24 Binary files /dev/null and b/coffeecup.png differ diff --git a/herovid.mp4 b/herovid.mp4 new file mode 100644 index 000000000..c48603623 Binary files /dev/null and b/herovid.mp4 differ diff --git a/ig.jpeg b/ig.jpeg new file mode 100644 index 000000000..ec13da068 Binary files /dev/null and b/ig.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 000000000..132d0ed5e --- /dev/null +++ b/index.html @@ -0,0 +1,210 @@ + + + + + + + no name kafé + + + + + +
+ + + + + + + + + + +

NO NAME
KAFÉ

+ +
+ + +
+ + +
+ coffee + +

COFFEE

+ + + +
+ + +
+ food + +

FOOD

+ + +
+ + +
+ hang your art +

HANG YOUR
ART

+ + +
+

Want to hang your art in our cafe?
+ Fill out your info and we will get back with more information shortly! +

+ + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + \ No newline at end of file diff --git a/logga.png b/logga.png new file mode 100644 index 000000000..8e8fb36f2 Binary files /dev/null and b/logga.png differ diff --git a/logga2.png b/logga2.png new file mode 100644 index 000000000..59e97da06 Binary files /dev/null and b/logga2.png differ diff --git a/macka.png b/macka.png new file mode 100644 index 000000000..f5d1caf46 Binary files /dev/null and b/macka.png differ diff --git a/painting.png b/painting.png new file mode 100644 index 000000000..5d339f327 Binary files /dev/null and b/painting.png differ diff --git a/pin.png b/pin.png new file mode 100644 index 000000000..62c7c1317 Binary files /dev/null and b/pin.png differ diff --git a/style.css b/style.css new file mode 100644 index 000000000..a4ca7fe5b --- /dev/null +++ b/style.css @@ -0,0 +1,339 @@ +/* repsonsive mobile first */ + +body { + background: #ac0d0d; + color: hsl(51, 35%, 93%); + margin: 0% auto; +} + +/*hero video*/ +video { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + opacity: 20%; + object-fit: cover; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + z-index: -1; +} + + +/* start of navbar */ +.navbar { + display: flex; + align-items: center; + padding: 10px; + justify-content: space-between; +} + +/*logga*/ +.navbar img { + width: 60px; + margin-left: 10px; + justify-items: left; +} + +/*hamburger*/ +.hamburger { + font-size: 40px; + cursor: pointer; + background: none; + border: none; +} + +/*navbar-links*/ +.nav-links { + display: none; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 30px; + padding: 5px; + background: rgba(248, 241, 241, 0.9); + border-radius: 5px; + width: 20vw; + +} + +.nav-links.show { + display: flex; +} + +/* end of navbar */ + +/*hero image*/ +h1 { + font-size: 80px; + margin-left: 10px; + margin-bottom: 100px; +} + +/*start of menybar*/ +.menybar { + display: grid; + place-items: center; + max-height: 100%; + gap: 80px; + +} + +.menybubbla { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 320px; + height: 320px; + border-radius: 50%; + background: #F3F1E6; + color: #ac0d0d; + cursor: pointer; + transition: transform 0.4s ease, box-shadow 2.4s ease; +} + +.menybubbla:last-child { + margin-bottom: 390px; +} + +.menybubbla:focus-within .dropdown-menu { + opacity: 1; + pointer-events: auto; + transform: translateX(-50%) scale(1); +} + + +.illustration { + object-fit: cover; + border-radius: 50%; + max-width: 60%; + margin-top: 20px; + transition: transform 0.4s ease; +} + +/*menybar-text*/ +h2 { + color: #CC0606; + position: relative; + display: inline-block; + cursor: pointer; + font-size: 20px; + text-align: center; +} + +/*start dropdown menu styling*/ +.dropdown-menu { + position: absolute; + width: 100%; + height: 100%; + max-width: 320px; + border-radius: 50%; + opacity: 0; + transition: opacity 0.3s ease, transform 0.3s ease; + transform: translateX(-50%) translateY(0%); + background-color: #F3F1E6; + list-style: none; + z-index: 10; + border-radius: 50%; + padding: 0; + left: 50%; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + font-size: 14px; + gap: 10px; +} + +/*end dropdown menu styling*/ + +/*start dropdown form styling*/ +.dropdown-form { + display: block; + position: absolute; + text-align: center; + top: 100%; + left: 50%; + transform: translateX(-50%) scale(0.95); + background-color: #F3F1E6; + font-size: 14px; + width: 90%; + max-width: 310px; + z-index: 10; + border: 2px solid #871515; + border-radius: 10%; + padding: 20px; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease, transform 0.3s ease; + margin-bottom: 30px; +} + + +.menybubbla:focus-within .dropdown-form { + opacity: 1; + pointer-events: auto; + transform: translateX(-50%) scale(1); +} + +.dropdown-form label { + display: block; + margin: 8px 0 4px; + font-size: 14px; + text-align: left; +} + +.dropdown-form input[type="text"], +.dropdown-form input[type="email"], +.dropdown-form input[type="url"] { + width: 100%; + padding: 5px; + margin-bottom: 10px; + border: 1px solid #ac0d0d; + background-color: #ece4e4; + border-radius: 4px; + box-sizing: border-box; +} + +.consent { + display: flex; + align-items: center; + gap: 0.5rem; + margin: 8px 0 4px; +} + +.dropdown-form button { + width: 80%; + padding: 10px; + background: #cf6161; + border: none; + border-radius: 6px; + cursor: pointer; + font-size: 18px; +} + +/*end of menybar*/ + +footer { + background: #F3F1E6; + opacity: 50%; + color: #CC0606; + text-align: center; + max-width: auto; + margin-bottom: 0px; +} + + +/* responsive tablet and desktop */ +@media (min-width: 667px) { + body { + background: #F3F1E6; + color: #CC0606; + } + + /*hamburger-menu*/ + .hamburger { + display: none; + } + + .nav-links { + display: flex; + background: none; + flex-direction: row; + gap: 50px; + justify-content: right; + margin-right: 30px; + } + + .nav-links a { + text-decoration: none; + color: #CC0606; + } + + h1 { + font-size: 100px; + margin-left: 30px; + } + + .menybar { + grid-template-columns: repeat(3, minmax(200px, 1fr)); + margin: 200px 0px 200px 0px; + gap: 0; + } + + .menybubbla { + width: 80%; + height: 100%; + border: 2px solid #ac0d0d; + border-radius: 10%; + margin-bottom: 50px; + position: relative; + overflow: auto; + } + + .menybubbla:hover { + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); + transform: scale(1.2); + transition: 0.4s ease; + } + + .menybubbla .illustration { + max-width: 80%; + max-height: 80%; + } + + .dropdown-menu { + border-radius: 10%; + font-size: 20px; + list-style-position: none; + width: 90%; + height: 90%; + } + + .menybubbla:hover .dropdown-menu { + opacity: 1; + transition: 0.3s easy; + } + + .dropdown-form { + top: 0; + left: 50%; + background-color: #F3F1E6; + width: 100%; + height: 100%; + border-radius: inherit; + border: none; + box-sizing: border-box; + position: absolute; + transition: 0.3s ease; + } + + .menybubbla:hover .dropdown-form { + display: block; + opacity: 1; + + } + + .menybubbla:last-child { + margin-bottom: 50px; + } + + footer { + margin-bottom: none; + background: #CC0606; + opacity: 70%; + color: #F3F1E6; + text-align: center; + height: 40px; + justify-content: center; + } + +} \ No newline at end of file