Skip to content

Instantly share code, notes, and snippets.

@Karnak19

Karnak19/index.html

Created October 8, 2018 12:03
Show Gist options
  • Save Karnak19/cc04f93639492c9952e14fbfe0a2cfb1 to your computer and use it in GitHub Desktop.
Save Karnak19/cc04f93639492c9952e14fbfe0a2cfb1 to your computer and use it in GitHub Desktop.
Download ZIP
Odyssey quest 06
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>findThePrecious</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="header">
<nav>
<a href="#">FindThePrecious.com</a>
<ul>
<li class="selected"><a href="#fellows">Fellows</a></li>
<li><a href="#ring">The ring</a></li>
<li><a href="#reward">Get my reward</a></li>
<li><a href="#hunters">Best hunters</a></li>
<li><a href="#army">Join the army</a></li>
<li><a href="#contact">Contact us</a></li>
</ul>
</nav>
</header>
<hr />
<div class="content">
<div style="display: flex;">
<div class="main">
<div class="ring_orange"></div>
<p>My Precious</p>
<div class="ring_orange"></div>
</div>
</div>
<hr />
<div style="display: flex;">
<div class="main">
<div class="ring_yellow"></div>
<p>The One Ring !</p>
</div>
</div>
<hr />
<div style="display: flex;">
<div class="main">
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="circle-3"></div>
<div class="circle-4"></div>
<div class="circle-5"></div>
<div class="circle-6"></div>
<p>Please find it !</p>
</div>
</div>
</div>
</body>
<footer>
<hr />
</footer>
</html>
Raw
style.css
/* General Style */
@font-face {
font-family: aclo;
src: url("fonts/Aclonica.ttf"); }
.ring_orange {
background-color: rgba(0, 0, 0, 0);
width: 35px;
height: 35px;
border-radius: 50% 50% 50% 50%;
display: inline-block;
border: 3.5px solid #ff5100;
box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.671); }
.ring_yellow {
background-color: rgba(0, 0, 0, 0);
width: 100px;
height: 100px;
border-radius: 50% 50% 50% 50%;
display: inline-block;
border: 10px solid #f5a208;
box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.671); }
.circle-1 {
background-color: rgba(0, 0, 0, 0);
width: 35px;
height: 35px;
border-radius: 50% 50% 50% 50%;
display: inline-block;
border: 3.5px solid black;
box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.671);
margin-left: -10px;
margin-top: auto;
margin-bottom: auto; }
.circle-2 {
background-color: rgba(0, 0, 0, 0);
width: 70px;
height: 70px;
border-radius: 50% 50% 50% 50%;
display: inline-block;
border: 7px solid black;
box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.671);
margin-left: -20px;
margin-top: auto;
margin-bottom: auto; }
.circle-3 {
background-color: rgba(0, 0, 0, 0);
width: 105px;
height: 105px;
border-radius: 50% 50% 50% 50%;
display: inline-block;
border: 10.5px solid black;
box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.671);
margin-left: -30px;
margin-top: auto;
margin-bottom: auto; }
.circle-4 {
background-color: rgba(0, 0, 0, 0);
width: 140px;
height: 140px;
border-radius: 50% 50% 50% 50%;
display: inline-block;
border: 14px solid black;
box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.671);
margin-left: -40px;
margin-top: auto;
margin-bottom: auto; }
.circle-5 {
background-color: rgba(0, 0, 0, 0);
width: 175px;
height: 175px;
border-radius: 50% 50% 50% 50%;
display: inline-block;
border: 17.5px solid black;
box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.671);
margin-left: -50px;
margin-top: auto;
margin-bottom: auto; }
.circle-6 {
background-color: rgba(0, 0, 0, 0);
width: 210px;
height: 210px;
border-radius: 50% 50% 50% 50%;
display: inline-block;
border: 21px solid black;
box-shadow: 5px 2px 2px rgba(0, 0, 0, 0.671);
margin-left: -60px;
margin-top: auto;
margin-bottom: auto; }
.main {
display: flex;
margin-left: auto;
margin-right: auto; }
.main p {
font-family: aclo;
font-size: 25px;
margin: auto;
margin-left: 10px;
margin-right: 10px; }
/*# sourceMappingURL=style.css.map */
Raw
style.scss
/* General Style */
@font-face{
font-family: aclo;
src: url('fonts/Aclonica.ttf');
}
$yellow: rgb(245, 162, 8);
$orange: rgb(255, 81, 0);
$black: rgba(0, 0, 0, 1);
$shadow: rgba(0, 0, 0, 0.671);
$transparent: rgba(0, 0, 0, 0);
@mixin ring($length, $color) {
background-color: $transparent;
width: $length;
height: $length;
border-radius: (50% 50% 50% 50%);
display: inline-block;
border: $length/10 solid $color;
box-shadow: 5px 2px 2px $shadow;
}
.ring_orange {
@include ring(35px, $orange);
}
.ring_yellow {
@include ring(100px, $yellow);
}
@for $i from 1 through 6 {
.circle-#{$i} {
@include ring(35px*$i, $black);
margin-left: -10px*$i;
margin-top: auto;
margin-bottom: auto;
}
}
.main {
display: flex;
margin-left: auto;
margin-right: auto;
p {
font-family: aclo;
font-size: 25px;
margin: auto;
margin-left: 10px;
margin-right: 10px;
}
}
.content {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment