html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
ul.topnav {
\t list-style-type: none;
\t /*position: fixed; */
\t overflow: hidden;
\t margin: 0;
\t padding: 0 0 0 400px;
\t background-color: #110E0C;
/*width: 100%;
top: 0; */
}
ul.topnav li {
\t float: left;
}
ul.topnav li a {
\t display: block;
\t color: white;
\t text-align: center;
\t text-decoration: none;
\t padding: 14px 30px;
\t text-transform: uppercase;
\t /*background-color: #3F4345;*/
}
ul.topnav li a:hover {
\t background-color: #C8D0D7;
\t color: #D8610C;
\t border-bottom: 1px solid #D8610C;
margin-bottom: -1px;
}
ul.topnav li a.active {
\t background-color: #C8D0D7;
\t color: #D8610C;
\t border-bottom: 1px solid #D8610C;
margin-bottom: -1px;
}
ul.bottom-nav {
\t list-style-type: none;
\t /*position: fixed; */
\t overflow: hidden;
\t margin: 0 0 -40px 0;
\t padding: 0 0 0 400px;
\t background-color: #110E0C;
\t /*width: 100%;
top: 0; */
}
ul.bottom-nav li {
\t float: left;
}
ul.bottom-nav li a {
\t display: block;
\t color: white;
\t text-align: center;
\t text-decoration: none;
\t padding: 14px 30px;
\t text-transform: uppercase;
\t /*background-color: #3F4345;*/
}
ul.bottom-nav li a:hover {
\t background-color: #C8D0D7;
\t color: #D8610C;
\t border-bottom: 1px solid #D8610C;
}
ul.bottom-nav li a.active {
\t background-color: #C8D0D7;
\t color: #EA6E00;
\t /* border-bottom: 1px solid #D8610C; */
}
header {
\t width: 100%;
\t padding: 2px;
\t color:black;
\t background-color: #EBEEF1;
\t text-align: center;
\t overflow: hidden;
}
header img {
\t
\t height: 150px;
\t width: 150px;
\t margin-left: 900px;
\t float:left;
\t
}
header p {
\t padding: 40px;
}
.section-1 {
\t background-color: #333333;
\t height: 425px;
}
.section-1 img {
\t border: 1px solid white;
\t width: 500px;
\t height: auto;
}
.section-1 h3 {
\t color: white;
\t padding-bottom: 10px;
\t text-align: center;
}
.section-1 p {
\t color: white;
\t width: 600px;
\t padding: 0;
\t margin: 0;
\t line-height: 20px;
}
.main-topic {
\t display: table;
\t border: 2px solid green;
\t margin: 0 auto;
}
.left-text{
\t display: table-cell;
\t vertical-align:middle;
\t background-color: #632712;
\t border: 5px solid #F1F0F0;
}
.right-picture{
\t display: table-cell;
}
.right-picture > img{
\t display: block;
}
.clear{
\t clear: both;
}
.section-2 {
\t background-color: #EBEEF1;
\t height: 574px;
}
.col-1 {
\t position: relative;
\t top: -72px;
\t left: -7px;
\t float:left;
\t width: 506px;
\t height: 245px;
\t /* margin: 10px; */
\t border: 1px solid rgba(230, 231, 232, 0.55);
\t margin: 28px 0 0 403px;
}
.col-2 {
\t position: relative;
\t top: -44px;
\t left: -355px;
\t float: left;
\t width: 506px;
\t height: 245px;
\t /* margin: 10px; */
\t border: 1px solid rgba(230, 231, 232, 0.55);
\t margin: 0 0 0 434px;
}
.col-3 {
\t position: relative;
\t top: -4px;
\t left: -355px;
\t float: left;
\t width: 506px;
\t height: 245px;
\t /* margin: 10px; */
\t border: 1px solid rgba(230, 231, 232, 0.55);
\t margin: 0 0 0 434px;
}
.col-4 {
\t position: relative;
\t top: -250px;
\t left: -38px;
\t float: left;
\t width: 506px;
\t height: 245px;
\t /* margin: 10px; */
\t border: 1px solid rgba(230, 231, 232, 0.55);
\t margin: 0 0 0 434px;
}
.caption {
\t text-align: left;
\t background-color: #C8D0D7;
}
.caption h4 {
\t padding: 20px 0 20px 20px;
\t font-size: 30px;
\t font-weight: bold;
}
.caption p {
\t text-indent: 2em;
\t font-style: italic;
\t font-weight: bold;
}
.caption button {
\t background-color: black;
\t color:white;
\t margin: 10px 0 0 15px;
}
.col-4 > .caption > ul {
\t padding: 0 0 0 30px;
\t list-style-image: url("http://nadeausoftware.com/sites/nadeausoftware.com/files/bullets/arrow_10x10_large.png");
\t font-weight: bold;
\t line-height: 2;
}
.col-3 > .caption > ul {
\t padding: 0 0 0 30px;
\t list-style-image: url('smile.png');
\t font-weight: bold;
\t line-height: 2;
color:black;
}
.nav {
\t margin-bottom: 0;
}
<body>
\t <nav>
\t \t <ul class="topnav">
\t \t \t <li><a class="active" href="#home">home</a></li>
\t \t \t <li><a href="#hospitalitystaff">hospitality staff</a></li>
\t \t \t <li><a href="#whychooseus">why choose us</a></li>
\t \t \t <li><a href="#testimonials">testimonials</a></li>
\t \t \t <li><a href="#faq">faq</a></li>
\t \t \t <li><a href="#termsandconditions">terms and conditions</a></li>
\t \t \t <li><a href="#contactus">contact us</a></li>
\t \t \t
\t \t </ul>
\t </nav>
\t <header>
\t \t <img src="https://s-media-cache-ak0.pinimg.com/564x/02/10/26/0210268f040d46c1bb46e4b31087da61.jpg">
\t \t <p>Call Us Now <br> 020 7183 3263</p>
\t </header>
\t <section class="section-1">
\t \t <div class="main-topic">
\t \t \t <div class="left-text">
\t \t \t \t <div class="left-text-background">
\t \t \t \t \t <h3>Deadpool Fans Petition 'SNL' for Superhero to Host</h3>
\t \t \t \t \t <p>
\t \t \t \t \t \t Deadpool fans want its superhero to host Saturday Night Live — Deadpool, that is, not Ryan Reynolds. Fans of the Merc With a Mouth, who led the Marvel film to a history-making debut at the box office, have launched a Change.org petition calling for the antihero to host an upcoming episode of the NBC sketch comedy show. "We've all seen the trailers, the magazine covers, the viral videos, and the billboards by now, so what's left for Deadpool (Ryan Reynolds) to do?" creator Andrew Stege asks in the petition, which is directed to SNL, creator Lorne Michaels, parent.
\t \t \t \t \t </p>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="right-picture">
\t \t \t \t <img src="http://cdn3.whatculture.com/wp-content/uploads/2015/10/f5S3dvUb.jpg">
\t \t \t </div>
\t \t \t
\t \t </section>
\t \t <section class="section-2">
\t \t \t
\t \t \t <div class="col-1">
\t \t \t \t <div class="caption">
\t \t \t \t \t <h4>Hospitality Staff</h4>
\t \t \t \t \t <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
\t \t \t \t \t <button type="button">Read More</button>
\t \t \t \t \t
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="col-2">
\t \t \t \t <div class="caption">
\t \t \t \t \t <h4>Catering</h4>
\t \t \t \t \t <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
\t \t \t \t \t <button type="button">Read More</button>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="col-3">
\t \t \t \t <div class="caption">
\t \t \t \t \t <h4>Testimonials</h4>
\t \t \t \t \t <ul class="list-upcomma">
\t \t \t \t \t \t <li><p>Benchmark-quality staff</p></li>
\t \t \t \t \t \t <li><p>Don't metter how hard you try</p></li>
\t \t \t \t \t \t <li><p>Find the best solution</p></li>
\t \t \t \t \t \t <li><p>Try your best</p></li>
\t \t \t \t \t \t <li><p>Or just fuck it, you will die anyway</p></li>
\t \t \t \t \t </ul>
\t \t \t \t \t <button type="button">Read More</button>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t <div class="col-4">
\t \t \t \t <div class="caption">
\t \t \t \t \t <h4>Why Choose Us: </h4>
\t \t \t \t \t <ul class="ul arrow">
\t \t \t \t \t \t <li>Benchmark-quality staff</li>
\t \t \t \t \t \t <li>Don't metter how hard you try</li>
\t \t \t \t \t \t <li>Find the best solution</li>
\t \t \t \t \t \t <li>Try your best</li>
\t \t \t \t \t \t <li>Or just fuck it, you will die anyway</li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t
\t \t </section>
<div class="clear"> </div>
\t \t <nav class="navigation">
\t \t \t <ul class="bottom-nav">
\t \t \t \t <li><a class="active" href="#home">home</a></li>
\t \t \t \t <li><a href="#hospitalitystaff">hospitality staff</a></li>
\t \t \t \t <li><a href="#whychooseus">why choose us</a></li>
\t \t \t \t <li><a href="#testimonials">testimonials</a></li>
\t \t \t \t <li><a href="#faq">faq</a></li>
\t \t \t \t <li><a href="#termsandconditions">terms and conditions</a></li>
\t \t \t \t <li><a href="#contactus">contact us</a></li>
\t \t \t </ul>
\t \t </nav>
你好。大声笑。你想重新创建整个网站吗？我会引导你。我检查了你的网站.. - 如果是的话，我们可以在c9协作。你可以在这个过程中学到一些东西。 :) – Uniforlyff
哈哈我知道这太可怕了:)）））我刚刚开始。我会接受任何帮助和建议。 –
好的。 https://ide.c9.io/uniforlyff/deadpool创建一个帐户我会在那里帮你，那就是如果你没有。 – Uniforlyff