Skip to content
This repository was archived by the owner on Jan 14, 2024. It is now read-only.

LONDON_9 - MEHREEN_AZIZ - HTML-CSS CourseWork - WEEK_1 #268

Open
Mehreenaziz wants to merge 1 commit into
base: master
Choose a base branch
from
Open

LONDON_9 - MEHREEN_AZIZ - HTML-CSS CourseWork - WEEK_1 #268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 95 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
84 changes: 81 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,85 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<header>
<h1>Mehreen's Travel Blog</h1>
<h2>Detailed Reviews from Around the World</h2>
<button class="buttons">Follow My Socials</button>
</header>
<ul>
<li><a href="home.asp">Home</a></li>
<li><a href="city-reviews.asp">City reviews</a></li>
<li><a href="about.asp">About me</a></li>
<li><a href="contact.asp">Contact me</a></li>
</ul>
</body>
<main>
<section id="ttt">
<h3>Top Travelling Tips</h3>
<p>
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.
</p>
</section>
<section>
<div class="container">
<article class="box">
<img src="https://image.shutterstock.com/image-photo/eunpyeong-hanok-village-korean-traditional-600w-2155257251.jpg" alt="Picture of Seoul City">
<div class="texts">
<h2>Seoul</h2>
<p>
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.</p>
<button type="more">More details...</button>
</div>
</article>
<article class="box">
<img src="https://image.shutterstock.com/image-photo/cancun-sunset-drone-wiew-600w-1903587787.jpg" alt="Picture of Cancun city, Mexico">
<div class="texts">
<h2>Cancun</h2>
<p> 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.</p>
<button type="more">More details...</button>
</div>
</article>
<article class="box">
<img src="https://image.shutterstock.com/image-photo/maldivian-capital-above-600w-159659003.jpg" alt="Picture of Male City, Maldives">
<div class="texts">
<h2>Malé</h2>
<p>
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.</p>
<button type="more">More details...</button>
</div>
</article>
</div>
</section>
<footer>
<p>Created by Mehreen Aziz</p>
<a href="contact">Contact me</a>
<a href="mysocials">My socials</a>
</footer>
</main>
</main>
</body>
</html>
</html>