Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
    <header>
        <div class="container">
            <div class='logo'>
                <div><a href="https://afsp.org/" target="blank">ZS</a></div>
            </div>
            <div class='menu'>
                <div class="menuMobile">
                    <div class="mm_line"></div>
                    <div class="mm_line"></div>
                    <div class="mm_line"></div>
                </div>
                <nav id="nav-bar">
                    <ul class='.ul'>
                        <li><a href="#biography" class='button'>BIOGRAPHY</a></li>
                        <li><a href="#filmography" class='button'>FILMOGRAPHY</a></li>
                        <li><a href="#gallery" class='link_gallery button'>GALLERY</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <section id='biography'>
        <div class="container">
            <div class='img_holder'>
                <img src="https://i.imgur.com/qCO5EUv.jpg">
            </div>
            <div>
                <h1>Zack Snyder</h1>
                <h2>Director. Producer. Creator.</h2>
                Zachary Edward Snyder (born March 1, 1966) is an American film director, producer, and screenwriter. He made his feature film debut in 2004 with a remake of the 1978 horror film Dawn of the Dead. Since then, he has directed or produced a number of comic book and superhero films, including 300 (2006) and Watchmen (2009), as well as the Superman film that started the DC Extended Universe, Man of Steel (2013) and its follow-ups, Batman v Superman: Dawn of Justice (2016) and Justice League (2017). He also served as co-screenwriter for 300, Sucker Punch (2011), and 300: Rise of an Empire (2014), an executive producer for Suicide Squad (2016), Aquaman (2018) and The Suicide Squad (2021) and as co-writer of the story for Wonder Woman (2017) and Justice League (2017) and producer of Wonder Woman 1984 (2020). A director's cut of Justice League, commonly referred to as the "Snyder Cut," will be released in 2021 on HBO Max.<br><br>
                Snyder lives in Pasadena with his second wife, producer Deborah Johnson. The couple first met in 1996, started dating in 2002, and married on September 25, 2004 at St. Bartholomew's Episcopal Church in Manhattan, New York. He was previously married to Denise Weber.<br>
                Snyder has eight children, half of whom are adopted: Olivia, Willow, Autumn, Eli, Ezekiel, Jett, Sage and Cash. He and Denise had Olivia and Eli, and adopted Willow and Autumn from China. Two younger sons, Ezekiel and Jett, are from his relationship with Kirsten Elin, who was his line producer on commercials for some time. Snyder and Deborah adopted Sage and Cash during the course of making Man of Steel.
                <br><br>To see more about his carrer,life and work, please visit his website on <b><a href="https://en.wikipedia.org/wiki/Zack_Snyder">Wikipedia.</a></b>
            </div>
        </div>
    </section>  

    <section id="filmography">
        <div class="container">
            <h1>FILMOGRAPHY</h1>
            <div class="movie">
                <div><img src="https://i.imgur.com/Z4PE6Ie.jpg" alt="Dawn of the Dead poster"></div>
                <div>
                    <h2>Dawn of the Dead</h2>
                    <p>Dawn of the Dead is a 2004 American action horror film directed by Zack Snyder and written by James Gunn. It is the remake of George A. Romero's 1978 film, and stars Sarah Polley, Ving Rhames, Jake Weber, and Mekhi Phifer. A handful of human survivors taking refuge in a suburban Milwaukee, Wisconsin shopping mall are surrounded by swarms of zombies. Ty Burrell, Michael Kelly, Kevin Zegers, and Lindy Booth play supporting roles; the original's cast members Ken Foree, Scott Reiniger, and Tom Savini appear in cameos. Dawn of the Dead is Snyder's film directorial debut. The film was released by Universal Pictures on March 19, 2004, and grossed $102 million worldwide against a budget of $26 million</p>
                    <p>Review aggregation website Rotten Tomatoes offers the film a 75% approval rating from 187 critics and an average rating of 6.7/10. The site's consensus reads: "A kinetic, violent and surprisingly worthy remake of George Romero's horror classic that pays homage to the original while working on its own terms." The film also has a score of 59 out of 100 on Metacritic based on 37 critics indicating "mixed or average reviews". Audiences polled by CinemaScore during opening weekend gave the film an average grade of "B" on a scale ranging from A+ to F.</p>
                </div>
            </div>
            <div class="movie">
                <div><img src="https://i.imgur.com/MDtkbNf.jpg" alt="300 movie poster"></div>
                <div>
                    <h2>300</h2>
                    <p>300 is a 2007 American epic period action film based on the 1998 comic series of the same name by Frank Miller and Lynn Varley. Both are fictionalized retellings of the Battle of Thermopylae within the Persian Wars. The film was co-written and directed by Zack Snyder, while Miller served as executive producer and consultant. It was filmed mostly with a superimposition chroma key technique, to help replicate the imagery of the original comic book.</p>   
                    
                    <p>The plot revolves around King Leonidas (Gerard Butler), who leads 300 Spartans into battle against the Persian "God-King" Xerxes (Rodrigo Santoro) and his invading army of more than 300,000 soldiers. As the battle rages, Queen Gorgo (Lena Headey) attempts to rally support in Sparta for her husband. The story is framed by a voice-over narrative by the Spartan soldier Dilios (David Wenham). Through this narrative technique, various fantastical creatures are introduced, placing 300 within the genre of historical fantasy.</p>
                </div>
            </div>
            <div class="movie">
                <div><img src="https://i.imgur.com/Cp2RouH.jpg" alt="Watchmen movie poster"></div>
                <div>
                    <h2>Watchmen</h2>
                    <p>Watchmen is a 2009 American neo-noir superhero film based on the 1986–87 DC Comics limited series of the same name by Alan Moore and Dave Gibbons. Directed by Zack Snyder, it stars an ensemble cast of Malin Åkerman, Billy Crudup, Matthew Goode, Carla Gugino, Jackie Earle Haley, Jeffrey Dean Morgan, and Patrick Wilson. A dark and dystopian deconstruction of the superhero genre, the film is set in an alternate history in the year 1985 at the height of the Cold War between the United States and the Soviet Union, as a group of mostly retired American superheroes investigates the murder of one of their own before uncovering an elaborate and deadly conspiracy, while their moral limitations are challenged by the complex nature of the circumstances.</p>
                    <p>On Rotten Tomatoes, Watchmen has a 64% approval rating based on 307 reviews and an average rating of 6.35/10. The site's critical consensus reads, "Gritty and visually striking, Watchmen is a faithful adaptation of Alan Moore's graphic novel, but its complex narrative structure may make it difficult for it to appeal to viewers not already familiar with the source material." On Metacritic, which assigns a weighted average rating reviews from mainstream critics, the film has a score of 56 out of 100, based on 39 critics, indicating "mixed or average reviews". CinemaScore polls reported that the average grade cinemagoers gave the film was B on an A+ to F scale, and that the primary audience was older men.</p>
                </div>
            </div>
            <div class="movie">
                <div><img src="https://i.imgur.com/SDaxxMg.jpg" alt="Legend of the Guardians poster"></div>
                <div>
                    <h2>Legend of the Guardians: The Owls of Ga'Hoole</h2>
                    <p>Legend of the Guardians: The Owls of Ga'Hoole is a 2010 3D computer-animated fantasy-adventure film based on the Guardians of Ga'Hoole series by Kathryn Lasky. Zack Snyder directed the film as an animation debut, Zareh Nalbandian produced the film, John Orloff and Emil Stern wrote the film, with Jim Sturgess, Hugo Weaving, Joel Edgerton, Abbie Cornish, Geoffrey Rush, Emily Barclay, Sam Neill, Miriam Margolyes, Helen Mirren, Ryan Kwanten, Anthony LaPaglia, David Wenham and Richard Roxburgh voicing the characters set in a world populated by anthropomorphic owls and other animals.</p>
                    
                    <p>Legend of the Guardians: The Owls of Ga'Hoole was theatrically released in North America on September 24, 2010, and in Australia on September 30, 2010, by Warner Bros. Pictures in RealD 3D and IMAX 3D.The film received mixed reviews from critics, who praised the voice performances and visual effects but criticized the story, characters and inconsistent tone. The film grossed $140.1 million on an $80 million budget.</p>
                </div>
            </div>
            <div class="movie">
                <div><img src="https://i.imgur.com/uyvE8hR.jpg" alt="Sucker Punch Poster"></div>
                <div>
                    <h2>Sucker Punch</h2>
                    <p>Sucker Punch is a 2011 American psychological fantasy action film directed by Zack Snyder and co-written by Snyder and Steve Shibuya. It is Snyder's first film based on an original concept. The film stars Emily Browning as "Babydoll", a young woman who is committed to a mental institution and copes by envisioning it as a brothel. She teams up with four dancers/prisoners to escape before her scheduled lobotomy. As she collects the items she needs to escape, she enters another level of fantasy in which the women become strong, experienced warriors. Each fantasy is a parallel to the events in the brothel. Abbie Cornish, Jena Malone, Vanessa Hudgens, and Jamie Chung portray the four prisoners whom Babydoll imagines as dancers. Carla Gugino plays Dr. Vera Gorski, a psychiatrist whom Babydoll imagines as Madame Gorski, a choreographer at the strip club. Oscar Isaac plays Blue Jones, the asylum's orderly; in Babydoll's mind he's the brothel's corrupt owner. The film was released in both conventional and IMAX theatres in the United States on March 25, 2011. The film received negative reviews and was a box office failure.</p>
                </div>
            </div>
            <div class="movie">
                <div><img src="https://i.imgur.com/ixU2NpK.jpg" alt="Man of Steel poster"></div>
                <div>
                    <h2>Man of Steel</h2>
                    <p>Man of Steel is a 2013 superhero film based on the DC Comics character Superman. Produced by DC Entertainment, Legendary Pictures, Syncopy, Atlas Entertainment and Cruel and Unusual Films, and distributed by Warner Bros. Pictures, it is a British-American production[2] and the first installment in the DC Extended Universe (DCEU). The film is directed by Zack Snyder, written by David S. Goyer, and stars Henry Cavill, Amy Adams, Michael Shannon, Kevin Costner, Diane Lane, Laurence Fishburne, Antje Traue, Ayelet Zurer, Christopher Meloni and Russell Crowe. Man of Steel is a reboot of the Superman film series that portrays the character's origin story. In the film, Clark Kent learns that he is a superpowered alien from the planet Krypton. He assumes the role of mankind's protector as Superman, making the choice to face General Zod and prevent him from destroying humanity.</p>
                </div>
            </div>
            <div class="movie">
                <div><img src="https://i.imgur.com/PlBtVqj.jpg" alt="300 Rise of an Empire Poster"></div>
                <div>
                    <h2>300: Rise of an Empire</h2>
                    <p>300: Rise of an Empire is a 2014 American epic action film written and produced by Zack Snyder and directed by Noam Murro. It is a sequel to the 2006 film 300, taking place before, during, and after the main events of that film, and is loosely based on the Battle of Artemisium and the Battle of Salamis. It is based on the Frank Miller comic mini-series Xerxes: The Fall of the House of Darius and the Rise of Alexander (released April–September 2018).

                    <p>300: Rise of an Empire received mixed reviews from critics. Review aggregation website Rotten Tomatoes gives the film an approval rating of 45% based on 193 reviews, with an average rating of 4.98/10. The site's critical consensus reads, "It's bound to hit some viewers as an empty exercise in stylish gore, and despite a gonzo starring performance from Eva Green, 300: Rise of an Empire is a step down from its predecessor." On Metacritic, the film has a score of 48 out of 100 score, based on 34 critics, indicating "mixed or average reviews". Audiences polled by CinemaScore gave the film an average grade of "B" on an A+ to F scale, down the A- received by its predecessor.</p>
                </div>
            </div>
            <div class="movie">
                <div><img src="https://i.imgur.com/jxhdnXa.jpg" alt="Batman versus Super-Man poster"></div>
                <div>
                    <h2>Batman v. Superman - Dawn of Justice</h2>
                    <p>Batman v Superman: Dawn of Justice is a 2016 American superhero film based on the DC Comics characters Batman and Superman. It is a follow-up to Man of Steel (2013) and the second installment in the DC Extended Universe (DCEU).[4] The film is directed by Zack Snyder, written by Chris Terrio and David S. Goyer, and features an ensemble cast that includes Ben Affleck, Henry Cavill, Amy Adams, Jesse Eisenberg, Diane Lane, Laurence Fishburne, Jeremy Irons, Holly Hunter, and Gal Gadot. Batman v Superman: Dawn of Justice is the first live-action film to feature Batman and Superman together, as well as the first live-action cinematic portrayal of Wonder Woman. In the film, criminal mastermind Lex Luthor manipulates Batman into a preemptive battle with Superman, whom Luthor is obsessed with.</p>

                    <p>The film was announced at the 2013 San Diego Comic-Con after the release of Man of Steel. Snyder stated that the film would take inspiration from the Batman comic book series The Dark Knight Returns by Frank Miller but clarified that it would follow an original premise. The incarnation of Batman in the film is different from the character's previous portrayal in The Dark Knight Trilogy, serving as a cinematic reboot of the character. The film is also inspired by narrative elements from the "Death of Superman".</p>
                </div>
            </div>
            <div class="movie">
                <div><img src="https://i.imgur.com/xluhR6D.jpg" alt="Josstice League Poster"></div>
                <div>
                    <h2>Justice League</h2>
                    <p>Justice League is a 2017 American superhero film based on the DC Comics superhero team of the same name. It is the fifth installment in the DC Extended Universe and a follow-up to Batman v Superman: Dawn of Justice, and was directed by Zack Snyder and written by Chris Terrio and Joss Whedon who served as co-director, based on a story by Terrio and Snyder. It features an ensemble cast that includes Ben Affleck, Henry Cavill, Gal Gadot, Ezra Miller, Jason Momoa, Ray Fisher, Amy Adams, Jeremy Irons, Diane Lane, Connie Nielsen, and J. K. Simmons. In the film, Batman and Wonder Woman recruit The Flash, Aquaman, and Cyborg after Superman's death to save the world from the catastrophic threat of Steppenwolf and his army of Parademons.</p>

                    <p> After Snyder stepped down from the film following the death of his daughter, Whedon was hired to oversee the remainder of post-production, including writing and directing additional scenes. With an estimated production budget of $300 million, Justice League is one of the most expensive films ever made.</p>
                </div>
            </div>
            <div class="movie">
                <div><img src="https://i.imgur.com/DgoZF1a.jpg" alt="Zack Snyder's Justice League poster"></div>
                <div>
                    <h2>Zack Snyder's Justice League</h2>
                    <p>Zack Snyder's Justice League, commonly referred to as the "Snyder Cut", is the upcoming director's cut of the 2017 American superhero film Justice League. It presents Justice League—the fifth film of the DC Extended Universe (DCEU) and based on the DC Comics superhero team of the same name—as director Zack Snyder had intended it before he left the production and Joss Whedon took over his duties. It features an ensemble cast that includes Ben Affleck, Henry Cavill, Amy Adams, Gal Gadot, Ezra Miller, Jason Momoa, Ray Fisher, Jeremy Irons, Diane Lane, Connie Nielsen, and J. K. Simmons. Like the theatrical release, Zack Snyder's Justice League follows the Justice League—Batman, Superman, Wonder Woman, the Flash, Aquaman, and Cyborg—as they attempt to save the world from the catastrophic threat of Steppenwolf and his army of Parademons.</p>
                    <p>As details surfaced about the film's troubled production and its state before Snyder stepped down, many fans expressed interest in an alternate cut more faithful to Snyder's vision. Fans and members of the cast and crew petitioned for the release of this, which they nicknamed the Snyder Cut. At the time, industry insiders regarded the release as unlikely. However, Warner Bros. decided to move ahead with it in February 2020; the following May, Snyder announced that the original cut would be released. Zack Snyder's Justice League is scheduled to be released around early to mid-2021 on HBO Max.</p>
                </div>
            </div>
        </div>
    </section>

    <section id="gallery">
        <div class="container">
            <h1>GALLERY</h1>
            <div class="gallery_holder">
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/98R1b42.jpg" alt=""></div>
                    <div>Zack Snyder and Henry Cavill on the set of "Batman versus SuperMan".</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/tFRs3zJ.jpg" alt=""></div>
                    <div>Zack Snyder and Gal Gadot on the set of "Batman versus SuperMan".</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/bzQ6KfV.jpg" alt=""></div>
                    <div>Ben Affleck, Gal Gadot and Zack Snyder on the set of "Justice League".</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/qbvvDDH.jpg" alt=""></div>
                    <div>Zack and Deborah Snyder attending to the "Suicide Squad" movie premiere.</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/GrGRxkj.jpg" alt=""></div>
                    <div>Zack Snyder and Joe Mangananiello on the set of "Justice League".</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/BQp6h2o.jpg" alt=""></div>
                    <div>Snyder wearing Batman's gloves while working.</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/lTt1B6s.jpg" alt=""></div>
                    <div>Christopher Nolan and Zack on the set of "Man of Steel".</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/LWJEclY.jpg" alt=""></div>
                    <div>Zack Snyder, Patrick Wilson and Jeffrey Dean-Morgan on the set of "Watchmen".</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/edJvG7W.jpg" alt=""></div>
                    <div>Zack Snyder and the stars of "Sucker Punch" reading the script.</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/m3Wh90D.jpg" alt=""></div>
                    <div>Zack Snyder attending to the 2016 "San Diego Comic Con".</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/CBcezNy.jpg" alt=""></div>
                    <div>Zack Snyder, Gerard Butler and his crue on the set of "300".</div>                    
                </div>
                <div class="blank_square">
                    <div><img src="https://i.imgur.com/IUne7Hw.png" alt=""></div>
                    <div>Zack Snyder in front of the Batsignal used in the "Justice League" movie.</div>                    
                </div>
            </div>
        </div>
    </section>
    <footer>
        <div class="container">
            Created by Lucas Monteiro 
            <a href="https://www.linkedin.com/in/lucas-monteiro-649301143/" target="blank"><img src="https://i.imgur.com/j3SXC9v.png" alt="Linkedin Logo"></a>
            <a href="https://github.com/lucas-moont" target="blank"><img src="https://i.imgur.com/jMQQXcR.png" alt="Github Logo"></a>
        </div>
    </footer>
