Add files via upload

codegenweb · Oct 22, 2024 · 85d7d8c · 85d7d8c
1 parent 4638e6d
commit 85d7d8c
Show file tree

Hide file tree

Showing 3 changed files with 349 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Emmy</title>
+
+  <!-- icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+  <!-- Styles -->
+  <link rel="stylesheet" href="styles.css">
+
+</head>
+
+<body>
+  <section id="hero">
+    <header>
+      <a class="header-logo">Emmy<span>.</span></a>
+      <nav>
+        <a class="nav-item">Home</a>
+        <a class="nav-item">About</a>
+        <a class="nav-item">Portfolio</a>
+        <a class="nav-item">blog</a>
+        <a class="nav-item">contact</a>
+      </nav>
+      <button class="header-btn">Let's Talk</button>
+    </header>
+
+    <div class="content">
+      <div class="left">
+        <h3>Hi, I'm Emmy Rose!</h3>
+        <h1>web <span>designer</span></h1>
+        <p>
+          Emmy is a passionate and creative web designer known for crafting visually stunning and user-friendly websites. With a keen eye for design and a deep understanding of modern web development, she transforms ideas into beautifully functional digital experiences.
+        </p>
+        <div class="cta-section">
+          <button class="cta-1">Projects
+            <i class="fa-solid fa-code"></i>
+          </button>
+          <button class="cta-2">Hire me
+            <i class="fa-solid fa-arrow-up-right-from-square"></i>
+          </button>
+        </div>
+        <div class="social-section">
+          <i class="fa-brands fa-facebook-f"></i>
+          <i class="fa-brands fa-instagram"></i>
+          <i class="fa-brands fa-linkedin-in"></i>
+        </div>
+      </div>
+
+      <div class="right">
+        <div class="img-wrap">
+          <img class="hero-img " src="pro-pic.png">
+        </div>
+      </div>
+
+
+    </div>
+  </section>
+
+</body>
+
+</html>
diff --git a/pro-pic.png b/pro-pic.png
diff --git a/styles.css b/styles.css
@@ -0,0 +1,284 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+
+* {
+  padding: 0;
+  margin: 0;
+  outline: none;
+  border: none;
+  font-family: "Open Sans", sans-serif;
+}
+
+body {
+  padding: 0 10%;
+}
+#hero {
+  height: 100vh;
+  overflow: hidden;
+}
+header {
+  display: flex;
+  align-items: center;
+  gap: 70px;
+  animation: topIn 1.4s ease-in-out forwards;
+  opacity: 0;
+  animation-delay: 0.2s;
+}
+.header-logo {
+  font-size: 32px;
+  font-weight: 800;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: rgba(43, 58, 85, 0.9);
+}
+.header-logo span {
+  font-size: 72px;
+  color: rgb(133, 40, 255);
+  line-height: 0.2;
+}
+nav {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 70px;
+  padding: 20px 0;
+}
+.nav-item {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  color: grey;
+  transition: 0.3s;
+  cursor: pointer;
+  text-transform: capitalize;
+}
+.nav-item:hover {
+  color: rgb(133, 40, 255);
+}
+.header-btn {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  background-color: rgb(133, 40, 255);
+  color: white;
+  height: 45px;
+  width: 200px;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: 0.3s;
+}
+.header-btn:hover {
+  background-color: rgb(96, 28, 184);
+}
+
+.content {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+}
+.left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 40px;
+  height: 90vh;
+}
+
+.content h3 {
+  font-size: 3rem;
+  color: rgba(43, 58, 85, 0.9);
+  animation: bottomIn 1.4s ease-in-out forwards;
+  opacity: 0;
+  animation-delay: 0.2s;
+}
+
+.content h1 {
+  font-size: 5.5rem;
+  color: rgba(43, 58, 85, 0.9);
+  text-transform: uppercase;
+  font-weight: 800;
+  letter-spacing: 5px;
+  margin: -40px 0;
+  animation: bottomIn 1.4s ease-in-out forwards;
+  opacity: 0;
+  animation-delay: 0.3s;
+}
+h1 span {
+  color: rgb(133, 40, 255);
+}
+
+.content p {
+  font-size: 18px;
+  line-height: 1.8;
+  color: grey;
+  margin-top: 20px;
+  animation: bottomIn 1.4s ease-in-out forwards;
+  opacity: 0;
+  animation-delay: 0.4s;
+}
+
+.cta-section {
+  display: flex;
+  align-items: center;
+  gap: 60px;
+}
+
+.cta-section button {
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  height: 50px;
+  width: 300px;
+  cursor: pointer;
+  transition: 0.3s;
+  border-radius: 5px;
+  box-shadow: 0 10px 10px rgba(43, 58, 85, 0.2);
+
+  animation: bottomIn 1.4s ease-in-out forwards;
+  opacity: 0;
+  animation-delay: 0.5s;
+}
+.cta-1 {
+  background-color: rgba(43, 58, 85, 0.9);
+  color: white;
+}
+.cta-2 {
+  background-color: transparent;
+  color: rgb(133, 40, 255);
+  border: 2px solid rgb(133, 40, 255);
+}
+
+.cta-section button:hover {
+  background-color: rgb(133, 40, 255);
+  color: white;
+} 
+.right {
+  position: relative;
+}
+
+.hero-img {
+  width: 110%;
+  position: absolute;
+  bottom: 50px;
+  right: 0;
+  animation: imgIn 1.4s ease-in-out forwards;
+  animation-delay: 0.2s;
+  opacity: 0;
+}
+
+.social-section {
+  display: flex;
+  align-items: center;
+  gap: 50px;
+  margin-top: 50px;
+}
+.social-section i {
+  font-size: 18px;
+  font-weight: 600;
+  border: 2px solid rgba(43, 58, 85, 0.9);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  width: 20px;
+  padding: 8px;
+  border-radius: 25px;
+  color: rgba(43, 58, 85, 0.9);
+  cursor: pointer;
+  transition: 0.3s;
+
+  animation: bottomIn 1.4s ease-in-out forwards;
+  opacity: 0;
+  animation-delay: 0.6s;
+}
+.social-section i:hover {
+  color: rgb(133, 40, 255);
+  border-color: rgb(133, 40, 255);
+  transform: scale(1.1);
+}
+
+.img-wrap {
+  width: 100%;
+  height: 100vh;
+}
+
+/* Animation */
+@keyframes bottomIn {
+  from {
+    transform: translateY(250px) ;
+  }
+  to {
+    transform: translateY(0) ;
+    opacity: 1;
+  }
+}
+
+@keyframes topIn {
+  from {
+    transform: translateY(-100px) ;
+  }
+  to {
+    transform: translateY(0) ;
+    opacity: 1;
+  }
+}
+
+@keyframes imgIn {
+  from {
+    transform: translateY(250px) scale(0.8) ;
+  }
+  to {
+    transform: translateY(0) scale(1) ;
+    opacity: 1;
+  }
+}
+
+/* Responsive */
+
+@media screen and (max-width: 428px) {
+  body {
+    padding: 0 3%;
+  }
+  #hero {
+    overflow: visible;
+  }
+  header {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+  }
+  nav {
+    flex-direction: column;
+    gap: 20px;
+  }
+  .content {
+    display: flex;
+    flex-direction: column;
+    padding-top: 100px;
+  }
+  .content h3 {
+    font-size: 1.5rem;
+  }
+
+  .content h1 {
+    font-size: 3rem;
+    letter-spacing: 3px;
+    margin: -10px 0;
+  }
+  h1 span {
+    color: rgb(133, 40, 255);
+  }
+
+  .content p {
+    margin-top: 0;
+  }
+  .cta-section {
+    flex-direction: column;
+    gap: 20px;
+  }
+  .social-section {
+    justify-content: center;
+  }
+  .hero-img {
+    display: none;
+  }
+}