问题描述
各位， 来自阳光明媚的西班牙的问候。 我已经建立了一个灯箱。 附上的图片显示了房屋和单击的图像状态，您可以在其中看到问题所在。 我正在尽我所知尝试修复它，我想知道是否有人想弄清楚我做错了什么。 我敢肯定，在新的蜜蜂 500 行代码中没有幻想可以写得更好，但是，您是否愿意尝试并杀死左侧的白边？ （它在手机上显示相同） enter image description here
解决方法
this is the home state picture where you can browse works
,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style type="text/css">
* {
box-sizing: border-box;
}
.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.eleven,.twelve,.thirteen,.fourteen,.fifteen {
display: inline;
}
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;700&display=swap');
/*Eliminates padding,centers the thumbnail */
body,html {
padding: 0;
margin-top:1rem;
font-family: 'Lato',sans-serif;
background: white;
color: black;
}
h1,h2,p {
display:inline;
}
.container {
margin-bottom: 5em;
}
.contact {
display: inline;
float: left;
margin-left:1.5%;
margin-bottom: 1.5%;
font-size: 0.8rem;
font-style: normal;
font-weight: 700;
letter-spacing: 1rem;
line-height: 30px;
}
.email {
text-decoration: none;
color: black;
}
.phone {
color: black;
margin-left: 25%;
}
h1 {
font-size: 1.3rem;
font-style: normal;
font-weight: 700;
letter-spacing: 1rem;
line-height: 30px;
}
h2 {
font-size: 0.9rem;
font-style: normal;
font-weight: 300;
letter-spacing: 0.5rem;
line-height: 1rem;
}
hr {
border-style: inset;
border-top: 0;
border-bottom: 1px solid;;
border-left: none;
display: block;
height: 1px;
}
header,footer {
margin-left: 1.5%;
margin-right: 1.5%;
}
/* Styles the thumbnail */
a.lightbox img {
height: 220px;
box-shadow: 0px 0px 8px rgba(0,.2);
margin: 1rem 1rem 1rem 1rem;
transition:.5s ease-in-out;
}
a.lightbox img:hover {
filter: brightness(60%);
}
a:link {
text-decoration: none;
}
/* Styles the lightbox,removes it from sight and adds the fade-in transition */
.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,.9);
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}
/* Styles the lightbox image,centers it vertically and horizontally,adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
box-shadow: 0px 0px 8px rgba(0,0);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
.lightbox-target .aboutjobs {
position: absolute;
bottom: 0px;
left: 30%;
width: 50%;
height: 5%;
color: white;
line-height: 1.5em;
}
/* Styles the close link,adds the slide down transition */
a.lightbox-close {
display: block;
width:100px;
height:100px;
box-sizing: border-box;
color: black;
text-decoration: none;
position: absolute;
top: -80px;
right: 0;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:before {
content: "";
display: block;
height: 6rem;
width: 0.2rem;
background: red;
position: absolute;
left: 1rem;
top:0.5rem;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
/* Provides part of the "X" to eliminate an image from the close link */
a.lightbox-close:after {
content: "";
display: block;
height: 6rem;
width: 0.2rem;
background: red;
position: absolute;
left: 1rem;
top:0.5rem;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}
.lightbox-target:target img {
max-height: 100%;
max-width: 100%;
}
.lightbox-target:target a.lightbox-close {
top: 0px;
}
.email:hover,.phone:hover {
color: #C5C557;
}
.VLTW {
text-decoration: none;
color: white;
}
strong {
font-size: 2rem;
}
@media (min-width: 320px) and (max-width: 480px) { /* mobile */
body {
text-align: center;
}
a.lightbox img {
height: 130px;
box-shadow: 0px 0px 8px rgba(0,.2);
margin: 1rem 1rem 1rem 1rem;
transition:.5s ease-in-out
}
.lightbox-target .aboutjobs {
position: absolute;
bottom: 0px;
left: 25%;
width: 50%;
height: 10%;
color: white;
font-size: 0.7em;
}
h1 {
font-size: 1rem;
}
h2 {
font-size: 0.5rem;
}
header h2 {
line-height: 2rem;
}
.contact {
margin:;
text-align: center;
}
.email {
text-align: left;
margin-left: 14%;
}
.phone {
text-align: right;
}
strong {
font-size: 1rem;
}
a.lightbox-close:before
a.lightbox-close:after,{
}
}
</style>
</head>
<body>
<header>
<h1>Pedro Alerri</h1>
<h2>Stills & moving image technical production<h2>
</header>
<hr>
<div class="container">
<div class="one">
<a class="lightbox" href="#AudiT">
<img src="audi-q3-1-by-marc-trautmann 2.jpg"/>
</a>
<div class="lightbox-target" id="AudiT">
<img src="audi-q3-1-by-marc-trautmann 2.jpg"/>
<p class="aboutjobs">Technical production & second assistant. Gripvan & DDB for Marc Trautman. Stills for Audi</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="two">
<a class="lightbox" href="#DC">
<img src="dylantcollard.jpg"/>
</a>
<div class="lightbox-target" id="DC">
<img src="dylantcollard.jpg"/>
<p class="aboutjobs">Tecnical production & second assistant. Gripvan & Locate productions for Dylan Collard. Stills for Boehringer Ingelheim </p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="three">
<a class="lightbox" href="#TA">
<img src="todd Anthony,locate productions,DVLA London (driver and vehicle licensing agency).jpg"/>
</a>
<div class="lightbox-target" id="TA">
<img src="todd Anthony,DVLA London (driver and vehicle licensing agency).jpg"/>
<p class="aboutjobs">Tecnical production. Gripvan & Locate productions for Todd Anthony. Stills for DVLA</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="four">
<a class="lightbox" href="#TWB">
<img src="the wade brothers-holiday inn-still productions.jpg"/>
</a>
<div class="lightbox-target" id="TWB">
<img src="the wade brothers-holiday inn-still productions.jpg"/>
<p class="aboutjobs">Technical production & second assistant. Gripvan & Stills productions for the Wade Brothers. Stills for the Holiday Inn</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="five">
<a class="lightbox" href="#NR">
<img src="noromeworldwide-Dannynorthphoto (3).jpg"/>
</a>
<div class="lightbox-target" id="NR">
<img src="noromeworldwide-Dannynorthphoto (3).jpg"/>
<p class="aboutjobs">Technical production & best boy. Gripvan & Dirty Hit for Danny North. No Rome album cover</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="six">
<a class="lightbox" href="#MH">
<img src="Max Hetherington. Instagram-iammaximilianiam.jpg"/>
</a>
<div class="lightbox-target" id="MH">
<img src="Max Hetherington. Instagram-iammaximilianiam.jpg"/>
<p class="aboutjobs">Technical production & second assistant. Gripvan & Plan productions for (the lovely) Max Hetherington. Pictures for JD & Pink Soda</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="seven">
<a class="lightbox" href="#CD">
<img src="I only see great camapign-north6-puma-jon johnson.jpg"/>
</a>
<div class="lightbox-target" id="CD">
<img src="I only see great camapign-north6-puma-jon johnson.jpg"/>
<p class="aboutjobs">Technical production & best boy. Gripvan & North6 for Jon Johnson. Puma Campaign</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="eight">
<a class="lightbox" href="#FS">
<img src="Federicosorrentino. East End Girls. Instagram-federicosorrentino_o.jpg"/>
</a>
<div class="lightbox-target" id="FS">
<img src="Federicosorrentino. East End Girls. Instagram-federicosorrentino_o.jpg"/>
<p class="aboutjobs">Technical production & second assistant. Gripvan & Picture farm for Federico Sorrentino. "East End Girls" Mango campaign</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="nine">
<a class="lightbox" href="#DHE">
<img src="euromillions,david harriman,still productions,wyatt clarke jones.jpg"/>
</a>
<div class="lightbox-target" id="DHE">
<img src="euromillions,wyatt clarke jones.jpg"/>
<p class="aboutjobs">Technical production & second assistant. Gripvan & Still productions for David Harriman. Stills for Euromillions</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="ten">
<a class="lightbox" href="#DH">
<img src="David Harriman. Instagram1 - Davidharriman.jpg"/>
</a>
<div class="lightbox-target" id="DH">
<img src="David Harriman. Instagram1 - Davidharriman.jpg"/>
<p class="aboutjobs">Technical production & best boy. Gripvan & Still productions for David Harriman. Stills for HM Government campaign</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="eleven">
<a class="lightbox" href="#LRJ">
<img src="Triger-Jajuar-landrover. snapshot.JPG"/>
</a>
<div class="lightbox-target" id="LRJ">
<img src="Triger-Jajuar-landrover. snapshot.JPG"/>
<p class="aboutjobs">Technical production & best boy. Gripvan for Trigger shoots. Stills for Land Rover-Jaguar</p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="twelve">
<a class="lightbox" href="#S">
<img src="spotify-still.PNG"/>
</a>
<div class="lightbox-target" id="S">
<img src="spotify-still.PNG"/>
<p class="aboutjobs">Technical production. Gripvan for Who Wot Why & Tom Van Schelven. Moving Image and stills for Spotify. Watch it <a class="VLTW" href="https://www.youtube.com/embed/ZoH3mEzmwXQ"><strong>here</strong></a></p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="thirteen">
<a class="lightbox" href="#K">
<img src="keane-still.PNG"/>
</a>
<div class="lightbox-target" id="K">
<img src="keane-still.PNG"/>
<p class="aboutjobs">Technical production. Gripvan for Keane. Moving image for Kode Media. Watch it <a class="VLTW" href="https://www.youtube.com/embed/RmE-Cr72qH0"><strong>here</strong></a></p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="fourteen">
<a class="lightbox" href="#MepeS">
<img src="Mercedes-Petronas-still.PNG"/>
</a>
<div class="lightbox-target" id="MepeS">
<img src="Mercedes-Petronas-still.PNG"/>
<p class="aboutjobs">Technical production & Spark. Gripvan for Locate productions. Moving image for Mercedes-Petronas Shangai. Watch it <a class="VLTW" href="https://www.youtube.com/embed/aTbojli1Qe4"><strong>here</strong></a></p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<div class="fifteen">
<a class="lightbox" href="#AMSF">
<img src="Audi main build-still.PNG"/>
</a>
<div class="lightbox-target" id="AMSF">
<img src="Audi main build-still.PNG"/>
<p class="aboutjobs">Technical production & best boy. Gripvan for Black sheep studios. Moving image for Audi. Watch it <a class="VLTW" href="https://vimeo.com/272596196"><strong>here</strong></a></p>
<a class="lightbox-close" href="#"></a>
</div>
</div>
<hr>
<div class="contact">
<p>
<a class="email" href="mailto:pedroagustinlecumberri@gmail.com">Email</a>
<a class="phone" href="tel:+0034 619 967 652">phone</a>
</p>
</div>
</div>
</body>
</html>