Skip to content

Done until Latest projects section #2129

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

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

Done until Latest projects section #2129

Show file tree
Hide file tree
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
4 changes: 3 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,13 @@ As we can see, this template is a very good example of the type of webpages we c
## Submission

Upon completion, run the following commands

```
$ git add .
$ git commit -m "done"
$ git push origin master
```

Navigate to your repo and create a Pull Request -from your master branch to the original repository master branch.

In the Pull request name, add your name and last names separated by a dash "-"
Expand All @@ -41,7 +43,7 @@ So we have to see the page as a big container and identify the most important se

Remember to use the inspector to determine the width and the height of the Revera page. Also, we could find out which Bootstrap classes have been used and anything else that is necessary to make our page looks like the original.

One cool Boostrap feature is that you have three elements that make our lives easier: `container`, `row` and `columns`. Don't hesitate to use them!
One cool Boostrap feature is that you have three elements that make our lives easier: `container`, `row` and `columns`. Don't hesitate to use them!

## Iteration 2: Internal structure

Expand Down
351 changes: 351 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,351 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<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" type="text/css" href="/style.css" />
<title>Revera clone</title>
</head>
<body>
<div id="page-container">
<!-- Header and Navbar -->
<header class="header-container">
<div class="row">
<nav class="navbar navbar-expand-lg">
<div class="col-sm-4">
<h1>
<a
class="px-5 fw-semibold text-uppercase text-reset link-offset-2 link-underline link-underline-opacity-0"
href="#"
>Revera</a
>
</h1>
</div>
<div class="container-fluid col-sm-8">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>About</a
>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Sample Page</a
>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Portfolio</a
>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Blog</a
>
</li>

<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Parent page
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Full page</a></li>
<li><hr class="dropdown-divider" /></li>
<li>
<a class="dropdown-item" href="#">Child page 1</a>
</li>
<li>
<a class="dropdown-item" href="#">Child page 2</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<!-- Carousel -->
<div id="slide" class="flexslider">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="1000">

<img
class="bd-placeholder-img"
style="filter: grayscale(1)"
width="100%"
height="100%"
src="/starter-code/img/slider-1.jpg"
aria-hidden="true"
preserveAspectRatio="xMidYMid slice"
focusable="false"
/>
<rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
<div class="container">
<div class="carousel-caption d-flex flex-column">
<h1>Example headline</h1>
<p class="opacity-75">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae blanditiis dolore soluta sint ab consectetur distinctio praesentium quo expedita magnam excepturi in nihil vel quod, unde, ex eaque recusandae iure.
</p>
<p>
<a class="opacity-75 rounded-0 btn btn-lg text-light text-uppercase border border-light" href="#">
Read more </a>
</p>
</div>
</div>

</div>

