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