-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathalexdrake.js
100 lines (93 loc) · 5.7 KB
/
alexdrake.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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
//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/ZqWJ5VzB/New-Pgfdgroject-1-2.png'
const headingOne = document.createElement('h3');
document.querySelector('.mainbody').appendChild(headingOne);
headingOne.textContent = 'Inside The Mind Of'
const headingTwo = document.createElement('h4');
document.querySelector('.mainbody').appendChild(headingTwo);
headingTwo.innerHTML = 'Alex <span class="redacted">bigbody</span> Drake?'
headingTwo.setAttribute('class', 'redacted');
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.';
const headingThree = document.createElement('h5');
document.querySelector('.mainbody').appendChild(headingThree);
headingThree.textContent = 'The Leader Himself';
const headingFour = document.createElement('h6');
document.querySelector('.mainbody').appendChild(headingFour);
headingFour.textContent = 'something something?';
const bodyText2Div = document.createElement('div');
bodyText2Div.classList.add('bodytextDiv2');
document.querySelector('.mainbody').appendChild(bodyText2Div);
const bodytext2 = document.createElement('p');
bodytext2.classList.add('bodytext2');
bodyText2Div.appendChild(bodytext2);
bodytext2.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.'
const bigBodyDrakeTitle = document.createElement('h7');
bigBodyDrakeTitle.textContent = 'Broody Boy';
const bigBodyTitleSubtitle = document.createElement('h8');
bigBodyTitleSubtitle.textContent = 'why so serious?';
document.querySelector('.bigbodydiv').appendChild(bigBodyDrakeTitle)
document.querySelector('.bigbodydiv').appendChild(bigBodyTitleSubtitle);
const bigBodyDiv = document.createElement('div');
document.querySelector('.bigbodydiv').appendChild(bigBodyDiv);
bigBodyDiv.classList.add('bigbodytextdiv');
const bigBodyText = document.createElement('p');
bigBodyText.classList.add('bigbodytext');
bigBodyDiv.appendChild(bigBodyText);
bigBodyText.innerHTML = '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.';