Skip to content

Instantly share code, notes, and snippets.

@IgnacioGaldames

IgnacioGaldames/circles-lines.html

Created April 13, 2020 17:36
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 IgnacioGaldames/f100478e4cb31dc38d675cf787e9eec0 to your computer and use it in GitHub Desktop.
Save IgnacioGaldames/f100478e4cb31dc38d675cf787e9eec0 to your computer and use it in GitHub Desktop.
Download ZIP
circles with lines
Raw
circles-lines.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"
integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<style>
.my-circle {
border: solid 2px black !important;
width: 30px;
height: 30px;
}
.my-circle:hover {
background-color: var(--pink) !important;
}
.line {
height: 2px;
background-color: black;
width: 100%;
position: absolute;
top: .9rem;
left: 0;
z-index: -9;
}
#metodologia .container .row .col-4:first-child .line {
width: 50%;
left: 50%;
}
#metodologia .container .row .col-4:last-child .line {
width: 50%;
}
header, section {
border-bottom: solid 1px lightgray;
}
</style>
</head>
<body>
<section class="container-fluid py-4" id="metodologia">
<div class="container">
<div class="row">
<div class="col-4 col-md text-center">
<div class="line"></div>
<div class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span><i class="fas fa-arrow-circle-up"></i></span>
</div>
<p>lorem</p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span><i class="fas fa-arrow-circle-up"></i></span>
</div>
<p>ipsum</p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span><i class="fas fa-arrow-circle-down"></i></span>
</div>
<p>dolor</p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span><i class="fas fa-arrow-circle-down"></i></span>
</div>
<p>sit</p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span><i class="fas fa-arrow-circle-left"></i></span>
</div>
<p>amet</p>
</div>
<div class="col-4 col-md text-center">
<div class="line"></div>
<div class="rounded-circle mx-auto d-flex align-items-center justify-content-center mb-3 bg-dark text-white my-circle">
<span><i class="fas fa-arrow-circle-right"></i></span>
</div>
<p>consectetur</p>
</div>
</div>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment