Skip to content

Layla - Edges - Trek #31

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
lbristol88 wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Layla - Edges - Trek #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d31430c
setting up basic template and wave 1
lbristol88 Nov 27, 2018
69d407f
user can click on a trip and view details
lbristol88 Nov 27, 2018
d06fff4
adding a new trip to the list
lbristol88 Nov 27, 2018
d18e165
added ability to make a reservation on a trip
lbristol88 Nov 27, 2018
14cd423
moved creating reservation under specific trip
lbristol88 Nov 27, 2018
3dc6d2e
added minior css changes, add fixed reservation bug
lbristol88 Nov 27, 2018
8d686a5
played with some css effects
lbristol88 Nov 27, 2018
d1e3a1e
some css styling changes
lbristol88 Nov 27, 2018
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
130 changes: 130 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
header {
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
}

body {
color: #004C82;
font-family: sans-serif;
margin: 1em;
background-position: center;
background: url("http://wallpaperia.com/wp-content/uploads/2015/05/hawaii-desktop-background-496214.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

main {
display: grid;
grid-template-columns: 1fr 1fr;
}

section.trip ul{
list-style-type: none;
}

form {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 0px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #00d5ff;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em

}

button {
width: 100%;
background-color: #00d5ff;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1em
}

section {
border: 1px solid #ccc;
padding: 1em;
margin: 1em;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.9;
filter: alpha(opacity=60);
}

h1.title {
font-family: 'Rosario', sans-serif;
background-color: transparent;
width: inherit;
font-size: 7em;
text-decoration: none;
font-weight: bold;
}

header h4 {
color: white;
font-size: 20px;
text-shadow: 2px 1px 1px #555;
font-style: italic;
}

a:link {
color: white;
text-decoration: none;
text-shadow: 2px 1px 1px #555;
}

a:visited {
color: white;
text-decoration: none;
}

a:hover {
font-weight: bold;
color: #00ffff;
}

a.effect-shine:hover {
-webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
-webkit-mask-size: 200%;
animation: shine 2s infinite;
}

@-webkit-keyframes shine {
from {
-webkit-mask-position: 150%;
}

to {
-webkit-mask-position: -50%;
}
}
69 changes: 69 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>T R E K </title>
<link href="https://fonts.googleapis.com/css?family=Norican|Rosario:700i" rel="stylesheet">


<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="index.js"></script>

<link rel="stylesheet" href="index.css">

</head>
<header>
<h1 class="title"><a href="./index.html" class="effect-shine">T R E K </a></h1>
<h4>Oh the places you'll go...</h4>
</header>
<body>
<section id="status-message"></section>

<main>
<section class="current-trips">
<h1>Trip Log</h1>
<button id="load">Get trips!</button>
<ul id="trip-list"></ul>
</section>

<section class="trip">
<ul id="trip-details"></ul>
<form id="new-reservation"></form>
</section>


<section class="new-trip">
<h1>Create A New Trip</h1>
<form id="trip-form">
<div><strong>
<label for="name">Name: </label>
<input type="text" name="name" />
</div>
<div>
<label for="continent">Continent: </label>
<input type="text" name="continent" />
</div>
<div>
<label for="category">Category: </label>
<input type="text" name="category" />
</div>
<div>
<label for="weeks">Weeks: </label>
<input type="text" name="weeks" />
</div>
<div>
<label for="cost">Cost: </label>
<input type="text" name="cost" />
</div>
<div>
<label for="about">About: </label>
<input type="text" name="about" />
</div></strong>
<input type="submit" name="create-trip" value="Add trip" />
</form>
</section>
</main>

</body>
</html>
Loading