wave header

sau-mili · Feb 13, 2024 · 8ad2f79 · 8ad2f79
1 parent 9477d4b
commit 8ad2f79
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -18,15 +18,19 @@ <h1 style="color:rgb(255, 227, 232)">TechknowCradle<img src="download.png"></img
                     <li><a href="#contact">Contact</a></li>
                 </ul>
             </nav>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="hsl(0, 3%, 6%)" fill-opacity="1" d="M0,32L14.1,32C28.2,32,56,32,85,69.3C112.9,107,141,181,169,202.7C197.6,224,226,192,254,165.3C282.4,139,311,117,339,122.7C367.1,128,395,160,424,197.3C451.8,235,480,277,508,261.3C536.5,245,565,171,593,170.7C621.2,171,649,245,678,245.3C705.9,245,734,171,762,133.3C790.6,96,819,96,847,117.3C875.3,139,904,181,932,170.7C960,160,988,96,1016,96C1044.7,96,1073,160,1101,186.7C1129.4,213,1158,203,1186,170.7C1214.1,139,1242,85,1271,58.7C1298.8,32,1327,32,1355,42.7C1383.5,53,1412,75,1426,85.3L1440,96L1440,0L1425.9,0C1411.8,0,1384,0,1355,0C1327.1,0,1299,0,1271,0C1242.4,0,1214,0,1186,0C1157.6,0,1129,0,1101,0C1072.9,0,1045,0,1016,0C988.2,0,960,0,932,0C903.5,0,875,0,847,0C818.8,0,791,0,762,0C734.1,0,706,0,678,0C649.4,0,621,0,593,0C564.7,0,536,0,508,0C480,0,452,0,424,0C395.3,0,367,0,339,0C310.6,0,282,0,254,0C225.9,0,198,0,169,0C141.2,0,113,0,85,0C56.5,0,28,0,14,0L0,0Z"></path></svg>
+
         </header>
+        <div class="wave">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="hsl(0, 3%, 6%)" fill-opacity="1" d="M0,32L14.1,32C28.2,32,56,32,85,69.3C112.9,107,141,181,169,202.7C197.6,224,226,192,254,165.3C282.4,139,311,117,339,122.7C367.1,128,395,160,424,197.3C451.8,235,480,277,508,261.3C536.5,245,565,171,593,170.7C621.2,171,649,245,678,245.3C705.9,245,734,171,762,133.3C790.6,96,819,96,847,117.3C875.3,139,904,181,932,170.7C960,160,988,96,1016,96C1044.7,96,1073,160,1101,186.7C1129.4,213,1158,203,1186,170.7C1214.1,139,1242,85,1271,58.7C1298.8,32,1327,32,1355,42.7C1383.5,53,1412,75,1426,85.3L1440,96L1440,0L1425.9,0C1411.8,0,1384,0,1355,0C1327.1,0,1299,0,1271,0C1242.4,0,1214,0,1186,0C1157.6,0,1129,0,1101,0C1072.9,0,1045,0,1016,0C988.2,0,960,0,932,0C903.5,0,875,0,847,0C818.8,0,791,0,762,0C734.1,0,706,0,678,0C649.4,0,621,0,593,0C564.7,0,536,0,508,0C480,0,452,0,424,0C395.3,0,367,0,339,0C310.6,0,282,0,254,0C225.9,0,198,0,169,0C141.2,0,113,0,85,0C56.5,0,28,0,14,0L0,0Z"></path></svg>
+        </div>
         <section id="about">
+
             <h2>About TechknowCradle</h2>
             <p>Techknowcradle is an upcoming event that offers exciting science workshops for school kids. Our workshops are designed to spark curiosity and foster a love for science among young learners.</p>
         </section>
 
         <section style="background-color: rgb(1, 39, 43);" id="workshops">
-            <h2 style="color:rgb(197, 255, 255)">Workshops Offered</h2>
+            <h2 style="color:rgb(197, 255, 255); padding: 20px;">Workshops Offered </h2>
             <div class="workshop-container">
                 <div class="workshop">
 

diff --git a/style.css b/style.css
@@ -1,3 +1,9 @@
+*{
+    margin:0px;
+    padding: 0px;
+    box-sizing: border-box;
+}
+
 body {
     font-family: Arial, sans-serif;
     margin: 0;
@@ -13,12 +19,27 @@ header {
     padding-top: 20px;
     text-align: center;
     margin: 0;
-
+    padding-bottom: 0;
+    margin-bottom: 0px;
+
+}
+
+
+
+.wave{
+    position:relative;
+    width:100%;
+    height:30%;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+    overflow:hidden;
 }
 
 header img{
     width:70px;
-    height: auto;    
+    height: auto; 
+
 
 }
 h2{
@@ -41,19 +62,21 @@ nav ul {
 svg{
 
     width: 100%;
-
+    
     background-color: rgb(249, 249, 194);
     margin: 0px;
     padding: 0px;
     border:none;
-
+
+    overflow: hidden;
 
 }
 
 nav ul li {
     color:rgb(167, 233, 250);
     display: inline;
     padding: 20 px;
+    justify-content: space-between;
 
     margin-right: 30px;
 }
@@ -85,6 +108,7 @@ section {
     padding: 20px;
     margin-top: 0px;
 
+
 }
 
 section h2 {
@@ -134,6 +158,7 @@ footer {
 .workshop-container {
     display: flex;
     flex-wrap: wrap;
+    padding: 20px;
     justify-content: space-between; 
 
     /* padding: 20px; */