Merge pull request #136 from vanisharma2003/issue116

Home contents style updated
ChromeGaming · May 29, 2024 · 300ed1a · 300ed1a
2 parents ad96bca + fd66db5
commit 300ed1a
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -8,6 +8,85 @@
 	<title>Physi-c Tech</title>
 
 	<link rel="stylesheet" href="style.css">
+	<!-- google fonts link -->
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	<link href="https://fonts.googleapis.com/css2?family=Jaro:[email protected]&family=Jersey+20&family=Jersey+25+Charted&family=Micro+5+Charted&family=Salsa&family=Silkscreen:wght@400;700&family=Tac+One&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+	<link rel="icon" href="./atom.png" type="image/png"/>
+	<style>
+		.preloader {
+		  position: fixed;
+		  top: 0;
+		  left: 0;
+		  width: 100%;
+		  height: 100%;
+		  background: black; 
+		  display: flex;
+		  justify-content: center;
+		  align-items: center;
+		  z-index: 9999; /* Ensure the preloader is above all other content */
+		}
+
+		.circle {
+  width: 200px; 
+  height: 200px;
+  background-color: black;
+  border-radius: 50%;
+  animation: circleAnimation 2s infinite linear, glowingBorder 2s infinite linear;
+  box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.8); /* Adjusted shadow values */
+}
+
+.circle:before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    right: 5px;
+    bottom: 5px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: hsl(357, 87%, 38%);
+    animation: circleAnimation 2s infinite linear, glowingBorder 2s infinite linear;
+}
+
+.circle:after {
+    content: "";
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    right: 15px;
+    bottom: 15px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: hsl(357, 93%, 49%);
+    animation: circleAnimation 2s infinite linear, glowingBorder 2s infinite linear;
+}
+
+@keyframes circleAnimation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes glowingBorder {
+  0% {
+    box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.8); /* Adjusted shadow values */
+  }
+  50% {
+    box-shadow: 0 0 40px 20px rgba(255, 0, 0, 1); /* Adjusted shadow values */
+  }
+  100% {
+    box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.8); /* Adjusted shadow values */
+  }
+}
+	  </style>
+	</head>
+	<body>
+	  <div class="preloader">
 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
 		integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
 		crossorigin="anonymous" referrerpolicy="no-referrer" />

diff --git a/style.css b/style.css
@@ -309,6 +309,11 @@ button {
 }
 
 .focusin {
+    animation-name: focus;
+    animation-duration: 1.5s;
+    font-family: "Silkscreen", sans-serif;
+  font-weight: 400;
+  font-style: normal;
   animation-name: focus;
   animation-duration: 1.5s;
   font-family: Impact, Arial Black;
@@ -383,7 +388,60 @@ button {
 .buttons .btn:hover::after {
   transform: scaleX(1.01) translateY(-15px);
 }
-
+.buttons{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: "Silkscreen", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  }
+
+  .buttons .btn {
+    position: relative;
+    width:140px;
+    height:20px;
+    cursor: pointer;
+    padding:17px;
+    align-items: center;
+    background: none;
+    border: none;
+    color: #fff;
+    font-weight: 500;
+    font-size: 18px;
+
+  }
+  .buttons .btn::before,
+  .buttons .btn::after{
+    position: absolute;
+    content: '';
+    top:0;
+    left: 0;
+    width:100%;
+    height: 100%;
+    backdrop-filter:blur(15px);
+    background: rgba(253, 251, 251, 0.049);
+    border-radius: 10px;
+    box-shadow: 20px 20px 50px rgba(74, 65, 57, 0.5);
+    z-index: -2;
+  }
+  .buttons .btn::after{
+    width: 110%;
+    height: 90%;
+    top:25%;
+    left:-5%;
+    z-index: -3;
+    transform: scaleX(0.5);
+    transition: all 0.6s;
+    background: linear-gradient(135deg,#f47f0a,#ff045c);
+  }
+
+
+  .buttons .btn:hover:after{
+    transform: scaleX(1.01) translateY(-15px);
+  }
+
 .movie {
   border: 4px solid #000;
 }
@@ -408,6 +466,28 @@ a {
 }
 
 ::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(216, 0, 0);
+}
+
+@media (max-width: 425px){
+    .pop-up{
+        height:170px;
+        width:80%;
+        border:3px solid black;
+        z-index: 1000;
+        position: fixed;
+        top:30%;
+        left: 10%;
+        background-color: white;
+
+
+        display: flex;
+
+        flex-direction: column;
+
+        border-radius: 20px;
+    }
+}
   background-color: rgb(216, 0, 0);
 }