-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (82 loc) · 4.13 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Light Dark Mode</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css">
</head>
<body>
<!-- dark mode switch -->
<div class="theme-switch-wrapper">
<span id="toggle-icon">
<span class="toggle-text">Light Mode</span>
<i class="fas fa-sun"></i>
</span>
<label class="theme-switch">
<input type="checkbox">
<div class="slider round"> </div>
</label>
</div>
<!-- navigation -->
<nav id="nav">
<a href="#home">Home</a>
<a href="#about">ABOUT</a>
<a href="#projects">PROJECTS</a>
<a href="#contact">CONTACT</a>
</nav>
<!-- Section defination -->
<section id="home">
<div class="title-group">
<h1>Custom Title Here</h1>
<h2>Welcome to the website!</h2>
</div>
</section>
<section id="about">
<h1>Undraw Illustration</h1>
<h2>Web Innovation</h2>
<div class="about-container">
<div class="image-container">
<img id="image1" src="./images/undraw_proud_coder_light.svg" alt="proud coder"/>
</div>
<div class="image-container">
<img id="image2" src="./images/undraw_feeling_proud_light.svg" alt="proud coder"/>
</div>
<div class="image-container">
<img id="image3" src="./images/undraw_conceptual_idea_light.svg" alt="proud coder"/>
</div>
</div>
</section>
<section id="projects">
<h1>Buttons</h1>
<div class="buttons">
<button class="primary">Primary</button>
<button class="secondary">Secondary</button>
<button class="disabled">Disabled</button>
<button class="outline">Outline</button>
<button class="secondary outline">Alt Outline</button>
<button class="outline">Disabled</button>
</div>
<div id="text-box">
<p>
Abraham Lincoln (/ˈlɪŋkən/; February 12, 1809 – April 15, 1865) was an American lawyer and statesman who served as the 16th president of the United States from 1861 until his assassination in 1865. Lincoln led the nation through the American Civil War and succeeded in preserving the Union, abolishing slavery, bolstering the federal government, and modernizing the U.S. economy.
Lincoln was born into poverty in a log cabin and was raised on the frontier primarily in Indiana. He was self-educated and became a lawyer, Whig Party leader, Illinois state legislator, and U.S. Congressman from Illinois. In 1849, he returned to his law practice but became vexed by the opening of additional lands to slavery as a result of the Kansas–Nebraska Act. He reentered politics in 1854, becoming a leader in the new Republican Party, and he reached a national audience in the 1858 debates against Stephen Douglas. Lincoln ran for President in 1860, sweeping the North in victory. Pro-slavery elements in the South equated his success with the North's rejection of their right to practice slavery, and southern states began seceding from the Union. To secure its independence, the new Confederate States fired on Fort Sumter, a U.S. fort in the South, and Lincoln called up forces to suppress the rebellion and restore the Union.
</p>
</div>
</section>
<section id="contact">
<h1>Contact Us</h1>
<div class="social icons">
<i class="fab fa-github-square"></i>
<i class="fab fa-codepen"></i>
<i class="fab fa-linkedin-in"></i>
<i class="fab fa-medium"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-youtube"></i>
</div>
</section>
<script src="logic.js"></script>
</body>
</html>