Merge pull request #407 from VidhanThakur09/vidhan

Created Iron Man Wallpaper Gallery

css/wallpaper.css

@@ -0,0 +1,240 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+input{
+    display: none;
+}
+.container{
+    text-align: center;
+    width: 100%;
+    height: auto;
+    margin-bottom: 10rem;
+}
+.container h1{
+    font-weight: 600;
+    font-size: 2.8rem;
+    position: relative;
+    margin: 40px 0;
+}
+.container h1::before{
+    content: "";
+    position: absolute;
+    left: 50%;
+    width: 100px;
+    height: 3px;
+    background:linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 153, 153) 50%, rgb(250, 0, 0) 100%);
+    transform: translate(-50%,60px);
+    animation: animate 4s linear infinite;
+    border-radius: 5px;
+}
+@keyframes animate{
+    0%{
+        width: 100px;
+    }
+    50%{
+        width: 200px;
+    }
+    100%{
+        width: 100px;
+    }
+}
+.top-content{
+    background-color: rgba(0, 0, 0, 0.566);
+    display: flex;
+    width: 70%;
+    height: 50px;
+    align-items: center;
+    margin: 0 auto;
+    border-radius: 20px;
+    box-shadow: 0 0 20px 1px white;
+    margin-bottom: 40px;
+}
+.top-content h3{
+    margin:5px 10px ;
+    color: rgb(255, 255, 255) ;
+    /* line-height: 60px; */
+    background-color: crimson;
+    padding: 10px;
+    border-radius: 10px;
+}
+.top-content label{
+    display: inline-block;
+    height: 100%;
+    padding: 0 10px;
+    margin: 0 50px;
+    line-height: 50px;
+    font-size: 1.2rem;
+    font-weight: 500;
+    transition: .5s;
+}
+.top-content label:hover{
+    color: crimson;
+}
+.photo-gallery{
+    width: 90%;
+    margin: auto;
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    gap: 20px ;
+}
+.pic{
+    position: relative;
+    height: 230px;
+    border-radius: 10px;
+    box-shadow: 0 0 15px 1px rgba(255, 204, 1, 0.8), 0 0 5px rgba(255, 230, 0, 0.866) ;
+}
+.pic img{
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+}
+.pic::before{
+    content: "";
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    border-radius: 10px;
+    height: 0;
+    background-color: rgba(0, 0, 0, 0.505);
+    transition: .3s;
+}
+.action {
+    color: #fff;
+    border: 3px solid #fff;
+    background-image: linear-gradient(to right, #F09819 0%, #EDDE5D  51%, #F09819  100%);
+    position: absolute;
+    top: 250px;
+    left: 50%;
+    display: none;
+    transform: translateX(-50%);
+    width: 50%;
+    outline: none;
+    cursor: pointer;
+    padding: 12px;
+    text-transform: uppercase;
+    font-size: 10px;
+    font-weight: bold;
+    letter-spacing: 2px;
+    transition: 0.5s;
+    background-size: 200% auto;
+    color: white;            
+    box-shadow: 0 0 20px #eee;
+    border-radius: 10px;
+}
+.action:hover{
+    background-position: right center; 
+    color: #fff;
+}
+.pic:hover .action {
+    display: block;
+    top: 50px;
+}
+.pic:hover::before{
+    height: 100%;
+}
+#check1:checked ~ .container .photo-gallery .desktop{
+    opacity: 1;
+    transform: scale(1);
+    position: relative;
+    transition: .5s;
+}
+#check1:checked ~ .container #check1 {
+    color: crimson;
+}
+#check2:checked ~ .container .photo-gallery .laptop{
+    transform: scale(1);
+    opacity: 1;
+    position: relative; 
+    transition: .5s;
+}
+#check2:checked ~ .container #check2 {
+    color: crimson;
+}
+#check3:checked ~ .container .photo-gallery .tablet{
+    transform: scale(1);
+    opacity: 1;
+    position: relative;
+    transition: .5s; 
+}
+#check3:checked ~ .container #check3 {
+    color: crimson;
+}
+#check4:checked ~ .container .photo-gallery .mobile{
+    transform: scale(1);
+    opacity: 1;
+    position: relative;
+    transition: .5s; 
+}
+#check4:checked ~ .container #check4 {
+    color: crimson;
+}
+
+#check1:checked ~ .container .photo-gallery .laptop,
+#check1:checked ~ .container .photo-gallery .tablet,
+#check1:checked ~ .container .photo-gallery .mobile{
+    opacity: 0;
+    transform: scale(0);
+    position: absolute;
+}
+
+#check2:checked ~ .container .photo-gallery .desktop,
+#check2:checked ~ .container .photo-gallery .tablet,
+#check2:checked ~ .container .photo-gallery .mobile{
+    opacity: 0;
+    transform: scale(0);
+    position: absolute;
+}
+
+#check3:checked ~ .container .photo-gallery .laptop,
+#check3:checked ~ .container .photo-gallery .desktop,
+#check3:checked ~ .container .photo-gallery .mobile{
+    opacity: 0;
+    transform: scale(0);
+    position: absolute;
+}
+
+#check4:checked ~ .container .photo-gallery .laptop,
+#check4:checked ~ .container .photo-gallery .tablet,
+#check4:checked ~ .container .photo-gallery .desktop{
+    opacity: 0;
+    transform: scale(0);
+    position: absolute;
+}
+@media screen and (max-width: 1050px) {
+    .top-content label{
+        margin: 0 auto;
+    }
+}
+@media screen and (max-width: 682px) {
+    .top-content label,h3 {
+        font-size: 1rem;
+        font-weight: 600;
+    }
+
+}
+@media screen and (max-width: 800px) {
+    .photo-gallery{
+        grid-template-columns: repeat(2,1fr);
+    }
+    .pic{
+        height: 150px;
+    }
+    .action{
+        width: 70%;
+    }
+}
+@media screen and (max-width: 604px) {
+    .container h1::before{
+        transform: translate(-50%,100px);
+    }
+    .top-content label,h3 {
+        font-weight: 600;
+        font-size: 12px;
+    }
+    .top-content{
+        width: 90%;
+    }
+}

index.html

@@ -569,6 +569,7 @@ <h4 class="h46">Overview</h4>
             <a href="Achievements.html">Remarkable Achievements</a>
             <!-- Added Villain page redirect -->
             <a href="villain.html">Marvel Villains</a>
+            <a href="wallpaper.html">Ironman Wallpaper Gallery</a>
         </div>
         <div class="footer-col-main">
             <h4 class="h46">About Us</h4>