Skip to content

Commit

Permalink
copied the final version of the website from excercise 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ania-chan
Ania-chan committed Feb 24, 2019
1 parent 24c1e47 commit 87598ef
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 114 deletions.
0 img/meSmall.jpg → img/me-small.jpg
View file
File renamed without changes
228 changes: 114 additions & 114 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,132 +18,132 @@
<title>Ania Nakayama- my website</title>
</head>
<body data-spy="scroll" data-target="#mainNavbar">
<div id="mainNavbar" class="navbar navbar-expand-md fixed-top navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#random">Some random facts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photos">Photos</a>
</li>
</ul>
</nav>
</div>

<header>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Hi, I'm Ania! Nice to meet you <i class="fas fa-cat"></i></h1>
<div id="mainNavbar" class="navbar navbar-expand-md fixed-top navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<nav class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#random">Some random facts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#photos">Photos</a>
</li>
</ul>
</nav>
</div>

<header>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Hi, I'm Ania! Nice to meet you <i class="fas fa-cat"></i></h1>
</div>
</div>
</header>

<main class="container">

<section id="about" class="container-fluid mt-2 pb-3">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 col-lg-4">
<img class="img-fluid" src="img/me.jpg" alt="photo of my standing in a rice field in Vietnam">
</div>
<div class="col-sm-12 col-md-8 col-lg-8">
<h2 class="pb-4">About me</h2>
<p>I was born in Gdansk, a city in Poland just nearby the Baltic sea, but I’ve been living almost one-third of my life in Japan now. <br>
In Poland I was studying Japanese language and culture and on my third year I came to Tokyo for 1 year exchange program. After that I stayed here and did my master thesis about westernization of japanese food in the 70s (unfortunately it's much more boring than it sounds). <br>
Last 5 years I was working as Account Manager but since I started learning how to code I’m aiming to change my career to full-stack developer.
</p>
</div>
</div>
</header>
<main class="container">
</section>

<hr />

<section id="about" class="container-fluid mt-2 pb-3">
<section id="random" class="container-fluid mt-5 pb-3">
<div class="row align-items-center">
<div class="col-sm-12 col-md-4 col-lg-4">
<img class="img-fluid" src="img/me.jpg" alt="">
</div>
<div class="col-sm-12 col-md-8 col-lg-8">
<h2 class="pb-3">About me</h2>
<p>I was born in Gdansk, a city in Poland just nearby the Baltic sea, but I’ve been living almost one-third of my life in Japan now. <br>
In Poland I was studying Japanese language and culture and on my third year I came to Tokyo for 1 year exchange program. After that I stayed here and did my master thesis about westernization of japanese food in the 70s (unfortunately it's much more boring than it sounds). <br>
Last 5 years I was working as Account Manager but since I started learning how to code I’m aiming to change my career to full-stack developer.
</p>
<h2 class="pb-4">Some random facts</h2>
<ul class="pl-0">
<li><i class="far fa-star"></i>My parents bought their first PC when I was very little, so I played my first games on DOS.</li>
<br>
<li><i class="far fa-star"></i>I love cooking and have a LOT of cookbooks at home.</li>
<br>
<li><i class="far fa-star"></i>I really like strange shoes - among others I own a pair of glitter Darth Vader shoes.</li>
<br>
<li><i class="far fa-star"></i>My dream is to visit all asian countries. I went to 10 countries already.</li>
<br>
<li><i class="far fa-star"></i>I don’t like wearing socks and if possible I walk barefoot.</li>
<br>
<li><i class="far fa-star"></i>I’m a hard-core Tomb Raider series geek since I was 11.</li>
<br>
<li><i class="far fa-star"></i>I ate rat meat once in Vietnam and it was quite delicious.</li>
<br>
<li><i class="far fa-star"></i>I love reading! The thicker the book the better. Recently I was obsessed with Karl Ove Knausgårds “My struggle” book series. </li>
</ul>
</div>
</div>
</section>

<hr />

<section id="random" class="container-fluid mt-5 pb-3">
<div class="row align-items-center">
<div class="col-sm-12 col-md-8 col-lg-8">
<h2 class="pb-3">Some random facts</h2>
<ul>
<li><i class="far fa-star"></i>My parents bought their first PC when I was very little, so I played my first games on DOS.</li>
<br>
<li><i class="far fa-star"></i>I love cooking and have a LOT of cookbooks at home.</li>
<br>
<li><i class="far fa-star"></i>I really like strange shoues- among others I own a pair of glitter Darth Vader shoes.</li>
<br>
<li><i class="far fa-star"></i>My dream is to visit all asian countries. I went to 10 countries already.</li>
<br>
<li><i class="far fa-star"></i>I don’t like wearing socks and if possible I walk barefoot.</li>
<br>
<li><i class="far fa-star"></i>I’m a hard-core Tomb Raider series geek since I was 11.</li>
<br>
<li><i class="far fa-star"></i>I ate rat meat once in Vietnam and it was quite delicious.</li>
<br>
<li><i class="far fa-star"></i>I love reading! The thicker the book the better. Recently I was obsessed with Karl Ove Knausgårds “My struggle” book series. </li>
</ul>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<img class="img-fluid" src="img/meSmall.jpg" alt="">
</div>
</div>
</section>
<div class="col-sm-12 col-md-4 col-lg-4">
<img class="img-fluid" src="img/me-small.jpg" alt="photo of me sitting in front of PC">
</div>
</div>
</section>

<hr />
<hr />

<section id="photos" class="container-fluid mt-5">
<h2 class="pb-3">Photos from my travels</h2>
<div class="row align-items-center justify-content-center">
<div id="carouselExampleControls" class="col-md-9 carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/tibet-4.jpg" class="img-fluid d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/nepal-2.jpg" class="img-fluid d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/tibet-1.jpg" class="img-fluid d-block w-100" alt="...">
</div>
<section id="photos" class="container-fluid mt-5">
<h2 class="pb-4">Photos from my travels</h2>
<div class="row align-items-center justify-content-center">
<div id="carouselExampleControls" class="col-md-9 carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/tibet-4.jpg" class="img-fluid d-block w-100" alt="Photo of mountains in Lhasa, Tibet">
</div>
<div class="carousel-item">
<img src="img/nepal-2.jpg" class="img-fluid d-block w-100" alt="photo of boates on a late in Pokhara, Nepal">
</div>
<div class="carousel-item">
<img src="img/tibet-1.jpg" class="img-fluid d-block w-100" alt="Photo of painted rocks in Lhasa, Tibet">
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

<div class="row align-items-center">
<div class="col-sm-12 col-md-4 col-lg-4 py-3">
<img class="images img-fluid" src="img/tibet-3.jpg" alt="">
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="col-sm-12 col-md-4 col-lg-4 py-3">
<img class="images img-fluid" src="img/nepal-4.jpg" alt="">
</div>
<div class="col-sm-12 col-md-4 col-lg-4 py-3">
<img class="images img-fluid" src="img/nepal-3.jpg" alt="">
</div>
</div>
</section>

</main>

<footer id="social" class="bg-dark mt-3">
<div class="container-fluid row align-items-center justify-content-center p-0 m-0">
<ul class="list-inline m-0">
<li class="p-3"><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
<li class="p-3"><a href="https://github.com/Ania-chan" target="_blank"><i class="fab fa-github-square"></i></a></li>
<li class="p-3"><a href="https://twitter.com/Aniachan4" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
</ul>
</div>
</footer>

<div class="row align-items-center">
<div class="col-sm-12 col-md-4 col-lg-4 py-3">
<img class="images img-fluid" src="img/tibet-3.jpg" alt="Photo of mt. Everest">
</div>
<div class="col-sm-12 col-md-4 col-lg-4 py-3">
<img class="images img-fluid" src="img/nepal-4.jpg" alt="Photo of a building in Kathmandu">
</div>
<div class="col-sm-12 col-md-4 col-lg-4 py-3">
<img class="images img-fluid" src="img/nepal-3.jpg" alt="Photo of one of the temples in Kathmandu">
</div>
</div>
</section>

</main>

<footer id="social" class="bg-dark mt-3">
<div class="container-fluid row align-items-center justify-content-center p-0 m-0">
<ul class="list-inline m-0">
<li class="p-3"><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
<li class="p-3"><a href="https://github.com/Ania-chan" target="_blank"><i class="fab fa-github-square"></i></a></li>
<li class="p-3"><a href="https://twitter.com/Aniachan4" target="_blank"><i class="fab fa-twitter-square"></i></a></li>
</ul>
</div>
</footer>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
Expand Down

0 comments on commit 87598ef

Please sign in to comment.