Add files via upload

somewhat69 · Feb 7, 2022 · a829c6f · a829c6f
commit a829c6f
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 0 deletions.
diff --git a/17519486.jpg b/17519486.jpg
diff --git a/67-674901_png-pinterest-clip-only-father-clipart-transparent-png.png b/67-674901_png-pinterest-clip-only-father-clipart-transparent-png.png
diff --git a/901-9016571_6-kids-sites-bedtime-stories-news-stories-short.png b/901-9016571_6-kids-sites-bedtime-stories-news-stories-short.png
diff --git a/The-family-book-e1417314391978.jpg b/The-family-book-e1417314391978.jpg
diff --git a/happy-grandfather-cartoon-vector-17519643.jpg b/happy-grandfather-cartoon-vector-17519643.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,59 @@
+<html>
+  <head>
+  <link rel="stylesheet" href="style.css">
+  <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=Questrial&display=swap" rel="stylesheet">
+  <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=Secular+One&display=swap" rel="stylesheet">
+  <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=Lato:wght@700&display=swap" rel="stylesheet">  
+  <href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@700&display=swap" rel="stylesheet">
+  </head>
+  <title> Family Book</title>
+  <body>
+    <center>
+    <h1 id="potato"> My Family Book</h1>
+    <br> <br>
+    <img id="family_img" src="The-family-book-e1417314391978.jpg">
+    <br><br>
+    <h3 id="one">My Family Book</h3>
+    <div class="center">
+      <div class="btn btn4">
+        <div class="inner"></div>
+        <button onclick="family()" >Next</button>
+      </div>
+    </div>
+</center>
+   <script>
+   var names=[
+   " My Family Book ",
+   " My Grandfather (Jagadish Chandra Das) ",
+   " My Grandmother (Pritikana Das) ",
+   " My Father (Sukanta Das)",
+   " My Mother (Baby Das)",
+   " Me (Raunak Das)"
+   ];
+ var images=[
+   "The-family-book-e1417314391978.jpg",
+   "happy-grandfather-cartoon-vector-17519643.jpg",
+   "17519486.jpg",
+   "67-674901_png-pinterest-clip-only-father-clipart-transparent-png.png",
+   "standing-young-mother-standing-young-mother-simple-vector-illustration-101319887.jpg",
+   "901-9016571_6-kids-sites-bedtime-stories-news-stories-short.png",
+  ];
+ var i=0;
+ function family(){
+   document.getElementById("one").innerHTML=names[i];
+   document.getElementById("family_img").src=images[i];
+   i++;
+   if(i==6){
+    i=0;
+   }
+  };
+  </script>
+  </body>
+</html>
diff --git a/...ing-young-mother-standing-young-mother-simple-vector-illustration-101319887.jpg b/...ing-young-mother-standing-young-mother-simple-vector-illustration-101319887.jpg
diff --git a/style.css b/style.css
@@ -0,0 +1,87 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body{
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(45deg,#e8effd 0%,#d6e3f5 100%);
+}
+.btn{
+  position: relative;
+  align-items: center;
+  display: inline-flex;
+  height: 60px;
+  width: 200px;
+  border-radius: 5px;
+  margin: 17px 20px;
+  overflow: hidden;
+  transition: all .4s;
+}
+.btn .inner{
+  position: absolute;
+  width: 300%;
+  height: 100%;
+  left: -100%;
+  z-index: -1;
+  transition: all .5s;
+}
+.btn button{
+  height: 100%;
+  width: 100%;
+  border: none;
+  outline: none;
+  background: none;
+  color: white;
+  font-size: 20px;
+  cursor: pointer;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  font-family: 'Montserrat', sans-serif;
+}
+.btn:hover{
+  transform: scale(1.03);
+}
+.btn:hover .inner{
+  left: 0;
+}
+.btn4 .inner{
+    background: -webkit-linear-gradient(right, #43cea2,#185a9d,#43cea2,#185a9d);
+    border-color: #43cea2;
+    border-style: solid none solid none;
+    border-width: 5px;
+}
+img{
+  height:500px;
+  width: 500px;
+  border-style: solid ;
+  border-width: 10px;
+  border-color: #3400f0;
+  border-radius: 10px;
+}
+#potato{
+  font-size: 60px;
+  font-family: 'Secular One', sans-serif;
+  color: #09d6ff;
+  border-style: solid;
+  border-width: 10px;
+  border-color: rgb(253, 0, 0);
+  background: rgb(131,58,180);
+  border-radius: 15px;
+  background: radial-gradient(circle, rgba(253,29,29,1) 25%, rgba(252,176,69,1) 100%);
+}
+#one{
+  font-size: 45px;
+  color: #ff891a;
+  border-style: solid;
+  border-width: 7px;
+  font-family: 'Questrial', sans-serif;
+  border-color: rgb(173, 0, 253);
+  background: rgb(131,58,180);
+  border-radius: 15px;
+  background: radial-gradient(circle, rgb(0, 185, 56) 25%, rgb(0, 171, 184) 100%);
+}