</body>
              
            
!

CSS

              
                * {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: #e6e6e6;
    font-family: Arial;
}

header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    background-color: #313131;
}

.container {
    display: flex;
    width: 100%;
    max-width: 900px;
}

header .logo, header .menu {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #c5c9cb;
    height: 100%;
}

.menuMobile {
    display: none;
    height: 40px;
    width: 40px;
    margin: 40px 0px;
    margin-right: 20px;
}

.mm_line {
    height: 2px;
    background-color: #c5c9cb;
}

.logo a {
    border: 3px solid #c5c9cb;
    font-size: 30px;
    padding: 8px;
    border-radius: 50%;
    color: #c5c9cb;
    text-decoration: none;
    height: 100%;
}

.logo a:hover{
    border: 3px solid #FFD700;
}

header .container {
    justify-content: space-between;
    padding: 15px;
}

ul {
    display: flex;
}

nav ul, nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav ul a:hover{
    background-color: #e6e6e6;
    color: #616161;
}

ul a {
    text-decoration: none;
    color: #c5c9cb;
    padding: 12px;
}

section {
    display: flex;
    justify-content: center;
}

#biography {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
}

#biography .container div {
    padding: 15px;
    text-align: justify;
    font-size: 13px;
    font-family: 'Open Sans';
    color:	#616161;
}

