Skip to content

Instantly share code, notes, and snippets.

@Tazaf

Tazaf/index.html

Last active May 4, 2023 14:26
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 Tazaf/2ca35d60688eec1281fd9546abe1f76a to your computer and use it in GitHub Desktop.
Save Tazaf/2ca35d60688eec1281fd9546abe1f76a to your computer and use it in GitHub Desktop.
Download ZIP
MAS-RAD - Correct version of the Bootstrap Practice
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" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap initiation</title>
<!-- Add here the link to Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
crossorigin="anonymous" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
</head>
<body>
<nav class="navbar navbar-dark navbar-expand sticky-top bg-dark">
<div class="container">
<a href="#"
class="navbar-brand">DiaLog</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link"
href="#">Intro</a></li>
<li class="nav-item"><a class="nav-link"
href="#">Features</a></li>
<li class="nav-item"><a class="nav-link"
href="#">Download</a></li>
<li class="nav-item"><a class="nav-link"
href="#">About</a></li>
</ul>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link active"
href="#">My DiaLogs <span class="badge text-bg-info">5</span></a>
<a class="nav-item nav-link"
href="#">My Account</a>
<a class="nav-item nav-link"
href="#">Settings</a>
</div>
<button class="btn btn-success">Log out</button>
</div>
</nav>
<main class="container pt-4">
<div class="row">
<section class="col-4">
<div class="list-group">
<a class="list-group-item list-group-item-action">
<div class="d-flex justify-content-between align-items-baseline">
<h4>James Doohan</h4>
<small>Yesterday at 18:32</small>
</div>
<div class="d-flex justify-content-between align-items-baseline">
<span>lmao XD</span>
<span class="badge text-bg-secondary">6</span>
</div>
</a>
<a class="list-group-item list-group-item-action active">
<div class="d-flex justify-content-between align-items-baseline">
<h4>Ken Bogard</h4>
<small>Today at 13:16</small>
</div>
<div class="d-flex justify-content-between align-items-baseline">
<span>Wanna come'n play some SFV?!</span>
</div>
</a>
<a class="list-group-item list-group-item-action">
<div class="d-flex justify-content-between align-items-baseline">
<h4>Dad</h4>
<small>Yesterday at 19:33</small>
</div>
<div class="d-flex justify-content-between align-items-baseline">
<span>Yea... I'm coming, dad...</span>
<span class="badge text-bg-secondary">1</span>
</div>
</a>
<a class="list-group-item list-group-item-action">
<div class="d-flex justify-content-between align-items-baseline">
<h4>Levar Burton</h4>
<small>Today at 07:12</small>
</div>
<div class="d-flex justify-content-between align-items-baseline">
<span>Dude! Logan's awesome!</span>
<span class="badge text-bg-secondary">5</span>
</div>
</a>
<a class="list-group-item list-group-item-action">
<div class="d-flex justify-content-between align-items-baseline">
<h4>Tasha Yar</h4>
<small>Yesterday at 21:41</small>
</div>
<div class="d-flex justify-content-between align-items-baseline">
<span>See you on the other side</span>
<span class="badge text-bg-secondary">1</span>
</div>
</a>
</div>
</section>
<section class="col-8">
<div class="card">
<div class="card-header bg-dark text-light d-flex justify-content-between align-items-center">
<span><small>Dialog with</small> <strong>Ken Bogard</strong></span>
<button class="btn btn-link btn-sm text-light">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
<div class="card-body">
<div class="row">
<div class="col-8">
<div class="alert alert-success">
<div class="d-flex align-items-center">
<div class="msg-content flex-grow-1 mr-2">Hi there!</div>
<div class="d-flex align-items-center">
<small class="text-primary">12:57</small>
<button class="btn btn-link btn-sm">
<i class="far fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-8 offset-4">
<div class="alert alert-warning">
<div class="d-flex align-items-center">
<div class="msg-content flex-grow-1 mr-2">
Hey, hello you!<br />
What's up?
</div>
<div class="d-flex align-items-center">
<small class="text-primary">13:05</small>
<button class="btn btn-link btn-sm">
<i class="far fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
<div class="col-8">
<div class="alert alert-success">
<div class="d-flex align-items-center">
<div class="msg-content flex-grow-1 mr-2">
Same old, same old.<br />
Wanna come'n play some SFV?!
</div>
<div class="d-flex align-items-center">
<small class="text-primary">13:16</small>
<button class="btn btn-link btn-sm">
<i class="far fa-trash-alt"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<form>
<div class="form-group mb-2">
<textarea class="form-control"
rows="3"
placeholder="New message"></textarea>
</div>
<div class="d-flex justify-content-between">
<div class="btn-group btn-group-sm">
<button class="btn btn-outline-secondary active">
<i class="fas fa-align-left"></i>
</button>
<button class="btn btn-outline-secondary">
<i class="fas fa-align-center"></i>
</button>
<button class="btn btn-outline-secondary">
<i class="fas fa-align-right"></i>
</button>
</div>
<button class="btn btn-success btn-sm">
<i class="far fa-paper-plane"></i>
Send!
</button>
</div>
</form>
</div>
</div>
</section>
</div>
</main>
<footer class="navbar navbar-light fixed-bottom bg-light">
<div class="container d-flex justify-content-between">
<button class="btn btn-outline-info">Privacy &amp; Terms</button>
<span class="navbar-text">&copy; 2023 - Mathias Oberson</span>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment