├── .vscode └── settings.json ├── README.md ├── assets ├── css │ ├── README.md │ ├── components │ │ ├── _gallery.css │ │ ├── _link-button.css │ │ ├── _navigator.css │ │ └── _pills.css │ ├── global.css │ ├── home-page-styles.css │ ├── internal.css │ └── reset.css ├── images │ ├── icons │ │ ├── spider.svg │ │ ├── spiderman1-andrew.png │ │ ├── spiderman1-tom.png │ │ └── spiderman1.png │ ├── pic-sm-bg-01-before-edition.jpg │ ├── pic-sm-bg-01.jpg │ ├── pic-sm-bg-01.png │ ├── pic-sm-bg-02.jpg │ ├── pic-sm-bg-03.jpg │ ├── spider-man-01.png │ ├── spider-man-02.png │ ├── spider-man-03.png │ ├── spider-man-background.jpg │ ├── spiderman-andrew │ │ ├── movie-01 │ │ │ ├── background.png │ │ │ ├── gallery │ │ │ │ ├── image-01.png │ │ │ │ ├── image-02.png │ │ │ │ └── image-03.png │ │ │ └── logo.png │ │ └── movie-02 │ │ │ ├── AndrewGarfield_02.webp │ │ │ ├── background.jpg │ │ │ ├── background.png │ │ │ ├── gallery │ │ │ ├── image-01.png │ │ │ ├── image-02.png │ │ │ └── image-03.png │ │ │ └── logo.png │ ├── spiderman-tobey │ │ ├── movie-01 │ │ │ ├── background.png │ │ │ ├── gallery │ │ │ │ ├── image-01-full.jpg │ │ │ │ ├── image-01.png │ │ │ │ ├── image-02-full.jpg │ │ │ │ ├── image-02.png │ │ │ │ ├── image-03-full.jpg │ │ │ │ └── image-03.png │ │ │ └── logo.png │ │ ├── movie-02 │ │ │ ├── background.png │ │ │ ├── gallery │ │ │ │ ├── image-01.png │ │ │ │ ├── image-02.png │ │ │ │ └── image-03.png │ │ │ └── logo.png │ │ └── movie-03 │ │ │ ├── background.png │ │ │ ├── gallery │ │ │ ├── image-01.png │ │ │ ├── image-02.png │ │ │ └── image-03.png │ │ │ └── logo.png │ └── spiderman-tom │ │ ├── movie-01 │ │ ├── background.png │ │ ├── gallery │ │ │ ├── image-01.png │ │ │ ├── image-02.png │ │ │ ├── image-03.png │ │ │ └── image-04.png │ │ └── logo.png │ │ ├── movie-02 │ │ ├── background.png │ │ └── logo.png │ │ └── movie-03 │ │ ├── background.png │ │ └── logo.png ├── scripts │ ├── README.md │ ├── index.js │ └── script.js └── videos │ ├── amazing-spiderman-2014-trailer.mp4 │ ├── amazing-spiderman2-2014-trailer.mp4 │ ├── spiderman-2002-trailer-teste.mp4 │ ├── spiderman-2002-trailer.mp4 │ ├── spiderman-2017-trailer.mp4 │ ├── spiderman2-2004-trailer.mp4 │ ├── spiderman2-2019-trailer.mp4 │ ├── spiderman3-2007-trailer.mp4 │ └── spiderman3-2021-trailer.mp4 ├── index.html └── pages ├── README.md ├── andrew-garfield ├── README.md ├── spiderman1.html └── spiderman2.html ├── tobey-maguire ├── README.md ├── spiderman1.html ├── spiderman2.html └── spiderman3.html └── tom-holland ├── README.md ├── spiderman1.html ├── spiderman2.html └── spiderman3.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501, 3 | "editor.tabSize": 2, 4 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Live Spider-Man Multiversos -------------------------------------------------------------------------------- /assets/css/README.md: -------------------------------------------------------------------------------- 1 | # Diretório CSS -------------------------------------------------------------------------------- /assets/css/components/_gallery.css: -------------------------------------------------------------------------------- 1 | .gallery { 2 | padding: 20px; 3 | padding-left: 0; 4 | } 5 | 6 | .gallery ul{ 7 | display: flex; 8 | flex-direction: row; 9 | } 10 | 11 | .gallery ul li{ 12 | margin-left: 25px; 13 | } 14 | 15 | .gallery ul li:first-child{ 16 | margin-left: 0px; 17 | } 18 | 19 | .gallery ul li a img{ 20 | border:solid 6px white; 21 | border-radius: 15px; 22 | } -------------------------------------------------------------------------------- /assets/css/components/_link-button.css: -------------------------------------------------------------------------------- 1 | a.link-button{ 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | color: white; 6 | } 7 | 8 | a.link-button .icon{ 9 | width: 32px; 10 | height: 32px; 11 | padding: 3px; 12 | background-color: var(--primary-color); 13 | border: solid 1px white; 14 | background-clip: content-box; 15 | border-radius: 50%; 16 | position: relative; 17 | display: flex; 18 | align-items: center; 19 | justify-content: center; 20 | } 21 | 22 | a.link-button .icon .play-icon{ 23 | border:solid 7px white; 24 | width:0; 25 | height: 0; 26 | border-top-color: transparent; 27 | border-right-color: transparent; 28 | border-bottom-color: transparent; 29 | margin-right: -7px; 30 | } 31 | 32 | a.link-button .label{ 33 | margin-left: 10px; 34 | } -------------------------------------------------------------------------------- /assets/css/components/_navigator.css: -------------------------------------------------------------------------------- 1 | .navigator { 2 | height: 80vh; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | width: 100%; 7 | position: relative; 8 | } 9 | 10 | .navigator ul li { 11 | margin: 60px 0; 12 | } 13 | 14 | .navigator ul li:first-child { 15 | margin-top: 0; 16 | } 17 | 18 | .navigator ul li:last-child { 19 | margin-bottom: 0; 20 | } 21 | 22 | .navigator ul li a{ 23 | color: white; 24 | border: solid 2px white; 25 | width:45px; 26 | height:45px; 27 | border-radius: 50%; 28 | background-color: black; 29 | display: flex; 30 | align-items: center; 31 | justify-content: center; 32 | } 33 | 34 | .navigator::before { 35 | content: ''; 36 | position: absolute; 37 | top: 0; 38 | width: 2px; 39 | height: 100%; 40 | background-color: white; 41 | z-index: 0; 42 | } 43 | 44 | .navigator ul{ 45 | z-index: 1; 46 | } 47 | 48 | .navigator ul li a:hover, 49 | .navigator ul li a.active { 50 | color: var(--primary-color); 51 | background-color: white; 52 | } 53 | 54 | .navigator .navigator__icon{ 55 | position: absolute; 56 | top: -20px; 57 | } -------------------------------------------------------------------------------- /assets/css/components/_pills.css: -------------------------------------------------------------------------------- 1 | .pills ul{ 2 | display: flex; 3 | flex-direction: row; 4 | } 5 | 6 | .pills ul li{ 7 | background-color: var(--primary-color); 8 | color: white; 9 | padding: 5px 15px; 10 | margin: 0 10px; 11 | border-radius: 20px; 12 | text-transform: uppercase; 13 | } 14 | 15 | .pills ul li:first-child{ 16 | margin-left: 0; 17 | } -------------------------------------------------------------------------------- /assets/css/global.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); 2 | 3 | :root { 4 | --primary-color: #B9001F; 5 | } 6 | 7 | body { 8 | font-family: 'Poppins', sans-serif; 9 | } -------------------------------------------------------------------------------- /assets/css/home-page-styles.css: -------------------------------------------------------------------------------- 1 | @import url('reset.css'); 2 | @import url('global.css'); 3 | 4 | body { 5 | background-color: var(--primary-color); 6 | } 7 | 8 | body::before { 9 | content: ""; 10 | background-image: url('../images/spider-man-background.jpg'); 11 | background-repeat: no-repeat; 12 | background-position: center; 13 | background-size: cover; 14 | width: 100%; 15 | height: 100%; 16 | position: absolute; 17 | opacity: 0.2; 18 | transition: background-image 1s ease-in-out, opacity 1s ease-in-out; 19 | } 20 | 21 | .s-menu { 22 | padding: 1rem 0; 23 | width: 100%; 24 | text-align: center; 25 | position: relative; 26 | } 27 | 28 | .s-menu__item { 29 | display: inline-block; 30 | text-transform: uppercase; 31 | margin: 0 1.25rem; 32 | } 33 | 34 | .s-menu__icon { 35 | width: 2.5rem; 36 | margin: 0 1.25rem; 37 | vertical-align: middle; 38 | } 39 | 40 | .s-container { 41 | position: relative; 42 | display: flex; 43 | align-items: center; 44 | justify-content: space-evenly; 45 | perspective: 3000px; 46 | } 47 | 48 | .s-card { 49 | border: 0.5rem solid white; 50 | width: 100%; 51 | height: 70vh; 52 | position: absolute; 53 | transition: filter .5s ease-in-out; 54 | } 55 | 56 | .s-card:nth-child(1) { 57 | transform: rotateY(0deg) translateZ(50vw); 58 | } 59 | 60 | .s-card:nth-child(2) { 61 | transform: rotateY(120deg) translateZ(50vw); 62 | } 63 | 64 | .s-card:nth-child(3) { 65 | transform: rotateY(240deg) translateZ(50vw); 66 | } 67 | 68 | .s-card__background { 69 | width: 100%; 70 | height: 100%; 71 | object-fit: cover; 72 | position: absolute; 73 | opacity: 1; 74 | transition: opacity 1s ease-in-out; 75 | } 76 | 77 | .s-card__image { 78 | width: 100%; 79 | height: 100%; 80 | object-fit: contain; 81 | position: relative; 82 | transition: 1s ease-in-out; 83 | } 84 | 85 | .s-card__title { 86 | font-size: 2rem; 87 | text-transform: uppercase; 88 | text-align: center; 89 | position: absolute; 90 | width: 100%; 91 | bottom: 0; 92 | transition: bottom 1s ease-in-out; 93 | } 94 | 95 | .s-controller { 96 | position: absolute; 97 | display: flex; 98 | justify-content: center; 99 | align-items: center; 100 | margin-top: 3rem; 101 | bottom: 1.5rem; 102 | width: 100%; 103 | } 104 | 105 | .s-controller__button { 106 | display: flex; 107 | align-items: center; 108 | justify-content: center; 109 | width: 2.5rem; 110 | height: 2.5rem; 111 | border: 2px solid white; 112 | border-radius: 50%; 113 | background-color: var(--primary-color); 114 | text-align: center; 115 | font-size: 1rem; 116 | font-weight: bold; 117 | cursor: pointer; 118 | z-index: 1; 119 | transition: transform 0.3s ease-in-out; 120 | } 121 | 122 | .s-controller__button:hover { 123 | transform: scale(1.1); 124 | } 125 | 126 | .s-controller__button:nth-child(2) { 127 | margin: 0 3.75rem; 128 | } 129 | 130 | .s-controller__button--active { 131 | background-color: white; 132 | color: var(--primary-color); 133 | border: 0.1875rem solid var(--primary-color); 134 | outline: 0.125rem solid white; 135 | } 136 | 137 | .s-controller__line { 138 | background-color: white; 139 | width: 50%; 140 | height: 2px; 141 | position: absolute; 142 | } 143 | 144 | /* Hover Animation */ 145 | 146 | .s-card--hovered .s-card__background { 147 | cursor: pointer; 148 | opacity: 0; 149 | } 150 | 151 | .s-card--hovered .s-card__image { 152 | transform: scale(1.4); 153 | filter: drop-shadow(30px 10px 4px rgba(0, 0, 0, .5)); 154 | } 155 | 156 | body#spider-man-01-hovered::before { 157 | background-image: url('../images/pic-sm-bg-01.jpg'); 158 | } 159 | 160 | body#spider-man-02-hovered::before { 161 | background-image: url('../images/pic-sm-bg-02.jpg'); 162 | } 163 | 164 | body#spider-man-03-hovered::before { 165 | background-image: url('../images/pic-sm-bg-03.jpg'); 166 | } 167 | 168 | body[id^="spider-man-"]::before { 169 | opacity: 1; 170 | } 171 | 172 | body[id^="spider-man-"] .s-card:not(.s-card--hovered) { 173 | filter: grayscale(100%); 174 | } 175 | 176 | .s-card--hovered .s-card__title { 177 | bottom: 50%; 178 | } 179 | 180 | .s-cards-carousel { 181 | display: flex; 182 | justify-content: center; 183 | width: calc(100vw / 3 - 10%); 184 | transform-style: preserve-3d; 185 | transition: transform 0.4s ease-in; 186 | } -------------------------------------------------------------------------------- /assets/css/internal.css: -------------------------------------------------------------------------------- 1 | @import url('reset.css'); 2 | @import url('global.css'); 3 | @import url('components/_navigator.css'); 4 | @import url('components/_pills.css'); 5 | @import url('components/_link-button.css'); 6 | @import url('components/_gallery.css'); 7 | 8 | .s-wrapper { 9 | display: flex; 10 | height: 100vh; 11 | flex-flow: row nowrap; 12 | background-color: aqua; 13 | } 14 | 15 | .s-wrapper video{ 16 | position: fixed; 17 | width: 100%; 18 | 19 | } 20 | 21 | .s-wrapper .s-left-column { 22 | width: 100px; 23 | height: 100%; 24 | display: flex; 25 | justify-content: center; 26 | align-items: center; 27 | position: fixed; 28 | padding-right: 50px; 29 | left: 0; 30 | top: 0; 31 | z-index: 1; 32 | } 33 | 34 | .s-wrapper .s-main-content{ 35 | height: 100%; 36 | width: 100%; 37 | padding-left: 130px; 38 | position: relative; 39 | } 40 | 41 | .s-wrapper .s-main-content__top { 42 | height: 80vh; 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: flex-start; 46 | } 47 | 48 | .s-wrapper .s-main-content__bottom{ 49 | height: 20vh; 50 | display: flex; 51 | flex-direction: column; 52 | justify-content: flex-end; 53 | } 54 | 55 | .s-wrapper .s-main-content .s-logo img{ 56 | margin-top: 50px; 57 | margin-left: 0; 58 | margin-bottom: 30px; 59 | } 60 | 61 | .s-wrapper .s-main-content__top .s-description{ 62 | background-color: rgba(0,0,0,.7); 63 | max-width: 50%; 64 | padding: 20px; 65 | border-radius: 10px; 66 | } 67 | 68 | .s-wrapper .s-main-content__top .s-description .s-description__text p{ 69 | color: white; 70 | line-height: 170%; 71 | } 72 | 73 | .s-wrapper .s-main-content__top .s-description .pills{ 74 | margin-bottom: 20px; 75 | } 76 | 77 | .s-wrapper .s-main-content .s-links{ 78 | padding: 20px; 79 | padding-left: 0; 80 | } 81 | 82 | .s-wrapper .s-main-content .s-links ul{ 83 | display: flex; 84 | flex-direction: row; 85 | } 86 | 87 | .s-spiderman-01-01 { 88 | background-image: url('../images/spiderman-tobey/movie-01/background.png'); 89 | background-size:cover; 90 | } 91 | 92 | .s-spiderman-01-02 { 93 | background-image: url('../images/spiderman-tobey/movie-02/background.png'); 94 | background-size: cover; 95 | } 96 | 97 | .s-spiderman-01-03 { 98 | background-image: url('../images/spiderman-tobey/movie-03/background.png'); 99 | background-size: cover; 100 | } -------------------------------------------------------------------------------- /assets/css/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | vertical-align: baseline; 5 | list-style: none; 6 | border: 0; 7 | color: #FFF; 8 | font-family: "Poppins", sans-serif; 9 | font-size: 16px; 10 | text-decoration: none; 11 | } -------------------------------------------------------------------------------- /assets/images/icons/spider.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/images/icons/spiderman1-andrew.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/icons/spiderman1-andrew.png -------------------------------------------------------------------------------- /assets/images/icons/spiderman1-tom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/icons/spiderman1-tom.png -------------------------------------------------------------------------------- /assets/images/icons/spiderman1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/icons/spiderman1.png -------------------------------------------------------------------------------- /assets/images/pic-sm-bg-01-before-edition.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/pic-sm-bg-01-before-edition.jpg -------------------------------------------------------------------------------- /assets/images/pic-sm-bg-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/pic-sm-bg-01.jpg -------------------------------------------------------------------------------- /assets/images/pic-sm-bg-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/pic-sm-bg-01.png -------------------------------------------------------------------------------- /assets/images/pic-sm-bg-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/pic-sm-bg-02.jpg -------------------------------------------------------------------------------- /assets/images/pic-sm-bg-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/pic-sm-bg-03.jpg -------------------------------------------------------------------------------- /assets/images/spider-man-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spider-man-01.png -------------------------------------------------------------------------------- /assets/images/spider-man-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spider-man-02.png -------------------------------------------------------------------------------- /assets/images/spider-man-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spider-man-03.png -------------------------------------------------------------------------------- /assets/images/spider-man-background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spider-man-background.jpg -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-01/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-01/background.png -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-01/gallery/image-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-01/gallery/image-01.png -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-01/gallery/image-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-01/gallery/image-02.png -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-01/gallery/image-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-01/gallery/image-03.png -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-01/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-01/logo.png -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-02/AndrewGarfield_02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-02/AndrewGarfield_02.webp -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-02/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-02/background.jpg -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-02/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-02/background.png -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-02/gallery/image-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-02/gallery/image-01.png -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-02/gallery/image-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-02/gallery/image-02.png -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-02/gallery/image-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-02/gallery/image-03.png -------------------------------------------------------------------------------- /assets/images/spiderman-andrew/movie-02/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-andrew/movie-02/logo.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-01/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-01/background.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-01/gallery/image-01-full.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-01/gallery/image-01-full.jpg -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-01/gallery/image-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-01/gallery/image-01.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-01/gallery/image-02-full.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-01/gallery/image-02-full.jpg -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-01/gallery/image-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-01/gallery/image-02.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-01/gallery/image-03-full.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-01/gallery/image-03-full.jpg -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-01/gallery/image-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-01/gallery/image-03.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-01/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-01/logo.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-02/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-02/background.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-02/gallery/image-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-02/gallery/image-01.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-02/gallery/image-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-02/gallery/image-02.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-02/gallery/image-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-02/gallery/image-03.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-02/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-02/logo.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-03/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-03/background.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-03/gallery/image-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-03/gallery/image-01.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-03/gallery/image-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-03/gallery/image-02.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-03/gallery/image-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-03/gallery/image-03.png -------------------------------------------------------------------------------- /assets/images/spiderman-tobey/movie-03/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tobey/movie-03/logo.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-01/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-01/background.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-01/gallery/image-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-01/gallery/image-01.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-01/gallery/image-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-01/gallery/image-02.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-01/gallery/image-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-01/gallery/image-03.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-01/gallery/image-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-01/gallery/image-04.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-01/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-01/logo.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-02/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-02/background.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-02/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-02/logo.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-03/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-03/background.png -------------------------------------------------------------------------------- /assets/images/spiderman-tom/movie-03/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/images/spiderman-tom/movie-03/logo.png -------------------------------------------------------------------------------- /assets/scripts/README.md: -------------------------------------------------------------------------------- 1 | # Diretório Javascript -------------------------------------------------------------------------------- /assets/scripts/index.js: -------------------------------------------------------------------------------- 1 | function handleMouseEnter() { 2 | this.classList.add('s-card--hovered'); 3 | document.body.id = `${this.id}-hovered`; 4 | } 5 | 6 | function handleMouseLeave() { 7 | this.classList.remove('s-card--hovered'); 8 | document.body.id = ''; 9 | } 10 | 11 | function addEventListenersToCards() { 12 | const cardElements = document.getElementsByClassName('s-card'); 13 | 14 | for (let index = 0; index < cardElements.length; index++) { 15 | const card = cardElements[index]; 16 | card.addEventListener('mouseenter', handleMouseEnter); 17 | card.addEventListener('mouseleave', handleMouseLeave); 18 | } 19 | } 20 | 21 | document.addEventListener("DOMContentLoaded", addEventListenersToCards, false); 22 | 23 | function selectCarouselItem(selectedButtonElement) { 24 | const selectedItem = selectedButtonElement.id; 25 | const carousel = document.querySelector('.s-cards-carousel'); 26 | const transform = carousel.style.transform; 27 | const rotateY = transform.match(/rotateY\((-?\d+deg)\)/i); 28 | const rotateYDeg = -120 * (Number(selectedItem) - 1); 29 | const newTransform = transform.replace(rotateY[0], `rotateY(${rotateYDeg}deg)`); 30 | 31 | carousel.style.transform = newTransform; 32 | 33 | const activeButtonElement = document.querySelector('.s-controller__button--active'); 34 | activeButtonElement.classList.remove('s-controller__button--active'); 35 | selectedButtonElement.classList.add('s-controller__button--active'); 36 | } -------------------------------------------------------------------------------- /assets/scripts/script.js: -------------------------------------------------------------------------------- 1 | function handleMouseEnter() { 2 | this.classList.add('s-card--hovered'); 3 | document.body.id = `${this.id}-hovered`; 4 | } 5 | 6 | function handleMouseLeave() { 7 | this.classList.remove('s-card--hovered'); 8 | document.body.id = ''; 9 | } 10 | 11 | function addEventListenersToCards() { 12 | const cardElements = document.getElementsByClassName('s-card'); 13 | 14 | for (let index = 0; index < cardElements.length; index++) { 15 | const card = cardElements[index]; 16 | card.addEventListener('mouseenter', handleMouseEnter); 17 | card.addEventListener('mouseleave', handleMouseLeave); 18 | } 19 | } 20 | 21 | document.addEventListener("DOMContentLoaded", addEventListenersToCards, false); 22 | 23 | function selectCarouselItem(selectedButtonElement) { 24 | const selectedItem = selectedButtonElement.id; 25 | const carousel = document.querySelector('.s-cards-carousel'); 26 | const transform = carousel.style.transform; 27 | const rotateY = transform.match(/rotateY\((-?\d+deg)\)/i); 28 | const rotateYDeg = -120 * (Number(selectedItem) - 1); 29 | const newTransform = transform.replace(rotateY[0], `rotateY(${rotateYDeg}deg)`); 30 | 31 | carousel.style.transform = newTransform; 32 | 33 | const activeButtonElement = document.querySelector('.s-controller__button--active'); 34 | activeButtonElement.classList.remove('s-controller__button--active'); 35 | selectedButtonElement.classList.add('s-controller__button--active'); 36 | } -------------------------------------------------------------------------------- /assets/videos/amazing-spiderman-2014-trailer.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/videos/amazing-spiderman-2014-trailer.mp4 -------------------------------------------------------------------------------- /assets/videos/amazing-spiderman2-2014-trailer.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/videos/amazing-spiderman2-2014-trailer.mp4 -------------------------------------------------------------------------------- /assets/videos/spiderman-2002-trailer-teste.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/videos/spiderman-2002-trailer-teste.mp4 -------------------------------------------------------------------------------- /assets/videos/spiderman-2002-trailer.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/videos/spiderman-2002-trailer.mp4 -------------------------------------------------------------------------------- /assets/videos/spiderman-2017-trailer.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/videos/spiderman-2017-trailer.mp4 -------------------------------------------------------------------------------- /assets/videos/spiderman2-2004-trailer.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/videos/spiderman2-2004-trailer.mp4 -------------------------------------------------------------------------------- /assets/videos/spiderman2-2019-trailer.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/videos/spiderman2-2019-trailer.mp4 -------------------------------------------------------------------------------- /assets/videos/spiderman3-2007-trailer.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/videos/spiderman3-2007-trailer.mp4 -------------------------------------------------------------------------------- /assets/videos/spiderman3-2021-trailer.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diogomainardes/dio-spiderman/7654422bc2a0cab81eb07c5c49530fa05e5a8d2b/assets/videos/spiderman3-2021-trailer.mp4 -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Spider-Man | Multiversos 10 | 11 | 12 | 31 |
32 |
33 | 34 | 35 | Tobey Maguire 36 |

