modal refined and splash screen

dezoliveira · Aug 19, 2023 · 5fd3451 · 5fd3451
1 parent c49c503
commit 5fd3451
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 18 deletions.
diff --git a/css/medias.css b/css/medias.css
@@ -53,7 +53,7 @@
 
   /* Projects */
   .projects {
-    font-size: 25px;
+    font-size: 20px;
   }
 
 	.projects .project-list {
@@ -63,11 +63,7 @@
   }
 
   .card-title .winnerLang {
-    font-size: 18px;
-  }
-
-  .card .card-body img{
-    width: 350px;
+    font-size: 15px;
   }
 
   .circle {
@@ -78,7 +74,7 @@
   }
 
   .btn {
-    padding: 15px 25px;
+    padding: 10px 15px;
     font-size: 18px;
   }
 
@@ -324,8 +320,6 @@
     font-size: 40px;
   }
 
-
-
   /* Contact */
   section.contact {
     padding: 200px 30px 100px;

diff --git a/css/style.css b/css/style.css
@@ -164,6 +164,13 @@ section.projects {
   gap: 5px;
 }
 
+.card {
+  padding: 25px;
+box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+  background-color: #fff;
+  border-radius: 0px;
+}
+
 .card .card-title {
   display: flex;
   flex-direction: column;
@@ -176,7 +183,7 @@ section.projects {
 }
 
 .card .card-body img{
-  width: 300px;
+  width: 100%;
 }
 
 .card .card-footer {
@@ -398,15 +405,12 @@ footer.footer {
   color: #fff;
 }
 
-.select-box {
-
-}
-
-.select-box select {
+.select-box select:disabled {
   padding: 8px 12px;
   border: 1px solid;
   border-radius: 5px;
   background-color: crimson;
+  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }
 
 /* .select-box select {
@@ -418,4 +422,24 @@ footer.footer {
 
 .select-box i {
   font-size: 45px;
-}
+}
+
+#preloader {
+  background: #fff url(../src/images/Rocket3.gif) no-repeat center center;
+  height: 100vh;
+  width: 100%;
+  position: fixed;
+  z-index: 100;
+}
+
+/* .teste {
+  height: 100vh;
+  position: fixed;
+  width: 100%;
+  z-index: -100;
+  background-color: #e5e5f7;
+  opacity: 0.5;
+  background: radial-gradient(circle, transparent 20%, #e5e5f7 20%, #e5e5f7 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, #e5e5f7 20%, #e5e5f7 80%, transparent 80%, transparent) 25px 25px, linear-gradient(#1f1f1f 2px, transparent 2px) 0 -1px, linear-gradient(90deg, #1f1f1f 2px, #e5e5f7 2px) -1px 0;
+  background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
+} */
+
diff --git a/index.html b/index.html
@@ -8,6 +8,8 @@
   <title>myportfolio</title>
 </head>
 <body> 
+  <div id="preloader"></div>
+  <!-- <div class="teste"></div> -->
   <navbar class="navbar">
     <div class="logo">
       <a href="https://www.github.com/dezoliveira" target="_blank">

diff --git a/script.js b/script.js
@@ -15,6 +15,16 @@ const mailButton = document.getElementById('mailButton')
 
 const starsSelect = document.getElementById('starsSelect')
 
+const loader = document.getElementById("preloader")
+
+const closePreLoader = () => {
+  loader.style.display = "none"
+}
+
+window.addEventListener("load", () => {
+  setTimeout(closePreLoader, 2000)
+})
+
 //Arrays
 let repos = []
 
@@ -396,8 +406,8 @@ const loadProjects = async(data) => {
             </span>
           </div>
           <span>
-          Level: ${getStars(repos[i].topics[0])}
-        </span>
+            Level: ${getStars(repos[i].topics[0])}
+          </span>
           <span class="winnerLang">
             Linguagem mais utilizada: 
             <h5>
@@ -512,6 +522,8 @@ const sendEmail = () => {
   )
 }
 
+
+
 mailButton.addEventListener('click', sendEmail)
 
 importantIputs()

diff --git a/src/images/Rocket.gif b/src/images/Rocket.gif
diff --git a/src/images/Rocket2.gif b/src/images/Rocket2.gif
diff --git a/src/images/Rocket3.gif b/src/images/Rocket3.gif
diff --git a/src/images/Skull.gif b/src/images/Skull.gif
diff --git a/src/images/cat.gif b/src/images/cat.gif