汉·索罗(Han Solo) 个人网站

响应式个人电影作品网站模板，带图片局部指示按钮。

h5, 模板

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2512
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

HTMLElement.prototype.addClass = function() {
    if (this) {
        //console.log("ADD CLASS");
        var classNameArr = (this.className || "").split(" ");
        //console.log("classNameArr", classNameArr);

for (var i = 0; i < arguments.length; i++) {
            if (!this.className.match(arguments[i])) {
                classNameArr.push(arguments[i]);
            }
        }

//console.log("className", this.className);
        this.className = classNameArr.join(" ");
        //console.log("className", this.className);

classNameArr = null;

return this;
    }
};

HTMLElement.prototype.removeClass = function() {
    if (this) {
        //console.log("REMOVE CLASS");
        var classNameArr = this.className.split(" ") || [];
        //console.log("classNameArr", classNameArr);

if (classNameArr.indexOf(arguments[0]) >= 0) {
            classNameArr.splice(classNameArr.indexOf(arguments[0]), 1);
        }

//console.log("className", this.className);  
        this.className = classNameArr.join(" ");
        //console.log("className", this.className);

classNameArr = null;

return this;
    }
};

HTMLElement.prototype.toggleClass = function() {
    if (this) {
        if (this.className.match(arguments[0])) {
            this.removeClass(arguments[0]);
        } else {
            this.addClass(arguments[0]);
        }
        return this;
    }
};

HTMLElement.prototype.hasClass = function(className) {
    if (this) {
        var thisClassName = this.className.split(" ");
        //console.log("HAS CLASS");

if (typeof className === "object") {
            var classNameArr = className;
        } else {
            var classNameArr = [className];
        }
        var result = false;

for (var i = 0; i < classNameArr.length; i++) {
            for (var j = 0; j < thisClassName.length; j++) {
                //console.log("classnames", classNameArr[i], thisClassName[j])
                if (classNameArr[i] === thisClassName[j]) {
                    result = true;
                    i = classNameArr.length;
                }
            }
            if (result) i = thisClassName.length;
        }

//console.log("result", result);

return result;
    }
};

HTMLElement.prototype.css = function(property, value) {
    if (this) {
        //console.log("APPLY CSS");

if (typeof property === "string") {
            this.style[property] = value;
        } else {
            for (var prop in property) {
                console.log(this)
                this.style[prop] = property[prop];
            }
        }

console.log("style", this.style);

return this;
    }
};

document.addEventListener("click", function(e) {
    e.preventDefault();
    if (e.target.hasClass("gun-info-node")) {
        e.target.toggleClass("open");
    } else
    if (e.target.hasClass("profile")) {
        document.querySelector("#profile-overlay").addClass("open");

} else
    if (e.target.attributes["id"] && e.target.attributes["id"].value === "profile-overlay") {
        e.target.removeClass("open");
    }
});

编译

CSS

.col-2 {
    display: inline-block;
    width: 50%;
}
.col-4 {
    display: inline-block;
    /*///////////////////////// responsive styling /////////////////////////*/
    
    width: 25%;
}
.col-3-2-1 {
    display: inline-block;
    width: 33.33333%;
}
@media screen and (max-width: 800px) {
    .col-3-2-1 {
        display: inline-block;
        width: 50%;
    }
}
@media screen and (max-width: 540px) {
    .col-3-2-1 {
        display: block;
        width: 100%;
    }
}
*,
*:before,
*:after {
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    transition: 0.5s all;
    -webkit-transition: 0.5s all;
    /* body */
    
    -moz-transition: 0.5s all;
}
body {
    margin: 0;
    color: #323232;
    background-color: #f0f0f0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}
.parent {
    position: relative;
}
.section-shadow {
    box-shadow: 0 -48px 48px -48px black;
}
.section-purple {
    background-color: #2c1d37;
}
.section-fuschia {
    background-color: #4a273f;
}
.space-exception {
    position: relative;
    margin: 0 0 -80px;
}
.page-wrap {
    max-width: 1600px;
    margin: auto;
}
.shadow-wrap {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 100%;
    height: 100%;
    max-width: 1600px;
    box-shadow: 0 0 48px 0 black;
    pointer-events: none;
}
.left-justify {
    text-align: left;
}
.center-justify {
    text-align: center;
}
.right-justify {
    text-align: right;
}
.hero-image {
    background-position: center;
    background-size: cover;
    height: 37vw;
    max-height: 600px;
}
.big-image {
    height: 45vw;
    max-height: 728px;
}
.han-solo-bg {
    background-image: url("/uploads/151201/banner.jpg");
}
.dl-44-bg {
    background-image: url("/uploads/151201/gun.jpg");
}
.profile-info {
    z-index: 1;
    position: relative;
    max-width: 480px;
    margin: 0 auto 32px;
    text-align: center;
}
.profile-info .profile-image {
    position: relative;
    top: -16px;
    display: block;
    width: 128px;
    margin: 0 auto -16px;
    border-radius: 100%;
    background-color: white;
}
.profile-info .profile-image .circular-image-shadow {
    display: block;
    position: absolute;
    bottom: 88%;
    left: 50%;
    width: 208px;
    height: 160px;
    overflow-x: visible;
    overflow-y: hidden;
    -ms-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.profile-info .profile-image .circular-image-shadow:before {
    content: "";
    display: block;
    position: relative;
    top: 84%;
    width: 128px;
    height: 144px;
    margin: auto;
    border-radius: 100%;
    box-shadow: 0 0 32px 0px rgba(0, 0, 0, 0.6);
}
.profile-info .profile-image img {
    position: relative;
    width: 100%;
    border-radius: 100%;
    box-shadow: 0 0 0 8px white;
}
.profile-info .name {
    font-size: 24px;
    margin: 0;
    font-weight: 100;
}
.profile-info .name.varified:after {
    content: "\2714";
    display: inline-block;
    width: 19.2px;
    height: 19.2px;
    padding: 1.6px;
    margin: 0 0 0 16px;
    color: white;
    background-color: #4a273f;
    border-radius: 100%;
    font-size: 11.2px;
    vertical-align: middle;
}
.profile-info .title {
    display: block;
    margin: 4px;
    color: #4a273f;
    font-weight: bold;
}
.profile-info p {
    font-size: 12.8px;
    padding: 0 16px;
}
.profile-info .social-links div {
    padding: 0 8px;
}
.profile-info .social-links div img {
    max-height: 16px;
}
.recommended-people {
    z-index: 1;
    position: relative;
    text-align: center;
}
.recommended-people .person {
    padding: 8px;
    max-width: 224px;
    margin: auto;
}
.recommended-people .person > div {
    box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.3);
}
.recommended-people .person > div .head {
    position: relative;
    height: 96px;
    text-align: right;
    overflow: hidden;
}
.recommended-people .person > div .head img {
    max-height: 100%;
}
.recommended-people .person > div .head h1 {
    z-index: 3;
    position: absolute;
    display: block;
    bottom: -1.6px;
    left: 12.8px;
    font-size: 19.2px;
    color: white;
    vertical-align: baseline;
    text-align: left;
    line-height: 17.6px;
}
.recommended-people .person > div .body {
    text-align: left;
    padding: 16px;
    background-color: white;
}
.recommended-people .person > div .body h4 {
    font-size: 12.8px;
    margin: 0 0 6.4px;
}
.recommended-people .person > div .body p {
    margin: 0;
    font-size: 12.8px;
}
.recommended-people .person > div .body .btn {
    display: inline-block;
    font-size: 9.6px;
    margin: 12.8px 0 0;
    padding: 9.6px 24px;
    border-radius: 4px;
    color: white;
    background: red;
    cursor: pointer;
}
.recommended-people .person:nth-child(1) > div .head {
    background-color: #faa209;
}
.recommended-people .person:nth-child(1) > div .head:after {
    z-index: 2;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 96px 0 0 #faa209;
    opacity: 0.75;
}
.recommended-people .person:nth-child(1) > div .body h4 {
    color: #faa209;
}
.recommended-people .person:nth-child(1) > div .body .btn {
    color: white;
    background-color: #faa209;
    box-shadow: inset 0 0 0 3.2px #faa209;
}
.recommended-people .person:nth-child(1) > div .body .btn:hover {
    color: #faa209;
    background-color: white;
}
.recommended-people .person:nth-child(2) > div .head {
    background-color: #3bb1b2;
}
.recommended-people .person:nth-child(2) > div .head:after {
    z-index: 2;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 96px 0 0 #3bb1b2;
    opacity: 0.75;
}
.recommended-people .person:nth-child(2) > div .body h4 {
    color: #3bb1b2;
}
.recommended-people .person:nth-child(2) > div .body .btn {
    color: white;
    background-color: #3bb1b2;
    box-shadow: inset 0 0 0 3.2px #3bb1b2;
}
.recommended-people .person:nth-child(2) > div .body .btn:hover {
    color: #3bb1b2;
    background-color: white;
}
.recommended-people .person:nth-child(3) > div .head {
    background-color: #e6226c;
}
.recommended-people .person:nth-child(3) > div .head:after {
    z-index: 2;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 96px 0 0 #e6226c;
    opacity: 0.75;
}
.recommended-people .person:nth-child(3) > div .body h4 {
    color: #e6226c;
}
.recommended-people .person:nth-child(3) > div .body .btn {
    color: white;
    background-color: #e6226c;
    box-shadow: inset 0 0 0 3.2px #e6226c;
}
.recommended-people .person:nth-child(3) > div .body .btn:hover {
    color: #e6226c;
    background-color: white;
}
.gun-inspector {
    z-index: 2;
    position: absolute;
    bottom: -64px;
    left: 50%;
    -ms-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    width: 52%;
}
.gun-inspector > div {
    position: relative;
    width: 100%;
    height: 100%;
}
.gun-inspector > div img {
    width: 100%;
}
.gun-inspector > div .gun-info-node {
    position: absolute;
    top: 31%;
    left: 74%;
    width: 28.8px;
    padding: 1.28px 0;
    text-align: center;
    background-color: white;
    border-radius: 100%;
    box-shadow: inset 0 0 0 4.8px gainsboro;
    font-size: 22.4px;
    cursor: pointer;
}
.gun-inspector > div .gun-info-node + .gun-info {
    height: 0px;
    opacity: 0;
    pointer-events: none;
}
.gun-inspector > div .gun-info-node.open {
    color: #f0f0f0;
    background-color: #4a273f;
}
.gun-inspector > div .gun-info-node.open + .gun-info {
    height: 196.8px;
    opacity: 1;
    pointer-events: all;
}
.gun-inspector > div .gun-info {
    position: absolute;
    top: 27%;
    left: 76.6%;
    -ms-transform: translate(-50%, -100%);
    -moz-transform: translate(-50%, -100%);
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
    width: 323.2px;
    max-width: 90vw;
    background-color: black;
}
.gun-inspector > div .gun-info:after {
    content: "";
    position: absolute;
    top: 96%;
    left: 50%;
    -ms-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    border-style: solid;
    border-width: 16px 16px 0 16px;
    border-color: white transparent transparent transparent;
}
.gun-inspector > div .gun-info > div {
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0 16px 48px 0 black;
    overflow: hidden;
}
.gun-inspector > div .gun-info > div > div {
    display: inline-block;
    background-color: white;
    vertical-align: top;
}
.gun-inspector > div .gun-info > div > div.img {
    width: 131.2px;
    background-color: black;
}
.gun-inspector > div .gun-info > div > div.img img {
    display: block;
    max-height: 100%;
}
.gun-inspector > div .gun-info > div > div.info {
    text-align: left;
    padding: 16px;
    background-color: white;
    width: 192px;
}
.gun-inspector > div .gun-info > div > div.info h1 {
    display: block;
    margin: 0 0 6.4px;
    font-weight: normal;
    font-size: 19.2px;
    color: rgba(0, 0, 0, 0.6);
    text-align: left;
    line-height: 17.6px;
    vertical-align: baseline;
}
.gun-inspector > div .gun-info > div > div.info h6 {
    color: #4a273f;
    font-size: 9.6px;
    margin: 0 0 12.8px;
}
.gun-inspector > div .gun-info > div > div.info p {
    color: rgba(0, 0, 0, 0.6);
    margin: 0;
    font-size: 12.8px;
}
.gun-inspector > div .gun-info > div > div.info .btn {
    display: inline-block;
    font-size: 9.6px;
    margin: 12.8px 0 0;
    padding: 9.6px 24px;
    border-radius: 4px;
    color: white;
    background: #4a273f;
    box-shadow: inset 0 0 0 3.2px #4a273f;
    cursor: pointer;
}
.gun-inspector > div .gun-info > div > div.info .btn:hover {
    color: #4a273f;
    background: white;
}
#profile-overlay {
    z-index: 5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
}
#profile-overlay .profile-info {
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 8px;
    width: 432px;
    height: 0;
    min-height: 224px;
    -ms-transform: scale(0.9) translate(-50%, -50%);
    -moz-transform: scale(0.9) translate(-50%, -50%);
    -webkit-transform: scale(0.9) translate(-50%, -50%);
    transform: scale(0.9) translate(-50%, -50%);
}
#profile-overlay .profile-info > div {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("https://raw.githubusercontent.com/piecedigital/han-solo-PSD-to-code/master/assets/mountains.jpg");
    background-position: 60% center;
    background-size: 180%;
    box-shadow: inset 152px 0 0 0 rgba(255, 160, 0, 0.8), inset -320px 0 0 rgba(255, 255, 255, 0.8);
}
#profile-overlay .profile-info > div > div {
    display: inline-block;
    vertical-align: top;
}
#profile-overlay .profile-info > div > div.img {
    position: relative;
    width: 152px;
    height: 100%;
    margin: 0 32px 0 0;
}
#profile-overlay .profile-info > div > div.img img {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    max-width: 184px;
}
#profile-overlay .profile-info > div > div.info {
    text-align: left;
    padding: 16px;
    width: 224px;
}
#profile-overlay .profile-info > div > div.info div {
    vertical-align: middle;
}
#profile-overlay .profile-info > div > div.info h1 {
    display: block;
    margin: 0 0 6.4px;
    font-weight: normal;
    font-size: 19.2px;
    color: rgba(0, 0, 0, 0.6);
    text-align: left;
    line-height: 17.6px;
    vertical-align: baseline;
}
#profile-overlay .profile-info > div > div.info h6 {
    color: #4a273f;
    font-size: 9.6px;
    margin: 0 0 12.8px;
}
#profile-overlay .profile-info > div > div.info h6.small {
    font-size: 6.4px;
    margin: 6.4px 0;
}
#profile-overlay .profile-info > div > div.info p {
    color: rgba(0, 0, 0, 0.6);
    padding: 0;
    margin: 0 0 12.8px;
    font-size: 12.8px;
}
#profile-overlay .profile-info > div > div.info .btn {
    display: inline-block;
    font-size: 9.6px;
    padding: 9.6px 24px;
    border-radius: 4px;
    color: white;
    background: #faa209;
    box-shadow: inset 0 0 0 3.2px #faa209;
    cursor: pointer;
}
#profile-overlay .profile-info > div > div.info .btn:hover {
    color: #faa209;
    background: white;
}
#profile-overlay .profile-info > div > div.info .followers {
    font-size: 11.2px;
    vertical-align: middle;
    text-align: right;
}
#profile-overlay .profile-info > div > div.info .followers .img {
    padding: 3.2px;
}
#profile-overlay .profile-info > div > div.info .followers .img img {
    border-radius: 100%;
    box-shadow: inset 0 0 0 3.2px #f0f0f0;
}
#profile-overlay.open {
    opacity: 1;
    pointer-events: all;
}
#profile-overlay.open .profile-info {
    -ms-transform: scale(1) translate(-50%, -50%);
    -moz-transform: scale(1) translate(-50%, -50%);
    -webkit-transform: scale(1) translate(-50%, -50%);
    transform: scale(1) translate(-50%, -50%);
}
@media screen and (max-width: 600px) {
    .space-exception {
        position: relative;
        margin: 0 0 -32px;
    }
    .gun-inspector > div .gun-info-node.open + .gun-info {
        height: 296px;
    }
    .gun-inspector > div .gun-info {
        left: 50%;
    }
    .gun-inspector > div .gun-info:after {
        display: none;
    }
    .gun-inspector > div .gun-info > div > div {
        display: block;
    }
    .gun-inspector > div .gun-info > div > div.img {
        width: 100%;
        height: 128px;
        overflow: hidden;
    }
    .gun-inspector > div .gun-info > div > div.img img {
        position: relative;
        top: 50%;
        -ms-transform: translate(0, -22%);
        -moz-transform: translate(0, -22%);
        -webkit-transform: translate(0, -22%);
        transform: translate(0, -22%);
        max-width: 100%;
        max-height: inherit;
    }
    .gun-inspector > div .gun-info > div > div.info {
        width: 100%;
    }
}

