Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

lab done #2133

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

lab done #2133

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
349 changes: 349 additions & 0 deletions starter-code/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,349 @@
<!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
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
rel="stylesheet"
/>
</head>

<body>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>

<div class="container-fluid text-center">
<div class="row my-3">
<div class="col">
<h1 class="site-title">
<a
href="https://web.archive.org/web/20180109051150/http://demo.fabthemes.com/revera/"
title="revera"
rel="home"
style="
color: black;
text-transform: uppercase;
text-decoration: none;
font-weight: bolder;
"
>revera</a>
</h1>
</div>
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color:#ed564b;">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sample Page</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Parent Page &raquo;</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div class="row my-3">
<div
id="carouselExampleIndicators"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<img
src="img/slider-1.jpg"
class="d-block w-100 grayscale"
alt="Slider 1"
style="filter: grayscale(100%)"
/>
<div class="carousel-caption">
<h3>Lorem Ipsum 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img
src="img/slider-2.jpg"
class="d-block w-100 grayscale"
alt="Slider 2"
style="filter: grayscale(100%)"
/>
<div class="carousel-caption">
<h3>Lorem Ipsum 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img
src="img/slider-3.jpg"
class="d-block w-100 grayscale"
alt="Slider 3"
style="filter: grayscale(100%)"
/>
<div class="carousel-caption">
<h3>Lorem Ipsum 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img
src="img/slider-4.jpg"
class="d-block w-100 grayscale"
alt="Slider 4"
style="filter: grayscale(100%)"
/>
<div class="carousel-caption">
<h3>Lorem Ipsum 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleIndicators"
role="button"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true" style="background-color: #ed564b;"></span>
<span class="visually-hidden">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleIndicators"
role="button"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true" style="background-color: #ed564b;"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</div>
<div class="row" style="background-color: #ed564b; color: #ffffff">
<div class="col-sm-4 homewidget my-3">
<i class="fas fa-glass-martini-alt fa-stack-1x"></i>
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-glass-martini-alt fa-stack-1x"></i>
</span>
<h3>Web design</h3>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Vestibulum vehicula erat non congue cursus.
Aenean auctor nulla quis augue dictum, sed sagittis odio varius
</p>
</div>
<div class="col-sm-4 homewidget my-3">
<i class="fas fa-star fa-stack-1x"></i>
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-star fa-stack-1x"></i>
</span>
<h3>Web development</h3>
<p>
Duis tempus leo vitae ipsum viverra, blandit condimentum sapien
porttitor. Duis porttitor sed metus eget mollis. Curabitur bibendum
imperdiet tortor, ut pulvinar purus elementum nspendisse at erat
luctus.
</p>
</div>
<div class="col-sm-4 homewidget my-3">
<i class="fas fa-heart fa-stack-1x"></i>
<span class="fa-stack fa-2x">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-heart fa-stack-1x"></i>
</span>
<h3>User interface</h3>
<p>
Cras aliquet venenatis porttitor. Donec rutrum sapien et sapien
dignissim, eu dapibus mi molestie. Suspendisse dictum convallis quam
et sodales. Praesent non enim et magna congue gravida.
</p>
</div>
</div>
<div class="row my-3" style="width: 80%; margin: 40px auto;">
<div class="col-12">
<h2
style="
color: black;
text-transform: uppercase;
font-weight: semi-bold;
text-align: left;
"
>
Latest projects
</h2>
<h3
style="
color: grey;
text-transform: uppercase;
font-weight: semibold;
text-align: left;
"
>
few of the latest portfolio items
</h3>
</div>
<hr style="background-color: grey; height: 2px; border: none" />
<div class="col-3">
<div class="container-fluid">
<img
src="img/project-1.jpg"
alt="Project 1"
class="img-fluid mx-auto d-block"
/>
</div>

<p>Nunc libero elit, iaculis nec augue non</p>
</div>
<div class="col-3">
<div class="container-fluid">
<img
src="img/project-2.jpg"
alt="Project 2"
class="img-fluid mx-auto d-block"
/>
</div>

<p>Phasellus aliquet iaculis neque accumsan aliquam</p>
</div>
<div class="col-3">
<div class="container-fluid">
<img
src="img/project-3.jpg"
alt="Project 3"
class="img-fluid mx-auto d-block"
/>
</div>
<p>Vivamus blandit ipsum sed arcu euismod</p>
</div>
<div class="col-3">
<div class="container-fluid">
<img
src="img/project-4.jpg"
alt="Project 4"
class="img-fluid mx-auto d-block"
/>
</div>
<p>Curabitur auctor dolor risus, vitae pellentesque arcu consequat</p>
</div>
</div>

<div class="row" style="background-color: #363636; text-align: left;">
<div style="width: 80%; margin: 40px auto; display: flex;">
<div class="col-3">
<h3 style="color: white; text-transform: uppercase; font-weight: 600">
Revera
</h3>
<p style="color: grey;">
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Vestibulum vehicula erat non congue cursus.
Aenean auctor nulla quis augue dictum, sed sagittis odio varius?
Aliquam nec venenatis turpis. Aenean euismod arcu vel volutpat
tristique. In mattis ipsum quis magna feugiat, id tempus metus
accumsan.
</p>
</div>

<div class="col-3">
<h3 style="color: white; text-transform: uppercase; font-weight: 600">
Meta
</h3>
<p style="color: #d3d3d3">
<a href="#" style="color: grey; text-decoration: none">Log in</a>
<br style="border-bottom: 1px dotted grey" />
<a href="#" style="color: grey; text-decoration: none"
>Entries RSS</a
><br style="border-bottom: 1px dotted grey" />
<a href="#" style="color: grey; text-decoration: none"
>Comments RSS</a
><br style="border-bottom: 1px dotted grey" />
<a
href="https://wordpress.org/"
style="color: grey; text-decoration: none"
>WordPress.org</a
><br style="border-bottom: 1px dotted grey" />
</p>
</div>

<div class="col-3">
<h3 style="color: white; text-transform: uppercase; font-weight: 600">
Archives
</h3>
<p style="color: #d3d3d3">
<a href="#" style="color: grey; text-decoration: none"
>August 2013</a
><br style="border-bottom: 1px dotted grey" />
</p>
</div>

<div class="col-3">
<h3 style="color: white; text-transform: uppercase; font-weight: 600">
Recents posts
</h3>
<p style="color: grey">
<a href="#" style="color: grey; text-decoration: none"
>Etiam mauris tortor, pharetra quis lobortis in, pharetra in
diam</a
><br style="border-bottom: 1px dotted grey" />
<a href="#" style="color: grey; text-decoration: none"
>Nunc libero elit, iaculis nec augue non</a
><br style="border-bottom: 1px dotted grey" />
<a href="#" style="color: grey; text-decoration: none"
>Falauris sollicitudin quis dolor venenatis facilisis</a
><br style="border-bottom: 1px dotted grey" />
<a href="#" style="color: grey; text-decoration: none"
>Phasellus aliquet iaculis neque accumsan aliquam</a
><br style="border-bottom: 1px dotted grey" />
<a href="#" style="color: grey; text-decoration: none"
>Vivamus blandit ipsum sed arcu euismod</a
><br style="border-bottom: 1px dotted grey" />
</p>
</div>

</div>
</div>
<div class="row py-4" style="background-color: black">
<div class="col-12" style="width: 80%; margin: auto;">
<p style="color: grey; text-align: left">
&copy; 2018 revera - Just another demo Sites site.
</p>
<p style="color: grey; text-align: left">| Revera Theme</p>
</div>
</div>
</div>
</body>
</html>