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

WM3 - AbiyaY - HTML/CSS - Week 1 #108

Closed
AbiyaY wants to merge 1 commit into from
Closed

WM3 - AbiyaY - HTML/CSS - Week 1 #108

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.
*
*/
.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;
}
87 changes: 86 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>My Blog</title>
<title>Travel Blog</title>
<link
href="//fonts.googleapis.com/css?family=Roboto:400,500,300"
rel="stylesheet"
Expand All @@ -18,5 +18,90 @@
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
<div class="container">
<header>
<h1>The Travel</h1>
<h1>Binder</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</header>

<img class= "cover-img" src="https://media.audleytravel.com/-/media/images/home/indian-subcontinent/india/country-guides/kerala-for-the-first-time-visitor/75667681_kerala_house_boat_3000x1000.jpg?q=79&w=1920&h=640" alt="cover image" />

<hr>

<section>

<article>
<h2 id="heading">Beautiful Places</h2>

<div class="section-one">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQdXFGUh5vPqCCZD6yh68dTci7jmC0PdGXrw&usqp=CAU" alt=""/>
<p>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</p>

</div>
</article>

<hr>

<article>
<h2 class="heading">Travel Tips</h2>

<div class="section-two">
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRvM6skHH4eG6H666rEtB0gGEAhFt6hUUglwA&usqp=CAU" alt=""/>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSQKDDDbmZuSDnnbQ7ygm0MgqJ2JkdYTCmLmQ&usqp=CAU" alt=""/>

<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtJP9YMoV7m8QBvmHOAW5cj7ptA6FvUquiyw&usqp=CAU" alt=""/>
<img src="https://www.columbusdirect.com/media/30364/lets-go-travel-tips.jpg?" alt=""/>
<figcaption>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, </figcaption>
</figure>
</div>
</article>

<hr>

<article>
<h2>Join the Adventure</h2>

<div class="section-three">
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyaWtuuyd4l7W0s1n7xTS1PUsFIHQLgvlWug&usqp=CAU" alt=""/>
<a href="https://www.incredibleindia.org/content/incredible-india-v2/en/blogs.html" target="_blank" >View Site</a>
<figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</figcaption>
</figure>
<figure>
<img src="https://static.toiimg.com/photo/77652252/oie_2095710glh9nB1O.jpg?width=748&resize=4" alt=""/>
<a href="https://www.incredibleindia.org/content/incredible-india-v2/en/blogs.html" target="_blank" >View Site</a>
<figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</figcaption>
</figure>
<figure>
<img src="https://static.toiimg.com/thumb/76405061/kerala.jpg?width=1200&height=900" alt=""/>
<a href="https://www.incredibleindia.org/content/incredible-india-v2/en/blogs.html" target="_blank" >View Site</a>
<figcaption>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</figcaption>
</figure>

</div>
</article>

<hr>

</section>

</div>

<footer>
<h5>THe Travel Binder </h5>
</footer>
</body>
</html>