Skip to content

done #2117

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 #2117

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
254 changes: 254 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
<!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-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

</head>

<body>
<header class="main-menu d-flex justify-content-around">
<h1>REVERA</h1>

<nav class="menu-nav">
<ul class="d-flex align-items-center">
<li href="#">HOME</li>
<li href="#">ABOUT</li>
<li href="#">SAMPLE PAGE</li>
<li href="#">PORTFOLIO</li>
<li href="#">BLOG</li>
<li href="#">PARENT PAGE</li>
<li href="#">CONTACT</li>
</ul>
</nav>


</header>
<section class="main">
<div class="container-fluid">
<!-- Bootstrap Carousel -->
<div id="slider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<!-- Slide 1 -->
<div class="carousel-item active">
<img src="./starter-code/img/slider-1.jpg" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<!-- Text to display over the image -->
<h1>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint illo nihil, modi reiciendis fuga,
exercitationem velit eveniet pariatur corrupti natus debitis fugit? Quas odio natus aut. Laudantium eius
quas a.</p>
<button href="#" class="read-more">read more</button>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<img src="./starter-code/img/slider-2.jpg" class="d-block w-100" alt="Slide 2">
<!-- Repeat the structure for other slides if needed -->
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<img src="./starter-code/img/slider-3.jpg" class="d-block w-100" alt="Slide 3">
<!-- Repeat the structure for other slides if needed -->
</div>
<!-- Slide 4 -->
<div class="carousel-item">
<img src="./starter-code/img/slider-4.jpg" class="d-block w-100" alt="Slide 4">
<!-- Repeat the structure for other slides if needed -->
</div>
</div>
<!-- Navigation Arrows -->
<a class="carousel-control-prev" href="#slider" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#slider" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>

<section class="description-service">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-md-4 justify-content-center">
<img src="./starter-code/img/basic_exclamation.svg" alt="">
<h2>Web design</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo est illo aperiam libero odit quis,
delectus similique doloribus, iure, numquam molestiae? Quibusdam incidunt totam beatae
blanditiis omnis earum amet est.
</p>
</div>
<div class="col-md-4">
<img src="./starter-code/img/basic_info.svg" alt="">
<h2>Web development</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo est illo aperiam libero odit quis,
delectus similique doloribus, iure, numquam molestiae? Quibusdam incidunt totam beatae
blanditiis omnis earum amet est.
</p>

</div>
<div class="col-md-4">
<img src="./starter-code/img/basic_question.svg" alt="">
<h2>Web development</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo est illo aperiam libero odit quis,
delectus similique doloribus, iure, numquam molestiae? Quibusdam incidunt totam beatae
blanditiis omnis earum amet est.
</p>

</div>

</div>
</div>
</section>
<section class="latest-projects">
<div class="container">
<h2 class="section-title">Latest Proyects</h2>
<h3>Lorem ipsum blabla</h3>
<hr>
<div class="row">
<div class="col-md-3">
<article>
<img src="./starter-code/img/project-1.jpg" alt="project-1">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
voluptate!
</p>
</article>
</div>
<div class="col-md-3">
<img src="./starter-code/img/project-2.jpg" alt="project-1">
<p>Omnis eveniet animi hic cumque quia quod,fuga amet tenetur dolore id ve
</p>
</div>
<div class="col-md-3">
<img src="./starter-code/img/project-3.jpg" alt="project-1">
<p> veritatis expedita alias enim accusantium consequatur
voluptate!
</p>
</div>
<div class="col-md-3">
<img src="./starter-code/img/project-4.jpg" alt="project-1">
<p> Omnis eveniet animi hic cumque quia quod,
fuga amet tenetur dolore id veniam facere iste
</p>
</div>
</div>
</div>
</section>
<section class="latest-artcicles">
<div class="container">
<h2 class="section-title">Latest articles</h2>
<h3>Latest articles from the blog blabla</h3>
<hr>
<div class="row">
<div class="col-md-3">
<article>
<img src="./starter-code/img/slider-1.jpg" alt="project-1">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quisquam sunt
</h4>
<h5>Posted on august 25 2023, by admin</h5>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt placeat ratione deleniti
rerum
nisi recusandae voluptate velit ipsam consequatur maiores quibusdam distinctio laboriosam
molestiae, debitis officia sint aspernatur corporis id.
</p>
</article>
</div>
<div class="col-md-3">
<article>
<img src="./starter-code/img/slider-2.jpg" alt="project-1">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quisquam sunt
</h4>
<h5>Posted on august 25 2023, by admin</h5>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, molestias id ipsum non
laudantium
cupiditate praesentium enim consequuntur ut, dolor facere neque debitis ipsam et suscipit
aliquam perspiciatis veritatis cumque.
</p>
</article>
</div>
<div class="col-md-3">
<article>
<img src="./starter-code/img/slider-3.jpg" alt="project-1">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quisquam sunt
</h4>
<h5>Posted on august 25 2023, by admin</h5>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, repudiandae nostrum dolor,
necessitatibus ipsa laboriosam aspernatur saepe provident consequuntur modi, maiores odio.
Sapiente magnam error mollitia a vero quasi debitis.
</p>
</article>
</div>
<div class="col-md-3">
<article>

<img src="./starter-code/img/slider-4.jpg" alt="project-1">
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quisquam sunt
</h4>
<h5>Posted on august 25 2023, by admin</h5>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos eum, eligendi aliquid soluta
odit
dolorum aliquam? Quaerat doloremque quo qui in dolorum rerum! Laudantium in soluta quos ex
omnis
molestiae.
</p>
</article>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-3">
<h3>Revera</h3>
<p class="white">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi sapiente delectus
officia
suscipit, aspernatur quae debitis deleniti rem quis. Vero quam rem eligendi fugiat quod,
voluptate obcaecati corrupti nam voluptatibus.</p>
</div>
<div class="col-md-3">
<h3>Meta</h3>
<p class="white">Log in</p>
<hr>
<p class="white">BlaBla</p>
<hr>
<p class="white">Comments</p>
<hr>
<p class="white">Wordpress</p>
<hr>
</div>
<div class="col-md-3">
<h3>Archieves</h3>
<p class="white">August 2023</p>
<hr>
</div>
<div class="col-md-3">
<h3>Recent posts</h3>
<p class="white"> Magni delectus nam porro quasi quae illo voluptatem minus. Vel accusamus iure,
maiores ex.</p>
<hr>
<p class="white">laboriosam reiciendis labore modi.</p>
<hr>
<p class="white"> Vel accusamus iure, maiores ex ipsam nemo ducimu</p>
<hr>
<p class="white"> Magni delectus nam porro quasi quae</p>
<hr>
</div>
</div>
</div>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>
102 changes: 102 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
h1{
font-weight: 800;
}

img {
width: 100%;
}

.menu-nav ul {
list-style: none;
}

.menu-nav ul li {
margin-right: 5px;
font-size: 10px;
width: 120%;
padding: 12px;
white-space: nowrap;
align-items: center;
}

.read-more {
background-color: transparent;
border: 2px solid white;
padding: 5px;
border-radius: 3px;
color: white;
text-transform: uppercase;
}

.description-service {
background-color: #ed554b;
color: white;
align-items: center;
padding: 100px 50px;
justify-content: center;
text-align: center;

}

.description-service img {
width: 30%;
color: white;
}

h2 {
font-size: 20px;
}

.section-title {
text-transform: uppercase;
font-weight: bold;
}

h3 {
color: gray;
text-transform: uppercase;
font-size: 14px;
}

.latest-projects {
padding-top: 30px;

}

p {
font-size: 13px;
}

h4 {
font-size: 14px;
font-weight: bold;
}

h5 {
text-transform: uppercase;
font-size: 12px;
margin-bottom: 3px;
}

.latest-articles {
padding-top: 25px;
margin-bottom: 3px;
}

img {
margin-bottom: 10px;
}

footer {
background-color: #3b3b3b;
border-top: 5px solid #ed554b;
padding-top: 20px;
}

.white {
color: rgb(100, 100, 100);
}

hr {
color: rgb(109, 109, 109);
}