我的显示有问题:阻止项目 - 它们不显示:阻止。
我不知道问题出在哪里。我希望div与“panel”类一起显示在“clip-block”类下。我粘贴了显示:阻塞所有内容,不同的方式,没有任何效果。
我尝试了一切,我的代码现在看起来像这样:
HTML:
body {
/* font-family: 'Quicksand',
sans-serif;*/
background: url("seamless-1781533_1280_0.05.png");
background-repeat: no-repeat;
background-size: cover;
}
.container {
display: block;
width: 1160px;
margin-right: auto;
margin-left: auto;
padding-left: 10px;
padding-right: 10px;
}
.col-sm-12 .col-md-12 .col-xs-12 {
position: relative;
display: block;
text-align: center;
padding-right: 5%;
}
.quote {
display: block;
position: absolute;
margin-top: 4%;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 70px;
color: #4E4E4E;
opacity: 0.9;
background-color: rgba(210, 210, 210, 0.4);
padding-left: 20px;
}
h2 {
text-align: right;
}
.header {
font-family: 'Anton', sans-serif;
}
.clip-svg {
display: block;
width: 0;
height: 0;
}
.clip-first {
display: block;
font-family: 'Quicksand', sans-serif;
width: 100%;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.clip-second {
display: block;
font-family: 'Quicksand', sans-serif;
width: 100%;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
.clip-third {
display: block;
font-family: 'Quicksand', sans-serif;
width: 100%;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
}
a:link {
display: block;
text-decoration: none;
}
.logo {
display: block;
position: relative;
margin: 0 auto;
width: 130px;
height: 130px;
background: #222;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transform: translate(-110%, 130%);
-ms-transform: translate(-110%, 130%);
-webkit-transform: translate(-110%, 130%);
}
.clip-each {
display: block;
position: relative;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
margin: 0 auto;
}
.clip-each-first {
display: block;
position: relative;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
margin: 0 auto;
transform: translate(0%, 30%);
-ms-transform: translate(0%, 30%);
-webkit-transform: translate(0%, 30%);
}
.clip-each-second {
display: block;
position: relative;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
margin: 0 auto;
transform: translate(55%, 10%);
-ms-transform: translate(55%, 10%);
-webkit-transform: translate(55%, 10%);
}
.clip-each-third {
display: block;
position: relative;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-webkit-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
margin: 0 auto;
transform: translate(-55%, -90%);
-ms-transform: translate(-55%, -90%);
-webkit-transform: translate(-55%, -90%);
}
a.clip-each-first:hover {
display: block;
background: #3071a9;
-webkit-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
a.clip-each-second:hover {
display: block;
background: #3071a9;
-webkit-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
a.clip-each-third:hover {
display: block;
background: #3071a9;
-webkit-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
.clip-gradient {
display: block;
background: #383838;
width: 130px;
height: 130px;
}
.clip-gradient .clip-first {
display: block;
color: #fff;
}
.clip-gradient .clip-second {
display: block;
color: #fff;
}
.clip-gradient .clip-third {
display: block;
color: #fff;
}
@media only screen and (min-width: 50px) {
.wrap {
display: block;
position: absolute;
top: 20%;
left: 70%;
-ms-transform: translateY(-70%) translateX(-50%);
-webkit-transform: translateY(-70%) translateX(-50%);
transform: translateY(-70%) translateX(-50%);
}
.clip-block {
display: table-cell;
vertical-align: middle;
}
}
/*.navigation {
display: block;
position: relative;
}*/
.content {
display: block;
}
.navigation .nav {
display: block;
position: relative;
}
.nav .panel {
display: none;
background: #222;
margin-top: 20px;
}
.nav .panel.active {
display: block;
}
#onas,
#zajmujemysie,
#oferta {
margin-left: 50px;
color: white;
font-family: 'Quicksand', sans-serif;
font-weight: 300;
width: 60%;
letter-spacing: 1px;
clear: both;
}
<body>
<div class="navigation">
<div class="header">
<!-- <div class="row">-->
<div class="quote">
<h1>Great companies are built on great products.</h1>
<h2>Elon Musk</h2>
</div>
</div>
</div>
<div class="nav">
<section class="content">
<div class="wrap">
<div class="clip-block">
<a href="#">
<img class="logo" src="logo_polygon.png">
</a>
<a href="#" rel="onas" class="clip-each-first clip-gradient active">
<div class="clip-first">O NAS</div>
</a>
<a href="#" rel="zajmujemysie" class="clip-each-second clip-gradient">
<div class="clip-second">CZYM SIĘ ZAJMUJEMY</div>
</a>
<a href="#" rel="oferta" class="clip-each-third clip-gradient">
<div class="clip-third">OFERTA</div>
</a>
</div>
<!-- /clip-block -->
</div>
<div id="onas" class="panel active" align="justify">
Nasza przygoda z technologią ...
</div>
<div id="zajmujemysie" class="panel" align="justify">
To firma...
</div>
<div id="oferta" class="panel" align="justify">
OFERTA - ...
</div>
</section>
</div>
<!--</div>-->
</body>