Day 2
html:
(index.html)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Make a Deal</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body id="make_a_deal">
<!-- Start text_container -->
<div class="text_container">
<div class="title">做出一个选择,测试你的性格</div>
<div class="text">苏格拉底说:“认识你自己。”孙子兵法云:“知己知彼，百战百胜。”认识一个人，最重要的是认识其性格。性格决定命运，优秀的性格将会让你的人生走的更远。其实每个人自己独特的性格不一定都能自我发掘出来。有时候还是要靠他人的引导才能体现到。
</div>
<p>那么现在就做出一个测试，看看你的选择是如何。</p>
</div>
<!-- End text_container -->
<!-- Start door_container -->
<div class="door_container">
<div class="door"><a href="make_a_deal_choose_1.html"><img src="images/door1.png"></a>
<div class="door"><a href="make_a_deal_choose_2.html"><img src="images/door2.png"></a></div>
</div>
<!-- End door_container -->
</body>
</html>
(make_a_deal_choose1.html)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Make a Deal</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body id="make_a_deal">
<!-- Start text_container -->
<div class="text_container">
<div class="title">选择第1扇门的朋友：</div>
<div class="text"> <p>你喜欢开玩笑，是能瞬间让气氛活跃的热场高手！</p>
<p>你喜欢栽培别人。欣赏生活中那些简单的奢华，比如：素雅精致的餐具、镂花装饰的蜡烛，或是吃一口当地面包房手工烘焙的面包。</p>
<p>你喜欢旅行，喜欢不同国度的异域文化。</p>
<p>你真心的希望每个人都好，喜欢善意的营造友好氛围。需要谨记：如果你感觉需要帮助或支持时，一定要开口讲出来。</p>
</div>
<p>现在你可以选择打开第二扇门了</p>
</div>
<!-- End text_container -->
<!-- Start door_container -->
<div class="door_container">
<div class="door"><a href="make_a_deal_choose_1.html"><img src="images/door1.png"></a>
<div class="door"><a href="make_a_deal_choose_2.html"><img src="images/door2.png"></a></div>
</div>
<!-- End door_container -->
</body>
</html>
(make_a_deal_choose2.html)
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Make a Deal</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body id="make_a_deal">
<!-- Start text_container -->
<div class="text_container">
<div class="title">选择第2扇门的朋友：</div>
<div class="text">
<p>你喜好干净、简单，讨厌任何花俏的装饰。对你而言那些都是画蛇添足，中看不中用的玩意。</p>
<p>你属于很上进的那种人。私底下努力加码，工作中奋力拼杀，只为换得干净、完美的生活，但这么玩命，是否值得？</p>
<p>难道你没有感觉到自己错过了什么吗？</p>
<p>你把自己的关注点，统统放在了个人成就上，对自己的工作和职业颇感自豪。</p>
<p>尽管你的职业生涯大多顺风顺水、发展的不错，或拥有数项学位证书，但你现在确实应该砸更多的时间给自己，你应该成为一个“人”、一个真正的自己。而不是一味去追寻世俗的成就，压抑原本的自我。</p>
<p>生活就是要创造平衡，用色彩包裹自己，创造并经历那些最有意义的冒险。</p>
<p>如果你认为自己已经走上了一条传统意义上的安逸之路，那么尝试转变，来场冒险之旅吧。你会惊讶于自己的表现。</p>
</div>
<p>现在你可以选择打开第一扇门了</p>
</div>
<!-- End text_container -->
<!-- Start door_container -->
<div class="door_container">
<div class="door"><a href="make_a_deal_choose_1.html"><img src="images/door1.png"></a>
<div class="door"><a href="make_a_deal_choose_2.html"><img src="images/door2.png"></a></div>
</div>
<!-- End door_container -->
</body>
</html>
Css:
(index.css)
body{
background: #333;
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}
.text_container{
margin: 20px auto 50px;
width: 700px;
text-align: center;
color: #fff8f1;
}
.text_container .title{
font-size: 50px;
margin-bottom: 30px;
}
.text_container .text{
text-align: left;
text-indent: 34px;
}
.door_container{
text-align: center;
}
.door{
display: inline-block;
margin-left: 40px;
}