first commit

randyisback · Mar 6, 2024 · 20a7816 · 20a7816
1 parent f125498
commit 20a7816
Show file tree

Hide file tree

Showing 8 changed files with 763 additions and 0 deletions.
diff --git a/images/back.png b/images/back.png
diff --git a/images/facebook.png b/images/facebook.png
diff --git a/images/profil.jpg b/images/profil.jpg
diff --git a/images/profile.jpg b/images/profile.jpg
diff --git a/images/twitter.png b/images/twitter.png
diff --git a/index.html b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="tr">
+
+<!-- Coding By Azad Coder - azadcoder.com -->
+
+<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">
+    <title>Vanilla Tilt Card - Azad Coder</title>
+    <link rel="stylesheet" href="style.css">
+    <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" />
+</head>
+
+<body>
+<!-- Coding By Azad Coder - azadcoder.com -->
+    <div class="container">
+        <div class="card" data-tilt>
+            <img class="profile" src="images/profil.jpg" alt="">
+            <h2>Hello World!</h2>
+            <p>I'm Azad. I like to learn coding.<br><br> You can follow my Social Network Accounts.</p>
+            <div class="links">
+                <ul>
+                    <li><a href="https://www.instagram.com/az4dd/" target="_blank">
+                        <i class="fab fa-instagram" tabindex="0"></i>
+                      </a></li>
+
+                      <li><a href="https://twitter.com/azadcoderr" target="_blank">
+                        <i class="fab fa-twitter" tabindex="0"></i>
+                      </a></li>
+
+                    <li><a href="https://github.com/randyisback" target="_blank">
+                        <i class="fab fa-github" tabindex="0"></i>
+                      </a></li>
+                    <li><a href="https://dev.to/azadcoderr" target="_blank">
+                        <i class="fab fab fa-dev" tabindex="0" target="_blank"></i>
+                      </a></li> 
+                 </ul>
+                 <!-- Coding By Azad Coder - azadcoder.com -->
+            </div>
+            <a href="https://wa.me/+905415412233?text=Merhaba%20^^" class="btn" target="_blank"><span>Mesaj Gönder</span></a>
+
+        </div>
+    </div>
+<!-- Coding By Azad Coder - azadcoder.com -->
+</body>
+<!-- at the end of the body -->
+<script type="text/javascript" src="vanilla-tilt.js"></script>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,206 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap");
+ /* Coding By Azad Coder - azadcoder.com   */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+
+.container {
+  width: 100%;
+  height: 100vh;
+  background-image: url(images/back.png);
+  background-position: center;
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card {
+  width: 90%;
+  max-width: 440px;
+  color: #fff;
+  text-align: center;
+  padding: 50px 35px;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(6px);
+}
+
+.card img {
+  width: 140px;
+  border-radius: 50%;
+}
+.card img.profile {
+  width: 130px;
+  height: 130px;
+  border-radius: 50%;
+}
+.card h2 {
+  font-size: 40px;
+  font-weight: 600;
+  margin-top: 20px;
+}
+
+.card p {
+  font-size: 18px;
+  margin: 10px auto;
+  max-width: 330px;
+}
+
+.card .links img {
+  width: 40px;
+  border-radius: 50%;
+  margin: 10px 5px;
+  transition: background 0.5s;
+}
+
+.card .links img:hover {
+  background: #ff01cf;
+}
+.btn {
+  text-decoration: none;
+  display: inline-block;
+  font-size: 18px;
+  font-weight: 500;
+  background: #fff;
+  color: #ff01cf;
+  padding: 10px 30px;
+  /* border-radius: 30px; */
+  margin: 30px 0 10px;
+  line-height: 40px;
+  color: #333;
+  border: 2px solid #333;
+  letter-spacing: 1px;
+  text-align: center;
+  transition: all 0.68s;
+}
+.btn:hover {
+  cursor: pointer;
+  /* color: #7eb6ff; */
+  /* background: #000000;  */
+  transform: scale(1.1);
+}
+
+/*yeni logolar*/
+
+p,
+a {
+  text-align: center;
+  margin-top: 5%;
+  margin-bottom: 2rem;
+  color: #eee;
+}
+
+ul {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin: 1rem;
+  list-style-type: none;
+  font-size: 2rem;
+}
+
+ul li {
+  padding: 22px;
+}
+
+.fab {
+  font-size: 28px;
+}
+
+/* transition for social icon hover animation */
+.fa-twitter,
+.fa-dev,
+.fa-instagram,
+.fa-github {
+  transition: 0.4s;
+  cursor: pointer;
+}
+
+/* social media icons hover color */
+.fa-twitter:hover,
+.fa-twitter:focus {
+  color: #2e87fb;
+  transform: scale(1.3);
+}
+
+.fa-dev:hover,
+.fa-dev:focus {
+  color: #262626;
+  transform: scale(1.3);
+}
+
+.fa-instagram:hover,
+.fa-instagram:focus {
+  background: linear-gradient(
+    45deg,
+    #f09433 0%,
+    #e6683c 25%,
+    #dc2743 50%,
+    #cc2366 75%,
+    #bc1888 100%
+  );
+
+  transform: scale(1.3);
+}
+ /* Coding By Azad Coder - azadcoder.com   */
+.fa-github:hover,
+.fa-github:focus {
+  color: #000;
+  transform: scale(1.3);
+}
+
+a.btn:after {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background: #22da2c;
+  transition: all 0.35s;
+
+}
+
+a.btn:hover {
+  color: rgb(255, 255, 255);
+  border-top-right-radius: 20%;
+
+}
+
+a.btn:hover:after {
+  width: 100%;
+  border-top-right-radius: 20%;
+}
+a.btn span {
+  position: relative;
+  z-index: 2;
+}
+
+@media only screen and (max-width: 600px) {
+  .card {
+    max-width: 350px;
+    max-height: 70%;
+  }
+  .card h2 {
+    font-size: 32px;
+    font-weight: 500;
+    margin-top: 18px;
+  }
+
+  ul li {
+    padding: 10px;
+  }
+  .card img.profile {
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+  }
+}
+ /* Coding By Azad Coder - azadcoder.com   */