Margins toegepast en favicon

Wat code geschreven en een voorzichtige plan voor de interactie #4
miel775 · Jan 13, 2025 · e6f63b6 · e6f63b6
1 parent 8fd47b4
commit e6f63b6
Show file tree

Hide file tree

Showing 3 changed files with 177 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -3,30 +3,35 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bread and Butter</title>
+    <title> Bread and Butter</title>
+
+    <link rel="icon" type="image/x-icon" href="assets/Overig/favicon.png">
+
     <link rel="stylesheet" href="styles/style.css">
     <link rel="stylesheet" href="styles/stylesheet.css">
 
     <script src="script/script.js" defer></script>
 </head>
-<header>
-
-    <img src="assets/Overig/just-logo.svg" class="logo">
 
+<body>
 
-    <!-- source universe.io -->
-    <label for="theme" class="theme">
-            <input id="theme" class="theme-toggle"
-            type="checkbox" role="switch" name="theme" value="dark">
+    <header>
+
+        <img src="assets/Overig/just-logo.svg">
+
+
+        <!-- source universe.io -->
+        <label for="theme" class="theme">
+                <input id="theme" class="theme-toggle"
+                type="checkbox" role="switch" name="theme" value="dark">
+                </span>
+                <!-- waarom worden deze niet transparant op de achtergrond? -->
+                <img src="assets-student/moon.svg" class="moonicon">
+                <img src="assets-student/sun.svg" class="sunicon">
             </span>
-            <!-- waarom worden deze niet transparant op de achtergrond? -->
-            <img src="assets-student/moon.svg" class="moonicon">
-            <img src="assets-student/sun.svg" class="sunicon">
-        </span>
-    </label>
-
-</header>
-<body>
+        </label>
+
+    </header>
 
     <section class="banner">
             <!-- slideshow front page -->
@@ -36,6 +41,9 @@
     <div class="breadandbutter">
         <img src="assets/Overig/b&b-black.svg">
         <img src="assets/Overig/b&b-white.svg">
+
+        <div class="blackspace"></div>
+
     </div>
     </section>
 
@@ -53,9 +61,8 @@ <h2> Why accessiblity matters </h2>
     <section class="quote">
         <h2>Digital Accessibility improves the experience for all users, not just those with disabilities.</h2>
             <p>Tizian Fendt, UX designer at JUST</p>
-
-            <img class="quote" src="assets-student/61ffd1e68159f61573be4a90_portfolio-hero.jpg" alt="Tizian Fendt, UX Designer staat met een microfoon">
-    </section>
+            <img class="sample" src="assets-student/61ffd1e68159f61573be4a90_portfolio-hero.jpg">
+        </section>
 
     <section>
         <h2> Why we need a minset shift </h2>
@@ -65,11 +72,11 @@ <h2> Why we need a minset shift </h2>
                 Ultimately, by embracing accessibility, you not only foster inclusivity but also enjoy higher conversion rates, as more users can engage seamlessly with your content or services.</p>
     </section>
 
-    <section>
+    <section class="next-events">
         <h2>Join our next events</h2>
             <p>Do you want to join our next Bread & Butter event? Leave your email and we’ll keep you up to date.</p>
 
-            <form>
+            <form class="email">
                 <label for="email"> Enter your Email</label>
                 <input type="email" name="email" id="email" required >
             </form>
@@ -108,8 +115,8 @@ <h2>Join our next events</h2>
 
 
 <footer>
-    <p>[email protected]</p>
-    <p>+31 (0)88 587 8000</p>
+    <a href="mailto:[email protected]">[email protected].com </a>
+    <a href="callto:+31 (0)88 587 8000">+31 (0)88 587 8000 </a>
 </footer>
 
 </html>
diff --git a/script/script.js b/script/script.js
@@ -0,0 +1,5 @@
+const clicking = document.querySelector('.breadandbutter')
+
+    clicking.addEventListener('click', function(){
+        turn.classList.add('turning');
+    });
diff --git a/styles/style.css b/styles/style.css
@@ -30,13 +30,16 @@
 }
 
 * {
-    background-color: var(--background-color-dark);
-    margin: 1em;
+    text-decoration: none;
 }
 
+
 body {
     font-family: Antique Legacy;
     background: transparent;
+    background-color: var(--background-color-dark);
+    margin: 1em;
+
 }
 
 
@@ -50,24 +53,52 @@ body {
     left: 5%;
 }
 
