diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6b665aa --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index e69de29..0000000 diff --git a/images/background.jpg b/images/background.jpg new file mode 100644 index 0000000..326f9c5 Binary files /dev/null and b/images/background.jpg differ diff --git a/images/one.jpeg b/images/one.jpeg new file mode 100644 index 0000000..6198329 Binary files /dev/null and b/images/one.jpeg differ diff --git a/images/one.webp b/images/one.webp new file mode 100644 index 0000000..5f2f745 Binary files /dev/null and b/images/one.webp differ diff --git a/images/three.jpeg b/images/three.jpeg new file mode 100644 index 0000000..0babb81 Binary files /dev/null and b/images/three.jpeg differ diff --git a/images/two.jpeg b/images/two.jpeg new file mode 100644 index 0000000..e847eb1 Binary files /dev/null and b/images/two.jpeg differ diff --git a/index.html b/index.html index 3db679e..883aed9 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,65 @@ - - - - - My Blog - - - - - - - - + + + + + + + Travel Blog + + + + + + + + +
+
+

My Travel Blog

+
+ beach +

Travel Posts

+
+
+ travel image +

Traveling Improves Your Health

+

From cutting down on stress, to lowering your chances of developing a heart disease, the health benefits of + traveling are huge. You may stay sitting on a chair all day long at the workplace: including some walking to + your trip is sure to make your body feel better. For some people, wandering abroad is even a cure for + depression and anxiety. Of course, it's not a foolproof cure, but it might help you feel better, both + physically and psychologically.

+ see more +
+
+ travel image +

Traveling Lets You Disconnect From Your Daily Life

+

This is closely related to my previous point. We tend to get so caught up in our daily lives that sometimes, + by simply sticking around, we may do ourselves more harm than good. Your boss is taking over your life? Kids + are driving you mad? Your parents are trying to make you live the life they want? How long do you think you + can handle this pressure before you burst and everything falls apart?

+ see more +
+
+ travel image +

Traveling Makes You More Interesting

+

I have no doubt that you're quite the conversationalist. That being said, including a few stories from abroad + is likely to grant you even more attention. Mentioning something that most people aren't familiar with or + bring a new perspective is always a good way to shine in a social situation. No need to write a whole travel + essay, just discuss what you've seen and where you've been: people who are accustomed to their daily life will + travel with your words.

+ see more +
+
+ +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..bb450e2 --- /dev/null +++ b/style.css @@ -0,0 +1,137 @@ +* { + margin: 0px; + padding: 0px; + box-sizing: border-box; + font-family: sans-serif; +} + +main { + width: 100%; + height: 100vh; +} + +main img { + width: 100%; + height: 500px; +} + +main header h1 { + font-size: 3rem; + font-family: 'Playball', cursive; + font-weight: 900; + text-align: center; + padding: 20px; + border-top: 35px solid #084C8C; + color: #084C8C; +} + +main h2 { + font-family: 'Italianno', cursive; + font-size: 3rem; + font-weight: 600; + text-align: center; + padding: 10px; + color: #084C8C; + border-bottom: 1px solid #084C8C; +} + +.container img { + width: 300px; + height: 250px; +} + +main .container { + width: 80%; + height: auto; + margin: auto; +} + +main .container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding-bottom: 20px; + gap: 5px; + + + + +} + +main .container .d { + + flex: 1; + padding: 10px; + margin: 10px; + border: 1px solid pink; + + + +} + +main .container .d h3 { + text-align: center; + padding: 5px; + color: #084C8C; +} + +main .container .d p { + text-align: start; + text-align: justify; + padding: 5px; + +} + +main .container .d a { + background-color: palevioletred; + text-decoration: none; + color: white; + padding: 5px; + display: block; + text-align: center; + + border-radius: 5px; + + + +} + + + + + +footer { + background-color: #084C8C; + color: white; + width: 100%; + height: auto; + padding: 5px; + margin: auto; +} + +footer h4 { + + text-align: center; + padding: 5px 0px 0px 0px; + font-weight: 400; +} + +footer p { + font-weight: 400; + text-align: center; + + +} + +@media screen and (max-width:1000px) { + main .container { + flex-direction: column; + } + + main .container .d h3 { + text-align: start; + } + + +} \ No newline at end of file