#biography .container img {
    height: 500px;
}

#biography .container h1 {
    font-size: 35px;
    margin-bottom: 3px;
    color: #5e5e5e;
}

#biography .container h2 {
    font-size: 16px;
    color: #a6a6a6;
}

#biography .container h1, #biography .container h2{
    margin-top: 3px;
    font-family: 'Julius Sans One', sans-serif;
}

#biography .container div a {
    color: #5e5e5e;
}

#filmography {
    margin-top: 30px;
}

#filmography .container {
    display: inline;
}

#filmography h1, #gallery h1{
    font-family: 'Julius Sans One', sans-serif;
    padding-bottom: 2px;
    padding-left: 0;
    max-width: 100%;
    border-bottom: 2px solid grey;
    color: #5e5e5e;
    margin-top: 3px;
    margin-left: 15px;
}

#filmography img {
    height: 200px;
    margin-right: 15px;
}

#filmography .movie {
    margin-left: 15px;
    display: flex;
    font-size: 12px;
    text-align: justify;
    color: #616161;
    font-family: 'Open Sans';
    border-bottom: 1px solid grey;
    padding-bottom: 35px;
    margin-bottom: 40px;
}

#filmography .movie h2 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 18px;
    font-family: 'Julius Sans One', sans-serif;
    color: #A6A6A6;
}