Tobey Maguire

37 | 38 | 39 | 40 | Tom Holland 41 |

Tom Holland

42 | 43 | 44 | 45 | Andrew Garfield 46 |

Andrew Garfield

47 | 48 |
49 |
50 | 51 |
52 |
53 | 01 54 |
55 |
56 | 02 57 |
58 |
59 | 03 60 |
61 |
62 |
63 | 64 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # Pages -------------------------------------------------------------------------------- /pages/andrew-garfield/README.md: -------------------------------------------------------------------------------- 1 | # Pages 2 | 3 | ## Amazing Spiderman (Andrew Garfield) -------------------------------------------------------------------------------- /pages/andrew-garfield/spiderman1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Spider Man | Multiverso 9 | 10 | 11 | 12 | 13 |
14 | 17 | 18 | 19 |
20 | 31 |
32 | 33 | 34 |
35 |
36 | 40 | 41 |
42 |
43 |
    44 |
  • Ano: 2002
    • 45 |
  • Diretor: Sam Raimi
    • 46 |
47 |
48 |
49 |

Sinopse: Depois de ser picado por uma aranha geneticamente modificada em uma 50 | demonstração científica, o jovem nerd Peter Parker ganha superpoderes. Inicialmente, ele pretende usá-los 51 | para para ganhar dinheiro, adotando o nome de Homem-Aranha e se apresentando em lutas de exibição. Porém, 52 | ao presenciar o assassinando de seu tio Ben e sentir-se culpado, Peter decide não mais usar seus poderes 53 | para proveito próprio e sim para enfrentar o mal, tendo como seu primeiro grande desafio o psicótico 54 | Duende Verde.

55 |
56 |
57 | 58 |
59 | 71 |
72 |
73 | 74 |
75 |
76 |
    77 |
    • 78 |
    • 79 |
    • 80 |
81 |
82 |
83 |
84 |
85 | 86 | -------------------------------------------------------------------------------- /pages/andrew-garfield/spiderman2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Spider Man | Multiverso 9 | 10 | 11 | 12 | 13 |
14 | 15 | 18 | 19 | 20 |
21 | 32 |
33 | 34 | 35 |
36 |
37 | 41 | 42 |
43 |
44 |
    45 |
  • Ano: 2005
    • 46 |
  • Diretor: Sam Raimi
    • 47 |
48 |
49 |
50 |

Sinopse: Quando uma falha na experiência de fusão nuclear resulta em uma explosão que mata sua esposa, o Dr. Otto Octavius é transformado em Dr. Octopus, um ciborgue com tentáculos de metal. Doc Ock culpa o Homem-Aranha pelo acidente e quer vingança. Enquanto isso, o alter ego do herói, Peter Parker, perde seus poderes. Para complicar as coisas, o seu melhor amigo odeia o Homem-Aranha e sua amada fica noiva..

51 |
52 |
53 | 54 |
55 | 67 |
68 |
69 | 70 |
71 |
72 |
    73 |
    • 74 |
    • 75 |
    • 76 |
