-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (93 loc) · 4.41 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
<!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="icon" href="img/favicon.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="style.css">
<title>Code Girl</title>
</head>
<body>
<header>
<div class="logo">
<img src="img/logo.png" alt="blog logo">
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="https://www.linkedin.com/in/hkryad/">About</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">post example</a>
<div class="dropdown-content">
<a href="post1.html">Post with list</a>
<a href="post2.html">Post with qoute</a>
<a href="post3.html">Post with paragrphs</a>
<a href="post4.html">Post with button</a>
</div>
</div>
</li>
<li><a href="#">Sign in</a></li>
</ul>
</nav>
<img src="img/menu.png" alt="menu icon" class="menuicon">
</header>
<section class="bio">
<h1>Welcome to my blog</h1>
<p>Computer Science student in love with involving design creativity and coding with hard working is producing
Magic,<br>
<i>as a magician with a good experience in ( Html, CSS, JQuery & Bootstrap ) i working hard more and more to
improve my spells and gain a good experience in fronted field.</i>
</p>
</section>
<section class="container">
<article class="card">
<img src="img/learn.jpg" alt="how i learned coding?">
<h2>How i learned coding?</h2>
<p>Codecademy. Codecademy is where most people who are new to coding get their start learning programming
online,</p>
<a href="post1.html">Read More</a>
</article>
<article class="card">
<img src="img/max font artical hero image.png" alt="How Do You Do max-font-size in CSS?">
<h2>How Do You Do max-font-size in CSS?</h2>
<p>CSS doesn't have max-font-size, so if we need something that does something along those lines, we have to
get tricky.</p>
<a href="post2.html">Read More</a>
</article>
<article class="card">
<img src="img/https is easy artical.png" alt="HTTPS is Easy!">
<h2>HTTPS is Easy!</h2>
<p>I've been guilty of publicly bemoaning the complexity of HTTPS. In the past, I've purchased SSL
certificates from third-party vendors and had trouble installing them.</p>
<a href="post3.html">Read More</a>
</article>
<article class="card">
<img src="img/css4.jpg" alt="CSS4 is a Bad Idea">
<h2>CSS4 is a Bad Idea</h2>
<p>The gist is that CSS4 isn't real, so won't work, and we don't need it anyway. Perhaps I overestimate the
power of marketing, but I'd wager Louis underestimates it a bit.</p>
<a href="post4.html">Read More</a>
</article>
<article class="card">
<img src="img/jamstack.jpeg" alt="How To Create A Headless WordPress Site On The Jamstack?">
<h2>How To Create A Headless WordPress Site On The Jamstack?</h2>
<p>As businesses fight to become more agile and stay relevant, technology has evolved to support it. Forget
Docker, JAMstack is the next evolution in modern web development. </p>
<a href="#">Read More</a>
</article>
<article class="card">
<img src="img/code types.png" alt="The Three Types of Code">
<h2>The Three Types of Code</h2>
<p>Every time I start a new project, I organize the code I'm looking at into three types, or categories if
you like. And I think these types can be</p>
<a href="#">Read More</a>
</article>
</section>
</body>
<footer>
<p>all copyrights saved to <a href="https://www.linkedin.com/in/hkryad/">Hagar Khaled</a>©2020 all rights recived
</p>
</footer>
</html>