<div class="carousel-item active" data-bs-interval="1000">
<img
class="bd-placeholder-img"
style="filter: grayscale(1)"
width="100%"
height="100%"
src="/starter-code/img/slider-2.jpg"
aria-hidden="true"
preserveAspectRatio="xMidYMid slice"
focusable="false"
/>
<rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
<div class="container">
<div class="carousel-caption d-flex flex-column">
<h1>Example headline</h1>
<p class="opacity-75">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae blanditiis dolore soluta sint ab consectetur distinctio praesentium quo expedita magnam excepturi in nihil vel quod, unde, ex eaque recusandae iure.
</p>
<p>
<a class="opacity-75 rounded-0 btn btn-lg text-light text-uppercase border border-light" href="#">
Read more </a>
</p>
</div>
</div>
</div>
<div class="carousel-item active" data-bs-interval="1000">
<img
class="bd-placeholder-img"
style="filter: grayscale(1)"
width="100%"
height="100%"
src="/starter-code/img/slider-3.jpg"
aria-hidden="true"
preserveAspectRatio="xMidYMid slice"
focusable="false"
/>
<rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
<div class="container">
<div class="carousel-caption d-flex flex-column">
<h1>Example headline.</h1>
<p class="opacity-75">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae blanditiis dolore soluta sint ab consectetur distinctio praesentium quo expedita magnam excepturi in nihil vel quod, unde, ex eaque recusandae iure.
</p>
<p>
<a class="opacity-75 rounded-0 btn btn-lg text-light text-uppercase border border-light" href="#">
Read more </a>
</p>
</div>
</div>
</div>
<div class="carousel-item" data-bs-interval="1000">
<img
class="bd-placeholder-img"
style="filter: grayscale(1)"
width="100%"
height="100%"
src="/starter-code/img/slider-4.jpg"
aria-hidden="true"
preserveAspectRatio="xMidYMid slice"
focusable="false"
/>
<rect width="100%" height="100%" fill="var(--bs-secondary-color)"></rect>
<div class="container">
<div class="carousel-caption d-flex flex-column">
<h1>Example headline.</h1>
<p class="opacity-75">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae blanditiis dolore soluta sint ab consectetur distinctio praesentium quo expedita magnam excepturi in nihil vel quod, unde, ex eaque recusandae iure.
</p>
<p>
<a class="opacity-75 rounded-0 btn btn-lg text-light text-uppercase border border-light" href="#">
Read more </a>
</p>
</div>
</div>
</div>
</div>

<button
class="btn btn-danger carousel-control-prev"
type="button"
data-bs-target="#myCarousel"
data-bs-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="false"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="btn btn-danger carousel-control-next"
type="button"
data-bs-target="#myCarousel"
data-bs-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="false"></span>
<span class="visually-hidden">Next</span>
</button>


<!-- Red row, 3 columns with 3 services -->

<div class="fwidgets">
<div class="container" style="background-color: #ed564b;">
<div class="row">

<div class="col-lg-4 pt-5 homewidget">

<svg
class="bd-placeholder-img rounded-circle"
width="140"
height="140"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder"
preserveAspectRatio="xMidYMid slice"
focusable="false"
><title>Placeholder</title>
<rect
width="100%"
height="100%"
fill="var(--bs-secondary-color)"
></rect>
</svg>

<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 <a href="#"> Link </a> </p>
</div>

<div class="col-lg-4 pt-5 homewidget">

<svg
class="bd-placeholder-img rounded-circle"
width="140"
height="140"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder"
preserveAspectRatio="xMidYMid slice"
focusable="false"
><title>Placeholder</title>
<rect
width="100%"
height="100%"
fill="var(--bs-secondary-color)"
></rect>
</svg>
<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-4 pt-5 homewidget">
<svg
class="bd-placeholder-img rounded-circle"
width="140"
height="140"
xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Placeholder"
preserveAspectRatio="xMidYMid slice"
focusable="false"
><title>Placeholder</title>
<rect
width="100%"
height="100%"
fill="var(--bs-secondary-color)"
></rect>
</svg>
<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>
</div>
<!-- latets projects -->
<div id="projects" class="site-content">
<div class="first-part">
<div class="px-5 pt-4">
<p class="h3 fs-5 fw-bold">LATEST PROJECTS</p>
<p class="h4 fs-6 fw-bold text-secondary">
FEW OF THE LATEST PORTFOLIO ITEMS
</p>
</div>
<hr class="featurette-divider mx-4" />
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-3 p-5">
<div class="col">
<img src="/starter-code/img/project-2.jpg" alt="">
<p>Sample text</p></div>

<div class="col">
<img src="/starter-code/img/project-2.jpg" alt="">
<p>Sample text</p></div>

<div class="col">
<img src="/starter-code/img/project-2.jpg" alt="">
<p>Sample text</p></div>

<div class="col">
<img src="/starter-code/img/project-2.jpg" alt="">
<p>Sample text</p></div>



</div>
</div>

</div>
</div>

</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
</body>
</html>
16 changes: 16 additions & 0 deletions node_modules/.bin/prettier
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading