-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (142 loc) · 7.26 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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!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>b personal blog</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crete+Round:ital@0;1&family=Inter:wght@300;400;500&family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.cdnfonts.com/css/cocogoose" rel="stylesheet">
<script src="https://kit.fontawesome.com/a13da07216.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<nav class="nav-bar">
<div class="container d-flex justify-content-end align-items-center">
<ul class="nav-bar-list d-flex align-items-center text-white">
<li class="list-group-item px-3"><a href="" class="text-white"><i class="fa-brands fa-facebook-f"></i></a></li>
<li class="list-group-item px-3"><a href="" class="text-white"><i class="fa-brands fa-twitter"></i></a></li>
<li class="list-group-item px-3"><a class="nav-link" href="#">Home</a></li>
<li class="list-group-item px-3"><a class="nav-link" href="#">About</a></li>
<li class="list-group-item px-3"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</nav>
<header class="mani-nav">
<div class="container nav-menu d-flex h-100 justify-content-between align-items-center">
<div class="container hamburgerPlusLogo">
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<div class="logo">
<a href="" class="text-dark"><i class="fa-solid fa-blog"></i></a>
<a href="" class="text-dark">personalBlog</a>
</div>
</div>
<div class="right-nav">
<ul class="d-flex nav-links">
<li class="list-group-item mob-link px-3"><a href="about.html" class="text-dark">About</a></li>
<li class="list-group-item mob-link px-3"><a href="" class="text-dark">Program</a></li>
<li class="list-group-item mob-link px-3"><a href="" class="text-dark">Join</a></li>
<li class="list-group-item mob-link px-3"><a href="" class="text-dark">Sponsor</a></li>
<li class="list-group-item mob-link px-3"><a href="" class="text-dark">News</a></li>
<li class="list-group-item mob-link px-3 ccCamp"><a href="" class="text-dark">Campaign</a></li>
</ul>
</div>
</div>
</header>
<section class="head-line">
<div class="container head-line-con h-100 d-flex flex-column justify-content-center">
<h2 class="w-50 fw-light">"Hello! My followers"</h2>
<h1 class="w-75">This is my Personnal blog to share my ideas with you guys</h1>
<p class="w-50">In this blog I'm gonna be posting about technology ideas like web programming, Machine Leatning, Artificial Intellegence and much more!</p>
<h3 class="w-50">2023-03-22(Wed)</h3>
<h4 class="w-50">Debretabor Ehiopia</h4>
</div>
</section>
<section class="main-blog h-100">
<div class="container h-100 d-flex flex-column justify-content-center align-items-center">
<h2 class="pro-intro mt-5">Recent Blogs</h2>
<span class="border-span0"></span>
<div class="pro-container d-flex gap-1 mt-5">
<div class="blog d-flex flex-column align-items-center text-center">
<img src="./img/web.png" alt="web-dev icon">
<h3>Web development</h3>
<p>Web development is the process of building, programming, and maintaining websites and web applications.</p>
</div>
<div class="blog d-flex flex-column align-items-center text-center">
<img src="./img/ml.png" alt="Ml icon">
<h3>Machine learning</h3>
<p>ML is an application of AI that enables systems to learn and improve from experience without being explicitly programmed.
.</p>
</div>
<div class="blog d-flex flex-column align-items-center text-center">
<img src="./img/ai.png" alt="AI icon">
<h3>Artificial intelligence</h3>
<p>Artificial intelligence is the simulation of human intelligence processes by machines, especially computer systems.</p>
</div>
<div class="blog d-flex flex-column align-items-center text-center">
<img src="./img/kbs.png" alt="KBS icon">
<h3>knowledge-based system</h3>
<p>A knowledge-based system (KBS) is a computer program that reasons and uses a knowledge base to solve complex problems. </p>
</div>
<div class="blog d-flex flex-column align-items-center text-center">
<img src="./img/rob.png" alt="Robotics icon">
<h3>Robotics</h3>
<p>Robotics is a branch of engineering that involves the conception, design, manufacture and operation of robots.</p>
</div>
<div class="show-all-blogs-btn">
<button class="show-all-blogs-bttton mt-5" type="button">Join b personal blog</button>
</div>
</div>
<h2 class="show-all-pro my-5">SHOW ALL BLOGS</h2>
</div>
</section>
<section class="featured-blogs">
<div class="container grid-container">
<div class="featured my-5">
<h2>Featured Blogs</h2>
<span class="border-span"></span>
</div>
<!-- Dynamically generated section gets here -->
</div>
<div class="container show-More">
<div class="show-more-btn-div">
<button class="show-more-btn" type="button">Show More <i class="fa-thin fa-circle-chevron-down"></i></button>
</div>
</div>
</section>
<section class="partners-section">
<div class="container h-100 d-flex flex-column align-items-center justify-content-center">
<h2>Partners</h2>
<span class="border-span2"></span>
<div class="part-list d-flex gap-4 my-3">
<div class="partners">YouTube</div>
<div class="partners">GitHub</div>
<div class="partners">Microverse</div>
<div class="partners">W3School</div>
<div class="partners">FreeCodeCamp</div>
</div>
</div>
</section>
<footer>
<div class="container w-100 d-flex align-items-center h-100 justify-content-center">
<div class="left-footer w-50">
<p><i class="fa-regular fa-copyright"></i>b personal blog</p>
</div>
<div class="right-footer">
<p>2023 b personal blog website. Some rights reserved</p>
<p>달리 정하지 않은 웹사이트의 모든 내용은 크리에이티브 커먼즈 저작자표시 2.0 대한민국 라이선스에 따라 이용할 수 있습니다.
자세한 이용기능 내용과 허락조건은 http://creativecommons.org/licences/by/2.0/kr 를 보세요.</p>
</div>
</div>
</footer>
<script src="scripts/scripts.js"></script>
</body>
</html>