77 |
78 |
79 |
80 |
81 | 82 | -------------------------------------------------------------------------------- /pages/tobey-maguire/README.md: -------------------------------------------------------------------------------- 1 | # Pages 2 | 3 | ## Spiderman (Tobey Maguire) -------------------------------------------------------------------------------- /pages/tobey-maguire/spiderman1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multiverso | Spiderman 8 | 9 | 10 | 11 | 12 |
13 | 14 | 17 | 18 |
19 | 31 |
32 | 33 | 34 |
35 |
36 | 40 | 41 |
42 |
43 |
    44 |
  • Ano: 2002
    • 45 |
  • Diretor: Sam Raimi
    • 46 |
47 |
48 | 49 |
50 |

Sinopse: Depois de ser picado por uma aranha geneticamente modificada em uma 51 | demonstração científica, o jovem nerd Peter Parker ganha superpoderes. Inicialmente, ele pretende usá-los 52 | para para ganhar dinheiro, adotando o nome de Homem-Aranha e se apresentando em lutas de exibição. Porém, 53 | ao presenciar o assassinando de seu tio Ben e sentir-se culpado, Peter decide não mais usar seus poderes 54 | para proveito próprio e sim para enfrentar o mal, tendo como seu primeiro grande desafio o psicótico 55 | Duende Verde.

56 |
57 |
58 | 59 |
60 | 72 |
73 | 74 |
75 | 76 |
77 |
78 | 95 |
96 |
97 |
98 |
99 | 100 | 103 | 104 | -------------------------------------------------------------------------------- /pages/tobey-maguire/spiderman2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multiverso | Spiderman 8 | 9 | 10 | 11 | 12 |
13 | 14 | 17 | 18 |
19 | 31 |
32 | 33 |
34 |
35 | 39 | 40 |
41 |
42 |
    43 |
  • Ano: 2002
    • 44 |
  • Diretor: Sam Raimi
    • 45 |
46 |
47 | 48 |
49 |

Sinopse: Depois de ser picado por uma aranha geneticamente modificada em uma 50 | demonstração científica, o jovem nerd Peter Parker ganha superpoderes. Inicialmente, ele pretende usá-los 51 | para para ganhar dinheiro, adotando o nome de Homem-Aranha e se apresentando em lutas de exibição. Porém, 52 | ao presenciar o assassinando de seu tio Ben e sentir-se culpado, Peter decide não mais usar seus poderes 53 | para proveito próprio e sim para enfrentar o mal, tendo como seu primeiro grande desafio o psicótico 54 | Duende Verde.

55 |
56 |
57 | 58 |
59 | 71 |
72 | 73 |
74 | 75 |
76 |
77 | 94 |
95 |
96 |
97 |
98 | 99 | 102 | 103 | -------------------------------------------------------------------------------- /pages/tobey-maguire/spiderman3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Multiverso | Spiderman 8 | 9 | 10 | 11 | 12 |
13 | 14 | 17 | 18 |
19 | 31 |
32 | 33 |
34 |
35 | 39 | 40 |
41 |
42 |
    43 |
  • Ano: 2002
    • 44 |
  • Diretor: Sam Raimi
    • 45 |