+
+.breadandbutter {
+    position: absolute;
+    min-width: 50em;
+    left: 30em;
+    top: 15em;
+    z-index: 2;
+
+}
+
+.blackspace {
+    position: absolute;
+    background-color: var(--background-color-dark);
+    min-width: 130em;
+    height: 13em;
+    z-index: -1;
+    top: 12em;
+    left: -50em;
+}
+
 .breadandbutter img:nth-child(1) {
     display: none;
 }
 
-.breadandbutter {
-    display: flex;
-    top: 1em;
-
+.breadandbutter img:nth-child(2) {
+    display: block;
+    animation: turnaround var(--animation-duration) infinte;
 }
 
-header {
-    height: 1vh;
+
+@keyframes turnaround {
+    0% {
+        transform: rotate(0);
+    }
+
+    100% {
+        transform: rotate(360);
+    }
 }
 
+
 header img {
     position: absolute;
     left: 2em;
-    top: 1em;
+    top: 2em;
+    z-index: 2;
 }
 
 .header button {
@@ -144,15 +175,31 @@ header img {
 }
 
 .moonicon {
-    display:block;
+    display: block;
     position: absolute;
     z-index: 2;
-    width: 24px;
-    top: 10px;
-    right: 15px;
+    width: 20px;
+    top: 0.8em;
+    left: 0.9em;
     color: var(--color-3);
 }
 
+.moonicon:hover {
+    animation: hovericon var(--animation-duration) ease-in-out;
+}
+
+@keyframes hovericon {
+    0% {
+        scale: 1;
+    }
+
+    100% {
+        scale: 1.2;
+        rotate: 15deg;
+    }
+
+}
+
 .sunicon {
     display: none;
 }
@@ -174,6 +221,16 @@ body section:nth-child(1) {
     align-items: center;
 }
 
+body section:nth-of-type(2) p {
+    font-size: var(--f3);
+    margin-left: 2em;
+    margin-right: 2em;
+}
+
+body section:nth-of-type(2) p:nth-of-type(2) {
+    font-size: var(--f4);
+}
+
 body section:nth-child(3) h1 {
     font-size: var(--f2);
     color: var(--color-2);
@@ -200,13 +257,14 @@ h2 {
 
 h1 {
     color: var(--background-color-light);
+    margin: auto;
 }
 
 
 /* slideshow banner */
 .banner {
     position: relative;
-    height: 25em;
+    height: 40em;
     width: 120%;
     left: -10em;
     top: -3em;
@@ -220,7 +278,7 @@ h1 {
 .slideshowfront {
     position: absolute;
     width: 120%;
-    height: 100%;
+    height: 40em;
     background-size: cover;
     background-position: center;
     animation: slideshow 20s infinite;
@@ -258,20 +316,82 @@ body section {
     background-color: var(--background-color-dark);
 }
 
+section:nth-of-type(2) {
+    margin-left: 2em;
+}
+
+section:nth-of-type(3) {
+    margin: 5em;
+}
+
+section:nth-of-type(5) {
+    margin: 5em;
+}
+
+section:nth-of-type(3) h2 {
+    color: var(--color-4);
+    font-size: var(--f3);
+}
+
+section:nth-of-type(6) {
+    margin-left: 2em;
+}
+
+section:nth-of-type(6) h2 {
+    font-size: var(--f1);
+    font-family: Parabole;
+    margin: auto;
+}
+
 .stickerselection {
     display: none;
 }
 
-.quote {
-    position: fixed;
-    width: 20%;
+
+.quote h2 {
+    position: absolute;
+    margin-top: 4em;
+    margin-left: 3em;
+    width: 15em;
+    z-index: 2;
 }
 
+.sample {
+    background-position: -400px -100px;
+    width: 100%;
+    height: 15em;
+    object-fit: cover;
+}
 
-.fotocarrousel img {
-    position: absolute;
-    width: 9em;
-    overflow: hidden;
+.email {
+    display: flex;
+    margin-left: 1em;
+    font-size: var(--f3);
+    color: var(--color-2);
+}
+
+.email input {
+    min-height: 2em;
+    min-width: 16em;
+    background-color: var(--background-color-dark);
+    border: 2px solid var(--color-3);
+    margin: 1em;
+}
+
+footer {
+    margin-top: 5em;
+    height: 10em;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+footer a:nth-of-type(1) {
+    grid-column-start: 2;
+    text-align: center;
+}
+
+footer a:nth-of-type(2) {
+    text-align: center;
 }