Witam mam kilka pytań co do wykonanej przezemnie strony z Facebook-owej strony Weekly Dev Challenge.
Link : https://alcomats.github.io/Challange/
Kod : https://github.com/Alcomats/Challange
Pytanie nr 1 : dotyczy slidera ( który nie działa, ponieważ nie umiem jeszcze pisać w języku JS ). Czy te " doty" robi się w taki sposób jak ja zapisałem poprzez atrybut <a> ?
<div class="points">
<a href="#" class="first-switch-point"><span class="ion-ios-circle-filled" aria-hidden="true"></span></a>
<a href="#" class="switch-point"><span class="ion-ios-circle-filled" aria-hidden="true"></span></a>
<a href="#" class="switch-point"><span class="ion-ios-circle-filled" aria-hidden="true"></span></a>
</div>
Pytanie nr: 2 - dotyczy sekcji poniżej - "video-section" - chodzi mi o cornery, czy prawidłowo je stworzyłem poprzez dodanie pustych divów w HTML , a w CSS je ostylowałem oraz wypozycjonowałem.
<a href="#" class="square-cotaniner">
<span class="ion-ios-arrow-right play-icon" aria-hidden="true"></span>
<span class="corner-top-left"></span>
<span class="corner-top-right"></span>
<span class="corner-bottom-left"></span>
<span class="corner-bottom-right"></span>
<p class="play-paragraph">Watch my Video</p>
</a>
Pytanie nr 3: dotyczy hovera w social-ikonach, czy stworzyłem go poprawnie? Jak dawałem zwykły padding to bordery były w różnych kształtach i nie były okrągami:
.social-link:link,
.social-link:visited {
text-decoration: none;
color: #848282;
font-size: 25px;
height: 50px;
width: 50px;
line-height: 50px;
background-color: transparent;
border-radius: 50%;
}
.social-link:hover,
.social-link:active {
background-color: #e6b5b5;
color:#fff;
}
I jeszcze podpinam jedno pytanie jak uzyskać ten efekt ( zdjęcie poniżej) żeby po najechaniu na ikone nie pojawił się tylko włąsnie okrąg ale jeszcze ten border w okół okręgu :
Dziękuje za wszelką pomoc!