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

Landing Page Colaborativa #588

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Landing Page Colaborativa #588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3bbd5a9
Landing Page Colaborativa
LarissonRivero Jul 30, 2023
d7da1aa
Index Modificado
LarissonRivero Jul 31, 2023
bf71072
Modificacion
LarissonRivero Jul 31, 2023
1d47848
Culminacion del Proyecto
LarissonRivero Aug 1, 2023
322ed4d
Uso de Templates
LarissonRivero Aug 1, 2023
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
131 changes: 98 additions & 33 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,108 @@
<!DOCTYPE html>
<html>
<head>
<title>Choose a website</title>
<title>Proyecto Colaborativo Maximiliano-Larisson</title>
<link rel="stylesheet" href="./website/assets/css/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="mb-5">GIT & Bootstrap Collaborative Project</h1>
<div class="row">
<div class="col-sm-4 bg-dark text-center">
<a href="./website/designs/thumb.jpg"><img style="max-height: 400px;" class="img-responsive" src="website/designs/thumb.jpg"></img></a>
</div>
<div class="col-sm">
<h2>One Page Wonder - Start Bootstrap Template</h2>
<a class="btn btn-primary" href="./website/">Live Version</a>
<a class="btn btn-warning" href="./website/designs/thumb.jpg">How it Should Look</a>
<a class="btn btn-danger" href="./website/designs/guide.jpg">See the Guide</a>

<div>
<h2>Tips:</h2>
<p>Copy and tweak components from <a href="https://getbootstrap.com/" target="_blank" >getbootstrap.com</a>.</p>
<p>If you are looking at an example from <a href="https://getbootstrap.com/docs/5.1/examples/" target="_blank">https://getbootstrap.com/docs/5.1/examples/</a>, you can use the inspector (right mouse click to open this panel up) and then select the section you want in the "Elements" tab. Then go to copy, and copy element to quickly add to your project.</p>
<p>To push changes to the website, remember this sequence:</p>
<ul>
<li>git add .</li>
<li>git commit -m "what you modified"</li>
<li>git push</li>
</ul>
<p>To see changes from teammates:</p>
<ul>
<li>git pull</li>
</ul>
<p>To customize elements, use the style.css file located in assets/css.</p>
</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Git y Bootsrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Portafolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Compra</a>
</li>
</ul>
</div>
</div>

</div>

</nav>
<div class="Container1">
<div class="imgBG">
<img src="./website/assets/img/bg.jpg" width="100%" alt="Imagen Principal">
</div>
<div class="text1">
<p>One Page Wonder</p>
<p>Will Knock Your Socks Off</p>
</div>
</div>
<div class="Proyect">
<div class="Proyect1">
<div class="text2">
<p class="text3"><b>The First Heading</b> <span> <b>Will Catch Your Eye</b></span></p>
<p class="text4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet consectetur recusandae accusamus, sint reprehenderit, aliquid minima quam impedit deleniti corrupti quidem repudiandae inventore aliquam, dolore repellendus nostrum quisquam possimus sed?</p>
</div>
<img class="img" src="../exercise-collaborative-html-website/website/assets/img/1.jpg" width="60%" alt="">
</div>
<div class="Proyect2">
<img class="img" src="../exercise-collaborative-html-website/website/assets/img/2.jpg" width="60%" alt="">
<div class="text5">
<p class="text6"><b>The Second Heading</b> <span> <b>Is Prety Cool Too Catch Your Eye</b></span></p>
<p class="text7">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet consectetur recusandae accusamus, sint reprehenderit, aliquid minima quam impedit deleniti corrupti quidem repudiandae inventore aliquam, dolore repellendus nostrum quisquam possimus sed?</p>
</div>
</div>
</div>
<div class="cardHeader">
<div class="card1">
<img src="../exercise-collaborative-html-website/website/assets/img/big-project-image.png" class="card-img-top" alt="...">
<div class="card-title">
<p>Project Name</p>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card1">
<img src="../exercise-collaborative-html-website/website/assets/img/big-project-image.png" class="card-img-top" alt="...">
<div class="card-title">
<p>Project Name</p>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card1">
<img src="../exercise-collaborative-html-website/website/assets/img/big-project-image.png" class="card-img-top" alt="...">
<div class="card-title">
<p>Project Name</p>
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="footer">
<div class="contact">
<h3><b>Contact</b></h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam est, necessitatibus facilis ipsa perspiciatis officiis! Dolorum at corporis rerum labore ullam quis, nisi soluta ex cupiditate totam maxime ipsam omnis.</p>
</div>
<div class="form">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address:</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button type="button" class="btn btn-primary text-center">Sutmit</button>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>
Expand Down
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

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

