-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add new image, add more complex bootstrap layout to create hero image…
…, intro and side bar. Delete nav bar.
- Loading branch information
1 parent
f031dd4
commit 966910b
Showing
6 changed files
with
85 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,17 @@ | ||
| # In-Japan | ||
|
|
||
| Welcome to my Japam Blog! | ||
| Click here to view the live site: | ||
|
|
||
| ## Click here to view the live site: https://madeleinewalder.github.io/In-Japan/ | ||
|
|
||
| ## Local Hosting | ||
|
|
||
| python -m http.server | ||
| Enter in terminal: ```python -m http.server``` | ||
|
|
||
| <!--Hero image--> | ||
| <div class="hero justify-content-center"> | ||
| <!--Contrast overlay with title--> | ||
| <div class="colour-overlay d-flex justify-content-center align-items-center"> | ||
| <h1>Japan: Small Things Big Difference</h1> | ||
| </div> | ||
| </div> |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,41 @@ | ||
| /* Custom CSS for styling */ | ||
| /* You can style your photos here */ | ||
| .card-img-top { | ||
| max-height: 300px; | ||
| object-fit: cover; | ||
|
|
||
| /* Main image */ | ||
| .hero { | ||
| background-image: url(/images/cherry-blossom1.JPG); | ||
| background-size: cover; | ||
| min-height: 60vh; | ||
| position: relative; | ||
| color: #ffffff; | ||
| text-shadow: 2px 2px 2px rgba(0, 0, 0, .4); | ||
| } | ||
|
|
||
| h1 { | ||
| font-size: 4rem; | ||
| } | ||
|
|
||
| /* Div on top of image that contains header and caption text */ | ||
| .overlay { | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| /*background-color: rgba(0, 0, 0, .1);*/ | ||
| } | ||
|
|
||
| /* To make the header and caption stand out from the hero image*/ | ||
| .contrast-overlay { | ||
| background-color: rgba(0, 0, 0, .6); | ||
| } | ||
|
|
||
| body { | ||
| background-color: #dedede; | ||
| background-color: whitesmoke; | ||
| } | ||
|
|
||
| .footer { | ||
| position: fixed; | ||
| bottom: 0; | ||
| width: 100%; | ||
| } | ||
| } | ||
|
|
||
| /* Don't forget media queries starting with hero image https://youtu.be/W87XNjvXiWw?si=y6wQXwiq8vla04F8 */ | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,50 +9,61 @@ | |
| </head> | ||
| <body> | ||
|
|
||
|
|
||
|
|
||
| <div class="container mt-4"> | ||
| <div class="row"> | ||
| <div class="col-md-10"> | ||
| <h1>In Japan: Small Things Big Difference</h1> | ||
| <p>7th April 2023</p> | ||
| <div class="card mb-3"> | ||
| <img src="cherry-blossom.JPG" class="card-img-top" alt="cherry blossom in the sun"> | ||
| <div class="card-body"> | ||
| <h5 class="card-title">Introduction</h5> | ||
| <p class="card-text"> | ||
| My first trip to Japan was incredible. During a roughly two week stay in Japan I was mesmerized by how different it was compared to back home in Europe. | ||
| It was such a cool experience that I never wanted to forget. In an attempt to explain in words what Japan is really like I ended up writing a list of little | ||
| things that are different over there. This list grew a lot larger than I was expecting so now it has become a blog I guess. (Also it's an excuse to use some | ||
| of the photos!) | ||
| </p> | ||
| </div> | ||
| <!--Hero image--> | ||
| <div class="hero justify-content-center"> | ||
| <!--Overlay with title--> | ||
| <div class="overlay d-flex justify-content-center align-items-center"> | ||
| <div class="col-md-1"></div> | ||
| <div class="col-md-2 contrast-overlay"> | ||
| <!--Heading--> | ||
| <div class="row-1"> | ||
| <h1>In Japan:</h1> | ||
| </div> | ||
| <!--Caption--> | ||
| <div class="row-2"> | ||
| <h3>Small Things, Big Differences</h3> | ||
| </div> | ||
| <!-- More blog posts can be added here --> | ||
| </div> | ||
| <div class="col-md-2"> | ||
| <h3>About Me</h3> | ||
| <div class="col-md-9"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!--Introduction--> | ||
| <div class="container-fluid"> | ||
| <div class="row justify-content-center"> | ||
| <div class="col-md-4"></div> | ||
| <div class="col-md-4 mt-5"> | ||
| <h3>Introduction</h3> | ||
| <p> | ||
| My first trip to Japan was incredible. During a roughly two week stay in Japan I was mesmerized by how different it was compared to back home in Europe. | ||
| It was such a cool experience that I never wanted to forget. In an attempt to explain in words what Japan is really like I ended up writing a list of little | ||
| things that are different over there. This list grew a lot larger than I was expecting so now it has become a blog I guess! And a great use for our photos too. | ||
| </p> | ||
| </div> | ||
| <div class="col-md-1"></div> | ||
| <div class="col-md-2 mt-5"> | ||
| <h3>Hi there!</h3> | ||
| <p> | ||
| Hi! I'm a web developer with a passion for frontend design. | ||
| I actually made this website from scratch for my blog! | ||
| I love working projects like this in my free time. | ||
| I'm a junior web developer and travel enthusiast. | ||
| I made this website for my blog and it was really fun to | ||
| combine my love for frontend design and travelling. | ||
| </p> | ||
| <p> | ||
| Like what you see? I'm open to work! Checkout my <a href="https://madeleinewalder.github.io/portfolio/" target="_blank">Portfolio</a> website and <a href="https://www.linkedin.com/in/madeleine-walder/" target="_blank">LinkedIn</a> profile. | ||
| </p> | ||
| <h3>I'm open to work!</h3> | ||
| <ul class="list-unstyled"> | ||
| <li>[email protected]</li> | ||
| <li><a href="https://www.linkedin.com/in/madeleine-walder/" target="_blank">LinkedIn</a></li> | ||
| <li><a href="https://madeleinewalder.github.io/portfolio/" target="_blank">Portfolio</a></li> | ||
| </ul> | ||
| </div> | ||
| <div class="col-md-1"></div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!--Footer--> | ||
| <footer class="footer bg-dark text-white text-center py-3"> | ||
| <div class="container"> | ||
| <div class="container-fluid text-center"> | ||
| <p>© 2024 In Japan: Small Things Big Difference</p> | ||
| </div> | ||
| </footer> | ||
|
|
||
| </footer> | ||
|
|
||
| <!--Bootstrap--> | ||
| <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> | ||
|
|
||