Skip to content

H
HTML_CSS
Commit dccd3415 authored by Nousheen Begum's avatar Nousheen Begum
Browse files
Options

HTML_CSS Assignment

parents
Hide whitespace changes
Inline Side-by-side
Showing with 1987 additions and 0 deletions
.DS_Store 0 → 100644
View file @ dccd3415
File added
Day1/Day1.html 0 → 100644
View file @ dccd3415
<!DOCTYPE html>
<html>
<head>
<title>nisum</title>
<style>
a:visited {
color:Brown;
background-color: transparent;
text-decoration: none;
}
a:hover {
color:White;
background-color: Purple;
text-decoration: underline;
}
a:active {
color:White;
background-color:Green;
text-decoration: underline;
}
</style>
<link rel="stylesheet" href="C:\Sprint5\Day1\day1.css">
</head>
<body>
<!-- Describes the header -->
<header>
<img src="https://lever-client-logos.s3.us-west-2.amazonaws.com/d4ee0bc6-7ccb-4762-86e1-07d7a007314b-1599084938809.png" alt="nisum" style="float:Left;width:400px;height:200px;"><br>
<h1 style="text-align:Center;color:DodgerBlue;font-size:70px" >Nisum Consulting Pvt Ltd</h1>
<hr></header>
<h2 style="font-size:20px;font-family: TimesNewRoman;text-decoration:Underline;">Bookmarks</h4>
<h4><a href="#positons">Following are the positions available in nisum</a><br>
<a href="#mission">Mission of the nisum</a></h4>
<!-- Defines various elements and attributes in html -->
<h2 id="mission">Mission </h2>
<p title='Mission of nisum'>We exist to enable transformation for industry-leading brands.
With every team member staying keenly focused on our mission, we've become a preferred technology and business advisor for some of the world's leading organizations. We deliver solutions that take our clients to exceptional new heights of performance, and thereby, fulfill our brand promise of Building Success Together®.</p><br>
<img src="C:\Sprint5\Day1\service.jpg" style="float:Right; width:400px; height:200px;">
<h2 >Featured Services</h2>
<p title='Services of nisum'>Companies of all sizes turn to Nisum: massive brands come to us to lead their digital revolution and disruptive startups ask us to help accelerate their digital infrastructure development. We have led industries from retail to finance, airline to hospitality, tech to healthcare, and security to B2B, with expertise growing across more industries each day.
</p><br>
<h2 id="positons"style=" font-size:20px">Nisum Technologies. Inc. has multiple openings for the following positions at its office in Brea, CA.</h2>
<pre style="font-family: Tahoma">
Information Systems Manager: Plan and coordinate the activities of software professionals.
Technical Lead: Design, develop, and test software systems.
QA Engineer: Plan and conduct analysis, inspection, design, test, and/or integration to assure the quality of projects.
</pre>
<h2>Innovations at nisum</h2>
<p>Nisum Innovation is an internal initiative that strives to move industry-leading brands forward using our talent's curious minds by immersing them in a culture that allows our team to iterate fast towards success. This arm of Nisum will consider new or improved ideas for products, services, process, organizational changes, that aim to achieve successful application inside or outside the organization
</p>
<h2 style=" font-size:20px;">Nisum located at</h2>
<picture >
<source media="(min-width: 650px)" srcset="C:\Sprint5\Day1\usa.jpg" >
<source media="(min-width: 450px)" srcset="C:\Sprint5\Day1\pakistan.jpg">
<source media="(min-width: 300px)" srcset="C:\Sprint5\Day1\chile.jpg">
<img src="C:\Sprint5\Day1\india.jpg" style="width:auto;">
</picture>
<h3 style="border:5px solid Brown;">Want to know more about nisum??
<a href="https://www.nisum.com/" target="_self" title="Welcome to nisum"/>Click here!!!</a></h3>
<h3 style="border:5px solid Brown;">Visit nisum on Linkedin..
<button onclick="document.location='https://www.linkedin.com/company/nisum-technologies/mycompany/'">Linkedin</button></h3>
<h3 style="border:5px solid Brown;">
<p>Visit nisum on facebook..
<a href="https://www.facebook.com/NisumTech/">
<img src="https://i.pinimg.com/originals/b1/85/9b/b1859bdac7d42d4a0a5a673bc4265564.png" alt="Facebook" style="width:40px;height:40px"></a></p></h3>
<hr>
<div style="background-image: url('https://media.licdn.com/dms/image/C561BAQE1t28kGjm9Mw/company-background_10000/0?e=2159024400&v=beta&t=jrCAvDVCDNi6uPRye9WAhRHaJ49CfO0SNARA0x_tz-I');background-attachment: fixed;background-size: 100% 100%;">
<h1 style="text-align:Center;color:white ;font-size: 50px">nisum</h1>
<p style="text-align:Center;color:white ;font-size: 25px">building success together</p>
<p style="text-align:Center ;color:white ;font-size: 15px">Address: Plot No: # 16 & 29, Survey No: # 54, Kondapur, Serilingampalle (M), Telangana 500084</p>
</div>
</body>
</html>
\ No newline at end of file
Day1/day1.css 0 → 100644
View file @ dccd3415
h3{
padding: 25px ;
}
h2{
color:White;
background-color:Brown;
}
Day2/day2.css 0 → 100644
View file @ dccd3415
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
/* Styling of the page */
body{
margin:0;
line-height:1.5;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
font-weight:400;
}
*{
margin:0;
padding:0;
outline:none;
text-decoration: none;
box-sizing:border-box;
}
::before,::after{
box-sizing: border-box;
}
.section{
background-color: Black;
min-height:100vh;
display:block;
padding :0 30px;
}
.main-content{
padding-left:330px;
}
.container{
max-width: 1100px
margin:auto;
}
.aside{
width:270 px;
background-color:black;
position:fixed;
height:100%;
left:0;
top:0;
z-index:10;
border-right:1px solid white;
padding:30px;
}
.aside .logo{
padding:30px;
}
.aside .logo a{
font-size:40px;
color:white;
font-family: 'Great Vibes', cursive;
font-weight: 700;
display:inline-block;
position: relative;
padding:0px 10px;
line-height:50px;
border-bottom:4px solid #ec1839;
border-right:4px solid #ec1839;
}
.aside .nav li{
display: block;
}
.aside .nav li a{
font-size:16px;
font-weight: 600;
color:white;
text-decoration: none;
line-height: 45px;
display: block;
border-right:1px solid #e8dfec;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
text-transform: capitalize;
}
.aside .nav li a:not(.active):hover{}
.aside .nav li a:hover,.aside .nav li a.active{
padding-left: 5px;
color:#ec1839;
}
/* Home page*/
.home .intro{
padding :50px;
text-align: center;
}
.home .intro img{
height: 200px;
width:200px;
border-radius:50%;
display: inline-block;
border: 8px solid #ffffff;
}
.home .intro h1{
font-size: 30px;
color:white;
font-family: 'Rubik', sans-serif;
font-weight: 700;
margin : 20px 0 5px;
}
.home .intro p{
font-size:16px;
font-weight:500;
margin:0;
line-height: 22px;
color:white;
}
.home .intro .network{
margin-top: 25px;
}
.home .intro .network a{
height:35px;
width:30px;
display:inline-block;
text-align: center;
line-height:35px;
margin :0 4px;
border-radius:40px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.home .intro .network a:hover{
color:blue;
}
.about .column {
float: left;
width: 50%;
padding: 10px;
height: 300px;
}
.about img{
height:100%;
width:100%;
display: inline-block;
}
.about table, th, td {
border: 1px solid white;
}
.about details summary{
color:white;
}
.about details summary:hover
{
color:#ec1839;
}
.contact h4,p,i{
color:white;
}
.footer footer
{
text-align: center;
padding: 3px;
background-color: white;
color: white;
}
Day2/day2.html 0 → 100644
View file @ dccd3415
<!DOCTYPE html>
<html>
<head>
<title>Personal Portfolio</title>
<link rel="stylesheet" href="day2.css">
<style>
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid white;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: white;
color: black;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<!-- Main Container -->
<div class="main-container">
<div class="aside">
<div class="logo">
<a href="#">Nousheen</a>
</div>
<ul class="nav">
<ul>
<li><a href="#" class ="active"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#about"><i class="fa fa-user"></i>About</a></li>
<li><a href="#contact"><i class="fa fa-comments"></i>Contact</a></li>
</ul>
</ul>
</div>
<!-- Home Page -->
<div class="main-content">
<section class ="home section">
<div class ="container">
<div class="intro">
<img src="C:\Sprint5\Day2\profile.jpg" alt="Nousheen">
<h1>Nousheen Begum</h1>
<p>Working at Nisum </p>
<div class="network" >
<a href="#" ><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#" ><i class="fa fa-whatsapp"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</section>
<section class="contact section" id="contact">
<div class ="container">
<h3 style="font-size:40px;text-align: center;border:8px solid white;color:white">Contact me!!</h3><br>
<hr><i class="fa fa-phone"></i>
<h4 >Call On..</h4>
<p>+91 987654321</p><hr><br>
<i class="fa fa-map-marker"></i>
<h4>Visit at..</h4>
<p>Hyderabad,Telangana</p><hr><br>
<i class="fa fa-envelope"></i>
<h4>Email at..</h4>
<p>nobegum@nisum.com</p><hr><hr><hr><br>
<div style="border:8px solid white;">
<h3 style="font-size:30px;text-align: center;color:white">Get in touch</h3>
<p style="font-size:15px;text-align: center;color:white">Let's have a talk...</p><br></div><br>
<form action="/action_page.php" style="color:white">
<label for="fname"><b>Full Name</b></label>
<input type="text" id="fname" name="firstname" placeholder="Enter your full name...">
<label for="email"><b>Email</b></label>
<input type="text" id="email" name="email" placeholder="Enter your email Id ..">
<label for="msg"><b>Message</b></label>
<textarea id="msg" name="msg" placeholder="Write your message..." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form><br>
</div>
</section>
<section class ="about section" id="about">
<div class ="container">
<h3 style="font-size:40px;text-align: center;border:8px solid white;color:white">About me!!</h3><br>
<div class="column" >
<h2 style="font-size:30px;font-family:script;color:white">Hii,This is Nousheen Begum...</h2>
<ul style="list-style-type:square;color:white">
<li>I have born and bought up in Hyderabad.</li>
<li>I am a recent college graduate from the stream of Information technology</li>
<li>I'm currently working atsssss nisum consulting pvt.ltd </li>
<li>I like to play badminton</li>
</ul>
</div>
<div class="column">
<img src="C:\Sprint5\Day2\profile.jpg" alt="Nousheen">
</div></div>
<br><br>
<h3 style="font-size:30px;text-align: center;color:white">Educational Qualifications</h3><br>
<table style="width:100% ;color:white">
<tr>
<th>S.no</th>
<th>Name</th>
<th>Qualification</th>
<th>Year(Passed out)</th>
</tr>
<tr>
<td>1</td>
<td>CMR Model High School</td>
<td>Xth Class</td>
<td>2014</td>
</tr>
<tr>
<td>2</td>
<td>Sri Chaitanya Junior College</td>
<td>MPC</td>
<td>2016</td>
</tr>
<tr>
<td>3</td>
<td>Muffakham Jah College Of Engineering and Technology</td>
<td>B.E</td>
<td>2020</td>
</tr>
</table><br>
<h3 style="font-size:30px;text-align: center;color:white">Project Details</h3>
<details>
<summary > Student Report Card</summary>
<img src="C:\Sprint5\Day2\report.jpg" style="float:center; height:200px;width:300px">
<p>Student report card is the software project based on C programming.This project displays the student marks including details of various curiculum activites</p><br></details>
<details>
<summary > Smart Phone Controlled Car</summary>
<img src="C:\Sprint5\Day2\car.jpg" style="float:center; height:200px;width:300px">
<p>Smart phone controlled car is the hardware project based on Arduino programming.This project makes use of mobile phone to control the direction of cars</p><br>
</details>
<details>
<summary > Sports Club</summary>
<img src="C:\Sprint5\Day2\sport.jpg" style="float:center; height:200px;width:300px">
<p>Sports club is the software project i.e; a website.This project displays the details of sports club of our own college including past ,present and future events</p><br>
</details>
<details>
<summary > Montioring diabetes using breath analysis </summary>
<img src="C:\Sprint5\Day2\breath.jpg" style="float:center; height:200px;width:300px">
<p>Montioring diabetes using breath analysis is the software project which is used to detect diabetes through breath rather than opting for various painful mechanisms.</p><br>
</details><br>
</section>
<section class ="footer section">
<div class ="container">
<div class="copyright">
<footer >
<div style="color:black"> &copy; Nousheen Begum Portfolio</div>
<p style="color:black">nobegum@nisum.com<br></p>
</footer></div></div>
</section>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
Day2/example.html 0 → 100644
View file @ dccd3415
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
padding: 15px;
text-align:Center;
border-spacing: 5px;
}
</style>
</head>
<body>
<iframe src="https://mjcollege.ac.in/" style="height:400px;width:100%;border:none" title="Iframe Example"></iframe>
<h2>Student Details</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>CollegeName</th>
<th>Marks</th>
<th>PhoneNumber</th>
</tr>
<tr>
<td>Doraemon</td>
<td>BVRIT</td>
<td>85</td>
<td>987654321</td>
</tr>
<tr>
<td>Jerry</td>
<td>IIIT</td>
<td>94</td>
<td>234567898</td>
</tr>
<tr>
<td>Tom</td>
<td>MJCET</td>
<td>80</td>
<td>654322345</td>
</tr>
</table>
</body>
</html>
\ No newline at end of file
Day3/day3.css 0 → 100644
View file @ dccd3415
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
body{
margin:0;
line-height:1.5;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
font-weight:400;
}
*{
margin:0;
padding:0;
outline:none;
text-decoration: none;
box-sizing:border-box;
}
::before,::after{
box-sizing: border-box;
}
.section{
background-color: Black;
min-height:500vh;
display:block;
padding :0 30px;
}
.main-content{
padding-left:330px;
}
.container{
max-width: 1100px;
margin:auto;
}
.aside{
width:270 px;
background-color:black;
position:fixed;
height:100%;
left:0;
top:0;
z-index:10;
border-right:1px solid white;
padding:30px;
}
.aside .logo{
padding:30px;
}
.aside .logo a{
font-size:40px;
color:white;
font-family: 'Great Vibes', cursive;
font-weight: 700;
display:inline-block;
position: relative;
padding:0px 10px;
line-height:50px;
border-bottom:4px solid #ec1839;
border-right:4px solid #ec1839;
}
.column {
float: left;
width: 50%;
padding: 60px;
height: 400px;
}
.column1 {
float: left;
width: 100%;
padding: 60px;
height: 1500px;
}
.btn {
display: block;
color: white;
margin: 10px 0;
padding: 10px 10px;
background-color: Black;
}
.btn:hover{
background-color: green;
}
.btn-social {
padding-left: 64px;
}
.btn-facebook {
background-color:darkblue;
}
.btn-instagram {
background-color: crimson;
}
.btn-mobile {
background-color:darkorchid;
}
.btn-linkedin {
background-color:dodgerblue;
}
.login{
h2 {
font-size: 16px;
font-weight: bold;
margin-top: 23px;
margin-bottom: 43px;
}}
.form {
color:black;
}
.form button{
background-color :black;
color:white;
}
.form button:hover
{
background-color: green;
}
.form label {
height: 140px;
width: 100px;
}​
Day3/day3_login.html 0 → 100644
View file @ dccd3415
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="day3.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
</style>
<body>
<div class="main-container">
<div class="aside">
<div class="logo">
<a href="#">Nousheen</a>
</div> </div>
<div class="main-content">
<section class ="home section">
<div class ="container">
<h1 style="color:white ;font-size:50px;text-align: center; font-family: 'Kaushan Script', cursive;">Welcome to Portfolio...</h1><br><br><br>
</div>
<div >
<div class="column" style="background-color:lavender;">
<h1 style="font-size: 30px;font-family: 'Kaushan Script', cursive;">Create your account</h1>
<a href="#" class="btn btn-social btn-facebook"><i class="fa fa-facebook"></i> Sign in with Facebook</a>
<a href="#" class="btn btn-social btn-mobile"><i class="fa fa-phone"></i> Sign in with Mobile number</a>
<a href="#" class="btn btn-social btn-instagram"><i class="fa fa-instagram"></i> Sign in with instagram</a>
<a href="#" class="btn btn-social btn-linkedin"><i class="fa fa-linkedin"></i> Sign in with Linkedin</a>
</div>
<div class="column" style="background-color:#bbb;">
<form class="form" autocomplete="on">
<fieldset style="font-size:18px">
<legend style="font-size:33px;font-weight: bold;font-family: 'Kaushan Script', cursive;">Login</legend><br>
<label for="username" >Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" ><br>
<label for="email">Email Id: </label>
<input type="email"placeholder="Enter your email id" id="email" name="email" required><br>
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter your password" name="password" required>
</fieldset>
<button type="submit" class="btn" onclick="alert('Welcome,You have logged in successfully')" style="display:inline-block; ">Login </button></a>
<input type="reset" class="btn" style="display:inline-block;">
<p style="font-size: 20px">Don't have an account?</p><button type="submit" class="btn" onClick="location.href= 'file:///C:/Sprint5/Day3/day3_signup.html'">Sign Up</button></p>
</form>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
\ No newline at end of file
Day3/day3_signup.html 0 → 100644
View file @ dccd3415
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<link rel="stylesheet" href="C:\Sprint5\Day3\day3.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Sofia&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
</style>
<body>
<div class="main-container">
<div class="aside">
<div class="logo">
<a href="#">Nousheen</a>
</div> </div>
<div class="main-content">
<section class ="home section">
<div class ="container">
<h1 style="color:white ;font-size:50px;text-align: center; font-family: 'Kaushan Script', cursive;">Welcome to Portfolio...</h1><br><br><br>
</div>
<div >
<div class="column1" style="background-color:#bbb;">
<form class="form" autocomplete="on" >
<fieldset style="font-size:18px">
<legend style="font-size:33px;font-weight: bold;font-family: 'Kaushan Script', cursive;">Sign Up</legend><br>
<label for="fname" style="font-size: 20px;font-family: 'Sofia', cursive;" >Firstname:</label><br>
<input type="text" id="fname" name="fname" placeholder="Enter your Firstname" required autofocus style="height:30px; ;width: 50%"><br>
<label for="lname" style="font-size: 20px;font-family: 'Sofia', cursive;" >Lastname:</label><br>
<input type="text" id="lname" name="lname" placeholder="Enter your Lastname" disabled style="height:30px; ;width: 50%" ><br>
<label for="bday" style="font-size: 20px;font-family: 'Sofia', cursive;">Birthday:</label><br>
<input type="date" id="bday" name="bday" placeholder="Enter your Birth Date" style="height:30px; ;width: 50%"><br>
<label for="phone" style="font-size: 20px;font-family: 'Sofia', cursive;">Mobile Number:</label><br>
<input type="tel" id="phone" name="phone" required pattern="987-1234-890" placeholder="987-1234-890" style="height:30px; ;width: 50%"><br>
<label style="font-size: 20px;font-family: 'Sofia', cursive;" >Gender:</label>
<input type="radio" id="male" name="gender" value="male" >
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label><br>
<label for="country" style="font-size: 20px;font-family: 'Sofia', cursive;">Country:</label>
<select id="country" name="country">
<option value="usa" selected="">USA </option>
<option value="brazil">Brazil</option>
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
</select><br>
<label for="address" style="font-size: 20px;font-family: 'Sofia', cursive;" >Address:</label><br>
<textarea id="address"name="message" rows="10" cols="60" placeholder="Enter your address" ></textarea><br>
<label style="font-size: 20px;font-family: 'Sofia', cursive;" >Hobbies:</label><br>
<input type="checkbox" id="hobbies1" name="hobbies1" value="books">
<label for="hobbies1"> Reading Books</label><br>
<input type="checkbox" id="hobbies2" name="hobbies2" value="calligraphy">
<label for="hobbies2"> Doing Calligraphy</label><br>
<input type="checkbox" id="hobbies3" name="hobbies3" value="sing">
<label for="hobbies3"> Dancing and singing</label><br>
<input type="checkbox" id="hobbies4" name="hobbies4" value="playing">
<label for="hobbies4">Playing Sports</label><br>
<label style="font-size: 20px;font-family: 'Sofia', cursive;" >Working at:</label>
<input list="company" name="company">
<datalist id="company">
<option type="color"value="Amazon">
<option value="Nisum">
<option value="Lanco Infratech">
<option value="TCS">
<option value="Infosys">
</datalist><br>
<label for="email" style="font-size: 20px;font-family: 'Sofia', cursive;">Email Id: </label><br>
<input type="email"placeholder="Enter your email id" id="email" name="email" required style="height:30px; ;width: 50%"><br>
<label for="password" style="font-size: 20px;font-family: 'Sofia', cursive;">Password:</label><br>
<input type="password" id="password" placeholder="Enter your password" name="password" required style="height:30px; ;width: 50%"><br>
<label for="myfile" style="font-size: 20px;font-family: 'Sofia', cursive;">Upload your photo:</label><br>
<input type="file" id="myfile" name="myfile"><br>
<label for="rate" style="font-size: 20px;font-family: 'Sofia', cursive;">Rate this form (between 0 to 10):</label>
<input type="range" id="rate" name="rate" min="0" max="10"><br>
</fieldset>
<button type="submit" class="btn" onclick="alert('Account created successfully')" style="display:inline-block;">Sign In </button></a>
<input type="reset" class="btn" style="display:inline-block;">
<p style="font-size: 20px">Have an account?</p><button type="submit" class="btn" onClick="location.href= 'file:///C:/Sprint5/Day3/day3_login.html'">Login</button></p>
</form>
</div>
</div>
</section>
</div>
</div>
</body>
</html>
\ No newline at end of file
Day4/day4.css 0 → 100644
View file @ dccd3415
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
*html{
box-sizing:border-box;
}
body {
margin: 0;
margin-top: 50px;
font-family: sans-serif;
}
header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
background-color: #eee;
}
header * {
display: inline;
height: 50px;
}
header ul {
padding: 0;
}
header li a {
margin-left: 20px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
color:white;
}
section {
height: 100vh;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#home .profile-img {
width: 300px;
border-radius: 50%;
}
footer {
text-align: center;
padding: 50px;
color:white;
background-color: black;
}
#home .section-inner p{
font-size: 35px;
font-family: 'Kaushan Script', cursive;
}
#home h1 {
font-size: 50px;
font-family: 'Kaushan Script', cursive;
}
.about .section-inner h2{
font-size: 40px;
font-family: 'Kaushan Script', cursive;
}
.about details summary{
text-align: left;
color:Black;
font-size: 20px
}
.about details summary:hover
{
color:green;
}
#contact .section-inner h2{
font-size: 40px;
font-family: 'Kaushan Script', cursive;
}
#service .section-inner h2{
font-size: 40px;
font-family: 'Kaushan Script', cursive;
}
#service details summary{
text-align: left;
color:Black;
font-size: 20px;
}
#service details summary:hover
{
color:green;
}
/* Background images for sections*/
#home {
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url('https://th.bing.com/th/id/OIP.IRqL1X4411XNyyrU3B6vxAHaEK?w=289&h=180&c=7&o=5&pid=1.7');
}
.about {
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url('https://guidetoexam.com/wp-content/uploads/2019/11/images-1.jpg');
}
#service {
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url('https://images.squarespace-cdn.com/content/v1/59307e96f5e231d2d07636f7/1537196084294-9DFFTYKVGMEUJUY91S3Y/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/20160225FloraFarmsPhotoshoot0030.jpg?format=750w');
}
#contact {
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url('https://th.bing.com/th/id/OIP.nJI5XbFsdSs5AMpdgJc6ewHaEK?w=311&h=180&c=7&o=5&pid=1.7');
}
\ No newline at end of file
Day4/day4.html 0 → 100644
View file @ dccd3415
<!DOCTYPE html>
<html>
<head>
<title>Nehru Zoological Park</title>
<link rel="stylesheet" href="day4.css">
<style>
.address p {
display: none;
background-color: black;
color:white;
padding: 20px;
}
div:hover p {
display: block;
}
::selection {
color: red;
background: grey;
}
h2::first-letter {
color: #ff0000;
font-size: 70px;
}
.dropbtn {
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
color:black;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5px 5px;
text-decoration: none;
display: block;
background-color: white;
}
.dropdown-content a:hover {background-color: green;color: white}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: green;
}
</style>
</head>
<body>
<header>
<img src="back.jpg" class="profile-img">
<nav>
<ul >
<li><a href="#home">Home</a></li>
<li><a href="#service">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="dropdown">
<button class="dropbtn">Zoo Park</button>
<div class="dropdown-content">
<a href="#home"> Home</a>
<a href="#service"> Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
</nav>
</header>
<main>
<section id="home">
<div class="section-inner">
<img src="back.jpg" class="profile-img">
<h1>Welcome to Nehru Zoological Park.</h1>
<div class="address"><p>Zoo Park Main Rd, Kishan Bagh, Bahadurpura West, Hyderabad, Telangana, 500064, India</p></div>
<p>Enjoy fresh Air</p>
</div>
</section>
<section id="service">
<div class="section-inner">
<h2>Services at zoo park.</h2>
<details>
<summary >Toy Train Ride</summary>
<img src="C:\Sprint5\Day4\train.jpg" style="float:center;height:200px;width:300px">
<p> The toy train is a fun way of exploring the beauty of the park. It is trendy among children. The fee for the toy train is Rs. 10 per child( 3-10 years) and Rs. 20 per adult.
</p><br>
</details>
<details>
<summary >Tiger and lion safari</summary>
<img src="C:\Sprint5\Day4\safari.jpg" style="float:center;height:200px;width:300px">
<p> The safaris take you on an adventure ride and provides glimpses of wilderness on the way. You can watch animals like bears, bison, tigers, and deer. The charges for adults is Rs. 50 and for children Rs. 30.
</p><br>
</details>
<details>
<summary >Boating</summary>
<img src="C:\Sprint5\Day4\boating.jpg" style="float:center;height:200px;width:300px">
<p> Another fun activity to do in the park is boating at the Mir amir lake. TSTDC organises boat rides for the tourists. You can choose from variants like passenger boating and speed boating.
</p><br>
</details>
<details>
<summary >Aquarium</summary>
<img src="C:\Sprint5\Day4\aquarium.jpg" style="float:center;height:200px;width:300px">
<p> Here you marvel at the sight of beautiful aquatic species which includes freshwater fishes and marine water species.
</p><br>
</details>
<details>
<summary >Museum</summary>
<img src="C:\Sprint5\Day4\museum.jpg" style="float:center;height:200px;width:300px">
<p> The place is replete with various exhibitions on biodiversity conservation, pieces of evidence of ancient animals(pug marks teeth, feathers, and many more), and taxidermy models.
</p><br>
</details>
<details>
<summary > Jurassic Park</summary>
<img src="C:\Sprint5\Day4\park.jpg" style="float:center;height:200px;width:300px">
<p> Children especially love the place. It features humongous figures of various dinosaur species such as Triceratops, Stegosaurus, and Tyrannosaurus.
</p><br>
</details>
</div>
</section>
<section class="about" id="about">
<div class="section-inner">
<h2>About Zoo Park..</h2>
<p style="font-size:20px">Nehru Zoological Park is one of the most iconic tourist places to visit in Hyderabad. It is also one of the largest zoos in India. </p>
<details>
<summary >Location</summary>
<p>The Nehru Zoological Park is located on the zoo main park road, Bahadarpura west, near Mir Alam Tank in Hyderabad.</p><br>
</details>
<details>
<summary >Timings</summary>
<p>The Nehru opens to the public from 8:30 am to 5 pm</p><br>
</details>
<details>
<summary >Entry fee</summary>
<p>On weekdays, the entry fee is Rs. 50 for adults and Rs. 30 for children. On weekends, it hikes up to Rs. 60 per adult and Rs. 40 per child. The still camera charge is Rs. 100 and video camera charge is Rs. 500. There are additional charges for rides, safaris, toy train ride and other activities.</p><br>
</details>
<details>
<summary > Visitor’s facility</summary>
<p> The park provides safe drinking water, first-aid facility, toilets and washrooms, benches and shelters along with a guesthouse for accommodation.</p><br>
</details>
<details>
<summary > Parking facility</summary>
<p> There is a separate parking facility available for the visitors. No private cars are allowed inside the park premises. The park provides battery-operated vehicles to travel around.</p><br>
</details>
</div>
</section>
<section id="contact">
<div class="section-inner">
<p><h2>Contact Us..</h2>
<h3>For any queries</h3>
<hr><i class="fa fa-phone"></i>
<h4 >Call On..</h4>
<p>+91 987654321</p><hr><br>
<i class="fa fa-map-marker"></i>
<h4>Visit at..</h4>
<p>Nehru Zoological Park,Hyderabad,Telangana</p><hr><br>
<i class="fa fa-envelope"></i>
<h4>Email at..</h4>
<p>nehruzoo@hyd.com</p></p><br>
</div>
</section>
</main>
<footer>
© Copyright Boberick The Llama, 2017
</footer>
</body>
</html>
\ No newline at end of file
Day5/day5.css 0 → 100644
View file @ dccd3415
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
*html{
box-sizing:border-box;
}
body {
margin: 0;
margin-top: 15mm;
font-family: sans-serif;
}
header {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
line-height: 50px;
background-color: lavender;
}
header * {
display: inline;
height: 3em;
}
header ul {
padding: 0;
}
header li a {
margin-left:1cm;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
color:white;
}
section {
height: 100vh;
border: 1.5pt solid black;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
#home .profile-img {
width:25%;
border-radius: 50%;
box-shadow: 10px 10px 5px green;
}
#home .section-inner p{
font-size: 35px;
font-family: 'Kaushan Script', cursive;
}
#home .section-inner h1 {
font-size: 3pc;
font-family: 'Kaushan Script', cursive;
}
#home .section-inner h1:hover
{
animation-name: head;
font-size: 50px;
animation-duration: 5s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes head{
from{font-size: 50px;color:black;}
to{font-size: 70px;color:red;}}
.about .section-inner h2{
font-size: 40px;
font-family: 'Kaushan Script', cursive;
width:900px;
border: 10px solid ;
padding: 15px;
border-image: url(https://th.bing.com/th/id/OIP.Y51EtWLyHP0cfexJowX_3gHaFL?w=182&h=128&c=7&o=5&pid=1.7) 30 stretch;
text-shadow: 2px 2px 5px red;
/* transform: skewY(20deg);*/ /*working*/
}
.about .section-inner h2:hover{
transform: rotateY(150deg);
}
.about details summary{
text-align: left;
color:Black;
font-size: 20px;
}
.about details summary:hover
{
color:green;
}
#contact .section-inner h2{
font-size: 40px;
font-family: 'Kaushan Script', cursive;
width:900px;
border: 10px solid ;
padding: 15px;
border-image: url(https://th.bing.com/th/id/OIP.Y51EtWLyHP0cfexJowX_3gHaFL?w=182&h=128&c=7&o=5&pid=1.7) 30 stretch;
text-shadow: 2px 2px 5px red;
}
#contact .section-inner h2:hover{
transform: rotateX(150deg);
}
@keyframes #contact {
from {background-color: red;}
to {background-color: yellow;}
}
#service .section-inner h2{
font-size: 40px;
font-family: 'Kaushan Script', cursive;
width:900px;
border: 10px solid ;
padding: 15px;
border-image: url(https://th.bing.com/th/id/OIP.Y51EtWLyHP0cfexJowX_3gHaFL?w=182&h=128&c=7&o=5&pid=1.7) 30 stretch;
text-shadow: 2px 2px 5px red;
transition: 2s, 2s, transform 2s linear;
}
#service .section-inner h2:hover{
transform: rotateZ(180deg);
width:600px;
height:200px;
}
#service .section-inner .flex-container{
display: flex;
flex-wrap:column-wrap;
flex-direction: row-reverse;
justify-content: space-between;
align-items: center;
}
#service .section-inner .flex-container > details summary {
background-color: black;
color:white;
text-align: center;
line-height:50px;
font-size: 20px;
}
#service .section-inner .flex-container > details summary:hover{
color:red;
}
footer {
text-align: center;
padding: 50px;
color:white;
background-color: black;
}
/* Background images for sections*/
#home {
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url('https://th.bing.com/th/id/OIP.IRqL1X4411XNyyrU3B6vxAHaEK?w=289&h=180&c=7&o=5&pid=1.7');
}
.about {
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url('https://guidetoexam.com/wp-content/uploads/2019/11/images-1.jpg');
}
#service {
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url('https://images.squarespace-cdn.com/content/v1/59307e96f5e231d2d07636f7/1537196084294-9DFFTYKVGMEUJUY91S3Y/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/20160225FloraFarmsPhotoshoot0030.jpg?format=750w');
}
#contact {
background-image: linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), url('https://th.bing.com/th/id/OIP.nJI5XbFsdSs5AMpdgJc6ewHaEK?w=311&h=180&c=7&o=5&pid=1.7');
}
\ No newline at end of file
Day5/day5.html 0 → 100644
View file @ dccd3415
<!DOCTYPE html>
<html>
<head>
<title>Nehru Zoological Park</title>
<link rel="stylesheet" href="day5.css">
<style>
.address p {
display: none;
background-color: black;
color:white;
padding: 20px;
font-size: 20px;
height:100px;
width:100%;
}
div:hover p {
display: block;
}
::selection {
color: red;
background: grey;
}
h2::first-letter {
color: #ff0000;
font-size: 70px;
}
.dropbtn {
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: black;
color:black;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 5px 5px;
text-decoration: none;
display: block;
background-color: white;
}
.dropdown-content a:hover {background-color: green;color: white}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: green;
}
</style>
</head>
<body>
<header>
<img src="back.jpg" class="profile-img">
<nav>
<ul >
<li><a href="#home">Home</a></li>
<li><a href="#service">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="dropdown">
<button class="dropbtn">Zoo Park</button>
<div class="dropdown-content">
<a href="#home"> Home</a>
<a href="#service"> Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</div>
</nav>
</header>
<main>
<section id="home">
<img src="back.jpg" class="profile-img">
<div class="section-inner">
<h1>Welcome to Nehru Zoological Park.</h1>
<div class="address"><p>Zoo Park Main Rd, Kishan Bagh, Bahadurpura West, Hyderabad, Telangana, 500064, India</p></div>
<p>Enjoy fresh Air</p>
</div>
</section>
<section id="service">
<div class="section-inner">
<h2>Services at zoo park.</h2>
<div class="flex-container">
<details>
<summary >Toy Train Ride</summary>
<img src="C:\Sprint5\Day4\train.jpg" style="float:center;height:200px;width:300px">
<p> The toy train is a fun way of exploring the beauty of the park. It is trendy among children. The fee for the toy train is Rs. 10 per child( 3-10 years) and Rs. 20 per adult.
</p><br>
</details>
<details>
<summary >Tiger and lion safari</summary>
<img src="C:\Sprint5\Day4\safari.jpg" style="float:center;height:200px;width:300px">
<p> The safaris take you on an adventure ride and provides glimpses of wilderness on the way. You can watch animals like bears, bison, tigers, and deer. The charges for adults is Rs. 50 and for children Rs. 30.
</p><br>
</details>
<details>
<summary >Boating</summary>
<img src="C:\Sprint5\Day4\boating.jpg" style="float:center;height:200px;width:300px">
<p> Another fun activity to do in the park is boating at the Mir amir lake. TSTDC organises boat rides for the tourists. You can choose from variants like passenger boating and speed boating.
</p><br>
</details>
<details>
<summary >Aquarium</summary>
<img src="C:\Sprint5\Day4\aquarium.jpg" style="float:center;height:200px;width:300px">
<p> Here you marvel at the sight of beautiful aquatic species which includes freshwater fishes and marine water species.
</p><br>
</details>
<details>
<summary >Museum</summary>
<img src="C:\Sprint5\Day4\museum.jpg" style="float:center;height:200px;width:300px">
<p> The place is replete with various exhibitions on biodiversity conservation, pieces of evidence of ancient animals(pug marks teeth, feathers, and many more), and taxidermy models.
</p><br>
</details>
<details>
<summary > Jurassic Park</summary>
<img src="C:\Sprint5\Day4\park.jpg" style="float:center;height:200px;width:300px">
<p> Children especially love the place. It features humongous figures of various dinosaur species such as Triceratops, Stegosaurus, and Tyrannosaurus.
</p><br>
</details>
</div>
</div>
</section>
<section class="about" id="about">
<div class="section-inner">
<h2>About Zoo Park..</h2>
<p style="font-size:20px">Nehru Zoological Park is one of the most iconic tourist places to visit in Hyderabad. It is also one of the largest zoos in India. </p>
<details>
<summary >Location</summary>
<p>The Nehru Zoological Park is located on the zoo main park road, Bahadarpura west, near Mir Alam Tank in Hyderabad.</p><br>
</details>
<details>
<summary >Timings</summary>
<p>The Nehru opens to the public from 8:30 am to 5 pm</p><br>
</details>
<details>
<summary >Entry fee</summary>
<p>On weekdays, the entry fee is Rs. 50 for adults and Rs. 30 for children. On weekends, it hikes up to Rs. 60 per adult and Rs. 40 per child. The still camera charge is Rs. 100 and video camera charge is Rs. 500. There are additional charges for rides, safaris, toy train ride and other activities.</p><br>
</details>
<details>
<summary > Visitor’s facility</summary>
<p> The park provides safe drinking water, first-aid facility, toilets and washrooms, benches and shelters along with a guesthouse for accommodation.</p><br>
</details>
<details>
<summary > Parking facility</summary>
<p> There is a separate parking facility available for the visitors. No private cars are allowed inside the park premises. The park provides battery-operated vehicles to travel around.</p><br>
</details>
</div>
</section>
<section id="contact">
<div class="section-inner">
<p><h2>Contact Us..</h2>
<h3>For any queries</h3>
<hr><i class="fa fa-phone"></i>
<h4 >Call On..</h4>
<p>+91 987654321</p><hr><br>
<i class="fa fa-map-marker"></i>
<h4>Visit at..</h4>
<p>Nehru Zoological Park,Hyderabad,Telangana</p><hr><br>
<i class="fa fa-envelope"></i>
<h4>Email at..</h4>
<p>nehruzoo@hyd.com</p></p><br>
</div>
</section>
</main>
<footer>
© Copyright Boberick The Llama, 2017
</footer>
</body>
</html>
\ No newline at end of file
Final Template/final.css 0 → 100644
View file @ dccd3415
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');
* {
box-sizing:border-box;
}
body {
font-family: Arial;
display: flex;
min-height: 100vh;
flex-direction: column;
border:2px solid black;
}
/*Header Section*/
.header {
padding: 30px;
}
.header span{
color:maroon;
font-weight: bold;
}
.header .header_top *{
display: inline-block;
}
.header .header_top ul {
float:right;
}
.header .header_top li a {
color: grey;
padding: 3px 6px 6px 6px;
text-decoration: none;
font-size:15px;
}
.header ul.breadcrumb li+li:before {
color:lightgrey;
content: "|\00a0";
}
.header .breadcrumb li a:hover{
color: red;
}
.header h1::first-letter {
color:White;
background-color: Maroon;
}
.header .cart *{
display: inline-block;
}
.header .cart p{
float:right;
}
.header .cart p span{
color:maroon;
font-size:30px;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: white;
color:grey;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the nav links */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: background.8s ease-in-out;
}
.topnav a:hover {
background-color: maroon;
}
/*End of header*/
/* Create three unequal columns that floats next to each other */
.column {
float: left;
height: 530px;
}
/*For categories section*/
.left{
margin:8px 30px 10px 30px;
width:20%;
border:1px solid lightgrey;
}
.dropbtn {
background-color: maroon;
color: white;
padding:2px;
font-size:20px;
border: none;
cursor: pointer;
text-align: center;
}
.left #drop li {
list-style-type: none;
}
.left #drop li a{
color: Black;
text-decoration: none;
}
.left #drop li a:hover{
color:red;
}
/*For Advertisement*/
.right {
width: 73%;
border:1px solid lightgrey;
margin:8px 30px 10px 2px;
}
.right span{
text-indent:180px;
font-size:100px;
color:firebrick;
}
.container{
text-align: center;
width: 300px;
height: 200px;
padding-top: 10px;
}
#btn{
font-size: 25px;
background-color: firebrick;
color:white;
border:none;
transition:ease 1s;
}
#btn:hover{
font-size:30px;
}
/*To display new and featured products*/
.box1{
width:100%;
height: 400px;
}
.product {
border:1px solid lightgrey ;
margin-left: 30px;
margin-right: 30px;
}
.box1 .product *{
display: inline-block;
}
.box1 .product p{
float:right;
}
.box1 .product p:hover{
color:red;
}
.box1 .product h2{
font-weight: normal;
text-indent: 20px;
}
div.gallery {
border: 1px solid #ccc;
width:300px;
float: center;
}
hr.new1 {
border-top: 1px solid firebrick;
margin-bottom: 0px;
}
div.gallery img {
width: 250px;
height:200px;
margin-top:10px;
margin-right:20px;
margin-bottom:20px;
margin-left: 20px;
}
div.desc {
padding: 15px;
color:grey;
}
div.desc button{
color:white;
background-color:firebrick;
float: right;
border-style: none;
font-size: 20px;
transition: background.8s ease-in-out;
}
div.desc button:hover{
background-color: black;
}
.responsive {
padding:0 30px 20px 30px;
float: left;
width: 24.3%;
}
/*Footer section*/
.footer ul {
list-style: none;
padding: 0px;
}
footer {
margin-left: 30px;
margin-right: 30px;
color: black;
line-height: 1.5;
}
footer a {
text-decoration: none;
color:cadetblue;
}
.footer a:hover {
color:red;
}
.footer li:hover {
color:red;
}
.footer .ft-title { /*For titles in footer*/
color:black;
font-size: 20px;
font-weight: normal;
}
.ft-main {
padding: 0px 30px;
display: flex;
flex-wrap: wrap;
}
.ft-main-item {
padding: 40px;
min-width: 200px;
text-indent: 20px;
}
.ft-main-item .vl {
border-left: 1px solid grey;
height: 300px;
position: absolute;
}
.ft-social-list {
display: flex;
}
.ft-social-list li {
margin: 5px;
font-size:25px;
text-indent:5px;
}
.ft-social-list li a{
color: red;
}
.ft-legal {
color:grey;
text-align: center;
}
.ft-legal span{
color:red;
text-decoration:underline;
}
.ft-legal span:hover{
color:grey;
text-decoration: none;
}
Final Template/final.html 0 → 100644
View file @ dccd3415
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="final.css">
</head>
<body>
<!-- Header Section -->
<div class="header">
<div class="header_top">
<p><b>Need help?</b>call us <span>1-22-3456789</span>
<ul class="breadcrumb">
<li><a href="#">Register</a></li>
<li><a href="#">Login</a></li>
<li><a href="#">Delivery</a></li>
<li><a href="#">Checkout</a></li>
<li><a href="#">MyAccount</a></li>
</ul>
</p></div><hr>
<div class="cart">
<h1 style="font-family: 'Noto Serif', serif; font-size: 40px">&nbsp;HOME SHOPPE</h1>
<p >Welcome to our Online Store! <span>Cart:</span>0 item(s) - $0.00<i class="fa fa-caret-down" style="font-size:24px;color:red;text-indent:25px"></i></p></div>
<div class="topnav">
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">DELIVERY</a>
<a href="#">NEWS</a>
<a href="#">CONTACT</a>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search" name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</div>
<!-- Column for category -->
<div class="row">
<div class="column left" style="background-color:white;">
<div class="dropbtn">
<h3>CATEGORIES</h3></div>
<div id="drop">
<ul >
<li><i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Mobile Phones</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Desktop</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Laptop</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Accessories</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Software</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Sports &amp; Fitness</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Footwear</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Jewellery</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Clothing</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Home Decor &amp; Kitchen</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Beauty &amp; Healthcare</a><hr>
<i class=" fa fa-angle-right" ></i><a href="#">&nbsp;Toys, Kids &amp; Babies</a></li>
</ul> </div>
</div>
<!-- Column for advertisment -->
<div class="column right" style="background-color:white;"><br><br>
<img src="C:\Sprint5\Final Template\tv.jpg" alt="home shoppe" style="float:right;height:300px;width:400px">
<h1 style="text-indent:80px;font-size:30px;color:firebrick">CLEARANCE<br><span>&nbsp;&nbsp;SALE</span></h1>
<h4 style="text-indent:80px;font-size:25px;color:grey">UPTO 40% OFF</h4>
<p style="text-indent:80px;font-size:15px;font-weight: bold">Get to Know More About Our Memorable Services</p>
<div class="container">
<button id ="btn"> Shop Now </button> </div>
</div>
</div><br>
<!-- For displaying products -->
<div class="box1" >
<div class="product" >
<h2>NEW PRODUCTS</h2>
<p style="font-size:17px;padding: 10px">See All Products<i class="fa fa-caret-right" style="font-size:25px;color:red;padding-left: 10px;ve"></i></p>
</div><br>
<div class="responsive">
<div class="gallery">
<img src="C:\Sprint5\Final Template\tv1.jpg" alt="home shoppe">
<div class="desc">LOREM IPSUM IS SIMPLY<p><hr class="new1"><span style="font-size:20px;color:black">$620.87</span><button >Add to cart</button></p></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="C:\Sprint5\Final Template\speaker.jpg" alt="home shoppe">
<div class="desc">LOREM IPSUM IS SIMPLY<p><hr class="new1"><span style="font-size:20px;color:black">$899.75</span><button >Add to cart</button></p></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="C:\Sprint5\Final Template\camera.jpg" alt="home shoppe">
<div class="desc">LOREM IPSUM IS SIMPLY<p><hr class="new1"><span style="font-size:20px;color:black">$599.00</span>
<button>Add to cart</button></p></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="C:\Sprint5\Final Template\tv2.jpg" alt="home shoppe">
<div class="desc">LOREM IPSUM IS SIMPLY<p><hr class="new1"><span style="font-size:20px;color:black">$679.87</span>
<button >Add to cart</button></p></div>
</div>
</div>
</div><br><br><br><br>
<div class="box1">
<div class="product" >
<h2>FEATURED PRODUCTS</h2>
<p style="font-size:17px;padding: 10px">See All Products<i class="fa fa-caret-right" style="font-size:25px;color:red;padding-left: 10px;ve"></i></p>
</div><br>
<div class="responsive">
<div class="gallery">
<img src="C:\Sprint5\Final Template\camera1.jpg" alt="home shoppe">
<div class="desc">LOREM IPSUM IS SIMPLY<p><hr class="new1"><span style="font-size:20px;color:black">$620.87</span>
<button>Add to cart</button></p></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="C:\Sprint5\Final Template\speaker1.jpg" alt="home shoppe">
<div class="desc">LOREM IPSUM IS SIMPLY<p><hr class="new1"><span style="font-size:20px;color:black">$899.75</span>
<button >Add to cart</button></p></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="C:\Sprint5\Final Template\tv3.jpg" alt="home shoppe">
<div class="desc">LOREM IPSUM IS SIMPLY<p><hr class="new1"><span style="font-size:20px;color:black">$599.00</span>
<button >Add to cart</button></p></div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<img src="C:\Sprint5\Final Template\speaker2.png" alt="home shoppe">
<div class="desc">LOREM IPSUM IS SIMPLY<p><hr class="new1"><span style="font-size:20px;color:black">$679.87</span>
<button >Add to cart</button></p></div>
</div>
</div>
</div><br><br><br><br>
<!-- Footer Section -->
<div class="footer">
<footer><hr>
<!-- Footer main -->
<section class="ft-main">
<div class="ft-main-item">
<div class="vl"></div>
<h2 class="ft-title">INFORMATION<hr></h2>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Advanced Search</a></li>
<li><a href="#">Orders and Returns</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="ft-main-item">
<div class="vl"></div>
<h2 class="ft-title">WHY BUY FROM US<hr></h2>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Site Map</a></li>
<li><a href="#">Search Terms</a></li>
</ul>
</div>
<div class="ft-main-item">
<div class="vl"></div>
<h2 class="ft-title">MY ACCOUNT<hr></h2>
<ul>
<li><a href="#">Sign In</a></li>
<li><a href="#">View Cart</a></li>
<li><a href="#">My Wishlist</a></li>
<li><a href="#">Track My Order</a></li>
<li><a href="#">Help</a></li>
</ul>
</div>
<div class="ft-main-item">
<div class="vl"></div>
<h2 class="ft-title">CONTACT <hr></h2>
<ul style="color: cadetblue">
<li>+91-123-456789</li>
<li>+00-123-000000</li>
</ul>
<h2 class="ft-title">FOLLOW US <hr></h2>
<ul class="ft-social-list">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</section>
<hr>
<!-- Footer legal -->
<section class="ft-legal">
<p>&copy;2013 home_shoppe. All rights reserved | Design by <span>W3layouts</span></p>
</section>
</footer>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment