collapsed navbar background color

behaviour of minimum screen size

css/index.css

@@ -1,6 +1,6 @@
 body, html {
     height: 100%;
-
+    scroll-behavior: smooth;
     /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
 }
 
@@ -15,57 +15,77 @@ body, html {
     color: white;
 }
 
-.lightOpacity{
+.lightOpacity {
     opacity: 0.6;
 }
 
-.bigText{
+.bigText {
     transition-delay: 200ms;
     font-family: 'Helvetica Neue', fantasy;
     -webkit-font-smoothing: antialiased
     /*    todo here!*/
 }
 
-#preTitle{
+#preTitle {
     opacity: 0.8;
+    color: #fffd80;
 }
 
 /* screen larger than 600px -- desktop */
 @media screen and (min-width: 601px) {
-    #section1{
+    .tile {
+        min-height: 500px;
+    }
+
+    #section1 {
         padding-top: 200px;
     }
 
-    #preTitle{
+    #preTitle {
         font-size: 35px;
     }
+
     #titleText {
         font-size: 80px;
     }
-    #subTitleText{
+
+    #subTitleText {
         font-size: 50px;
     }
-    #meaningFullSentence{
+
+    #meaningFullSentence {
         width: 40%;
     }
 }
 
 /* Screen smaller than 600px -- mobile */
 @media screen and (max-width: 600px) {
-    #section1{
+    /*background color of collapsed navbar*/
+    .navbar-nav {
+        background: #311E25;
+    }
+
+    .tile {
+        min-height: 300px;
+    }
+
+    #section1 {
         padding-top: 100px;
     }
 
-    #preTitle{
+    #preTitle {
         font-size: 15px;
     }
+
     #titleText {
         font-size: 30px;
     }
-    #subTitleText{
+
+    #subTitleText {
         font-size: 20px;
     }
-    #meaningFullSentence{
+
+    #meaningFullSentence {
         width: 100%;
         font-size: 13px;
     }

index.html

@@ -40,14 +40,8 @@
             <li class="nav-item">
                 <a class="nav-link" href="#section3">Projects</a>
             </li>
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
-                    Contact
-                </a>
-                <div class="dropdown-menu">
-                    <a class="dropdown-item" href="#section41">Link 1</a>
-                    <a class="dropdown-item" href="#section42">Link 2</a>
-                </div>
+            <li class="nav-item">
+                <a class="nav-link" href="#section4">Contact</a>
             </li>
         </ul>
     </div>
@@ -62,8 +56,8 @@
             <div class="bigText" id="titleText">Lukas Heiligenbrunner</div>
             <div class="bigText lightOpacity" id="subTitleText">A creative IT Student</div>
             <p id="meaningFullSentence" class="lightOpacity">
-                I'm a software engineer based in Austria who loves to
-                develop code and is always open for new projects.
+                I'm a software engineer based in Austria who loves code
+                development and is always open for new projects and ideas.
             </p>
         </div>
     </div>
@@ -71,7 +65,7 @@
 
 <div id="section2" class="bg-warning tile">
     <div class="container">
-        <h1>Section 2</h1>
+        <h1>About me</h1>
         <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
             look at
             the navigation bar while scrolling!</p>
@@ -82,7 +76,7 @@
 </div>
 <div id="section3" class="bg-secondary tile">
     <div class="container">
-        <h1>Section 3</h1>
+        <h1>Projects</h1>
         <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
             look at
             the navigation bar while scrolling!</p>
@@ -91,20 +85,10 @@
             the navigation bar while scrolling!</p>
     </div>
 </div>
-<div id="section41" class="bg-danger tile">
+<div id="section4" class="bg-danger tile">
     <div class="container">
-        <h1>Section 4 Submenu 1</h1>
-        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
-            look at
-            the navigation bar while scrolling!</p>
-        <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
-            look at
-            the navigation bar while scrolling!</p>
-    </div>
-</div>
-<div id="section42" class="bg-info tile">
-    <div class="container">
-        <h1>Section 4 Submenu 2</h1>
+        <h1>Contact</h1>
+        <h3>Stay in Contact!</h3>
         <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and
             look at
             the navigation bar while scrolling!</p>