Integrify-Finland · AlinaCGM · Oct 31, 2022 · Oct 31, 2022 · Nov 1, 2022 · Nov 1, 2022
diff --git a/index.html b/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+    />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <title>HTML first assignment</title>
+  </head>
+
+  <body>
+    <div class="hero">
+    <div class="topnav" id="myTopnav">
+      <div class="logo">
+        <a class="logo" href="#">LOGO HERE</a>
+      </div>
+      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+        <i class="fa-solid fa-ellipsis"></i>
+      </a>
+
+      <a href="#home">ABOUT US</a>
+      <a href="#blogs">BLOGS</a>
+      <a href="#about"> HOME</a>
+    </div>
+
+    <h1>BE CREATIVE!</h1>
+
+    <p class="hero-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
+      empor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
+
+       <div class="btn-div">
+
+        <button class="btn-hero">LEARN MORE</button>
+        <button class="btn-hero">JOIN US</button>
+       </div>
+
+    </div>
+
+    <h2>OUR SERVICES</h2>
+    <div class="row">
+      <div class="col">
+        <h3>TITLE HERE</h3>
+        <p>Lorem ipsum dolor sit amet, 
+          consectetur adipiscing elit, 
+          sed do eiusmod tempor 
+          incididunt ut 
+          labore et dolore magna aliqua. 
+          Ut enim ad minim veniam</p>
+          <button class="button">LEARN MORE</button>
+      </div>
+      <div class="col">
+        <h3>TITLE HERE</h3>
+        <p>Lorem ipsum dolor sit amet, 
+          consectetur adipiscing elit, 
+          sed do eiusmod tempor 
+          incididunt ut 
+          labore et dolore magna aliqua. 
+          Ut enim ad minim veniam</p>
+          <button class="button">LEARN MORE</button>
+
+      </div>
+      <div class="col">
+        <h3>TITLE HERE</h3>
+        <p>Lorem ipsum dolor sit amet, 
+          consectetur adipiscing elit, 
+          sed do eiusmod tempor 
+          incididunt ut 
+          labore et dolore magna aliqua. 
+          Ut enim ad minim veniam</p>
+          <button class="button">LEARN MORE</button>
+      </div>
+    </div class="">
+    <footer class="footer">
+      <div class="social-icons">
+        <span><i class="fa-brands fa-square-instagram"></i></span>
+        <span><i class="fa-brands fa-linkedin-in"></i></span>
+        <span><i class="fa-brands fa-twitter"></i></span>
+      </div>
+      <div class="copyright">
+        <i class="fa-regular fa-copyright"></i> Copyright 2022
+      </div>
+    </footer>
+
+    <script>
+      function myFunction() {
+        var x = document.getElementById("myTopnav");
+        if (x.className === "topnav") {
+          x.className += " responsive";
+        } else {
+          x.className = "topnav";
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,189 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
+
+body {
+  margin: 0;
+  font-family: "Montserrat", sans-serif;
+}
+
+.topnav {
+  overflow: hidden;
+  background-color: hsl(0, 0%, 20%, 0.5);
+  position: sticky;
+}
+.logo {
+  float: left;
+}
+.topnav a {
+  float: right;
+  display: block;
+  color: #f2f2f2;
+  text-align: end;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+.topnav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+/* .topnav .icon {
+  display: none;
+} */
+
+.hero {
+  width: 100%;
+  height: 550px;
+
+  background-image: url("table1.png");
+  background-color: rgb(6, 5, 5);
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+h1 {
+  text-align: center;
+  margin-top: 50px;
+  font-weight: 900;
+  font-size: 60px;
+  color: white;
+}
+h2 {
+  text-align: center;
+  margin-top: 50px;
+  font-weight: 900;
+  font-size: 60px;
+}
+.row {
+  display: flex;
+  justify-content: space-around;
+}
+.col {
+  width: 30%;
+  height: auto;
+  border: 2px solid rgb(27, 26, 26);
+  text-align: center;
+}
+h3 {
+  text-align: center;
+}
+p {
+  padding: 10px;
+  text-align: center;
+}
+button {
+  margin-bottom: 40px;
+  border: 2px solid #121212;
+}
+.button:hover {
+  background-color: #121212;
+  color: white;
+  cursor: pointer;
+}
+.btn-div {
+  text-align: center;
+}
+.btn-hero {
+  width: 150px;
+  border: 2px solid white;
+  background-color: transparent;
+  color: white;
+  padding: 5px;
+}
+.btn-hero:hover {
+  cursor: pointer;
+  background-color: white;
+  color: #121212;
+}
+.hero-text {
+  color: white;
+  margin-inline: 20%;
+  line-height: 2rem;
+  letter-spacing: 1px;
+}
+.footer {
+  display: flex;
+  justify-content: space-between;
+  padding-inline: 40px;
+  margin-top: 200px;
+  height: 50px;
+  background-color: rgba(0, 0, 0, 0.85);
+  color: white;
+  align-items: center;
+}
+.social-icon {
+}
+@media screen and (max-width: 600px) {
+  .topnav a:not(:first-child) {
+    display: none;
+  }
+  .topnav a.icon {
+    display: inline;
+    background-color: transparent;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .topnav.responsive {
+    position: relative;
+  }
+  .topnav.responsive .icon {
+    position: sticky;
+    right: 40%;
+    top: 0;
+    color: #ddd;
+  }
+  .topnav.responsive a {
+    float: none;
+    display: block;
+    text-align: right;
+  }
+  h1 {
+    font-size: 30px;
+  }
+  h2 {
+    text-align: center;
+    margin-top: 50px;
+    font-weight: 600;
+    font-size: 30px;
+  }
+  .hero-text {
+    color: white;
+    margin-inline: 5%;
+    line-height: 1.5rem;
+  }
+  .row {
+    display: flex;
+    flex-direction: column;
+  }
+  .col {
+    width: 80%;
+    height: auto;
+    margin: auto;
+    margin-bottom: 40px;
+    border: 2px solid rgb(27, 26, 26);
+    text-align: center;
+  }
+  .footer {
+    display: block;
+    padding-block: 20px;
+  }
+  .social-icons {
+    display: flex;
+    justify-content: space-evenly;
+  }
+  .copyright {
+    text-align: center;
+    margin-top: 10px;
+  }
+  .btn-hero {
+    width: 200px;
+    border: 2px solid white;
+    background-color: transparent;
+    color: white;
+    padding: 5px;
+    cursor: pointer;
+  }
+}
diff --git a/table.jpg b/table.jpg
diff --git a/table1.png b/table1.png