Всем здравствуйте! Недавно начал изучать основу вёрстки. Верстал по макету и столкнулся с двумя проблемами.
На скриншоте видно, что подчёркивание точками обозначено шире надписи "Смотреть работу". Как можно выровнить подчёркивание, чтоб оно шло ровно по ширине текста?
Проблема с модальными окнами. При нажатии на ссылку "Смотреть работу" должно выходить модальное окно с изображением и описанием.
Но у меня выходит только окно с одной надписью "Описание проекта" больше ничего.
P.S: В самом видео, по которому делал вёрстку, данных проблем не возникало, всё работало чётко и плавно. Также автор данного видео оставил ссылку для загрузки файла с данной вёрсткой, который сверстал на видео. И там также присутствуют эти же проблемы, хотя на видео, как я уже оговаривал, всё хорошо работает. В чём может быть проблема?
body {
font-family: 'Open Sans', sans-serif;
}
html {
font-size: 10px;
}
a:active, a:visited, a:focus {
text-decoration: none;
outline: none;
}
.wrapper {
display: table-cell;
vertical-align: middle;
}
.main {
position: relative;
display:table;
width: 100%;
text-align: center;
color: #fff;
height: 100vh;
background: #000 url(../img/main-bg.jpg) center center no-repeat;
}
.main-overlay {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.main h1 {
margin-bottom: 1.4rem;
font-weight: 300;
text-transform: uppercase;
font-size: 4.8rem;
}
.main p {
font-size: 3rem;
font-weight: 300;
}
.main-header {
position: relative;
z-index: 2;
}
.main-line {
width: 200px;
height: 1px;
background-color: #fff;
margin: 0 auto;
}
.main-down {
position: absolute;
color: #fff;
z-index: 4;
bottom: 2rem;
display: inline-block;
font-size: 2rem;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid transparent;
line-height: 50px;
left: 50%;
margin-left: -25px;
transition: 0.2s;
}
.main-down:hover {
color: #fff;
border-color: #fff;
}
/* Секция с портфолио */
.portfolio {
padding: 10rem 0px;
text-align: center;
}
.section-header {
text-transform: uppercase;
font-weight: 800;
font-size: 3.6rem;
margin-bottom: 5rem;
}
.portfolio img {
width: 100%;
max-width: 360px;
box-shadow: 0px 4px 29px 0px rgba(87, 92, 97, 0.54);
}
.portfolio a {
display: block;
margin: 2rem auto 6rem;
color: #333;
width: 17rem;
border-bottom: 1px solid transparent;
}
.portfolio a:hover {
text-decoration: none;
border-bottom: 1px dotted #333;
}
/* Секция - подвал (footer) */
.footer {
background-color: #646464;
color: #fff;
text-align: center;
padding: 3rem 0;
}
.footer strong {
font-weight: 300;
font-size: 2.4rem;
}
.social-links {
margin-top: 1rem;
}
.social-links a {
width: 5rem;
height: 5rem;
line-height: 5rem;
display: inline-block;
color: #fff;
border: solid 1px #fff;
border-radius: 50%;
margin-left: 1rem;
margin-right: 1rem;
font-size: 2rem;
transition: 0.2s;
}
.social-links a:hover {
background-color: #fff;
color: #646464;
}
.offer-btn {
display: block;
width: 80%;
max-width: 200px;
margin: 1rem auto;
border: 1px solid #fff;
padding-top: 1rem;
padding-bottom: 1rem;
color: #fff;
border-radius: 100px;
transition: 0.2s;
}
.offer-btn:hover {
text-decoration: none;
background-color: #fff;
color: #646464;
}
.modal img {
width: 100%;
}
.modal-title {
font-weight: 800;
font-size: 2rem;
}
.close {
background-color: transparent;
border: none;
font-size: 2.5rem;
position: absolute;
right: 2rem;
top: 1rem;
}
.modal-btn {
display: inline-block;
color: #333;
border: 1px solid #333;
padding: 10px 20px;
border-radius: 5px;
}
.modal-btn:hover {
background-color: #333;
color: #fff;
text-decoration: none;
}
Портфолио
Ответ
Всё потому что в видео в котором ты смотришь, он использует функцию load в JQuery котором загрузка контента модального окна идет с отдельного .html файла.
А он работает только если запущен сервер, и локально он работать не будет. Запусти какой нибудь локальный сервер и всё заработает.
А насчет ссылок, сделай ссылку строчно-блочной, и обводка будет точно по размеру самого текста.
Комментариев нет:
Отправить комментарий