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

Krishan Kumar WM Class 3 Week 1 html/css challenge #107

Closed
Krishan09 wants to merge 2 commits into from
Closed

Krishan Kumar WM Class 3 Week 1 html/css challenge #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d663643
Travel to India
Krishan09 Jul 16, 2021
62d62b2
Travelling blog
Krishan09 Jul 17, 2021
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
18 changes: 11 additions & 7 deletions .github/pull_request_template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,25 @@ Please complete the details below this message

# Your Details

- Your Name:
- Your City:
- Your Slack Name:
- Your Name: Krishan kumar
- Your City: West Midlands
- Your Slack Name: Krishan kumar

# Homework Details

- Module:
- Week:
- Module: Html/Css challenge class 3
- Week:1

# Notes

- What did you find easy?
From start to the end everything was challenge..hence it was fun making website and enjoyed it.

- What did you find hard?

- What do you still not understand?
Found difficult while i was adding articles therefor i managed to do it.
-
What do you still not understand?
At start everything was here and there but till now what i have done i understood.

- Any other notes?
none
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
151 changes: 151 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,154 @@
* for example: General styles, Navigation styles, Hero styles, Footer etc.
*
*/
*{
margin: 0; padding:0; box-sizing: border-box ;
font-family:'josefin Sans', sans-serif;
}

