У меня проблема с сеткой моего учебного проекта. Помоги мне, пожалуйста. Я сделал часть веб-сайта, но когда я хочу связать изображение и подпись к URL с помощью тегов, весь макет ломается. Вот код без якорей. Как разместить их, чтобы сохранить этот вид сайта?
body{
margin:0px;
display:flex;
flex-direction:column;
}
nav {
position:fixed;
background:rgb(195, 44, 82);
width:100%;
top:0;
left:0;
box-shadow: 0px 2px 2px;
display:flex;
justify-content:flex-end;
}
.nav-list {
list-style-type:none;
display:flex;
margin:0;
}
li:hover{
background:#45567d;
}
li{
padding:1.5rem;
font-family:helvetica;
font-size:1.5rem;
}
a{
text-decoration:none;
color:white;
}
header{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:18px;
width:100%;
color:rgb(195, 44, 82);
background: repeating-linear-gradient(
60deg, #383838, #404040 20%, #383838 60%);
height:100vh;
}
header > h1{
font-style:normal;
color:white;
font-size:50px;
font-family:helvetica;
}
header > h2{
font-weight:200;
font-family:sans-serif;
font-style:italic;
font-size:30px;
}
#projects{
background:#45567d;
display:grid;
grid-template-rows: auto auto auto;
grid-template-columns: 25vw 25vw 25vw;
justify-content:space-around;
padding-right:5vw;
padding-left:5vw;
}
#projects-text{
width:100%;
font-size:2rem;
font-family:helvetica;
color:white;
text-decoration: underline;
padding-top:3rem;
padding-bottom:2rem;
text-align:center;
grid-column-start:1;
grid-column-end:4;
}
img{
width:100%;
height:25vw;
object-fit:cover;
grid-row-start:2;
grid-row-end:3;
}
#projects>p{
background:#303841;
color:white;
grid-row-start:3;
margin-top:0;
padding:1.5rem;
font-size:1.3rem;
font-family:helvetica;
text-align:center;
}
<body>
<nav id="navbar">
<ul class="nav-list">
<li>
<a href="about">About</a>
</li>
<li>
<a href="work">Work</a>
</li>
<li>
<a href="contact">Contact</a>
</li>
</ul>
</nav>
<header id="welcome-section">
<h1 id="hi">Hey I am XXXXX</h1>
<h2>a web developer</h2>
</header>
<section id="projects">
<h1 id="projects-text">These are some of my projects</h1>
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="1" >
<p>Tribute Page</p>
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="2">
<p>Map Data Across the Globe</p>
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="3">
<p>Wikipedia Viewer</p>
</section>
</body>
Буду благодарен за ответы.
@ EDIT Хорошо, вот мой код в ломаной версии. Мне, вероятно, нужно переписать весь код, но мне нужно знать, почему. Почему этот тег нарушает код? Я подумал, что в конце своей работы я могу добавить кое-что незначительное: /.
body{
margin:0px;
display:flex;
flex-direction:column;
}
nav {
position:fixed;
background:rgb(195, 44, 82);
width:100%;
top:0;
left:0;
box-shadow: 0px 2px 2px;
display:flex;
justify-content:flex-end;
}
.nav-list {
list-style-type:none;
display:flex;
margin:0;
}
li:hover{
background:#45567d;
}
li{
padding:1.5rem;
font-family:helvetica;
font-size:1.5rem;
}
a{
text-decoration:none;
color:white;
}
header{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
font-size:18px;
width:100%;
color:rgb(195, 44, 82);
background: repeating-linear-gradient(
60deg, #383838, #404040 20%, #383838 60%);
height:100vh;
}
header > h1{
font-style:normal;
color:white;
font-size:50px;
font-family:helvetica;
}
header > h2{
font-weight:200;
font-family:sans-serif;
font-style:italic;
font-size:30px;
}
.projects{
background:#45567d;
display:grid;
grid-template-rows: auto auto auto;
grid-template-columns: 25vw 25vw 25vw;
justify-content:space-around;
padding-right:5vw;
padding-left:5vw;
}
#projects-text{
width:100%;
font-size:2rem;
font-family:helvetica;
color:white;
text-decoration: underline;
padding-top:3rem;
padding-bottom:2rem;
text-align:center;
grid-column-start:1;
grid-column-end:4;
}
img{
width:100%;
height:25vw;
object-fit:cover;
grid-row-start:2;
grid-row-end:3;
}
#projects>p{
background:#303841;
color:white;
grid-row-start:3;
margin-top:0;
padding: ;
font-size:1.3em;
font-family:helvetica;
text-align:center;
}
<body>
<nav id="navbar">
<ul class="nav-list">
<li>
<a href="about">About</a>
</li>
<li>
<a href="work">Work</a>
</li>
<li>
<a href="contact">Contact</a>
</li>
</ul>
</nav>
<header id="welcome-section">
<h1 id="hi">Hey I am XXXXX</h1>
<h2>a web developer</h2>
</header>
<section class="projects">
<h1>These are some of my projects</h1>
<a
href="https://codepen.io/freeCodeCamp/full/zNqgVx"
target="_blank"><img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/tribute.jpg" alt="1" >
<p>Tribute Page</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/zNqgVx"
target="_blank">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/map.jpg" alt="2">
<p>Map Data Across the Globe</p>
</a>
<a
href="https://codepen.io/freeCodeCamp/full/zNqgVx"
target="_blank">
<img src="https://raw.githubusercontent.com/freeCodeCamp/cdn/master/build/testable-projects-fcc/images/wiki.png" alt="3">
<p>Wikipedia Viewer</p>
</a>
</section>
</body>