html 致敬决赛
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 致敬决赛相关的知识，希望对你有一定的参考价值。
Tribute Final
-------------
A [Pen](https://codepen.io/renx777/pen/dJXKoL) by [Renuka Prasad A](https://codepen.io/renx777) on [CodePen](https://codepen.io).
[License](https://codepen.io/renx777/pen/dJXKoL/license).<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
body {
background: #8e4343
}
#photo {
box-shadow: 0 0px 38px rgba(0,0,0,0.30), 0 10px 12px rgba(0,0,0,0.22);
}
.carousel-inner>.item>img {
width: 640px;
height: 460px;
}
.carousel-inner {
background: #b32323;
box-shadow: inset 1px 0px 20px 8px #000000;
}
#j2 {
background: #b50c0ce8;
box-shadow: inset 1px 0px 20px 8px #000000;
}
a {
color: rgb(236, 223, 29);
cursor:arrow;
}
a:hover {
color:rgb(236, 223, 29);
text-decoration: none;
}
#imagebox {
padding-top: 15px;
padding-bottom: 15px;
width:600px;
margin: 0 auto;
box-shadow: inset 1px 0px 20px 8px #000000;
}
#name {
font-family: sacramento;
font-size: 80px;
color: rgb(255, 73, 73);
text-shadow: 0 0px 38px rgba(0, 0, 0, 0.918), 0 10px 12px rgb(0, 0, 0);
}
#title {
font-family: Julius Sans One;
color: rgba(39, 253, 118, 0.932)
}
.life {
font-family: Syncopate;
margin-top: 10px;
padding-top: 5px;
color: #ffffffc2;
box-shadow: inset 1px 0px 20px 8px #000000;
}
h3 {
color: white;
text-shadow: 0 0px 38px rgba(0, 0, 0, 0.918), 0 10px 12px rgba(0, 0, 0, 0.26);
}
h4 {
text-decoration: underline;
}
.jumbotron {
background: rgb(99, 3, 3);
margin-top: 20px;
border: 8px solid rgb(251, 14, 26);
border-radius: 5px;
box-shadow: 0 0px 38px rgba(0, 0, 0, 0.30), 0 10px 12px rgba(0, 0, 0, 0.22);
}
.carousel {
background: #000000;
margin-top: 20px;
}
.carousel .item {
min-height: 280px;
/* Prevent carousel from being distorted if for some reason image doesn't load */
}
.carousel .item img {
margin: 0 auto;
/* Align slide image horizontally center */
}
.bs-example {
margin: 20px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
// Load this when the DOM is ready
$(function () {
// You used .myCarousel here.
// That's the class selector not the id selector,
// which is #myCarousel
$('#myCarousel').carousel();
});
<head>
<title>Vincent Van Gogh</title>
</head>
<style type="text/css">
</style>
<body>
<div class="container">
<div class="jumbotron">
<h1 id="name" class="text-center">Victor Van Gogh</h1>
<h3 id="title" class="text-center">The Greatest Painter of All Time</h4>
<!-- .center-block == centers the image -->
<div id="imagebox" class="text-center container">
<div class="row">
<div class="col-md-12">
<img id="photo" src="https://www.artyfactory.com/art_appreciation/portraits/van_gogh/van_gogh_3.jpg" class="center-block img-responsive"
alt="Victor Van Gogh">
</div>
</div>
</div>
<!-- life at a glance -->
<div class="life container">
<h4>
<strong>Life At Glance:</strong>
</h4>
<ul>
<li>
<strong>1853-</strong> born in Groot-Zundert, in the predominantly Catholic province of North Brabant
in the southern Netherlands</li>
<li>
<strong>1869-</strong> Van Gogh's uncle Cent obtained a position for him at the art dealers Goupil &
Cie in The Hague</li>
<li>
<strong>1876-</strong> returned to England to take unpaid work as a supply teacher in a small boarding
school in Ramsgate. </li>
<li>
<strong>1879-</strong> took up a post as a missionary at Petit-Wasmes.[45] in the coal-mining district
of Borinage in Belgium</li>
<li>
<strong>1881-</strong> Van Gogh returned to Etten in April 1881 for an extended stay with his parents.</li>
<li>
<strong>1883-</strong> Van Gogh moved to Drenthe in the northern Netherlands. In December, driven by
loneliness, he went to live with his parents, then in Nuenen, North Brabant.</li>
<li>
<strong>1884-</strong> Margot Begemann, a neighbour's daughter ten years his senior, joined him on his
forays; she fell in love and he reciprocated, though less enthusiastically. They wanted to marry,
but neither side of their families were in favou</li>
<li>
<strong>1886-</strong> Van Gogh moved to Paris in March 1886 where he shared Theo's rue Laval apartment
in Montmartre, and studied at Fernand Cormon's studio</li>
<li>
<strong>1888-</strong> When Gauguin agreed to visit Arles in 1888, Van Gogh hoped for friendship, and
the realisation of his idea of an artists' collective. While waiting, in August he painted Sunflowers.
When Boch visited again, Van Gogh painted a portrait of him, as well as the study The Poet Against
a Starry Sky.</li>
<li>
<strong>1889-</strong> Van Gogh entered the Saint-Paul-de-Mausole asylum on 8 May 1889, accompanied by
his carer, Frédéric Salles, a Protestant clergyma</li>
<li>
<strong>1890-</strong> On 27 July 1890, aged 37, Van Gogh shot himself in the chest with a 7mm Lefaucheux
à broche revolver.[186][187] There were no witnesses and he died 30 hours after the incident.He
died in the early hours of 29 July. According to Theo, Vincent's last words were: "The sadness
will last forever"</li>
</ul>
</div>
<!-- famous works caraousel -->
<div class="container">
<h4 class="life">
<strong>Famous works:</strong>
</h4>
<div id="j2" class="jumbotron">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
<li data-target="#myCarousel" data-slide-to="6"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="https://learnodo-newtonic.com/wp-content/uploads/2013/07/The-Starry-Night-De-sterrennacht-by-Vincent-Van-Gogh.jpg"
alt="First Slide">
</div>
<div class="item">
<img src="https://learnodo-newtonic.com/wp-content/uploads/2014/11/Vase-with-Fifteen-Sunflowers-1888-Vincent-Van-Gogh.jpg"
alt="Second Slide">
</div>
<div class="item">
<img src="https://learnodo-newtonic.com/wp-content/uploads/2014/11/Irises-1889-Vincent-Van-Gogh.jpg" alt="Third Slide">
</div>
<div class="item">
<img src="https://learnodo-newtonic.com/wp-content/uploads/2014/11/Portrait-of-Dr.-Gachet-1890-Vincent-Van-Gogh.jpg" alt="fourth slide">
</div>
<div class="item">
<img src="https://learnodo-newtonic.com/wp-content/uploads/2014/11/Cafe-Terrace-at-Night-1888-Vincent-Van-Gogh.jpg" alt="fifth slide">
</div>
<div class="item">
<img src="https://learnodo-newtonic.com/wp-content/uploads/2014/06/Self-Portrait-with-Bandaged-Ear-by-Vincent-Van-Gogh.jpg"
alt="">
</div>
<div class="item">
<img src="https://learnodo-newtonic.com/wp-content/uploads/2014/11/The-Potato-Eaters-1885-Vincent-Van-Gogh.jpg" alt="">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
<h3 class="text-center">Know more about this Genius at his
<a href="https://en.wikipedia.org/wiki/Vincent_van_Gogh">Wikipedia entry</a>
</h3>
<div class="footer-copyright text-center">
<div class="container-fluid">
© 2017 Copyright:
<a href="https://github.com/renx777"> Written and Coded by:
<strong>
<h3>Renuka Prasad A</h5>
</strong>
</a>
</div>
</div>
</div>
<!-- display famous works of vincent through caraousel -->
<br>
<br>
<br>
</body>
</>以上是关于html 致敬决赛的主要内容，如果未能解决你的问题，请参考以下文章