diff --git a/css/style.css b/css/style.css index 75e9841e..e424b72f 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,223 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +/*genereal styling*/ +* { + box-sizing: border-box; + } + :root { + --color-darkblue: #001524; + --color-red: #e5383b; + --color-teal: #15616D; + --color-lightblue: #b9dfda; + --color-yellow: #ffbe0b; + --color-orange: #ca6702; + --color-white: #fff; + } + html { + font-size: 1.3rem; + scroll-behavior: smooth; + + } + + @media (max-width: 980px) { + html { + font-size: 0.8rem; + } + } + @media (max-width: 460px) { + html { + font-size: 0.6rem; + } + } + body { + font-family:'Varela Round', sans-serif; + + font-size: 0.5rem; + font-weight: 300; + + line-height: 1.5; + padding: 2rem; + margin: 0; + background-color: var(--color-darkblue); + overflow: visible; + } + /*header styling*/ + header { + + color: #fff; + text-align: center; + padding: rem; + + } + h1 { + font-family: 'Permanent Marker', cursive; + font-size: 1.5rem; + margin-top: 0rem; + } + hr { + border: 2px solid white; + width: 30rem; + border-radius: 10px; + margin-top: -10px; + } + h3 { + font-size: 0.7rem; + font-weight: 200; + margin-bottom: 3rem; + + } + /*main styling*/ + main { + text-align: justify; + text-indent: 1rem; + } + /*links styling*/ + a:link { + text-decoration: none; + color: var(--color-yellow); + font-weight: bold; + font-style: italic; + } + a:visited { + color: var(--color-darkblue); + + } + a:hover { + font-size: 0.6rem; + } + + h2 { + font-family:'Roboto Condensed', sans-serif; + text-align: center; + font-size: 1rem; + } + article:first-child { + background-color: var(--color-teal); + color: var(--color-white); + padding: 0.5rem; + border-radius: 20px; + border: 10px solid var(--color-orange) + } + .orange-article { + background-color: var(--color-orange); + color: var(--color-white); + padding: 0.5rem; + border-radius: 20px; + border: 5px solid var(--color-teal); + margin-top: 30px; + } + + /*images styling*/ + + img { + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; + border-radius: 10px; + margin-bottom: 1.5rem; + + + + } + + + /*footer styling*/ + footer { + color: var(--color-white); + margin-top: 1rem; + + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + + } + + .subscribe { + + width: 50%; + display: flex; + align-items: center; + justify-content: space-around; + } + .subscribe h6 { + font-family:'Permanent Marker', cursive; + font-size: 0.8rem; + margin-top: -5px; + } + form { + text-align: center; + } + input { + width: 100%; + padding: 3px 3px; + margin: 5px 0; + box-sizing: border-box; + border-radius: 5px; + border: 3px solid var(--color-orange); + font-size: 0.6rem; + } + button { + text-align: center; + width: 6rem; + padding: 5px 10px; + margin: 8px 0; + border-radius: 10px; + background-color: var(--color-teal); + color: var(--color-white); + font-size: 0.7rem; + } + .media ul li { + list-style-type: none; + display: inline; + padding: 0.6rem; + font-size: 0.6rem; + background-color: var(--color-orange); + border-radius: 50%; + margin-right: 0.5rem; + + + } + + .media ul li a { + color: var(--color-teal); + + + } + .media ul li a:hover { + color: var(--color-darkblue); + } + + .links { + text-decoration: none; + text-align: center; + } + .links ul li { + list-style-type: none; + } + .links ul li a { + color: var(--color-white); + } + + @media screen and (max-width: 768px) { + footer { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + gap: 1rem; + + } + .subscribe { + display: block; + + } + h6 { + margin-bottom: 1rem; + } + + + } + + + \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..cc8979c9 100644 --- a/index.html +++ b/index.html @@ -7,16 +7,110 @@ content="width=device-width, initial-scale=1, shrink-to-fit=no" /> My Blog - - + />--> + + + + + - - +
+

Hiking adventures for ladies

+
+

I created this website to share all the great hikes I do with everyone else out there. I share the hiking tricks and tips that I have learned over the years to fast-track you into a hiking pro. And I tell you what hiking gear works and what gear does not.

+ +
+
+
+

Backpacking for beginners

+ + woman with backpack + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper at orci efficitur imperdiet. Suspendisse lorem metus. Lorem ipsum dolor sit amet, The backpackers shop consectetur adipisicing elit. Ducimus facere soluta dignissimos natus molestiae dolorum delectus similique nisi, consequatur quod reiciendis in quae vel esse nobis? Qui enim laudantium distinctio. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum, tempora! Molestias sunt debitis repellendus cupiditate voluptates numquam optio nulla, porro facere quasi in illum corrupti inventore eaque et esse sit!

+

Mauris eu magna ipsum. Suspendisse finibus nisl quam, eget eleifend felis vestibulum sit amet. Etiam vitae sem est. Integer aliquet sagittis dui eget vulputate. Nam sit amet mauris dui. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum tempore distinctio corrupti natus repellat, accusamus ullam aspernatur. Sed sit exercitationem aperiam saepe itaque iste, odio asperiores quos alias rerum quas.

+
+ +
+

Fire safety when camping

+ + fire and marshmallows + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper at orci efficitur imperdiet. Suspendisse lorem metus. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum quis labore odio, aliquid vero ullam assumenda nobis perferendis suscipit nostrum dolores accusantium optio delectus velit, quia eum recusandae modi distinctio.

+

Mauris eu magna ipsum. Suspendisse finibus nisl quam, eget eleifend felis vestibulum sit amet. Etiam vitae sem est. Integer aliquet sagittis dui eget vulputate. Nam sit amet mauris dui Campfire cooking kit. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Itaque, modi? Dolorem dolore, ipsa quisquam nisi asperiores, provident itaque sapiente rerum incidunt enim laudantium repellat quibusdam omnis, amet molestias labore nihil.

+
+ +
+

Why are GPS Distances always different?

+ + hiking gps smartphone with mountains in the background + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper at orci efficitur imperdiet. Suspendisse lorem metus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure similique rerum iusto minus voluptates adipisci aperiam consequuntur distinctio hic accusamus. Similique. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis optio earum omnis tempore, nobis accusantium minus illo obcaecati necessitatibus, tenetur aut sapiente cupiditate minima eligendi cumque. In nostrum nisi et. Handheld hiking GPS quas rerum consectetur deserunt eligendi aut facilis tempora.

+

Mauris eu magna ipsum. Suspendisse finibus nisl quam, eget eleifend felis vestibulum sit amet. Etiam vitae sem est. Integer aliquet sagittis dui eget vulputate. Nam sit amet mauris dui.

+
+ + + +
+ +