HTML

<div class="shadow-wrap"></div>
<section class="section-purple">
    <div class="page-wrap hero-image han-solo-bg">
    </div>
</section>
<section class="space-exception">
    <div class="section-shadow page-wrap parent">
        <div class="profile-info">
            <div class="profile-image">
                <div class="circular-image-shadow"></div>
                <img src="/assets/coolboy.jpg" alt="han solo profile image">
            </div>
            <h1 class="name varified">Han Solo</h1>
            <h6 class="title">SMUGGLER</h6>
            <p>
                I like smuggling things for a living and cowboy adventures across the universe. I have my trusty, hairy companion with me at all times, as well as my favorite pistol: the DL-44. I like to call it the "Deadly Laser 44," or, ever since I shot a guy in a
                bar, the "Down Low 44."
            </p>
            <div class="social-links">
                <div class="col-2 right-justify">
                    <a href="#">
                        <img src="https://raw.githubusercontent.com/piecedigital/han-solo-PSD-to-code/master/assets/twitter.png" alt="twitter link image">
                    </a>
                </div>
                <div class="col-2 left-justify">
                    <a href="#">
                        <img src="https://raw.githubusercontent.com/piecedigital/han-solo-PSD-to-code/master/assets/facebook.png" alt="facebook link image">
                    </a>
                </div>
            </div>
        </div>
        <div class="recommended-people center-justify">
            <div class="person col-3-2-1">
                <div>
                    <div class="head">
                        <img src="/uploads/161001/normal1.jpg">
                        <h1>CHEWBACCA</h1>
                    </div>
                    <div class="body">
                        <h4>TITLE HERE</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <div class="btn profile">FOLLOW</div>
                    </div>
                </div>
            </div>
            
            <div class="person col-3-2-1">
                <div>
                    <div class="head">
                        <img src="/uploads/161001/normal2.jpg">
                        <h1>MILLENUIM FALCON</h1>
                    </div>
                    <div class="body">
                        <h4>TITLE HERE</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <div class="btn">FOLLOW</div>
                    </div>
                </div>
            </div>
            
            <div class="person col-3-2-1">
                <div>
                    <div class="head">
                        <img src="/uploads/161001/normal3.jpg">
                        <h1>LEIA</h1>
                    </div>
                    <div class="body">
                        <h4>TITLE HERE</h4>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        </p>
                        <div class="btn">FOLLOW</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="section-fuschia">
    <div class="page-wrap hero-image big-image dl-44-bg parent">
        <div class="gun-inspector">
            <div>
                <img src="/uploads/1905/gun.png">
                <div class="gun-info-node">+</div>
                <div class="gun-info">
                    <div>
                        <div class="img">
                            <img src="/uploads/1905/gun_hover.jpg">
                        </div>
                        
                        <div class="info">
                            <h1>Stun Setting</h1>
                            <h6>USER CONTROLLED</h6>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
                            </p>
                            <div class="btn">PURCHASE</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="page-wrap hero-image">

