Skip to content

A
Angular_travel_site
Commit 79e2214c authored by Kyle Muldoon's avatar Kyle Muldoon
Browse files
Options

changed the looks

parent e89550f7
Show whitespace changes
Inline Side-by-side
Showing with 254 additions and 53 deletions
src/app/app.component.html
View file @ 79e2214c
......@@ -3,9 +3,7 @@
<div class="content" role="main">
<div class="dynamic-container col-md-10 col-xl-10">
<router-outlet>
</router-outlet>
<router-outlet></router-outlet>
</div>
</div>
......
src/app/app.module.ts
View file @ 79e2214c
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EnglandComponent } from './england/england/england.component';
......@@ -10,6 +8,7 @@ import { FooterComponent } from './footer/footer/footer.component';
import { FranceComponent } from './france/france/france.component';
import { SpainComponent } from './spain/spain/spain.component';
import { GreeceComponent } from './greece/greece/greece.component';
import { NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [
......
src/app/england/england/england.component.css
View file @ 79e2214c
.img{
height: 350px;
width: 350px;
padding-left: 5px;
}
.car-container {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
src/app/england/england/england.component.html
View file @ 79e2214c
<p>england works!</p>
<div class='imgContainer' >
<img class='img' src='/assets/images/england/england-bridge.jpg' />
<img class='img' src='/assets/images/england/england-parliament.jpg' />
<img class='img' src='/assets/images/england/england-stonehedge.jpg' />
<h1>
England
</h1>
<p class="description">
England is a country that is part of the United Kingdom. It shares land borders with
Wales to its west and Scotland to its north. The Irish Sea lies northwest of England
and the Celtic Sea to the southwest. England is separated from continental Europe
by the North Sea to the east and the English Channel to the south. The country
covers five-eighths of the island of Great Britain, which lies in the North Atlantic,
and includes over 100 smaller islands, such as the Isles of Scilly and the Isle
of Wight.
</p>
<div class="car-container">
<div class='col-6 greece-car'>
<ngb-carousel>
<ng-template ngbSlide>
<img class= "img"
src="/assets/images/england/england-bridge.jpg" >
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Eiffel Tower</h3>
</div> -->
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/england/england-parliament.jpg">
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Town</h3>
</div> -->
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/england/england-stonehedge.jpg">
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Cafe La Bossue</h3>
</div> -->
</ng-template>
</ngb-carousel>
</div>
</div>
\ No newline at end of file
src/app/france/france/france.component.css
View file @ 79e2214c
.img{
height: 350px;
width: 350px;
padding-left: 5px;
}
.car-container {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
\ No newline at end of file
src/app/france/france/france.component.html
View file @ 79e2214c
<p>france works!</p>
<div class='imgContainer'>
<img class='img' src='/assets/images/france/france-tower.jpg' />
<img class='img' src='/assets/images/france/france-town.jpg' />
<img class='img' src='/assets/images/france/france-cafe.jpg' />
</div>
<h1>
France
</h1>
<p>
France (French: [fʁɑ̃s] Listen), officially the French Republic (French: République française),[1] is
a country primarily located in Western Europe, consisting of metropolitan France and several overseas
regions and territories.[XIII] The metropolitan area of France extends from the Rhine to the Atlantic
Ocean and from the Mediterranean Sea to the English Channel and the North Sea. The overseas territories
include French Guiana in South America and several islands in the Atlantic, Pacific and Indian Oceans.
France borders Belgium, Luxembourg and Germany to the northeast, Switzerland, Monaco and Italy to the
east, Andorra and Spain to the south, as well as the Netherlands, Suriname and Brazil in the Americas.
The country's eighteen integral regions (five of which are situated overseas) span a combined area of
643,801 km2 (248,573 sq mi) and a total population of 67.4 million (as of March 2021).[12] France is
a unitary semi-presidential republic with its capital in Paris, the country's largest city and main
cultural and commercial centre. Other major urban areas include Lyon, Marseille, Toulouse, Bordeaux,
Lille and Nice. France, including its overseas territories, has the most time zones of any country,
with a total of twelve.
</p>
<div class="car-container">
<div class='col-6 france-car'>
<ngb-carousel>
<ng-template ngbSlide>
<img class= "img"
src="/assets/images/france/france-tower.jpg" >
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Eiffel Tower</h3>
</div> -->
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/france/france-town.jpg">
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Town</h3>
</div> -->
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/france/france-cafe.jpg">
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Cafe La Bossue</h3>
</div> -->
</ng-template>
</ngb-carousel>
</div>
</div>
\ No newline at end of file
src/app/france/france/france.component.ts
View file @ 79e2214c
import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-france',
......@@ -7,7 +8,12 @@ import { Component, OnInit } from '@angular/core';
})
export class FranceComponent implements OnInit {
constructor() { }
constructor(config: NgbCarouselConfig) {
config.interval = 2000;
config.wrap = true;
config.keyboard = false;
config.pauseOnHover = false;
}
ngOnInit(): void {
}
......
src/app/greece/greece/greece.component.css
View file @ 79e2214c
.img{
height: 350px;
width: 350px;
padding-left: 5px;
}
.car-container {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
\ No newline at end of file
src/app/greece/greece/greece.component.html
View file @ 79e2214c
<p>greece works!</p>
<div class='imgContainer' >
<img class='img' src='/assets/images/greece/greece-beach.jpg' />
<img class='img' src='/assets/images/greece/greece-santorini.jpg' />
<img class='img' src='/assets/images/greece/greece-steps.jpg' />
</div>
<h1>
Greece
</h1>
<p>
Greece (Greek: Ελλάδα, Ellada, [eˈlaða]), officially the Hellenic Republic,[12][b] is a country
located in Southeast Europe. Its population is approximately 10.7 million as of 2018; Athens is
its largest and capital city, followed by Thessaloniki. Situated on the southern tip of the Balkans,
Greece is located at the crossroads of Europe, Asia, and Africa. It shares land borders with Albania
to the northwest, North Macedonia and Bulgaria to the north, and Turkey to the northeast. The
Aegean Sea lies to the east of the mainland, the Ionian Sea to the west, the Cretan Sea and the
Mediterranean Sea to the south. Greece has the longest coastline on the Mediterranean Basin and
the 11th longest coastline in the world at 13,676 km (8,498 mi) in length, featuring many islands,
of which 227 are inhabited. Eighty percent of Greece is mountainous, with Mount Olympus being the
highest peak at 2,918 metres (9,573 ft). The country consists of nine traditional geographic regions:
Macedonia, Central Greece, the Peloponnese, Thessaly, Epirus, the Aegean Islands (including the
Dodecanese and Cyclades), Thrace, Crete, and the Ionian Islands.
</p>
<div class="car-container">
<div class='col-6 greece-car'>
<ngb-carousel>
<ng-template ngbSlide>
<img class= "img"
src="/assets/images/greece/greece-beach.jpg" >
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Eiffel Tower</h3>
</div> -->
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/greece/greece-santorini.jpg">
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Town</h3>
</div> -->
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/greece/greece-steps.jpg">
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Cafe La Bossue</h3>
</div> -->
</ng-template>
</ngb-carousel>
</div>
</div>
\ No newline at end of file
src/app/header/header/header.component.css
View file @ 79e2214c
.header{
background: #6fb7f1;
height: 4em;
position: fixed;
top: 0;
right: 0;
left: 0;
display: flex;
align-items: center;
justify-content: space-between;
/* padding: 35px; */
/* position: fixed; */
/* top: 0; */
/* right: 0; */
/* left: 0; */
}
h3{
text-align: center;
}
.btn{
margin-top: 30px;
margin-left: 10px
.button {
/* height: 80%; */
border-radius: 50px;
}
.btnMenu{
margin-top:20px;
margin-left: 20px;
display:inline-block;
width: 50%;
height: 45px;
display: flex;
justify-content: space-around;
}
.account{
/* .account{
position:absolute;
right:10px;
margin-top: 30px;
}
\ No newline at end of file
} */
\ No newline at end of file
src/app/spain/spain/spain.component.css
View file @ 79e2214c
.img{
height: 350px;
width: 350px;
padding-left: 5px;
}
.car-container {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
\ No newline at end of file
src/app/spain/spain/spain.component.html
View file @ 79e2214c
<p>spain works!</p>
<div class='imgContainer' >
<img class='img' src='/assets/images/spain/spain-barcelona.jpg' />
<img class='img' src='/assets/images/spain/spain-cathedral.jpg' />
<img class='img' src='/assets/images/spain/spain-dance.jpg' />
</div>
<h1>
Spain
</h1>
<p>
Spain (Spanish: España, [esˈpaɲa] (About this soundlisten)), formally the Kingdom of
Spain[13] (Spanish: Reino de España),[a][b] is a country in Southwestern Europe with
some pockets of territory across the Strait of Gibraltar and the Atlantic Ocean.[13]
Its continental European territory is situated on the Iberian Peninsula. Its territory
also includes two archipelagos: the Canary Islands off the coast of North Africa, and
the Balearic Islands in the Mediterranean Sea. The African exclaves of Ceuta, Melilla,
and Peñón de Vélez de la Gomera[14] make Spain the only European country to have a
physical border with an African country (Morocco).[h] Several small islands in the Alboran
Sea are also part of Spanish territory. The country's mainland is bordered to the south
and east by the Mediterranean Sea; to the north and northeast by France, Andorra, and
the Bay of Biscay; and to the west and northwest by Portugal and the Atlantic Ocean
respectively.
</p>
<div class="car-container">
<div class='col-6 greece-car'>
<ngb-carousel>
<ng-template ngbSlide>
<img class= "img"
src="/assets/images/spain/spain-barcelona.jpg" >
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Eiffel Tower</h3>
</div> -->
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/spain/spain-cathedral.jpg">
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Town</h3>
</div> -->
</ng-template>
<ng-template ngbSlide>
<img class= "img" src="/assets/images/spain/spain-dance.jpg">
<!-- <div class="carousel-caption">
<h3 style="color: yellow">Cafe La Bossue</h3>
</div> -->
</ng-template>
</ngb-carousel>
</div>
</div>
\ No newline at end of file
src/index.html
View file @ 79e2214c
......@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
......
src/polyfills.ts
View file @ 79e2214c
/***************************************************************************************************
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
*/
import '@angular/localize/init';
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
......
src/styles.css
View file @ 79e2214c
/* You can add global styles to this file, and also import other style files */
* {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.content {
height: 100vh;
/* background-color: gray; */
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment