Skip to content

Commit 747917b

Browse files
ibrahimhc19ibrahimhc19
committed
Offcanvas
1 parent a6b45ab commit 747917b

3 files changed

Lines changed: 129 additions & 23 deletions

File tree

‎01-NavBar - Bootstrap - Offcanvas/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<!-- Favicon -->
9+
<link rel="icon" type="image/png" sizes="32x32" href="../favicon/ms-icon-32x32.png">
10+
<link rel="apple-touch-icon" sizes="60x60" href="../favicon/apple-icon-60x60.png">
11+
<!-- Fuentes -->
12+
<link rel="preconnect" href="https://fonts.googleapis.com">
13+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14+
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
15+
<!-- Hojas de estilos -->
16+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
17+
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
18+
<link rel="stylesheet" href="./styles.css">
19+
<title>Nav Bar</title>
20+
</head>
21+
22+
<body>
23+
<header>
24+
<nav class="navbar navbar-expand-md bg-body-tertiary fixed-top">
25+
<div class="container-fluid">
26+
<a class="navbar-brand ms-md-5 text-uppercase" href="#">The Nav Bar</a>
27+
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
28+
<span class="navbar-toggler-icon"></span>
29+
</button>
30+
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
31+
<div class="offcanvas-header">
32+
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
33+
</div>
34+
<div class="offcanvas-body">
35+
<ul class="navbar-nav me-md-5 justify-content-end flex-grow-1 pe-3">
36+
<li class="nav-item">
37+
<a class="nav-link active" aria-current="page" href="#">Home</a>
38+
</li>
39+
<li class="nav-item">
40+
<a class="nav-link" href="#">About me</a>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link" href="#">Contact</a>
44+
</li>
45+
<li class="nav-item">
46+
<a class="nav-link" href="#">CV</a>
47+
</li>
48+
</ul>
49+
</div>
50+
</div>
51+
</div>
52+
</nav>
53+
</header>
54+
55+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
56+
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
57+
crossorigin="anonymous"></script>
58+
</body>
59+
60+
</html>

‎01-NavBar - Bootstrap - Offcanvas/styles.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
2+
*{
3+
font-family: 'Ubuntu', sans-serif!important;
4+
color: #F9F5F6!important;
5+
}
6+
:root{
7+
--bg-color: linear-gradient(217deg, #ee6fca, rgba(255, 0, 0, 0) 70.71%),
8+
linear-gradient(127deg, #67bad4, rgba(0, 255, 0, 0) 70.71%),
9+
linear-gradient(336deg, #24b6e7, rgba(0, 0, 255, 0) 70.71%);
10+
--altura: 5rem;
11+
}
12+
body{
13+
background-color: #dbcce9;
14+
}
15+
.navbar{
16+
background: var(--bg-color);
17+
min-height: 5rem;
18+
box-shadow: 0 0.4rem 2rem rgba(0, 0, 0, 0.1);
19+
padding: 1rem 2rem;
20+
}
21+
22+
.left {
23+
font-size: 1.5rem;
24+
user-select: none;
25+
letter-spacing: 1px;
26+
text-transform: uppercase;
27+
}
28+
29+
.nav-link{
30+
margin: 0;
31+
cursor: pointer;
32+
font-size: 1.2rem;
33+
transition: all 1s;
34+
border-radius: 5px;
35+
letter-spacing: 2px;
36+
font-weight: normal;
37+
padding: 0.4rem 0.8rem!important;
38+
text-transform: uppercase;
39+
40+
}
41+
42+
.nav-link:hover{
43+
background: #ffc3fc48;
44+
}
45+
.navbar-nav{
46+
display: flex;
47+
justify-content: space-between;
48+
align-items: center;
49+
}
50+
.nav-link{
51+
font-size: 1.2rem;
52+
}
53+
54+
.navbar-brand{
55+
user-select: none;
56+
}
57+
@media screen and (max-width: 767px) {
58+
.offcanvas{
59+
background: var(--bg-color);
60+
}
61+
62+
}

‎01-NavBar - Bootstrap/index.html‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -16,49 +16,33 @@
1616
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
1717
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
1818
<link rel="stylesheet" href="./styles.css">
19-
<title>Nav Bar</title>
19+
<title>Nav Bar</title>
2020
</head>
2121

2222
<body>
2323
<header>
24-
<!-- <nav class="navbar">
25-
<div class="container-fluid">
26-
<a class="navbar-brand left" href="#">the nav bar</a>
27-
<div class="right">
28-
<ul class="nav justify-content-end list">
29-
<li class="nav-item"><a class="nav-link" href="../index.html">home</a></li>
30-
<li class="nav-item"><a class="nav-link" href="https://github.com/ibrahimhc19" target="_blank">about me</a>
31-
</li>
32-
<li class="nav-item"><a class="nav-link" href="mailto:ibrahimhc19@gmail.com">contact</a></li>
33-
<li class="nav-item"><a class="nav-link" href="#">cv</a></li>
34-
</ul>
35-
</div>
36-
</div>
37-
</nav> -->
38-
39-
4024
<nav class="navbar navbar-expand-md text-uppercase">
4125
<div class="container-fluid">
42-
<button class="navbar-toggler ms-auto btn" type="button" data-bs-toggle="collapse" data-bs-target="#togglerNav" aria-controls="togglerNav" aria-expanded="false" aria-label="Toggle navigation">
26+
<button class="navbar-toggler ms-auto btn" type="button" data-bs-toggle="collapse" data-bs-target="#togglerNav"
27+
aria-controls="togglerNav" aria-expanded="false" aria-label="Toggle navigation">
4328
<span class="navbar-toggler-icon"></span>
4429
</button>
4530
<div class="collapse navbar-collapse" id="togglerNav">
46-
<a class="navbar-brand fs-4">The Nav Bar</a>
31+
<a class="navbar-brand fs-4 d-none d-md-block d-lg-block d-xl-block d-xxl-block">The Nav Bar</a>
4732
<ul class="navbar-nav me-md-5">
4833
<li class="nav-item">
49-
<a class="nav-link active" aria-current="page" href="#">Home</a>
34+
<a class="nav-link active" aria-current="page" href="../index.html">Home</a>
5035
</li>
5136
<li class="nav-item">
52-
<a class="nav-link" href="#">About me</a>
37+
<a class="nav-link" href="https://github.com/ibrahimhc19">About me</a>
5338
</li>
5439
<li class="nav-item">
55-
<a class="nav-link" href="#">Contact</a>
40+
<a class="nav-link" href="mailto:ibrahimhc19@gmail.com">Contact</a>
5641
</li>
5742
<li class="nav-item">
5843
<a class="nav-link" href="#">CV</a>
5944
</li>
6045
</ul>
61-
6246
</div>
6347
</div>
6448
</nav>

0 commit comments

Comments
 (0)