Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tuned into Responsive website #996

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

Tuned into Responsive website #996

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
150 changes: 150 additions & 0 deletions css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,153 @@
/* Use your own code or past solution for Great Idea Web Page CSS here! */


body{background-color: #ffffff;font-family: 'Titillium Web', sans-serif;}
a{color: black;text-decoration: none;}
a:hover{background-color: rgb(71, 60, 170);color: white;border-radius: 15px;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;}
nav{
display: flex;flex-direction: row;align-items: center;
}
.sec1 img{
width: 400px;
margin-bottom: 10px;
margin-top: 10px;
}
ul{display: flex;align-items: center;}
li{list-style: none; margin-right: 20px;font-size: 20px;}

.sec1{
display: flex;
}
.title{display: flex;justify-content: center;align-items: center;flex-direction: column;width: 50%;text-align: center;font-family: 'Bangers';font-size:30px}
button{
border: 2px solid black;
background-color: #ffffff;
border-radius: 5px;
height: 40px;
width: 200px;
font-size: 18px;
font-style: bold;
}

button:hover{
background-color: rgb(71, 60, 170);
color: white;
cursor: pointer;
}
.part1{
display: flex;
justify-content: center;
flex-wrap: nowrap;
/* flex-wrap: wrap; */
}
.feature{
/* border: 2px solid red; */
padding: 10px;
margin-right: 20px;
/* width: 100%; */
}
.about{
/* border: 2px solid red; */
padding: 10px;
margin-right: 20px;

/* width: 100%; */
}
.sec2 img{
width: 100%;
margin-top: 20px;
}
.part2{
display: flex;
width: 100%;
flex-wrap: nowrap;
/* border: 2px solid red; */
/* justify-content: center; */
}

.services{
padding: 10px;
margin-right: 20px;
}
.product{
padding: 10px;
margin-right: 20px;
}
.vision{
padding: 10px;
margin-right: 20px;
}

footer{
text-align: center;
}

/* Respomsiveness for Tablet Device */

@media (max-width:1000px)
{
.sec1 img{
display:none;
}
.title{
width: 100%;
}

}


@media(max-width:800px) and (min-width:525px)
{
nav{
flex-wrap: wrap;
justify-content: center;
}
.image{
width: 100%;
display: flex;
justify-content: center;
}

.part2{
flex-wrap: wrap;
}
.part1{
flex-wrap: wrap;
}
}

@media (min-width:0px) and (max-width:525px)
{
nav{
flex-wrap: wrap;
justify-content: center;
}
.image{
width: 100%;
display: flex;
justify-content: center;
}

.part2{
flex-wrap: wrap;
}
.part1{
flex-wrap: wrap;
}
ul{
display: flex;
flex-direction: column;
width: 100%;

}
li{
width: 100%;
text-align: center;
border-top: 2px solid gray;
}
#bot{
width: 100%;
border-bottom: 2px solid gray;
}

}
103 changes: 101 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,115 @@
<!doctype html>


<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Great Idea - Responsive I</title>

<link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/index.css">

</head>

<body>
<!-- Use past code you created here for Great Idea Web Page or past solution for Great Idea Web Page HTML here! -->
<nav>
<div class="image">
<img src="img/logo.png" style="margin-right: 20px;">
</div>



<ul>



<li><a href="index.html">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#product">Product</a></li>
<!-- <li><a href="#view">View</a></li> -->
<li><a href="#feature">Features</a></li>
<li><a href="#about">About</a></li>
<li id="bot"><a href="#contact" >Contact</a></li>
</ul>



</nav>


<div class="sec1">
<div class="title">
<h1>Innovation <br>on<br> Demand</h1><br>
<button>Get Started</button>
</div>
<img src="img/header-img.png" alt="Header Image">
</div>

<div class="sec2">
<div class="part1">
<div class="feature" id="feature">
<h2>Feature</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum voluptas ad beatae mollitia nesciunt quod
exercitationem alias? Minus a debitis enim aut magni. Iste id nihil architecto ut laborum earum fugiat. Vitae
pariatur architecto atque doloremque eos sapiente omnis inventore, aut perspiciatis nihil ex quidem iste
exercitationem accusantium explicabo, minima facere magnam dicta mollitia, error consequatur! Necessitatibus
iure temporibus incidunt!
</div>
<div class="about" id="about">
<h2>About</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, ut minima quasi adipisci, in eligendi
dignissimos consequuntur nam tenetur incidunt dolor laboriosam asperiores quos quibusdam ad. Dolorem accusantium
officiis officia consectetur, pariatur natus delectus ipsa quaerat quisquam odit vel modi necessitatibus nostrum
temporibus ipsum quidem, aliquid, voluptates corrupti dignissimos iste? Provident quis eveniet ad incidunt
natus, iure nemo ea autem.
</div>
</div>
<img src="img/mid-page-accent.jpg" alt="Image">
<div class="part2">
<div class="services" id="services">
<h2>Service</h2>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum voluptas ad beatae mollitia nesciunt quod
exercitationem alias? Minus a debitis enim aut magni. Iste id nihil architecto ut laborum earum fugiat. Vitae
pariatur architecto atque doloremque eos sapiente omnis inventore, aut perspiciatis nihil ex quidem iste
exercitationem accusantium explicabo, minima facere magnam dicta mollitia, error consequatur! Necessitatibus
iure temporibus incidunt!
</div>
<div class="product" id="product">
<h2>Product</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, ut minima quasi adipisci, in eligendi
dignissimos consequuntur nam tenetur incidunt dolor laboriosam asperiores quos quibusdam ad. Dolorem accusantium
officiis officia consectetur, pariatur natus delectus ipsa quaerat quisquam odit vel modi necessitatibus nostrum
temporibus ipsum quidem, aliquid, voluptates corrupti dignissimos iste? Provident quis eveniet ad incidunt
natus, iure nemo ea autem.
</div>
<div class="vision" id="vision">
<h2>Vision</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, ut minima quasi adipisci, in eligendi
dignissimos consequuntur nam tenetur incidunt dolor laboriosam asperiores quos quibusdam ad. Dolorem accusantium
officiis officia consectetur, pariatur natus delectus ipsa quaerat quisquam odit vel modi necessitatibus nostrum
temporibus ipsum quidem, aliquid, voluptates corrupti dignissimos iste? Provident quis eveniet ad incidunt
natus, iure nemo ea autem.
</div>
</div>
</div>

<div class="sec3" id="contact">
<h2>Contact</h2>
123, postal park<br>
kankarbagh patna<br>
<br>
9876543219<br><br>
[email protected]
</div>

<footer>
Copyright 2021 Ankit kumar jha
</footer>
</body>

</html>