Index Bootstrap - HTML

<!
DOCTYPE html>
<html>
<head>
<title>Dark Art</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/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/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"


<link href="favicon.png" rel="icon">
</head>
<body>

<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">DARK AESTHETIC</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index_bootstrap.html">Home<span
class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="product.html">Showcase</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More informations
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="about.html">About us</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="contact.html">Contact</a>
</div>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Key
word" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>
</header>



<div class="p-5 text-center bg-image rounded-3" style="
background-image: url('https://images.pexels.com/photos/17413564/pexels-photo-
17413564/free-photo-of-facade-of-catholic-church.jpeg?
auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1');
height: 300px;
">
<div class="mask" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="d-flex justify-content-center align-items-center h-300" >
<div class="text-white">
<h1 class="mb-3">DARK ART</h1>
<h4 class="mb-3">We are a small business that creates minimalist gothic
art.</h4>
<a class="btn btn-outline-light btn-lg" href="product.html" role="button">Press
to view our work</a>
</div>
</div>
</div>
</div>

<br>
</br>
<div class="jumbotron jumbotron-fluid">

<div class="container">
<h1 class="display-4">Goals</h1>
<p class="lead">The goal of our teram is to create art for those who enjoy
gothic aesthetic and also sell prints of the art we make.</p>
</div>
</div>
</section>



<div class="album py-5 bg-light">
<div class="row">
<div class="col-md-4">
<div class="card box-shadow">
<img
src="https://i.pinimg.com/564x/0b/16/6a/0b166ac7d01f5464abd67e34760eb88c.jpg">
<div class="card-body">
<h5 class="card-text" style="font-weight:
300;">Print 1</h5>
<div class="justify-content-between align-
items-center" style="font-weight: 500;">
<p>Aeonian</p>
</div>
</div>
</div>
</div>
<img
src="https://i.pinimg.com/564x/fa/af/fc/faaffc51c978328edaa908d05c889028.jpg">
300;">Print 2</h5>
<p>Frozen in place</p>
</div>
</div>
</div>
</div>
<img
src="https://64.media.tumblr.com/f9f3a160ca40b9dc9d4e77c32f5af5b3/
tumblr_onqxk2ZZfw1thdojio1_500.jpg">
300;">Print 3</h5>
<p>Lost and Found</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>



<div class="row">
<div class="col justify-content-center align-items-center bg-white">
<div class="text-white">
<table class="table">
<thead>
<tr>
<th scope="col">Print number</th>
<th scope="col">Description</th>
<th scope="col">Price</th>
<th scope="col">Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Print 1</td>
<td>Aeonian</td>
<td>30$</td>
<td>Available</td>
</tr>
<tr>
<td>Print 2</td>
<td>Frozen in place</td>
<td>25$</td>
<td>Not available</td>
</tr>
<tr>
<td>Print 3</td>
<td>Lost and Found</td>
<td>20$</td>
<td>Available</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>



<div class="container mt-5">
<div class="row">
<div class="col-lg p-2">
<h1 class="text-center mt-5">About us</h1>
<p>The Gothic art in our collection has multiple levels of depth.
They include subject matters of heavy tone expressed through dark, almost sad
scenes. Artwork that features Gothic architecture focuses on the heavily ornate
lines and religious overtones. This artistic style is perfect for expressing themes
of death and its relationship with the beauty of life.</p>
</div>
<div class="col-lg p-2">
<img class="img-fluid w-100"
src="https://images.pexels.com/photos/4261555/pexels-photo-4261555.jpeg?
auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width:100%;height:100%;">
</div>
</div>
</div>


<div class="container my-5">

<footer class="text-center text-white" style="background-color: #000000">


<section class="mt-5">

<div class="row text-center d-flex justify-content-center pt-5">

<h6 class="text-uppercase font-weight-bold">
<a href="#!" class="text-white">About us</a>
</h6>
</div>
<a href="#!" class="text-white">Showcase</a>
</h6>
</div>

<a href="#!" class="text-white">Goals</a>
</h6>
</div>

<a href="#!" class="text-white">Contact us</a>
</h6>
</div>
</div>

</section>


<section class="mb-1" style="background-color: rgba(255, 255, 255, 0.05)">
<div class="row d-flex justify-content-center">
<div class="col-lg-10">
<p>We are glad you visited our page and if you have any question
reguarding our work you can contact us anytime!<br>
We hope we will see you soon!
<br>Have a wonderful day!
</p>
</div>
</div>
</section>

</div>



<div
class="text-center p-3"
style="background-color: rgba(0, 0, 0, 0.2)"
>
© 2023 Copyright:
<a class="text-white" href="https://darkaesthetic.com/"
>Dark Aesthetic</a
>
</div>

</footer>

</div>

</body>
</html>

Index Bootstrap - HTML

Uploaded by

Copyright:

Available Formats

Index Bootstrap - HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Index Bootstrap - HTML

Uploaded by

Copyright:

Available Formats

<!

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<div class="jumbotron jumbotron-fluid">

<div class="container my-5">

You might also like