[闲聊] 预热惊奇队长 漫威放出90年代复古风网站

[复制链接]
查看328 | 回复2 | 2019.2.10 12:28 | 显示全部楼层 |阅读模式
本帖最后由 Arrow 于 2019-2-10 12:31 编辑

由于漫威的下部电影《惊奇队长》(Captain Marvel)故事设定在1995年,也就是互联网刚刚兴起的年代,因此漫威公司为了预热电影放出了一个极具复古风格的网站。该网站使用了25年前的设计风格,采用随机动画、滑稽的照片编辑、HTML框架、彩色comic sans字体,自然还有留言簿和点击计数器。
4357435f17e1a71.jpg

正如外媒The Verge执行编辑Dieter Bohn在Twitter上所指出的那样,这段怀旧风格之旅并不包含页面加载等待时间。该网站源代码容量为10MB,是使用CSS和FrontPage编写构建的,并放在Angelfire(当年非常流行的免费网页存储空间),从而尽可能的贴近当时的网页制作水准。

访问:https://www.marvel.com/captainmarvel


LOADREAM
Arrow | 2019.2.10 12:32 | 显示全部楼层

  1.                             <!DOCTYPE html>
  2.                             <html>
  3.                            
  4.                             <head>
  5.                               <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.                               <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  7.                            
  8.                               <title>Captain Marvel | Trailer & Official Movie Site</title>
  9.                               <meta name="title" content="Captain Marvel | Trailer & Official Movie Site">
  10.                               <meta name="description" content="Captain Marvel | Trailer & Official Movie Site">
  11.                            
  12.                               <meta name="og:title" content="Captain Marvel | Trailer & Official Movie Site">
  13.                               <meta property="og:type" content="video.movie">
  14.                               <meta property="og:url" content="http://www.marvel.com/captainmarvel">
  15.                               <meta property="og:title" content="Captain Marvel">
  16.                               <meta property="og:description" content="Set in the 1990s, Marvel Studios’ Captain Marvel is an all-new adventure from a previously unseen period in the history of the Marvel Cinematic Universe that follows the journey of Carol Danvers as she becomes one of the universe’s most powerful heroes.">
  17.                               <meta property="og:site_name" content="Captain Marvel">
  18.                            
  19.                               <meta name="twitter:card" content="summary_large_image">
  20.                               <meta name="twitter:site" content="@Marvel">
  21.                               <meta name="twitter:title" content="Captain Marvel">
  22.                               <meta name="twitter:description" content="Set in the 1990s, Marvel Studios’ Captain Marvel is an all-new adventure from a previously unseen period in the history of the Marvel Cinematic Universe that follows the journey of Carol Danvers as she becomes one of the universe’s most powerful heroes.">
  23.                               <meta name="twitter:url" content="https://www.marvel.com/captainmarvel">
  24.                               <meta name="twitter:domain" content="https://www.marvel.com">
  25.                            
  26.                               <base href="https://i.annihil.us/u/prod/marvel/movies/captain-marvel/">
  27.                            
  28.                               <meta property="og:image" content="https://i.annihil.us/u/prod/marvel/movies/captain-marvel/assets/images/share.jpg">
  29.                               <meta name="twitter:image" content="https://i.annihil.us/u/prod/marvel/movies/captain-marvel/assets/images/share.jpg">
  30.                               <link rel="canonical" href="https://www.marvel.com/captainmarvel" />
  31.                               <link rel="image_src" type="image/jpeg" href="https://i.annihil.us/u/prod/marvel/movies/captain-marvel/assets/images/share.jpg">
  32.                               <link rel="shortcut icon" href="https://i.annihil.us/u/prod/marvel/movies/captain-marvel/assets/favicon.ico">
  33.                               <link href="https://fonts.googleapis.com/css?family=Felipa" rel="stylesheet">
  34.                               <script>
  35.                                 window.dataSrc = 'https://i.annihil.us/u/prod/marvel/movies/captain-marvel/';
  36.                               </script>
  37.                             <link href="https://i.annihil.us/u/prod/marvel/movies/captain-marvel/css/index.css" rel="stylesheet"></head>
  38.                            
  39.                            
  40.                             <body class="menuOpen">
  41.                               <div id="shell"></div>
  42.                               <script type="text/javascript">
  43.                                 var referrer = document.referrer;
  44.                                 var utag_data = {
  45.                                   page_name: "movies | microsite | Captain Marvel",
  46.                                   site_section: "movies",
  47.                                   tag_type: "view",
  48.                                   rsid: "marvelglobal",
  49.                                   set_referrer: referrer
  50.                                 }
  51.                               </script>
  52.                               <script type="text/javascript">
  53.                                 ! function (e, t, a, n) {
  54.                                   e = "//tags.tiqcdn.com/utag/disney/marvel/prod/utag.js", a = "script", (n = (t = document).createElement(a)).src =
  55.                                     e, n.type = "text/java" + a, n.async = !0, (e = t.getElementsByTagName(a)[0]).parentNode.insertBefore(n, e)
  56.                                 }()
  57.                               </script>
  58.                             <script type="text/javascript" src="https://i.annihil.us/u/prod/marvel/movies/captain-marvel/js/settings.js"></script><script type="text/javascript" src="https://i.annihil.us/u/prod/marvel/movies/captain-marvel/js/index.js"></script></body>
  59.                            
  60.                             </html>
复制代码


LOADREAM
回复

使用道具 举报

admin | 2019.5.15 18:54 | 显示全部楼层
https://www.loadream.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册账号

本版积分规则

679

主题

815

帖子

208

积分

超级版主

Rank: 8Rank: 8

积分
208

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老