</div>
</section>

<div id="profile-overlay">
    <div class="profile-info">
        <div>
            <div class="img">
                <img src="https://raw.githubusercontent.com/piecedigital/han-solo-PSD-to-code/master/assets/chewbacca full.png">
            </div>
            
            <div class="info">
                <h1>Chewbacca</h1>
                <h6>SMUGGLER | REBEL ALLIANCE</h6>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
                </p>
                <div class="col-2">
                    <div class="btn">FOLLOW</div>
                </div>
                
                <div class="col-2">
                    <div class="social-links">
                        <div class="col-2 right-justify">
                            <a href="#">
                                <img src="https://raw.githubusercontent.com/piecedigital/han-solo-PSD-to-code/master/assets/twitter.png" alt="twitter link image">
                            </a>
                        </div>
                        <div class="col-2 left-justify">
                            <a href="#">
                                <img src="https://raw.githubusercontent.com/piecedigital/han-solo-PSD-to-code/master/assets/facebook.png" alt="facebook link image">
                            </a>
                        </div>
                    </div>
                </div>
                <h6 class="small">FOLLOWERS</h6>
                <div class="followers col-2">
                    <div class="col-4 img">
                        <img src="https://lorempixel.com/20/20/people">
                    </div>
                    
                    <div class="col-4 img">
                        <img src="https://lorempixel.com/20/20/people">
                    </div>
                    
                    <div class="col-4 img">
                        <img src="https://lorempixel.com/20/20/people">
                    </div>
                    
                    <div class="col-4 img">
                        <img src="https://lorempixel.com/20/20/people">
                    </div>
                </div>
                
                <div class="followers col-2">
                    <span class="count">+ 193,294 others</span>
                </div>
            </div>
        </div>
    </div>
</div>

响应式个人电影作品网站模板，带图片局部指示按钮。

h5, 模板

编辑器支持Emmet

快捷键

响应式个人电影作品网站模板，带图片局部指示按钮。

h5, 模板

H5 RPG小游戏 死亡漫步（Death Strolling）

Vue.JS + Tailwind.CSS魔法巫师帽电商移动网页应用模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

H5 RPG小游戏死亡漫步（Death Strolling）