46 |
47 | 48 |
49 |

Sinopse: Depois de ser picado por uma aranha geneticamente modificada em uma 50 | demonstração científica, o jovem nerd Peter Parker ganha superpoderes. Inicialmente, ele pretende usá-los 51 | para para ganhar dinheiro, adotando o nome de Homem-Aranha e se apresentando em lutas de exibição. Porém, 52 | ao presenciar o assassinando de seu tio Ben e sentir-se culpado, Peter decide não mais usar seus poderes 53 | para proveito próprio e sim para enfrentar o mal, tendo como seu primeiro grande desafio o psicótico 54 | Duende Verde.

55 |
56 |
57 | 58 |
59 | 71 |
72 | 73 |
74 | 75 |
76 |
77 | 94 |
95 |
96 |
97 |
98 | 99 | 102 | 103 | -------------------------------------------------------------------------------- /pages/tom-holland/README.md: -------------------------------------------------------------------------------- 1 | # Pages 2 | 3 | ## Spiderman (Tom Holland) -------------------------------------------------------------------------------- /pages/tom-holland/spiderman1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Spider Man | Multiverso 9 | 10 | 11 | 12 | 13 |
14 | 17 | 18 |
19 | 31 |
32 | 33 | 34 |
35 |
36 | 40 | 41 |
42 |
43 |
    44 |
  • Ano: 2002
    • 45 |
  • Diretor: Sam Raimi
    • 46 |
47 |
48 |
49 |

Sinopse: Depois de ser picado por uma aranha geneticamente modificada em uma 50 | demonstração científica, o jovem nerd Peter Parker ganha superpoderes. Inicialmente, ele pretende usá-los 51 | para para ganhar dinheiro, adotando o nome de Homem-Aranha e se apresentando em lutas de exibição. Porém, 52 | ao presenciar o assassinando de seu tio Ben e sentir-se culpado, Peter decide não mais usar seus poderes 53 | para proveito próprio e sim para enfrentar o mal, tendo como seu primeiro grande desafio o psicótico 54 | Duende Verde.

55 |
56 |
57 | 58 |
59 | 71 |
72 |
73 | 74 |
75 |
76 |
    77 |
    • 78 |
    • 79 |
    • 80 |
    • 81 |
82 |
83 |
84 |
85 |
86 | 87 | -------------------------------------------------------------------------------- /pages/tom-holland/spiderman2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Spider Man | Multiverso 9 | 10 | 11 | 12 | 13 |
14 | 17 | 18 |
19 | 31 |
32 | 33 | 34 |
35 |
36 | 40 | 41 |
42 |
43 |
    44 |
  • Ano: 2005
    • 45 |
  • Diretor: Sam Raimi
    • 46 |
47 |
48 |
49 |

Sinopse: Quando uma falha na experiência de fusão nuclear resulta em uma explosão que mata sua esposa, o Dr. Otto Octavius é transformado em Dr. Octopus, um ciborgue com tentáculos de metal. Doc Ock culpa o Homem-Aranha pelo acidente e quer vingança. Enquanto isso, o alter ego do herói, Peter Parker, perde seus poderes. Para complicar as coisas, o seu melhor amigo odeia o Homem-Aranha e sua amada fica noiva..

50 |
51 |
52 | 53 |
54 | 66 |
67 |
68 | 69 |
70 |
71 |
    72 |
    • 73 |
    • 74 |
    • 75 |
    • 76 |
77 |
78 |
79 |
80 |
81 | 82 | -------------------------------------------------------------------------------- /pages/tom-holland/spiderman3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Spider Man | Multiverso 9 | 10 | 11 | 12 | 13 |
14 | 17 | 18 |
19 | 31 |
32 | 33 | 34 |
35 |
36 | 40 | 41 |
42 |
43 |
    44 |
  • Ano: 2007
    • 45 |
  • Diretor: Sam Raimi
    • 46 |
47 |
48 |
49 |

Sinopse: O relacionamento entre Peter Parker e Mary Jane parece estar dando certo, mas outros problemas começam a surgir. A roupa de Homem-Aranha torna-se preta e acaba controlando Peter - apesar de aumentar seus poderes, ela revela e amplia o lado obscuro de sua personalidade. Com isso, os vilões Venom e Homem-Areia tentam destruir o herói.

50 |
51 |
52 | 53 |
54 | 66 |
67 |
68 | 69 |
70 |
71 |
    72 |
    • 73 |
    • 74 |
    • 75 |
    • 76 |
77 |
78 |
79 |
80 |
81 | 82 | --------------------------------------------------------------------------------