#gallery {
    margin-bottom: 20px;
}

#gallery .container {
    display: block;
    margin-right: 15px;
}

.container .gallery_holder {
    display: flex;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 15px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.blank_square {
    padding: 15px;
    background-color: #d9d9d9;
    height: 175px;
    width: 190px;
    text-align: center;
    font-size: 12px;
    color:#757575;
    margin-bottom: 15px;
    margin-right: 5px;
}

.blank_square img {
    height: 90px;
    width: auto;
    margin-bottom: 15px;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100%;
    background-color: #303030;
}

footer .container {
    margin-top: 14px;
    display: flex;
    align-items: center;
    color: 	#9c9c9c;
    padding: 15px;
    font-family: 'Arial';
    font-size: 9px;
}

footer .container a{
    margin-left: 3px;    
}

footer .container img {
    height: 20px;
    width: auto;
}

@media (max-width: 584px){

    header .logo, header .menu a{
        font-size: 14px;
    }
    
    .menuMobile{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    header nav ul{
        display: none;
        flex-direction: column;
        margin-top: 40px;
        padding-top: 20px;
        background-color: #313131;
        left: 0;
        width: 100%;
        position: absolute;
    }

    header nav ul li{
        margin-bottom: 10px;
    }

    header nav ul a{
        display: block;
    }

    #biography .container {
        flex-direction: column;
    }

    #biography .container .img_holder {
        text-align: center;
        padding: 0;
    }

    #biography .container img{
        width: 80%;
        height: auto;
        justify-self: center;
    }

    .link_gallery {
        padding-right: 0;
    }

    #filmography .movie div {
        max-width: 100%;
    }

    #filmography .movie p {
        padding-right: 15px;
    }

    #filmography .movie h2 {
        padding-right: 15px;
        text-align: center;
    }

    #filmography .movie img {
        margin-right: 15px;
    }

    #filmography h1, #gallery h1 {
        margin-right: 15px;
    }
}
              
            
!

JS

              
                window.onload = function(){
    document.querySelector(".menuMobile").addEventListener("click", function(){
        if(document.querySelector(".menu nav ul").style.display == 'flex') {
            document.querySelector(".menu nav ul").style.display = 'none';
        } else {
            document.querySelector(".menu nav ul").style.display = 'flex';
        }
    })
}

jQuery(document).ready(function($){
    if($(window).width() < 584){
        $('.button').on('click', function() {
            $(".menuMobile").trigger('click');
        });
    }
});
              
            
!
999px

Console