96 changes: 95 additions & 1 deletion website/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,97 @@
body{
background: #BDBDBD;
background: #ffffff;
}


.Container1{
position: relative;
display: flex;
justify-content: center;
align-items: center;

}

.imgBG{
background-color: aqua;
width: max-content;
}

.text1{
font-size: 90px;
position: absolute;
top: 100px;
text-align: center;
}

.text1 > p{
background-color: white;
padding: 0px;
}

.Proyect1, .Proyect2{
display: flex;
padding: 20px 75px;
}

.img{
border-radius: 50%;
}

.text3, .text6{
font-size: xx-large;
}

.text3 > span{
color: #BDBDBD;
}

.text2{
margin-right: 30px;
}
.text5{
margin-left: 30px;
}

.text4, .text7{
font-size: larger;
text-align: justify;
}

.text6 > span{
color: #BDBDBD;
}

.cardHeader{
display: flex;
margin: 0px 25px;
}

.card1{
margin: 20px;
}

.card-title{
font-size: 30px;
font-weight:bold;
color: rgb(107, 107, 233);

}

.card-body{
padding: 0px !important;
}

.container_contact{
margin: 10px;
padding: 30px;
margin-bottom: 10px;

}

.form{
background-color: #9195bd;
border: solid 1px black;
padding: 5px;
width: 60%;
margin-left: 20em;
}
10 changes: 3 additions & 7 deletions website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>One Page Wonder - Start Bootstrap Template</title>
<title>Trabajo Colaborativo</title>
<!-- Required meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Custom CSS -->
<link href="assets/css/style.css?v0.1" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>

<body>

<!-- Navigation -->
<div class="container-fluid">
<span require-file="./templates/navbar.html"></span>
Expand All @@ -25,6 +23,7 @@
<!-- Page Content -->
<div class="container-fluid">
<!-- First Featurette -->
<span require-file="./templates/navbar.html"></span>
<span require-file="./templates/first_heading.html"></span>
<span require-file="./templates/services.html"></span>
<span require-file="./templates/portfolio.html"></span>
Expand All @@ -35,11 +34,8 @@
<script type="text/javascript"
src="https://cdn.rawgit.com/alesanchezr/html-template-engine/master/dist/html-template-engine.js?autoload"></script>
<script type="text/javascript" src="assets/js/fix.js"></script>


<!-- Optional JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>
21 changes: 19 additions & 2 deletions website/templates/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,19 @@
<!-- your html code here -->
<p>Hello, I'm contact.html</p>
<div class="container_contact">
<div class="contact">
<h3><b>Contact</b></h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quisquam est, necessitatibus facilis ipsa perspiciatis officiis! Dolorum at corporis rerum labore ullam quis, nisi soluta ex cupiditate totam maxime ipsam omnis.</p>
</div>
<div class="form">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Email address:</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button type="button" class="btn btn-primary text-center">Sutmit</button>
</div>
</div>
</div>
9 changes: 7 additions & 2 deletions website/templates/first_heading.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,7 @@
<!-- your html code here -->
<p>Hello, I'm the first_heading.html</p>
<div class="Proyect1">
<div class="text2">
<p class="text3"><b>The First Heading</b> <span> <b>Will Catch Your Eye</b></span></p>
<p class="text4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet consectetur recusandae accusamus, sint reprehenderit, aliquid minima quam impedit deleniti corrupti quidem repudiandae inventore aliquam, dolore repellendus nostrum quisquam possimus sed?</p>
</div>
<img class="img" src="/website/assets/img/1.jpg" width="60%" alt="">
</div>
2 changes: 1 addition & 1 deletion website/templates/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright &copy; Your Website Name 2021</p>
<p>Copyright &copy; Your Website Name 2023</p>
</div>
</div>
</footer>
26 changes: 24 additions & 2 deletions website/templates/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,24 @@
<!-- your html code here -->
<p>Hello, I'm the navbar.html</p>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Git y Bootsrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Service</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Portafolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Compra</a>
</li>
</ul>
</div>
</div>
</nav>
Loading