From d7dafd35223c12b8060ee1c08ce5936433cc63ae Mon Sep 17 00:00:00 2001 From: Mehreenaziz <113247845+Mehreenaziz@users.noreply.github.com> Date: Fri, 28 Oct 2022 20:55:32 +0100 Subject: [PATCH] full update to code --- css/style.css | 95 +++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 84 +++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 176 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index 75e9841e..3edd2b2a 100644 --- a/css/style.css +++ b/css/style.css @@ -6,3 +6,98 @@ * for example: General styles, Navigation styles, Hero styles, Footer etc. * */ + + html{ + min-height: 100%; + } + body { + font-family: Arial, Helvetica, sans-serif; + background-color:rgb(211, 187, 210); + } + header { + background-image: url("https://image.shutterstock.com/image-photo/abstract-color-clouds-sky-on-600w-1195456621.jpg"); + background-size: 1400px; + text-align:center; + color:rgb(117, 71, 106); + } +h1 { + padding: 40px; + font-weight: bolder; + font-family:fantasy; +} +.buttons { + margin-bottom: 10px; + font-size: larger; + padding: 10px; + background-color:rgb(211, 187, 210); +} +ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + background-color: rgb(117, 71, 106); + } + li { + float: left; + } + li a { + display: block; + color: #fff; + text-align: center; + padding: 14px 16px; + text-decoration: none; + } + li a:hover { + background-color: rgb(211, 187, 210); + color: rgb(117, 71, 106) + } + #ttt { + margin: 30px; + padding: 10px; + border-style: solid; + border-color:rgb(117, 71, 106); + border-radius: 10px; + } + article { + border: 2px solid white; + margin: 20px 20px; + padding: 10px 20px; + } +.container{ + display: flex; + flex-wrap: wrap; + align-items: stretch; + justify-content: center; + flex-direction: row; + justify-content: space-evenly; +} +.box{ + flex: 0 0 350px; margin: 10px; + border: 1px solid c; + text-align: center; +} +.box:first-child:hover{ +color:rgb(117, 71, 106) +} +.container img{ + max-width: 100%; +} +.texts{ + padding: 5px; margin-bottom:100px; +} +.texts button{ + background: rgb(117, 71, 106); color: #fff; +} +.texts button:hover{ + background: #E0E3DA; color: #1A0B18; cursor: pointer; +} +footer { + background-color:rgb(117, 71, 106); + padding: 10px; + display: flex; + justify-content: space-evenly; + align-items: center; + border: 1px solid white; + margin: 10px; + } \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..7b8e0613 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,85 @@ - - +
+

Mehreen's Travel Blog

+

Detailed Reviews from Around the World

+ +
+ + +
+
+

Top Travelling Tips

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus augue, iaculis eget ultrices non, interdum quis odio. + Pellentesque metus lorem, rutrum vitae maximus eget, venenatis sed dolor. + Suspendisse vel velit ac massa dapibus sollicitudin. + Integer non nunc at metus condimentum dignissim. + Sed mattis et arcu nec tincidunt. Nullam nec facilisis lorem. + Suspendisse consectetur augue sed leo accumsan, vitae feugiat metus maximus. + Praesent a tincidunt magna, eget consectetur odio. +

+
+
+
+
+ Picture of Seoul City +
+

Seoul

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus augue, iaculis eget ultrices non, interdum quis odio. + Pellentesque metus lorem, rutrum vitae maximus eget, venenatis sed dolor. + Suspendisse vel velit ac massa dapibus sollicitudin. + Integer non nunc at metus condimentum dignissim. + Sed mattis et arcu nec tincidunt. Nullam nec facilisis lorem. + Suspendisse consectetur augue sed leo accumsan, vitae feugiat metus maximus. + Praesent a tincidunt magna, eget consectetur odio.

+ +
+
+
+ Picture of Cancun city, Mexico +
+

Cancun

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus augue, iaculis eget ultrices non, interdum quis odio. + Pellentesque metus lorem, rutrum vitae maximus eget, venenatis sed dolor. + Suspendisse vel velit ac massa dapibus sollicitudin. + Integer non nunc at metus condimentum dignissim. + Sed mattis et arcu nec tincidunt. Nullam nec facilisis lorem. + Suspendisse consectetur augue sed leo accumsan, vitae feugiat metus maximus. + Praesent a tincidunt magna, eget consectetur odio.

+ +
+
+
+ Picture of Male City, Maldives +
+

Malé

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas purus augue, iaculis eget ultrices non, interdum quis odio. + Pellentesque metus lorem, rutrum vitae maximus eget, venenatis sed dolor. + Suspendisse vel velit ac massa dapibus sollicitudin. + Integer non nunc at metus condimentum dignissim. + Sed mattis et arcu nec tincidunt. Nullam nec facilisis lorem. + Suspendisse consectetur augue sed leo accumsan, vitae feugiat metus maximus. + Praesent a tincidunt magna, eget consectetur odio.

+ +
+
+
+
+ +
+ - + \ No newline at end of file