API tools faq
paste
Advertisement
Guest User

FilmSelect HTML Email 2.0

a guest
May 19th, 2019
191
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <link href="https://fonts.googleapis.com/css?family=Fira+Sans:600|Noto+Serif&display=swap" rel="stylesheet">
  5.     <link href="https://fonts.googleapis.com/css?family=Signika:300&display=swap" rel="stylesheet">
  6.     <link href="https://fonts.googleapis.com/css?family=Neucha&display=swap" rel="stylesheet">
  7.     <script>
  8.  
  9.  
  10.  
  11.     function openMovie(evt, movieName) {
  12.       // Declare all variables
  13.       var i, tabcontent, tablinks;
  14.  
  15.       // Get all elements with class="tabcontent" and hide them
  16.       tabcontent = document.getElementsByClassName("tabcontent");
  17.       for (i = 0; i < tabcontent.length; i++) {
  18.        tabcontent[i].style.display = "none";
  19.      }
  20.  
  21.      // Get all elements with class="tablinks" and remove the class "active"
  22.      tablinks = document.getElementsByClassName("tablinks");
  23.      for (i = 0; i < tablinks.length; i++) {
  24.        tablinks[i].className = tablinks[i].className.replace(" active", "");
  25.      }
  26.  
  27.      // Show the current tab, and add an "active" class to the button that opened the tab
  28.      document.getElementById(movieName).style.display = "block";
  29.      evt.currentTarget.className += " active";
  30.    }
  31.  
  32.    function showByDefault(evt, movieName) {
  33.      // Declare all variables
  34.      var i, tabcontent, tablinks;
  35.  
  36.  
  37.      // Show the current tab, and add an "active" class to the button that opened the tab
  38.      document.getElementById(movieName).style.display = "block";
  39.      document.getElementById("showByDefault").className += " active";
  40.    }
  41.  
  42.  
  43.    </script>
  44.     <style>
  45.     a {
  46.       color: #ff6600;
  47.       transition: .5s;
  48.       -moz-transition: .5s;
  49.       -webkit-transition: .5s;
  50.       -o-transition: .5s;
  51.       font-family: 'Neucha', cursive;
  52.     }
  53.  
  54.     a:hover { text-decoration: underline }
  55.  
  56.     h3 {
  57.       font-size: 24px;
  58.       font-family: 'Fira Sans', sans-serif;
  59.     }
  60.  
  61.     h3 a {
  62.       font-family: 'Open Sans Condensed', sans-serif;
  63.       font-size: 48px; color: #333; }
  64.     h3 a:hover { color: #ff6600;
  65.       text-decoration: none;
  66.     }
  67.  
  68.     p {
  69.       color: #333;
  70.       font-family: 'Signika', sans-serif;
  71.       font-size: 16px;
  72.       margin-bottom: 15px;
  73.     }
  74.  
  75.     a.more-link {
  76.       color: white;
  77.       font-weight: bold;
  78.       font-size: 14px;
  79.       font-family: Arial, Helvetica, sans-serif;
  80.       padding: 3px 10px;
  81.       background-color: #ff6600;
  82.       border-radius: 5px;
  83.       float: right;
  84.     }
  85.  
  86.     a.more-link:hover {
  87.       text-decoration: none;
  88.       background-color: #666;
  89.       border-radius: 0px;
  90.     }
  91.  
  92.     .moviePoster {
  93.       height: 30%;
  94.       width: 30%;
  95.     }
  96.  
  97.     body {
  98.       background-color: lightgrey;
  99.     }
  100.  
  101.     #email {
  102.       background-color: white;
  103.       width: 700px;
  104.       height: auto;
  105.       margin: auto;
  106.       box-shadow: 0 15px 15px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  107.       padding: 18px;
  108.     }
  109.  
  110.     #tabArea {
  111.       margin: auto;
  112.       padding: 10px;
  113.     }
  114.     /* Style the tab */
  115.     .tab {
  116.       overflow: hidden;
  117.       border: 1px solid #ccc;
  118.       background-color: #f1f1f1;
  119.  
  120.     }
  121.  
  122.     /* Style the buttons that are used to open the tab content */
  123.     .tab button {
  124.       background-color: inherit;
  125.       width: 20%;
  126.       height: auto;
  127.       float: left;
  128.       border: none;
  129.       outline: none;
  130.       cursor: pointer;
  131.       padding: 14px 16px;
  132.       transition: 0.3s;
  133.       font-size: 15px;
  134.       font-family: 'Fira Sans', sans-serif;
  135.     }
  136.  
  137.     /* Change background color of buttons on hover */
  138.     .tab button:hover {
  139.       background-color: #ccc;
  140.     }
  141.  
  142.     /* Create an active/current tablink class */
  143.     .tab button.active {
  144.       background-color: #EFC032;
  145.     }
  146.  
  147.     /* Style the tab content */
  148.     .tabcontent {
  149.       display: none;
  150.       padding: 6px 12px;
  151.       border: 1px solid #ccc;
  152.       border-top: none;
  153.     }
  154.  
  155.     .moviePoster {
  156.       padding: 10px;
  157.  
  158.     }
  159.  
  160.     #emailHeader {
  161.       height: 200px;
  162.     }
  163.  
  164.     .center {
  165.       display: block;
  166.       margin-left: auto;
  167.       margin-right: auto;
  168.       width: 50%;
  169.     }
  170.  
  171.     </style>
  172.   </head>
  173.   <body onload="showByDefault(event, 'Roma')">
  174.     <div id="email">
  175.     <div id="email-top">
  176.       <div id="emailHeader">
  177.         <img src="https://i.ibb.co/SRZWmTz/logo.jpg" alt="FilmSelect Logo" class="center">
  178.         <hr>
  179.       </div>
  180.       <br />
  181.       <br />
  182.       <br />
  183.       <br />
  184.       <p>
  185.         Thank you for subscribing to FilmSelect! We appreciate you trusting us to provide you with only the best films every other week. We put a lot of effort into the films we choose, but more importantly we care about providing you with the reason you should see them. Providing you with a reason to see a film in the theater and the backstory behind it enriches your understanding of the film, and hopefully gives you a little more to discuss with others after you get out of the theater.
  186.       <br />
  187.       <br />
  188.         Thanks again,
  189.       <br />
  190.       <br />
  191.         FilmSelect
  192.       </p>
  193.     </div>
  194.             <div id="tabArea">
  195.               <!-- Tab Initialization -->
  196.               <div class="tab">
  197.                 <button id="showByDefault" class="tablinks" onload="showByDefault(event, 'Roma')" onclick="openMovie(event, 'Roma')">Roma</button>
  198.                 <button class="tablinks" onclick="openMovie(event, 'Mid90s')">Mid90's</button>
  199.                 <button class="tablinks" onclick="openMovie(event, 'Hereditary')">Hereditary</button>
  200.               </div>
  201.  
  202.               <!-- Tab content -->
  203.               <div id="Roma" class="tabcontent">
  204.                 <img style="float:left;"src="https://i.ibb.co/VQ5k17J/roma-cover.jpg" alt="Roma Poster" class="moviePoster" >
  205.  
  206.                 <h3>Roma (2018)</h3>
  207.  
  208.                 <p class="movieDescription">
  209.                   Our first suggested film is Roma, directed by Alfonso Cuaron. It tells the story of a maid working for a middle-class family in Mexico City during the early 1970’s. What may seem like a fairly simple and non-eventful story is turned into one of the most compelling films of the last ten years. Roger Ebert often said that movies are a machine for empathy, and Roma is exactly that. It breathes empathy. It takes a person that has never been represented in cinema and gives them a voice. It not only gives them a voice, it makes them the focal point of a film that without the anchor of Cleo (the maid), the film would be unfocused. Cuaron uses little details to tell a huge story, whether it be the rubble on top of a temperature regulator for a newborn child, a toy from the family Cleo works for, or children putting out little flames.
  210.                   <br />
  211.                   <br />
  212.                   Cuaron got involved in the making of Roma after just thinking about his childhood and the memories from it. He shot the film in his neighborhood, shooting in the locations he went to when he was just five or six years old. All the locations are real and lived in, and gives Roma a textured quality few films possess.
  213.                   <br />
  214.                   <br />
  215.                   The sound design of Roma is one of the main aspects that makes it so special. It is detailed, clear, and flawless. It is one of the best sounding films our staff has ever seen. Everything in Roma sounds so tactile, so present that you often forget you are watching a film and not experiencing real events. Some of the events did really happen however, like the looming violence from the student riots, which explodes into a scene that took over 1,000 extras to film. To practice this scene, they rehearsed on a football field. The film also plays without music. We realized after the film ended that there was no music to make the audience feel something. Roma does it all by itself.
  216.                   <br />
  217.                   <br />
  218.                   Roma is an essential film to see in the theater, and there are several theaters that are playing it in 70mm or 35mm film. Seeing Roma in a theater completely immerses you in the world Cuaron brings back to life. At the end of a screening, one man said to his wife, “Wow, I’m really glad we saw this in a theater.”
  219.                   <br />
  220.                   <br />
  221.                   Below are interviews with Mr. Cuaron and the cast or Roma, as well as a trailer.
  222.                 </p>
  223.                 <a href="https://www.youtube.com/watch?v=_ngzNMD_bvg">Interview at the TIFF Film Festival 2018</a>
  224.                 <br />
  225.                 <a href="https://www.youtube.com/watch?v=6BS27ngZtxg">Trailer Link</a>
  226.               </div>
  227.  
  228.               <div id="Mid90s" class="tabcontent">
  229.                 <img style="float:left;" src="https://i.ibb.co/Sf5JVrD/mid90s-cover.jpg" alt="Mid90's Poster" class="moviePoster" >
  230.                 <h3>Mid90's (2018)</h3>
  231.                 <p class="movieDescription">
  232.                   Mid90’s is directed by Jonah Hill, and is about a thirteen-year-old named Stevie who lives in Los Angeles in the (you guessed it) mid 1990’s. He is is a fairly lonely kid with an absent mother and an abusive brother, but finds comfort and belonging in becoming friends with the kids at the local skate shop. It follows Stevie forming relationships with with the kids he meets, as well as the rifts that develop between them as the film goes on.
  233.                   <br />
  234.                   <br />
  235.                      Mid90’s is a very surprising first feature choice from actor-director Jonah Hill, who’s pervious films range from teen comedies like Superbad to more serious and established films like The Wolf of Wall Street, where Mr. Hill was directed by Martin Scorsese. Mr. Hill has said that he learned a lot from that experience especially; he saw a director who knew exactly what he wanted, but did not intimidate others in the process. Our staff has the feeling that Mr. Hill wanted to emulate this behavior in his directing style, and it comes out beautifully in the film. Hill has even stated that he worked on a script for this film for a couple years, but threw it all out once he knew the actors had what it took to help him recreate this time period that he grew up in. The actors in this film are almost all non-experienced. They are skateboarders who skate for brands like Supreme and Palace, and who have no previous acting experience. Their performances are remarkable. Mr. Hill shows that he has prepared himself for the role of directing by showcasing that he can do with actors, and how his previous acting experience makes him a better director.
  236.                   <br />
  237.                   <br />
  238.                      Like Roma, Mid90’s is a very personal film for Jonah Hill. He has said that although he never got into skating himself, skateboarders were part of one of the few communities that were accepting of Mr. Hill. Mid90’s successfully recreates this feeling of belonging and simultaneously feeling isolated from everything else. Stevie’s fights with his brother and mother are perfect examples. He does not value them, and does not respect them, but these feelings (as the viewer finds out) are due to very understandable reasons and circumstances.
  239.                   <br />
  240.                   <br />
  241.                      One should be warned that this film does not present Stevie’s experiences in a very positive light. If you are looking for a “feel good” film, you should not go to see this. But even if you are, going to the theater and expanding your emotions through a film like Mid90’s is an experience not to be missed. By the way, the soundtrack by Nine Inch Nails members Trent Reznor and Atticus Ross is one of the year's best.
  242.                   <br />
  243.                   <br />
  244.                   Below are interviews with Mr. Hill and cast members:
  245.                 </p>
  246.                 <a href="https://www.youtube.com/watch?v=_cc8_aCJCj8">Jonah Hill on The Tonight Show</a>
  247.                 <br />
  248.                 <a href="https://www.youtube.com/watch?v=z514sDjrkes&t=588s">Mid90's Cast & Crew Q&A</a>
  249.                <br />
  250.                <a href="https://www.youtube.com/watch?v=w9Rx6-GaSIE">Trailer Link</a>
  251.              </div>
  252.  
  253.              <div id="Hereditary" class="tabcontent">
  254.                <img style="float:left;" src="https://i.ibb.co/7ytXYZY/hereditary-cover.jpg" alt="Hereditary Poster" class="moviePoster" >
  255.                 <h3>Hereditary (2018)</h3>
  256.                 <p class="movieDescription">
  257.                   Hereditary is the first feature from writer-director Ari Aster, and stars Toni Collette as a grieving mother after her mother dies, and dark events start to unravel, and secrets come to the light. Hereditary is first and foremost a horror film, but it has the emotional weight of one of the best dramas of the year. The horror in Hereditary springs from something everyone can relate to: Family. What makes Hereditary so personal and so affecting is how grounded in reality it feels when it starts. The funeral for Toni Collette's mother feels real, and so does the grieving process. Every emotional aspect of Hereditary is grounded in reality, whether that be you feeling betrayed by your family members, or being a disappointment to them. Every emotional punch in Hereditary hits just as hard as the horror aspects do. Like action films, you have to care about the characters before you can make unrealistic things happen to them.
  258.                   <br />
  259.                   <br />
  260.                      Hereditary is a dark film, there is a sense of tension the second the film starts playing, and does not let up even after the credits roll. It is a film that sticks with you and haunts you long after it is over. If you do not enjoy being scared, there are no jump scares here, it is simply the building of tension and no release.
  261.                   <br />
  262.                   <br />
  263.                      Every technical aspect of Hereditary helps it accomplish this sense of dread. Toni Collette's performance is Oscar worthy. There is rarely screaming and yelling by her or her family, because Mr. Aster knows that is not how the grieving process works. The cinematography, the blocking of scenes, the score, and the acting all make for a masterfully directed first film, and Hereditary is without a doubt the best horror film of the year so far, and we do not see any other film beating it anytime soon.
  264.                   <br />
  265.                   <br />
  266.                   Below are links to interviews with the cast and director:
  267.                 </p>
  268.                 <a href="https://www.youtube.com/watch?v=ZdajBh9vAk8">Hereditary Official Cast Interview</a>
  269.                 <br />
  270.                 <a href="https://www.youtube.com/watch?v=SHVehwhUCCM">Director Discusses Hereditary</a>
  271.                 <br />
  272.                 <a href="https://www.youtube.com/watch?v=V6wWKNij_1M">Trailer Link</a>
  273.               </div>
  274.             </div>
  275.  
  276.           <div id="email-bottom">
  277.             <p class="text-sm">
  278.               Keep Rockin'!<br> FilmSelect
  279.             </p>
  280.  
  281.             <a href="www.moviesworthseeing.weebly.com">www.MoviesWorthSeeing.weebly.com</a>
  282.  
  283.  
  284.  
  285.           <div id="social">
  286.             <a href="#" class="flex items-center justify-center mr-4 bg-black text-white rounded-full w-8 h-8 no-underline"><i class="fab fa-facebook-f"></i></a>
  287.             <a href="#" class="flex items-center justify-center mr-4 bg-black text-white rounded-full w-8 h-8 no-underline"><i class="fab fa-instagram"></i></a>
  288.             <a href="#" class="flex items-center justify-center bg-black text-white rounded-full w-8 h-8 no-underline"><i class="fab fa-twitter"></i></a>
  289.           </div>
  290.  
  291.             <p class="leading-loose">
  292.               Questions or concerns? <a href="#" class="text-grey-darkest">info@moviesworthseeing.weebly.com</a>
  293.  
  294.               <br> Want to quit getting updates? <a href="#" class="text-grey-darkest">Unsubscribe</a>
  295.             </p>
  296.         </div>
  297.       </div>
  298.   </body>
  299. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!