Create a index.html webpage that has your name in a tag at the top, followe

Create a index.html webpage that has your name in a <h1> tag at the top, followe

ID: 3904074 • Letter: C

Question

Create a index.html webpage that has your name in a <h1> tag at the top, followed by your picture right below it, followed by a line of text that a tells what something is that is a favorite of your, like "My Favorite food is Lasagna". Then after that show an image of your favorite thing. And when the user clicks on the "Next Favorite" button change the line and image to identify a new favorite of yours, and keep your name and picure on that new page. You must complete this assignment by creating only one .html file

Explanation / Answer

index.html

<html>

<head>

<h1>MyName</h1>

<title>slide</title>

</head>

<bosy>

</div>

</div>

</body>

</html>

style.css

.slider-holder{

width:750px;

height:350px;

background-color:yellow;

margin-left:auto;

margin-right:auto;

margin-top:0px;

text-align:center;

overflow:hidden;

}

.slider-holder
{
width: 100px;
height: 100px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}

.image-holder
{
width: 2000px;
background-color: red;
height: 300px;
clear: both;
position: relative;

-webkit-transition: left 2s;
-moz-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
}

.slider-image
{
float: left;
margin: 0px;
padding: 0px;
position: relative;
}

#slider-image-1:target ~ .image-holder
{
left: 0px;
}

#slider-image-2:target ~ .image-holder
{
left: -700px;
}

#slider-image-3:target ~ .image-holder
{
left: -1500px;
}

.button-holder
{
position: relative;
top: -15px;
}

.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 5px;
background-color: brown;
}

UPDATE USING JAVA SCRIPT

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>name</title>
</head>
<body>
<h1>Name</h1>
<img id='img' src="1.jpg" alt="">
<p id='change'> I am a boy</p>
<button id="Btn">Next Favorite Item</button>
<script type="text/javascript">
var x =1;
const render = [
{
source : '1.jpg',
text : 'I am boy'
},
{
source : '2.jpg',
text : 'I sometimes like these sometimes not'
},
{
source: '3.jpg',
text : 'This definitely is not my favorite animal'
}
]
document.getElementById("Btn").addEventListener("click", doit);
function doit() {
if(x==3){
x = 0;
}
document.getElementById("img").src = render[x].source;
document.getElementById("change").innerHTML = render[x].text;
x++;
}
</script>
</body>
</html>

and in conclusion i m done with your mini project or assingment without using js or any other except html and css you can give a try it 'll perfectly work if any doubts dont hesitate to ask in comments section

thankyou:)

Navigate

Create a income statement for the journals above Date Accounts Debit Credit 2-Ja

Create a java GUI hangman game. Your solutions will have as a minimum the follow

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Create a index.html webpage that has your name in a <h1> tag at the top, followe

Question

Explanation / Answer

Related Questions

Navigate