Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/index.html

Created June 14, 2021 17:09
Show Gist options
  • Save harunpehlivan/dd8714d81e1a9c5c8d790da6fb3c5d7e to your computer and use it in GitHub Desktop.
Save harunpehlivan/dd8714d81e1a9c5c8d790da6fb3c5d7e to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio Landing
Raw
index.html
<!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" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<!-- Styles -->
<link rel="stylesheet" href="./styles.css" />
<title>Portfolio Landing</title>
</head>
<body class="">
<section>
<nav>
<a href="https://harunpehlivanitcoderdesignerfounderceo.glitch.me/" class="globe">
<i class="fas fa-globe"></i>
</a>
<ul>
<li>
<button type="button" id="nav-mode_switch">
<i class="fas fa-sun"></i>
<i class="fas fa-moon"></i>
</button>
</li>
</ul>
</nav>
<main>
<img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1613759952/003_megvxx.jpg" alt="avatar" class="main-avatar" />
<p class="main-name">Hi, I'm HARUN PEHLİVAN </p>
<h1>
HP IT GROUP (TEBIM TEBITAGEM) TTGRT <br />
FOUNDER CEO <br />
</h1>
<p>
22/07/1984 <b>Çorum</b> Aslen <b>Samsun/Havza <br />
</p>
<br>
<a onclick="window.open('http://fm.tc/live-broadcast-fm-1372.html','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1606079515/favicon_mhxjoj.png" title="7/24 ONLİNE KESİNTİSİZ MÜZİK YAYINI" border="0"></a>
<a onclick="window.open('http://fm.tc/live-broadcast-tv-1845.html','POPUP','width=503,height=260,scrollbars=0,resizable=0');return false;" href="#"><img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1606080271/favicon_ahnflh.png" title="LİVE BROADCAST TV" border="0"></a>
</br>
<br>
<iframe src="https://open.spotify.com/embed/show/59IwN0Z1v8GNXqq430bg16" width="100%" height="232" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</br>
<br>
<iframe src="https://open.spotify.com/embed/playlist/0Ptperv5fQvkxxGgGqgOo9" width="100%" height="380" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</br>
<h3><p><b>(ML) MACHINE LEARNING </b> (DL) DEP LEARNING </p>
<p><b>(AI) ARTIFICIAL INTELLIGENCE</b> </h3>
<a href="https://machinelearning.glitch.me/" target="_blank">
<img class="img-responsive" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fmachinelearning.glitch.me?w=360" alt="School site">
</a>
<h3>Arapça Osmanlıca Klavye</h3>
<a href="https://arapcaosmanlicaklavye.glitch.me/" target="_blank">
<img class="img-responsive" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Farapcaosmanlicaklavye.glitch.me?w=360" alt="Fremler">
</a>
<h3>WEB ÇALIŞMA</h3>
<a href="https://webcalisma.glitch.me/" target="_blank">
<img class="img-responsive" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fwebcalisma.glitch.me?w=360" alt="Current Weather">
</a>
<h3>Klavye Hız Testi</h3>
<a href="https://klavyehiztesti.glitch.me/" target="_blank">
<img class="img-responsive" src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Fklavyehiztesti.glitch.me?w=360" alt="Twitch Streamers">
</a>
<h3>TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</h3>
<a href="http://harunpehlivan.fm.tc/" target="_blank">
<img class="img-responsive" src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.fm.tc?w=360" alt="Startup Quotes">
</a>
</main>
</section>
<script src="./script.js"></script>
</body>
</html>
Raw
script.js
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('nav-mode_switch').addEventListener('click', () => {
document.body.classList.toggle('dark');
localStorage.setItem(
'theme',
document.body.classList.contains('dark') ? 'dark' : 'light'
);
});
if (localStorage.getItem('theme') === 'dark') {
document.body.classList.add('dark');
}
});
Raw
style.css
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
--color-primary: #fff;
--color-secondary: #000;
--color-proton: #000;
}
.dark {
--color-primary: #000;
--color-secondary: #fff;
--color-proton: #d3d3d3;
}
* {
font-family: 'Montserrat', sans-serif;
margin: 0;
transition: all 0.15s ease;
}
a {
text-decoration: none;
color: inherit;
}
body {
background-color: var(--color-primary);
color: var(--color-secondary);
}
section {
max-width: 1140px;
width: 95%;
margin: 0 auto;
height: 100vh;
display: flex;
flex-direction: column;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
padding: 1rem 0;
}
nav .fa-envelope {
width: 30px;
height: 30px;
border: 1px solid var(--color-proton);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
}
nav .nav-email {
display: flex;
align-items: center;
}
nav ul {
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
color: var(--color-proton);
}
nav ul li:not(:last-child) {
margin-right: 2rem;
position: relative;
}
nav ul li.active::after {
content: '';
position: absolute;
width: 70%;
height: 3px;
bottom: -0.3rem;
left: 0;
background-color: var(--color-secondary);
}
nav ul li.active {
color: var(--color-secondary);
font-weight: bold;
}
nav ul li {
color: var(--color-proton);
}
#nav-mode_switch {
background: transparent;
outline: none;
color: var(--color-secondary);
border: none;
cursor: pointer;
}
body.dark #nav-mode_switch .fa-sun {
display: none;
}
body.dark #nav-mode_switch .fa-moon {
display: block;
}
#nav-mode_switch .fa-moon {
display: none;
}
main {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.main-avatar {
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 50%;
margin-bottom: 1rem;
}
.main-name {
margin-bottom: 1.5rem;
font-size: 1.2rem;
font-weight: 500;
}
main h1 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
main p {
line-height: 1.7rem;
font-size: 0.9rem;
color: var(--color-proton);
}
main button {
padding: 1rem 1.5rem;
text-transform: uppercase;
border-radius: 50px;
outline: none;
border: none;
margin-top: 1.5rem;
background-color: var(--color-secondary);
color: var(--color-primary);
font-size: 0.7rem;
font-weight: bold;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment