Add files via upload

rahulrajsharma1351 · Apr 12, 2024 · 9374f6b · 9374f6b
1 parent 1f28bd3
commit 9374f6b
Show file tree

Hide file tree

Showing 7 changed files with 216 additions and 0 deletions.
diff --git a/assests/black-panther.jpg b/assests/black-panther.jpg
diff --git a/assests/captainamerica.jpg b/assests/captainamerica.jpg
diff --git a/assests/foreground.png b/assests/foreground.png
diff --git a/assests/ironman.jpg b/assests/ironman.jpg
diff --git a/assests/wallpaperflare.com_wallpaper.jpg b/assests/wallpaperflare.com_wallpaper.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Parallax effect 1</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div id="wrapper">
+
+        <div class="container">
+            <img src="assests/wallpaperflare.com_wallpaper.jpg" class="background">
+            <img src="assests/foreground.png" class="foreground">
+            <h1>CIVIL WAR</h1>
+        </div>
+
+        <section>
+            <div class="details">
+                <p class="text">
+                    Steve Rogers leads the newly formed team of Avengers in their continued efforts to safeguard
+                    humanity.
+                    But after another incident involving the Avengers results in collateral damage, political pressure
+                    mounts to install a system of accountability, headed by a governing body to oversee and direct the
+                    team.
+                    <br><br>
+                    The new status quo fractures the Avengers, resulting in two camps—one led by Steve Rogers and his
+                    desirefor the Avengers to remain free to defend humanity without government interference, and the
+                    other
+                    following Tony Stark’s surprising decision to support government oversight and accountability.
+                </p>
+            </div>
+
+            <div class="bg bg1">
+                <h1>IRON MAN</h1>
+            </div>
+            <div class="details">
+                <h2>TONY STARK</h2>
+                <p class="text">
+                    Genius. Billionaire. Philanthropist. Tony Stark's confidence is only matched by his high-flying
+                    abilities as the hero called Iron Man.
+                    <br><br>
+                    Genius inventor Tony Stark continued his father Howard Stark’s weaponry business after his parents’
+                    untimely deaths and flew it to even greater heights of innovation. While in Afghanistan to
+                    demonstrate a
+                    new missile for the U.S. military, Stark’s convoy came under fire by a terrorist group known as the
+                    Ten
+                    Rings and he was severely wounded.
+                    <br><br>
+                    Taken prisoner by the group, Stark awoke in their headquarters to learn that shrapnel near his heart
+                    had
+                    nearly cost him his life, but swift action by scientist and fellow prisoner Ho Yinsen—who had
+                    inserted a
+                    powerful electromagnet in Stark’s chest—would prolong it temporarily.
+                </p>
+            </div>
+
+            <div class="bg bg2">
+                <h1>CAPTAIN AMERICA</h1>
+            </div>
+            <div class="details">
+                <h2>STEVE ROGERS</h2>
+                <p class="text">
+                    Recipient of the Super Soldier serum, World War II hero Steve Rogers fights for American ideals as
+                    one of the world’s mightiest heroes and the leader of the Avengers.
+                    <br><br>
+                    Envious of his friend Bucky Barnes’ military enlistment, and undeterred by his own multiple
+                    rejections
+                    by the U.S. Army, physical weakling Steve Rogers made one more attempt to join the march of men to
+                    fight
+                    for their country in the dark days of World War II.
+                    <br><br>
+                    Rogers’ valiant wish to fight bullies wherever they were grabbed the attention of scientist Dr.
+                    Abraham Erskine, and he handpicked the idealistic young man for the Army’s Super-Soldier program
+                    under his supervision.
+                </p>
+            </div>
+
+
+            <div class="bg bg3">
+                <h1>BLACK PANTHER</h1>
+            </div>
+            <div class="details">
+                <h2>T'CHALLA</h2>
+                <p class="text">
+                    T’Challa is the king of the secretive and highly advanced African nation of Wakanda - as well as the
+                    powerful warrior known as the Black Panther.
+                    <br><br>
+                    A native of the small, yet technologically advanced African nation of Wakanda, T’Challa accepted the
+                    mantle of Black Panther, the legendary protector of the Wakandan people, from his father, King
+                    T’Chaka,
+                    who filled the role before him as his father before him and so on.
+                    <br><br>
+                    T’Chaka relinquished the title as he
+                    grew older and delved further into politics. This was a subject T’Challa looked upon with some
+                    dislike,
+                    although he acknowledged the increasing importance of it, even as Wakanda maintained an air of
+                    secrecy
+                    to hide its true nature and precious vibranium mines.
+                </p>
+            </div>
+        </section>
+    </div>
+
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,107 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&display=swap');
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Poppins", sans-serif;
+    line-height: 35px;
+}
+
+#wrapper {
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    perspective: 10px;
+}
+
+.container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    transform-style: preserve-3d;
+}
+
+.background,
+.foreground {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: -1;
+    object-fit: cover;
+}
+
+.background {
+    transform: translateZ(-70px) scale(8.1);
+}
+
+.foreground {
+    filter: contrast(2);
+    transform: translateZ(-40px) scale(5);
+}
+
+.container h1 {
+    position: absolute;
+    top: 5rem;
+    font-weight: 600;
+    z-index: 1;
+    font-size: 10rem;
+    letter-spacing: 6px;
+    color: white;
+    text-shadow: 0 0 10px rgba(244, 69, 69, 0.879);
+}
+
+section {
+    position: absolute;
+}
+
+section h1 {
+    font-size: 5rem;
+    color: white;
+}
+
+section p {
+    font-family: "Dosis", sans-serif;
+}
+
+.details h2 {
+    text-align: center;
+    font-size: 40px;
+    font-weight: 500;
+    text-decoration: underline;
+    margin-bottom: 25px;
+}
+
+.bg1 {
+    background-image: url(assests/ironman.jpg);
+}
+
+.bg2 {
+    background-image: url(assests/captainamerica.jpg);
+}
+
+.bg3 {
+    background-image: url(assests/black-panther.jpg);
+}
+
+.bg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-position: center;
+    background-size: cover;
+    background-attachment: fixed;
+    height: 500px;
+}
+
+.details {
+    padding: 55px;
+    font-size: 23px;
+    color: white;
+    background: linear-gradient(145deg, rgb(9, 9, 9) 30%, rgb(183, 174, 174) 80%);
+}