diff --git a/css/style.css b/css/style.css index 75e9841e..64df8a58 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,98 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ +.container { + background-color: rgba(241, 237, 237, 0.87); +} + +/*Cover image*/ +.cover-img { + width: 1503px; + height: 700px; + padding-top: 40px; + padding-bottom: 40px; +} + +/* Header */ +header, h5{ + text-align: center; + letter-spacing: 0.5em; + padding: 10px; +} + +header > p { + letter-spacing: normal; +} + +/*article-one*/ +article{ + padding: 15px; + margin: 10px; + +} +.section-one, .section-two, .section-three{ + display: flex; + flex-direction: row; + padding: 50px; +} +h2{ + text-align: center; +} +.section-one img { + width: 550px; + height: 500px; + +} + +.section-one > p { + line-height: 1.6rem; + font-size: 20px; + padding: 10px; + margin: 20px; +} +hr{ + width: 900px; +} + +/*article-two*/ +.section-two { + padding: 10px; + margin: 10px; +} + +.section-two img { + width: 250px; + height: 300px; + margin: 20px; + padding: 20px; + flex-grow: 2; +} + +figcaption { + line-height: 1.5rem; +} + +/*article-three*/ +.section-three img { + width: 300px; + height: 300px; + margin: 15px; + padding: 10px; + +} + +a { + text-decoration: none; + font-size: large; + padding: 30px; + margin:15px + +} +a:hover { + color:brown; +} + +article:first-child { + background-color: rgb(35, 112, 5); + color: white; +} \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..b4f6b19a 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> - My Blog + Travel Blog +
+
+

The Travel

+

Binder

+

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

+
+ + cover image + +
+ +
+ +
+

Beautiful Places

+ +
+ +

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. + The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, + as opposed to using 'Content here, content here', making it look like readable English. + It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. + The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, + as opposed to using 'Content here, content here', making it look like readable English. + It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. + The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, + as opposed to using 'Content here, content here', making it look like readable English

+ +
+
+ +
+ +
+

Travel Tips

+ +
+
+ + + + + + +
Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,Lorem Ipsum is simply dummy text of the printing and typesetting industry. + Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+
+
+
+ +
+ +
+

Join the Adventure

+ +
+
+ + View Site +
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+
+ + View Site +
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+
+ + View Site +
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+
+ +
+
+ +
+ +
+ +
+ +