Skip to content

Instantly share code, notes, and snippets.

@midorikocak

midorikocak/index.html

Last active October 4, 2021 19:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save midorikocak/137938e040b1c9adc71ac1611c09f170 to your computer and use it in GitHub Desktop.
Save midorikocak/137938e040b1c9adc71ac1611c09f170 to your computer and use it in GitHub Desktop.
Download ZIP
Introduction to HTML
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Webpage</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
padding: 16px;
}
#mainLogo {
font-size: 48px;
color: orange;
}
.fancy-section h1,
.fancy-section h2,
.fancy-section h3 {
color: purple;
}
</style>
</head>
<body>
<header>
<div class="logo" id="mainLogo">My Awesome Blog</div>
</header>
<main>
<article>
<h1>What did I learn today?</h1>
<p>
Today was an amazing day that I started learning how to code and I am
so proud of myself.
</p>
<section class="fancy-section">
<h2>How did I decide?</h2>
<p>
Everything started when I saw my friend make a lot of money from
coding.
</p>
<p>
Also, she was so happy and was having fun. I asked her to teach me
but she didn't have free time.
</p>
</section>
<section class="fancy-section">
<h3>Decision making process</h3>
<p>
I was looking for different classes and courses and videos and
books, but the best thing was to enroll a proper course. So II can
ask questions and collaborate with people.
</p>
</section>
<section id="hobbies">
<h2>My Hobbies</h2>
<p>I want to talk about my hobbies here.</p>
<ul>
<li>Playing Piano</li>
<li>Learning Japanese</li>
<li>Drawing Anime Characters</li>
<li>Climbing</li>
</ul>
</section>
<section id="routines">
<h2>My Morning Routing</h2>
<p>What I do everyday.</p>
<ol>
<li>Wake up</li>
<li>Drink coffee</li>
<li>Brush teeth</li>
<li>Write my todo list</li>
</ol>
</section>
<section id="contacts">
<h2>My contact information</h2>
<p>How you can reach me</p>
<ul>
<li>
Linkedin
<a href="https://wwww.linkedin.com/in/midorikocak">
My linkedin profile
</a>
</li>
<li>
Email <a href="mailto:midorikocak@gmail.com">mtkocak@gmail.com</a>
</li>
<li>Phone <a href="tel:+420 774 579 503">Call me maybe?</a></li>
</ul>
</section>
</article>
</main>
<footer>Copyright - Midori</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment