1
Next, I have the site practically ready, just need my banners have a way to access the html that I made. Problem that the buttons I added are following the configuration of js, but do not work click, I know I need to enable this on js, but I have no idea how.
Just to warn, js is not my strong and part of the code (good part) I copied from a model of slideshow, so I just need some help to enable this.
JS Code:
var slideIndex,slides,dots,captionText;
function initGallery(){
slideIndex = 0;
slides=document.getElementsByClassName("imageHolder");
slides[slideIndex].style.opacity=1;
captionText=document.querySelector(".captionTextHolder .captionText");
captionText.innerText=slides[slideIndex].querySelector(".captionText").innerText;
//disable nextPrevBtn if slide count is one
if(slides.length<2){
var nextPrevBtns=document.querySelector(".leftArrow,.rightArrow");
nextPrevBtns.style.display="none";
for (i = 0; i < nextPrevBtn.length; i++) {
nextPrevBtn[i].style.display="none";
}
}
//add dots
dots=[];
var dotsContainer=document.getElementById("dotsContainer"),i;
for (i = 0; i < slides.length; i++) {
var dot=document.createElement("span");
dot.classList.add("dots");
dotsContainer.append(dot);
dot.setAttribute("onclick","moveSlide("+i+")");
dots.push(dot);
}
dots[slideIndex].classList.add("active");
}
initGallery();
function plusSlides(n) {
moveSlide(slideIndex+n);
}
function moveSlide(n){
var i;
var current,next;
var moveSlideAnimClass={
forCurrent:"",
forNext:""
};
var slideTextAnimClass;
if(n>slideIndex) {
if(n >= slides.length){n=0;}
moveSlideAnimClass.forCurrent="moveLeftCurrentSlide";
moveSlideAnimClass.forNext="moveLeftNextSlide";
slideTextAnimClass="slideTextFromTop";
}else if(n<slideIndex){
if(n<0){n=slides.length-1;}
moveSlideAnimClass.forCurrent="moveRightCurrentSlide";
moveSlideAnimClass.forNext="moveRightPrevSlide";
slideTextAnimClass="slideTextFromBottom";
}
if(n!=slideIndex){
next = slides[n];
current=slides[slideIndex];
for (i = 0; i < slides.length; i++) {
slides[i].className = "imageHolder";
slides[i].style.opacity=0;
dots[i].classList.remove("active");
}
current.classList.add(moveSlideAnimClass.forCurrent);
next.classList.add(moveSlideAnimClass.forNext);
dots[n].classList.add("active");
slideIndex=n;
captionText.style.display="none";
captionText.className="captionText "+slideTextAnimClass;
captionText.innerText=slides[n].querySelector(".captionText").innerText;
captionText.style.display="block";
}
}
var timer=null;
function setTimer(){
timer=setInterval(function () {
plusSlides(1) ;
},3000);
}
setTimer();
function playPauseSlides() {
var playPauseBtn=document.getElementById("playPause");
if
(timer==null){
setTimer();
}else{
clearInterval(timer);
timer=null;
}
}
HTML code where it is linked:
<div class="galleryContainer" id="playPause" onmouseover="playPauseSlides()" onmouseout="playPauseSlides()">
<div class="slideShowContainer">
<div onclick="plusSlides(-1)" class="nextPrevBtn leftArrow"><span class="arrow arrowLeft"></span></div>
<div onclick="plusSlides(1)" class="nextPrevBtn rightArrow"><span class="arrow arrowRight"></span></div>
<div class="captionTextHolder"><p class="captionText slideTextFromTop"></p></div>
<div class="imageHolder">
<img src="_media/rcp.jpg">
<p class="captionText"><strong>ONE</strong>
descrição aqui</p>
<p class="btn"><a href="#">Link</a></p>
</div>
<div class="imageHolder">
<img src="_media/cirurgia.jpg">
<p class="captionText"><strong>DUO</strong>
descrição aqui</p>
<p class="btn"><a href="#">Link</a></p>
</div>
<div class="imageHolder">
<img src="_media/segurorenda.jpg">
<p class="captionText"><strong>TRE</strong>
descrição aqui</p>
<p class="btn"><a href="#">Link</a></p>
</div>
<div class="imageHolder">
<img src="_media/viagem.jpg">
<p class="captionText"><strong>FOR</strong>
descrição aqui</p>
<p class="btn"><a href="#">Link</a></p>
</div>
</div>
<div id="dotsContainer"></div>
<script src="_js/myScript.js"></script>
</div>
CSS: ~ @keyframes shake { 0% { Transform: Translate(1px, 1px) Rotate(0deg); } 10% { Transform: Translate(-1px, -2px) Rotate(-1deg); } 20% { Transform: Translate(-3px, 0px) Rotate(1deg); } 30% { Transform: Translate(3px, 2px) Rotate(0deg); } 40% { Transform: Translate(1px, -1px) Rotate(1deg); } 50% { Transform: Translate(-1px, 2px) Rotate(-1deg); } 60% { Transform: Translate(-3px, 1px) Rotate(0deg); } 70% { Transform: Translate(3px, 1px) Rotate(-1deg); } 80% { Transform: Translate(-1px, -1px) Rotate(1deg); } 90% { Transform: Translate(1px, 2px) Rotate(0deg); } 100% { Transform: Translate(1px, -2px) Rotate(-1deg); } }
@font-face { font-family: 'Titillium Web', sans-Serif; src: url(https://fonts.google.com/? query=titi&selection. family=Titillium+Web); }
body { margin: 0; padding: 0; border: 0px Solid Transparent; background-color: #f7f7f7; font-family: Titillium Web; width: 100%; min-height: 100%; }
/* until here, menu Settings, all right here */
/* ---------------------------- / .navbar { position: Fixed; top: 0px; left: 0px; right: 0px; z-index: 3; } / this will fix top the menu, and Keep it all lengt of page */
.menu{ background-color: darkred; min-height: 100px; width: 100%; /ľ down here will center the menu (or Another content) */ line-height: normal; or text-align: center text-align vertical-align: Middle;
-webkit-box-shadow: 0 4px 3px 0 rgba(0,0,0,0.3);
-Moz-box-shadow: 0 4px 3px 0 rgba(0,0,0,0.3);
-o-box-shadow: 0 4px 3px 0 rgba(0,0,0,0.3);
box-shadow: 0 4px 3px 0 rgba(0,0,0,0.3);
}
.menu ul{ left: 500px; margin: 0 0 0 250px; line-height: 45px; padding: 0; list-style: None; text-align: center; }
.menu ul li { display: inline-block; position: relative; }
.menu ul li a{ color: #f7f7f7; display: block; text-Decoration: None; padding: 40px 20px; margin: 0px -2px;
/* down is Compatibility Transition */ -Webkit-Transition: color . 15s;
-Moz-Transition: color . 15s;
-o-transition: color .15s;
transition: color .15s;
-webkit-transition: background-color 0.3s;
-Moz-Transition: background-color 0.3s;
-o-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.ul li a:Hover {menu background-color: #AD0000; color: #f7f7f7; }
/* -------------------------------------------------- */ .menu ul li ul { position: Absolute; visibility: Hidden; opacity: 0; background-color: #f7f7f7; color: white; top: 115px; left: 50 %; margin-left: -90px; width: 180px; border-Radius: 8px; box-shadow: 0 5px 5px 0 rgba(0, 0, 0.5);
-webkit-transition: all .1s .1s;
-Moz-Transition: all . 1s . 1s;
-o-transition: all .1s .1s;
transition: all .1s .1s;
}
.ul li:Hover ul {menu visibility: Visible; top: 140px; opacity: 1; }
/* until here is the dropdown Settings */
/* here is the Settings for the Triangle over the dropdown */ .menu ul li ul:before { content: '''; display: block; border-color: darkred; border-style: The Lid; border-width: 10px; border-color: Transparent Transparent darkred Transparent; position: Absolute; top: -20px; left: 80px; }
.menu ul li ul li { position: relative; }
.ul li:Hover ul li a { background-color: #f7f7f7; color: #707070; }
.ul li menu:Hover ul li a:Hover { color: darkred; }
.ul li ul li a { padding: 15px 10px; text-align: center; }
.logo-color { position: Absolute; left: 220px; max-width: 200px; top: 32px; }
/banner/
.galleryContainer{ width: 100%; height: 750px; margin-top: 100px; user-select: None; box-Sizing: border-box; } .galleryContainer . slideShowContainer{ width: 100%; height: 90%; overflow: Hidden; background-color: General color; position: relative; }
.galleryContainer . slideShowContainer . imageHolder{ width: 100%; height: 100%; position: Absolute; opacity: 0; } .galleryContainer . slideShowContainer . imageHolder img{ width: 100%; height: 100%; } .galleryContainer . slideShowContainer . imageHolder . captionText{ display: None; }
.galleryContainer . slideShowContainer . leftArrow,. galleryContainer . slideShowContainer . rightarrow{ width: 50px; height: 50px; background: #00000036; position: Absolute; left: 40px; z-index: 2; and Transition: background 0.5s; top: 50%; Transform: translateY(-50%); border-Radius: 50%; } .galleryContainer . slideShowContainer . rightarrow{ left: auto; right: 40px; } .galleryContainer . slideShowContainer . leftArrow:Hover,. galleryContainer . slideShowContainer . rightarrow:Hover{ background: #000000a8; cursor: Pointer; } .galleryContainer . Arrow{ display: inline-block; border: 3px Solid white; width: 10px; height: 10px; border-left: None; border-bottom: None; margin: auto; position: Absolute; left: 0; right: 0; top: 0; bottom: 0; } .galleryContainer .arrow.arrowLeft{ Transform: rotateZ(-135deg); left: 5px; } .galleryContainer .arrow.arrowRight{ Transform: rotateZ(45deg); left: -5px; }
.galleryContainer . slideShowContainer>. captionTextHolder{ position: Absolute; z-index: 1; color: white; font-size: 40px; font text-align: center text-align width: 1000px; height: 750px; top: 50%; left: 50 %; font-Weight: Bold; text-shadow: 3px 3px 2px #00000060; Transform: Translate(-50%); margin-top: -50px; background: Transfer of data; overflow: Hidden; }
.galleryContainer . slideShowContainer>. captionTextHolder>. captionText{ margin: 0; }
.galleryContainer #dotsContainer{ position: Absolute; width: 100%; height: 10%; text-align: center text-align margin-top: -60px; z-index: 2; and box-Sizing: border-box;
} .galleryContainer #dotsContainer . Dots{ display: inline-block; width: 15px; height: 15px; border-Radius: 50%; margin-left: 5px; background-color: #bbb; cursor: Pointer; Transition:background-color 0.5s; } .galleryContainer #dotsContainer . Dots:first-Child{ margin-left: 0; } .galleryContainer #dotsContainer . Dots:Hover,. galleryContainer #dotsContainer .dots.active{ background-color: #717171;; }
.galleryContainer . moveLeftCurrentSlide{ Animation-name: moveLeftCurrent; Animation-Duration: 0.5s; Animation-timing-Function: linear; Animation-Fill-mode:forwards;
} .galleryContainer . moveLeftNextSlide{ Animation-name: moveLeftNext; Animation-Duration: 0.5s; Animation-timing-Function: linear; Animation-Fill-mode:forwards; } @keyframes moveLeftCurrent { from {margin-left: 0;opacity: 1;} to {margin-left: -100%;opacity: 1;} } @keyframes moveLeftNext { from {margin-left: 100%;opacity: 1;} to {margin-left: 0%;opacity: 1;} }
.galleryContainer . moveRightCurrentSlide{ Animation-name: moveRightCurrent; Animation-Duration: 0.5s; Animation-timing-Function: linear; Animation-Fill-mode:forwards; } .galleryContainer . moveRightPrevSlide{ Animation-name: moveRightPrev; Animation-Duration: 0.5s; Animation-timing-Function: linear; Animation-Fill-mode:forwards; } @keyframes moveRightCurrent { from {margin-left: 0;opacity: 1;} to {margin-left: 100%;opacity: 1;} } @keyframes moveRightPrev { from {margin-left: -100%;opacity: 1;} to {margin-left: 0%;opacity: 1;} } .slideTextFromBottom { Animation-name: slideTextFromBottom; Animation-Duration: 0.7s; Animation-timing-Function: Ease-out; } @keyframes slideTextFromBottom { from {opacity: 0;margin-top: 100px} to {opacity: 1;margin-top: 0px;} } .slideTextFromTop { Animation-name: slideTextFromTop; Animation-Duration: 0.7s; Animation-timing-Function: Ease-out; } @keyframes slideTextFromTop { from {opacity: 0;margin-top: -100px} to {opacity: 1;margin-top: 0px;} }
/* --- end of banners */
.separator { border-right: 3px Solid darkred; position: Absolute; left: 50 %; border-left: -33%; height: 120px; top: 815px; }
.prop { width: 100%; margin: 0; margin-top: -60px; box-Sizing: border-box; position: relative; }
.prop H1{ position: Absolute; width: 100% left: 50 %; right: 50%; margin-left: 250px; padding: 20px; float: left; top: 40px; font-size: 20 pt; line-height: 25pt; text-align: right; color: #707070; }
.prop H2 { position: Absolute; width: 100% left: 50 %; right: 50%; margin-left: 100px; padding: 20px; top: -13px; float: left; text-align: right; color: darkred; }
.prop p { position: Absolute; width: 30%; left: 50 %; border-left: -33%; right: 10%; border-right: 10px; or padding: 20px; float: right; text-align: text-align top: -8px; color: #707070; line-height: 23px; }
.container { box-Sizing: border-box; display: grid; grid-template-Columns: auto auto auto auto; padding: 10px; margin-top: 250px; width: 1400px; left: 50 %; Transform: translateX(-50%); position: relative; grid-column-gap: 50px; }
.container { padding: 5px 20px; text-align: center; }
.containeritem img { width: 150px; Transition: all 0.2s Ease-in-out; }
.containeritem img:Hover { Transform: Scale(1.2); }
.mdrt { max-width: 100%; position: relative; margin: 0; right: 0; background: #f4f4f4; font-size: 24px; }
.imagehands { background: url(../_media/Handshake.jpg) no-repeat center; background-Attachment: Fixed; background-size: cover: background-size; height: 600px; margin-top: 100px; width: 100%; z-index: 1; }
mdrtmember {
position: absolute;
top: 1500px;
left: 800px;
width: 700px;
z-index: 1;
}
.mdrt H2 { position: Absolute; top: 30%; left: 200px; font-size: 24pt; font color: white; }
.mdrt p { position: Absolute; width: 600px; top: 40%; left: 200px; color: white; }
.too { position: relative; margin-right: 3%; left: 30px; margin-bottom: 200px; display: grid; grid-template-Columns: auto auto auto auto auto auto; grid-template-Rows: auto auto auto auto auto auto auto; top: 150px; grid-Row-gap: 12px; }
.too H1 { position: Absolute; left: 38 %; font-size: 20 pt; font-Weight: Bold; color: darkred; top: -110px; }
.too much img {
width: 200px;
background-color: white background color;
padding: 20px;
}
.other img:Hover { Animation: shake 0.3s; Animation-iteration-Count: 10s; }
.footer { position: relative; bottom: 0; box-Sizing: border-box; background-color: #202020; height: 300px; margin-top: -20px; }
.footeritem { position: Absolute; float: left; color: white; padding: 10px; line-height: 30px; left: 5 %; top: 20px; }
.footeritem p { color: #808080; }
.footeritem2 { position: Absolute; float: left; color: white; padding: 10px; line-height: 30px; left: 56 %; top: 20px; }
.footeritem2 p { color: #808080; }
/*
THE COMPANY
*/
.company { width: 100%; background-color: darkred; height: 100px; top: -6px; vertical-align: the Middle; position: relative; z-index: 1; }
.company H3 { left: 60px; position: Absolute; color: white; top: 18px; }
.company p { left: 1300px; position: Absolute; color: white; top: 28px; font-size: 10en; }
.company p a{ text-Decoration: None; color: white; }
.text company { left: 60px; max-width: 1450px; position: relative; border-bottom: 40px Solid Transparent; }
.text enterprise H1 { font-size: 14 pt; color: darkred; }
.text enterprise p{ font-size: 12pt; font color: #707070; text-align: ; }
/*
team
*/
.team { position: relative; margin-right: 2%; left: 30px; margin-bottom: 200px; display: grid; grid-template-Columns: auto auto auto ; grid-template-Rows: auto auto auto ; top: 50px; grid-Row-gap: 45px; }
.img team { width: 300px; background-color: white background color; padding: 20px; }
/*
e-shop
*/
.shop { position: relative; max-width: 100%; height: 800px; }
.shop H1 { font-size: 20 pt; text-align: center text-align position: Absolute; top: 10px; color: darkred; left: 50 %; Transform: Translate(-50%, 0); }
.shop H2 { font-size: 15 pt; text-align: center text-align position: Absolute; top: 600px; color: #707070; left: 50 %; Transform: Translate(-50%, 0); }
.Pulse { position: Absolute; display: block; background-color: darkred; padding: 5px 50px; border-Radius: 8px; box-shadow: 0 0 rgba(204,169,44, 0.4); left: 50 %; top: 690px; Transform: Translate(-50%, -50%); Animation: Pulse 2s Infinite; }
.Pulse a { text-Decoration: None; font-size: 25pt; font text-align: center text-align color: white; }
.img shop { position: Absolute; width: 300px; top: 100px; left: 50 %; Transform: Translate(-50%, 0); }
.Ulse:Hover { Animation: None; background-color: #ad0000; }
@-Webkit-keyframes Pulse { 0% { -Webkit-box-shadow: 0 0 0 0 rgba(128, 0, 0, 0.4); } 70% { -Webkit-box-shadow: 0 0 0 20px rgba(128, 0, 0, 0); } 100% { -Webkit-box-shadow: 0 0 0 0 rgba(128, 0, 0, 0); } } @keyframes Pulse { 0% { -Moz-box-shadow: 0 0 0 rgba(128, 0, 0, 0.4); box-shadow: 0 0 0 rgba(128, 0, 0, 0.4); } 70% { -Moz-box-shadow: 0 0 0 20px rgba(128, 0, 0, 0); box-shadow: 0 0 0 20px rgba(128, 0, 0, 0); } 100% { -Moz-box-shadow: 0 0 0 rgba(128, 0, 0, 0); box-shadow: 0 0 0 rgba(128, 0, 0, 0); } }
/* products */
.products { position: relative; width: 1400px; height: auto; left: 50 %; top: 30px; border-bottom: 30px; Transform: Translate(-50%); display: grid; padding-bottom: 50px; grid-template-Columns: auto auto auto; grid-template-Rows: auto auto auto; grid-Row-gap: 25px;
}
.prod{ position: relative; padding: 20px 20px 30px 20px; width: 400px; height: 400px; background: #fff; -Moz-box-shadow: 0 2px 2px 0 rgba(0, 0, 0.1); box-shadow: 0 2px 2px 0 rgba(0, 0, 0.1); }
.proditem p { padding: 20px; text-align: center; }
.proditemimg { position: relative; border: 0px Solid Transparent; overflow: Hidden; width: 390px; height: 300px; margin: 0px 5px; top: 4px; -Moz-box-Sizing: border-box; -Webkit-box-Sizing: border-box; box-Sizing: border-box; }
.proditemimg img{ vertical-align: top line width: 390px; height: 300px; Transition: 0.4s Ease; }
.proditemimg:Hover img{ Transform: Scale(1.3) Rotate(10deg); }
.prodlink { position: relative; width: 390px; height: 30px; top: -155px; margin: 0 5px; display: block; background: darkred; text-align: center text-align Transition: all 0.5s Ease; }
.prodlink a { text-Decoration: None; color: white; text-Transform: uppercase; vertical-align: Middle; }
.prodlink:Hover { background-color: #ad0000; }
.prodlink:Hover . prodlink a { font-Weight: Bold; }
/* awards */
.award { position: relative; width: 100%; height: 400px; padding-bottom: 30px; padding-top: 30px; margin: 50px 0; background: white; box-shadow: 2px 2px 2px rgba(0,0,0,0.05); }
.award H1 { position: relative; top: -10px; color: darkred; text-align: right; right: 50px; }
.award H2 { position: relative; top: -30px; color: #707070; text-align: right; right: 50px; font-style: Italic; }
.Divider { position: relative; width: 500px; margin-left: auto; margin-right: 50px; and top: -40px; border-bottom: 3px Solid darkred; }
.award p { position: relative; text-align: right; width: 1000px; top: 0px; right: 50px; Direction: rtl; float: right; }
.premimg img { height: 400px; top: -10px; position: Absolute; padding: 20px; }
/* contact */
.btn { position: Absolute; display: block; background-color: darkred; padding: 5px 50px; border-Radius: 8px; left: 50 %; top: 500px; Transform: Translate(-50%, -50%); Animation: Pulse 2s Infinite; }
.btn a { text-Decoration: None; font-size: 25pt; font text-align: center text-align color: white; }
.btn:Hover { Animation: None; background-color: #ad0000; }
~ I’d really appreciate it if you could get a naughty little quail!
You want to click on a link and be redirected to another page?
– markim
this, I will make a slideshow with the products of the company, ai so that these links go to each product classified in the slide
– Igor Ortega
Have you tried to link the product page inside href="#".
– markim
yes, I have tried several ways, creating a <p> with <a href>, I tried href in class="imageHolder", I tried to put also direct in the image as I did with the main logo, putting the <img> inside a <a>, I saw some people saying in the gringa that it needs to be done by js, but did not say how and suggested jQuery, but do not want to mix JS with jQuery.
– Igor Ortega
You can summarize your code in: <a class="btn" href="product.html">Link to product page</a>
– markim
I tried but it didn’t work, just add the button and nothing clickable
– Igor Ortega
This link can help you understand why it’s not legal to use the <a> tag inside a button: https://stackoverflow.com/questions/16280684/nesting-a-inside-button-doesnt-work-in-firefox
– markim
Enter your css code in the question to get better so I can help you.
– markim
I switched the <button> for a <p>, it was better even on the site, I just thought it would work better in this part with the <button> but I was wrong.
– Igor Ortega
all the CSS or just the part where I created the part to link with the button?
– Igor Ortega
DO NOT place <a> inside a <button>. https://stackoverflow.com/questions/6393827/can-i-nest-a-button-element-inside--a-using-html5/6393863 You can do this too: <p class="btn"> <a href="#">Link</a> </p>
– markim
The entire css file
– markim
was like I had done previously in another part of html, now I returned to this formatting, I will update the code...
– Igor Ortega
I just need to be able to put the code here the right way, but it seems I haven’t got the hang of it yet kk
– Igor Ortega