header{
width:100%; height: 100vh;
background-image:url(https://c.ndtvimg.com/2021-04/knvbhtv_kolkata-tram_625x300_15_April_21.jpg?im=FaceCrop,algorithm=dnn,width=1200,height=675);
background-repeat:no-repeat ;
background-size:cover;
}

nav{
width: 100%; height:15vh;
background: rgba 0,0,0,0.2;
color: white; display: flex; justify-content: space-between;
align-items: center; text-transform: uppercase;
}

nav.logo{
width: 30%; text-align:center;
/* background:coral;*/

}

nav .menu{
width:45%;
display: flex; justify-content: space-around;

}

.nav-item{
color:white;
font-size:25px;

}

nav.menu a{
width: 25%;
text-decoration:none; color:white;
font-weight: bold;
}

nav.menu a:first-child{
color:#00b894;

}

main{
width: 100%;
height: 80vh;
display: flex;
justify-content: center ;
align-items: center;
text-align: center;
text-shadow: 1px 1px 2px
}




section h3{
font-size:35px; font-weight: 200; letter-spacing: 3px;
color: white;
}

section h1{
margin: 40px 0px 25px 0px;
font-size: 55px;
font-weight: 700;
text-shadow: 2px 1px 5px; ;
color:white;
text-transform: uppercase;
}

section p{
font-size: 25px;
color:whitesmoke;
word-spacing: 2px;
margin-bottom: 25px;
text-shadow: 1px 1px 1px 1px;
}

section a{
padding: 12px 30px;
border-radius: 4px;
outline-style:none;
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
text-decoration:none;
letter-spacing: 1px;
color:whitesmoke;

transition: all .5s ease;
}

section.btnone{
background:red;
color:black;
}

.btnone:hover{
background:#00b894;
color:white;

}


section .btntwo{
background:#00b894;
color:white;
}

.btntwo:hover{
background:red;
color:black;
}

.change_content:after{
content:'';
animation: changetext 10s infinite linear;
color:#00b894;

}

@keyframes changetext{
0%{content:"Darjeeling";}
20%{ content:"Agra";}
35%{ content:"Jaipur";}
60%{ content:"Delhi";}
80%{ content: "Mumbai";}
100% { content:"Shimla";}

}

.article-image{
width:100%;
}

.facebookicon{
width:30px;

}

footer{
background-color:cyan;

}


61 changes: 61 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,3 +20,64 @@
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
</body>
</html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/syle.css">
<link href="https://fonts.googleapis.com/css?family=josefin+Sans&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

</head>
<body>

<header>

<nav>
<div class="logo"> <h1 class="animated infinite heartBeat"> EXPLORE India</h1> </div>
<div class="menu">
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">Gallery</a>
<a class="nav-item" href="#">Contact</a>
<a class="nav-item" href="#">About</a>
</div>
</nav>

<main>
<section>
<h3>Welcome To India</h3>
<h1>Do COME and VISIT <span class="change_content"> </span></h1>
<p>"India once is not enough"</p>
<a href="https://en.wikipedia.org/wiki/Tourism_in_India" target="_blank" class="btnone">Learn more</a>
<a href="#" class="btntwo">Signup here</a>
</section>
</header>
</main>
<div>
<article>
<h2>Tourism in India</h2>
<img class="article-image"src="https://www.india-briefing.com/news/wp-content/uploads/2018/04/India-Brefing-India%E2%80%99s-Tourism-Sector-Dynamic-Market-Sees-New-Verticals-Growing-FDI.jpg">
<p>The Travel and Tourism Competitiveness Report 2019 ranked India 34th out of 140 countries overall. India improved its ranking by 6 places over the 2017 report which was the greatest improvement among the top 25% of countries ranked. The report ranks the price competitiveness of India's tourism sector 13th out of 140 countries. It mentions that India has quite good air transport infrastructure (ranked 33rd), particularly given the country's stage of development, and reasonable ground and port infrastructure (ranked 28th). The country also scores high on natural resources (ranked 14th), and cultural resources and business travel (ranked 8th).[9] However, some other aspects of its tourism infrastructure remain somewhat underdeveloped.[10] The nation has many hotel rooms per capita by international comparison and low ATM penetration.[11] The World Tourism Organization reported that India's receipts from tourism during 2012 ranked 16th in the world, and 7th among Asian and Pacific countries.[12]</p>
<p>Click <a href="https://www.incredibleindia.org/content/incredible-india-v2/en.html" target="_blank">here</a> for further information </p>
</article>

<article>
<h2>Tourism in India</h2>
<img class="article-image" src="https://cdn.businesstraveller.com/wp-content/uploads/fly-images/992746/Amritsar-e1570693104470-916x515-1-916x515.jpg">
<p>The Travel and Tourism Competitiveness Report 2019 ranked India 34th out of 140 countries overall. India improved its ranking by 6 places over the 2017 report which was the greatest improvement among the top 25% of countries ranked. The report ranks the price competitiveness of India's tourism sector 13th out of 140 countries. It mentions that India has quite good air transport infrastructure (ranked 33rd), particularly given the country's stage of development, and reasonable ground and port infrastructure (ranked 28th). The country also scores high on natural resources (ranked 14th), and cultural resources and business travel (ranked 8th).[9] However, some other aspects of its tourism infrastructure remain somewhat underdeveloped.[10] The nation has many hotel rooms per capita by international comparison and low ATM penetration.[11] The World Tourism Organization reported that India's receipts from tourism during 2012 ranked 16th in the world, and 7th among Asian and Pacific countries.[12]</p>
<p>Click <a href="https://www.jetsetter.com/magazine/most-beautiful-places-to-visit-in-india/" target="_blank">here</a> for further information </p>
</article>

<article>
<h2>Tourism in India</h2>
<img class="article-image" src="https://i.pinimg.com/originals/96/b0/ef/96b0efec4aa6067c5ed96ed4b578bdd7.png">
<p>The Travel and Tourism Competitiveness Report 2019 ranked India 34th out of 140 countries overall. India improved its ranking by 6 places over the 2017 report which was the greatest improvement among the top 25% of countries ranked. The report ranks the price competitiveness of India's tourism sector 13th out of 140 countries. It mentions that India has quite good air transport infrastructure (ranked 33rd), particularly given the country's stage of development, and reasonable ground and port infrastructure (ranked 28th). The country also scores high on natural resources (ranked 14th), and cultural resources and business travel (ranked 8th).[9] However, some other aspects of its tourism infrastructure remain somewhat underdeveloped.[10] The nation has many hotel rooms per capita by international comparison and low ATM penetration.[11] The World Tourism Organization reported that India's receipts from tourism during 2012 ranked 16th in the world, and 7th among Asian and Pacific countries.[12]</p>
<p>Click <a href="http://www.jaipur-travel-guide.com/Jaipur-attractions/Amber-fort-elephant-ride.html" target="_blank">here</a> for further information </p>
</article>

</div>
<footer>
<p> Created by Krishan kumar</p>
<img class="facebookicon" src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512">
</footer>
</body>

</html>