-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
39 lines (36 loc) · 10.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>HTML CSS Grid Demo</title>
</head>
<body>
<h1>Title</h1>
<div class="wrapper-nav">
<p class="nav" id="home">Home</p>
<p class="nav" id="blog">Blog</p>
<p class="nav" id="about">About</p>
<p class="nav" id="contact">Contact</p>
</div>
<div class="wrapper">
<div class="main">
<h2>Title</h2>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam sed sit quia, excepturi dolore quaerat eaque soluta veniam praesentium dolor numquam, consequatur officia fuga voluptas inventore asperiores voluptatum unde iusto?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto, pariatur maiores soluta, quae vel eligendi aspernatur atque velit, harum iste est neque asperiores molestias similique. Nemo libero ratione animi facilis!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere repellendus corrupti magnam? Quae iure odit veritatis. Vero neque repudiandae quia! Nulla illo suscipit iusto aperiam sequi! Consectetur culpa eos veritatis.</p>
</div>
</div>
<div class="sidebar-right">
<img id="profile-pic" src="data:image/jpeg;base64,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" alt="picture">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum deleniti nulla molestias placeat quidem ex dolor commodi error id culpa eligendi aperiam, praesentium autem fugiat iste quasi laborum voluptatem totam?</p>
</div>
</div>
</body>
<footer>
This is the footer.
</footer>
</html>