-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshinzo.js
73 lines (67 loc) · 3.88 KB
/
shinzo.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//header
const headerDiv = document.createElement('div')
headerDiv.classList.add('headerdiv')
document.querySelector('header').appendChild(headerDiv)
const title = document.createElement('h1');
title.classList.add('title')
headerDiv.appendChild(title);
title.textContent = 'The Outsiders';
const secondTitle = document.createElement('h2');
title.appendChild(secondTitle);
secondTitle.classList.add('outsiders-subtitle');
secondTitle.innerHTML = 'Ebixia\'s most wanted <span>heroes</span>.';
const nav = document.createElement('nav');
headerDiv.appendChild(nav);
const navLink1 = document.createElement('a');
const navLink2 = document.createElement('a');
const navLink3 = document.createElement('a');
const navLink4 = document.createElement('a');
//nav1
document.querySelector('nav').appendChild(navLink1);
navLink1.innerHTML = 'HOME';
navLink1.classList.add('navlinks');
navLink1.href= 'index.html'
//nav2
document.querySelector('nav').appendChild(navLink2);
navLink2.innerHTML = 'HERE';
navLink2.classList.add('navlinks');
//nav3
document.querySelector('nav').appendChild(navLink3);
navLink3.textContent = 'THERE ';
navLink3.classList.add('navlinks');
//nav4
document.querySelector('nav').appendChild(navLink4);
navLink4.textContent = 'EVERYWHERE';
navLink4.classList.add('navlinks');
//main div
const divForSymbolImg = document.createElement('div');
divForSymbolImg.classList.add('symboldiv')
document.querySelector('.mainbody').appendChild(divForSymbolImg)
const outsidersImgDiv = document.createElement('div');
outsidersImgDiv.classList.add('outsidersimgdiv');
divForSymbolImg.appendChild(outsidersImgDiv)
const outsidersImg = document.createElement('img');
outsidersImg.classList.add('outsidersimg');
outsidersImg.src = 'https://i.postimg.cc/ncC34Yx4/New-Pgfdgroject-1.png';
outsidersImgDiv.appendChild(outsidersImg);
const hoverImgDiv = document.createElement('div');
hoverImgDiv.classList.add('hoverimgdiv');
divForSymbolImg.appendChild(hoverImgDiv);
const hoverImg = document.createElement('img');
hoverImg.classList.add('hoverimg', 'fadein');
hoverImgDiv.appendChild(hoverImg)
hoverImg.src = 'https://i.postimg.cc/Kc3KD15L/New-325245-1.png'
const headingOne = document.createElement('h3');
document.querySelector('.mainbody').appendChild(headingOne);
headingOne.textContent = 'Shinzo Katetsu';
const headingTwo = document.createElement('h4');
headingTwo.classList.add('headingtwo')
document.querySelector('.mainbody').appendChild(headingTwo);
headingTwo.innerHTML = 'hey gozerh, <span class="headingspan">it\'s me... again.</span>';
const bodyTextDiv = document.createElement('div');
document.querySelector('.mainbody').appendChild(bodyTextDiv);
bodyTextDiv.classList.add('bodyTextDiv');
const bodyText = document.createElement('p');
bodyText.classList.add('bodytext');
bodyTextDiv.appendChild(bodyText);
bodyText.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum. Dui accumsan sit amet nulla facilisi morbi tempus iaculis. Adipiscing at in tellus integer. Purus sit amet luctus venenatis. Malesuada bibendum arcu vitae elementum curabitur vitae. Nunc mattis enim ut tellus elementum sagittis. Vulputate mi sit amet mauris commodo quis. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Nisi quis eleifend quam adipiscing vitae proin sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aenean pharetra magna ac placerat vestibulum. Dui accumsan sit amet nulla facilisi morbi tempus iaculis. Adipiscing at in tellus integer. Purus sit amet luctus venenatis. Malesuada bibendum arcu vitae elementum curabitur vitae. Nunc mattis enim ut tellus elementum sagittis. Vulputate mi sit amet mauris commodo quis. Ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Nisi quis eleifend quam adipiscing vitae proin sagittis.';