-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
91 lines (83 loc) · 3.69 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
91
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="./style.css">
<title>flexbox</title>
</head>
<body>
<header>
<div class="container flex">
<div class="child1">
<h1>Altcampus</h1>
</div>
<nav class="child2">
<a class="child3" href="#"><i class="fa-solid fa-bell"></i></a>
<span class="span">Sarah jone</span>
<a href=""><i class="fa-solid fa-user"></i></a>
</nav>
</div>
</header>
<main>
<section class="father1">
<div class="container flex">
<aside class="father2">
<nav>
<a class="child child4" href="#">
<i class="fa-regular fa-address-card"></i>
<span>Address-card</span>
</a>
<a class="child child5" href="#">
<i class="fa-regular fa-newspaper"></i>
<span>newspaper</span>
</a>
<a class="child child6" href="#">
<i class="fa-solid fa-chart-bar"></i>
<span>chart-bar</span>
</a>
<a class="child child7" href="#">
<i class="fa-solid fa-inbox"></i>
<span>inbox</span>
</a>
<a class="child child8" href="#">
<i class="fa-regular fa-gear">
<span>gear</span>
</i></a>
</nav>
<button class="btn">
<img src="./power-off.png" alt="log out">
<span>Log Out</span>
</button>
</aside>
<article class="father3">
<figure class="child10">
<img src="./pexels-george-pak-7972315.jpg" alt="img">
</figure>
<div class="child11">
<h2>Why we are you doing Altcampus</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam iste vero illum libero reiciendis unde quod? Suscipit rem dolores animi sit aspernatur corporis voluptatibus explicabo quisquam illo, eveniet natus cum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. A, eveniet, ducimus voluptates consequatur eum perferendis molestiae delectus aspernatur eius, incidunt est rem accusantium quia quo quisquam et dicta nisi. Quos!
</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe veniam consequuntur sunt commodi suscipit perspiciatis quisquam, odit reiciendis quae molestias incidunt quidem excepturi, quis delectus asperiores autem, non nisi a?</p>
<a href="#">read more</a>
</div>
</article>
</div>
</section>
</main>
<footer>
<div class="container flex">
<div>
<p>© Altcampus</p>
</div>
<nav>
<a href="#"><i class="fa-brands fa-instagram-square"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
</nav>
</div>
</footer>
</body>
</html>