Skip to content

Instantly share code, notes, and snippets.

@talilotarlison

talilotarlison/index.html

Created September 20, 2022 20:49
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 talilotarlison/bdc5a306f5d3eaecc8381df4ebe5bbf4 to your computer and use it in GitHub Desktop.
Save talilotarlison/bdc5a306f5d3eaecc8381df4ebe5bbf4 to your computer and use it in GitHub Desktop.
Download ZIP
Página de links
Raw
index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" type="image/png" href="../logo_thicode/png/Asset 15.png" />
</head>
<body>
<div class="container mb-5 p-5">
<div class="row d-flex justify-content-center">
<div class="col-md-6 cartao">
<div class="row">
<div class="col-md-12 d-flex justify-content-end">
<label class="switch">
<input type="checkbox" id='dark'>
<span class="slider round">
<i class="fa fa-moon-o" aria-hidden="true"></i>
<i class="fa fa-sun-o" aria-hidden="true"></i>
</span>
</label>
</div>
</div>
<div class="row ">
<div class="col-md-12 d-flex justify-content-center">
<img id="perfil" class="rounded-circle" src="https://github.com/talilotarlison.png" alt="Foto de perfil">
</div>
</div>
<div class="row mt-3">
<div class="col-md-12 d-flex justify-content-center">
<h3>Talilo Tarlison</h3>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h5 class="text-center">@talilo.tarlison</h5>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-md-12 mt-4">
<div class="row d-flex justify-content-center ">
<div class="col-md-12 d-flex justify-content-center">
<a class="btn btn-style w-100 mb-3"
href="#">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
YouTube
</a>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-12 d-flex justify-content-center">
<a class="btn btn-style w-100 mb-3" href="https://www.linkedin.com/in/talilotarlison/">
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
LinkedIn
</a>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-12 d-flex justify-content-center">
<a class="btn btn-style w-100 mb-3" href="https://www.instagram.com/talilotarlison/">
<i class="fa fa-instagram" aria-hidden="true"></i>
Instagram
</a>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-12 d-flex justify-content-center">
<a class="btn btn-style w-100 mb-3" href="https://github.com/talilotarlison">
<i class="fa fa-github" aria-hidden="true"></i>
GitHub
</a>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-12 d-flex justify-content-center">
<a class="btn btn-style w-100 mb-3" href="https://codepen.io/talilotarlison">
<i class="fa fa-codepen" aria-hidden="true"></i>
CodePen
</a>
</div>
</div>
<div class="row d-flex justify-content-center">
<div class="col-md-12 d-flex justify-content-center">
<a class="btn btn-style w-100" href="#">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
Estudos
</a>
</div>
</div>
<div class="row mt-5 mb-4">
<div class="col-md-12 d-flex justify-content-center">
<i class="title-text">Videos</i>
</div>
</div>
<div class="row">
<div class="col-md-12 d-flex justify-content-center embed-responsive embed-responsive-16by9">
<iframe class='embed-responsive-item' src="https://www.youtube.com/embed/Fzwr1JcqFo4" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<div class="row mt-5 mb-4">
<div class="col-md-12 d-flex justify-content-center">
<i class="title-text">Playlist</i>
</div>
</div>
<div class="row">
<div class="col-md-12 d-flex justify-content-center embed-responsive embed-responsive-16by9">
<iframe class='embed-responsive-item' src="https://www.youtube.com/embed/Fzwr1JcqFo4" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
Raw
script.js
let html = document.querySelector('html')
let checkbox = document.querySelector('#dark')
let deezer = document.querySelector('#deezer')
checkbox.addEventListener('change', ()=>{
html.classList.add('dark-mode')
if(checkbox.checked){
let srcDark = deezer.getAttribute('src').replace('light', 'dark')
deezer.setAttribute('src', srcDark)
} else {
let srcLight = deezer.getAttribute('src').replace('dark', 'light')
deezer.setAttribute('src', srcLight)
}
})
Raw
style.css
*{
margin: 0;
padding: 0;
}
:root{
--body-bg: #fff;
--body-color: #1071ff;
--btn-color: #1071ff;
--btn-bg: #fff;
--btn-bg-hover: #1071ff;
--btn-color-hover: #fff;
}
.dark-mode:root {
--body-bg: #081220;
--body-color: #fff;
--btn-color: #fff;
--btn-bg: #081220;
--btn-bg-hover: #fff;
--btn-color-hover: #081220;
}
body{
background: rgb(16, 113, 255);
background: linear-gradient(
0deg,
rgba(16, 113, 255, 1) 0%,
rgba(1, 211, 255, 1) 100%
);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
.cartao{
background-color: var(--body-bg);
padding: 30px;
border-radius: 30px;
box-shadow: 0px 8px 13px 0px rgba(0, 0, 0, 0.69);
}
.switch{
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: #081220;
}
input:checked + .slider {
background-color: #035190;
}
input:focus + .slider {
box-shadow: 0 0 1px #035190;
}
.fa-moon-o{
position: absolute;
height: 26px;
width: 26px;
left: 10px;
bottom: 0px;
color: #035190;
}
.fa-sun-o{
position: absolute;
height: 26px;
width: 26px;
left: 35.5px;
bottom: 0px;
color: #ccc;
}
img#perfil {
max-height: 120px;
border: 4px solid #01d1ff;
}
h3{
font-weight: 700;
color: var(--body-color) !important;
}
h5{
font-weight: 500;
color: var(--body-color) !important;
}
.btn-style {
border-radius: 50px !important;
color: var(--btn-color);
box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
background-color: var(--btn-bg);
font-size: 20px !important;
font-weight: 500 !important;
transition: all .4s ease-in-out !important;
}
.btn-style:hover{
background-color: var(--btn-bg-hover);
color: var(--btn-color-hover);
}
.title-text{
color: var(--body-color);
font-weight: 600;
font-size: 18pt;
}
iframe {
border-radius: 22px;
padding: 15px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment