automated commit by submit50
This commit is contained in:
Priyatham-sai-chand
commit
a739e2708b
|
|
@ -0,0 +1,31 @@
|
|||
# Project 0
|
||||
|
||||
Web Programming with Python and JavaScript
|
||||
|
||||
It is a project consisting of 5 pages with main being the homepage along with interests,hobbies,experiences,philosphy.
|
||||
|
||||
The Requirements of the projects are met accordingly:
|
||||
|
||||
Number of pages - 5
|
||||
|
||||
Every website has bootstrap buttons to navigate to all other pages excluding the mainpage which has hyperlinks.
|
||||
|
||||
There is an unordered list in interests, a table in hobbies and an image called "about me" in the main.
|
||||
|
||||
There are 3 seperate stylesheets for main,hobbies and interests.
|
||||
|
||||
The styelsheets have various properties like text-align,font-family,font-size,background-color,margin-top to name a few.
|
||||
|
||||
There are many classes that are used with "." .texts.
|
||||
There are few ids that are used with "#" #me_image.
|
||||
Some of the CSS selectors used are " " , " > ",":","::","," to name a few.
|
||||
|
||||
Hobbies stylesheet uses a @media query to look for max-width if it is shrinked a messsage is displayed saying the same.
|
||||
|
||||
Bootstrap 4 is used in experiences and philosophy pages where two columns variations are used in each of them i.e "col-3" and "col-6 col-md-4" as the grid model.
|
||||
Bootstrap Component is used in interests,experiences,hobbies,philosophy as buttons that link all other pages.
|
||||
|
||||
main has a scss file that is compiled to give main.css
|
||||
it contains variables like $first_color and so on.
|
||||
#me_image is nested inside .texts
|
||||
all the other pages links in main has inhertiance from %links.
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>My Experiences</title>
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
|
||||
<style>
|
||||
.row > div{
|
||||
|
||||
margin-top: 100px;
|
||||
padding: 20px;
|
||||
background-color: darkgoldenrod;
|
||||
border: 2px solid black;
|
||||
text-align: center;
|
||||
color: antiquewhite;
|
||||
}
|
||||
h1{
|
||||
text-align:center;
|
||||
margin-top: 100px;
|
||||
}
|
||||
|
||||
#buttons{
|
||||
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<h1> My Experiences</h1>
|
||||
<body>
|
||||
<div class = "row">
|
||||
<div class = "col-3">
|
||||
My experiences with various countries and continents have not been the most. So, exposure to various landscapes is little.
|
||||
</div>
|
||||
<div class = "col-3">
|
||||
The Internet has been the my go-to to understand everything that i miss and learn new things that are strange and unheard of.
|
||||
</div>
|
||||
<div class = "col-3">
|
||||
I compensate to the inexperience of travelling by watching documentries to learn more about various countries and the diverse species of flora and fauna.
|
||||
</div>
|
||||
<div class = "col-3">
|
||||
I appreciate fine art and the craftsmenship of ordinary things which can be enhanced by
|
||||
quality of material and skill.
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id = "buttons">
|
||||
|
||||
<a href="main.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">HomePage</a>
|
||||
|
||||
<a href="interests.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Interests</a>
|
||||
|
||||
<a href="hobbies.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Hobbies</a>
|
||||
|
||||
<a href="philosophy.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Philosophy</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
body > p{
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 50px;
|
||||
margin-top: 100px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 500px){
|
||||
|
||||
h6::before{
|
||||
color: chocolate;
|
||||
content: "page shrinked !!"
|
||||
|
||||
}
|
||||
}
|
||||
table {
|
||||
border: 3px solid black;
|
||||
font-size: 30px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
table.center {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
th, td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: grey;
|
||||
}
|
||||
td:hover{
|
||||
|
||||
background-color: yellow;
|
||||
|
||||
}
|
||||
|
||||
#buttons{
|
||||
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My hobbies</title>
|
||||
<meta name = "viewport" content = "width=device-width",initial-scale = "1.0">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
|
||||
<link rel="stylesheet" href="hobbies.css">
|
||||
</head>
|
||||
<h6> </h6>
|
||||
<body>
|
||||
|
||||
<p>Hobbies</p>
|
||||
<table class = "center">
|
||||
<tr>
|
||||
<th>Hobby</th>
|
||||
<th>Know more</th>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Non-fictional reading</td>
|
||||
<td><a href = "">Click here</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>origami</td>
|
||||
<td><a href = "">Click here</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>watching documentaries</td>
|
||||
<td><a href = "">Click here</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Wellness</td>
|
||||
<td><a href = "">Click here</a></td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<div id = "buttons">
|
||||
|
||||
<a href="main.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">HomePage</a>
|
||||
|
||||
<a href="interests.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Interests</a>
|
||||
|
||||
<a href="philosophy.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Philosophy</a>
|
||||
|
||||
<a href="experiences.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Experiences</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
body{
|
||||
|
||||
background-color: lightgoldenrodyellow;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
body p{
|
||||
text-align: center;
|
||||
margin-top: 100px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-family: arial;
|
||||
font-size: 50px;
|
||||
}
|
||||
body > ul{
|
||||
text-align: center;
|
||||
margin-top: 90px;
|
||||
color: navy;
|
||||
font-weight: bold;
|
||||
font-family: arial;
|
||||
font-size: 30px;
|
||||
|
||||
}
|
||||
|
||||
#buttons{
|
||||
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<title> Interests page </title>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<link rel = "stylesheet" href = "interests.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>
|
||||
My Interests include:
|
||||
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>Automobiles</li>
|
||||
<li>Watches</li>
|
||||
<li>Reading</li>
|
||||
<li>Learning new technologies</li>
|
||||
<li> Understanding space and nature</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<div id = "buttons">
|
||||
|
||||
<a href="main.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">HomePage</a>
|
||||
|
||||
<a href="hobbies.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Hobbies</a>
|
||||
|
||||
<a href="philosophy.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Philosophy</a>
|
||||
|
||||
<a href="experiences.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Experiences</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
.texts {
|
||||
font-family: sans-serif;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
}
|
||||
.texts #me_image {
|
||||
text-align: center;
|
||||
width: 700px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.philosophy, .experiences, .hobbies, .interests {
|
||||
font-family: sans-serif;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
border: 1px solid black;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.interests {
|
||||
margin: 20px;
|
||||
background-color: #F2F3AE;
|
||||
}
|
||||
|
||||
.hobbies {
|
||||
margin: 20px;
|
||||
background-color: #EDD382;
|
||||
}
|
||||
|
||||
.experiences {
|
||||
margin: 20px;
|
||||
background-color: #FC9E4F;
|
||||
}
|
||||
|
||||
.philosophy {
|
||||
margin: 20px;
|
||||
background-color: #F4442E;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<title> The main page.</title>
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class = "texts">
|
||||
<p>A page about me</p>
|
||||
<img src="https://www.iwriteessays.com/image/aboutmejpg" id = "me_image" >
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class = "interests"><a href = "interests.html">Interests</a></div>
|
||||
|
||||
<div class = "hobbies"><a href = "hobbies.html">Hobbies</a></div>
|
||||
|
||||
<div class = "experiences"><a href = "experiences.html">Experiences</a></div>
|
||||
|
||||
<div class = "philosophy"><a href = "philosophy.html">Philosophy</a></div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
$first_color: #F2F3AE;
|
||||
$second_color: #EDD382;
|
||||
$third_color: #FC9E4F;
|
||||
$fourth_color: #F4442E;
|
||||
.texts{
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
color: grey;
|
||||
|
||||
#me_image{
|
||||
|
||||
text-align: center;
|
||||
width: 700px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
%links{
|
||||
|
||||
font-family: sans-serif;
|
||||
font-size:18px;
|
||||
font-weight: bold;
|
||||
border: 1px solid black;
|
||||
padding:20px;
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.interests{
|
||||
|
||||
@extend %links;
|
||||
margin : 20px;
|
||||
background-color: $first_color;
|
||||
}
|
||||
|
||||
.hobbies{
|
||||
|
||||
@extend %links;
|
||||
margin: 20px;
|
||||
background-color: $second_color;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.experiences{
|
||||
|
||||
@extend %links;
|
||||
margin:20px;
|
||||
background-color: $third_color;
|
||||
|
||||
|
||||
}
|
||||
.philosophy{
|
||||
|
||||
@extend %links;
|
||||
margin:20px;
|
||||
background-color: $fourth_color;
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<title>My Philosophy</title>
|
||||
<head>
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
|
||||
<style>
|
||||
.row > div{
|
||||
|
||||
margin-top: 100px;
|
||||
padding: 20px;
|
||||
background-color: lemonchiffon;
|
||||
border: 2px solid black;
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
h1{
|
||||
text-align:center;
|
||||
margin-top: 100px;
|
||||
}
|
||||
#buttons{
|
||||
|
||||
margin-top: 100px;
|
||||
text-align: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<h1> My Philosophy</h1>
|
||||
<body>
|
||||
<div class="row">
|
||||
<div class="col-6 col-md-4">
|
||||
|
||||
I believe in the orderly nature of things and the dominance of human beings as the intelligent species who needs to keep pushing boundaries to go furuther and reach new places.
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
The Will to go forward and achieve things gets me going everyday to work and reach new goals.This way of being motivated to want more and more of knowledge and venture into new territories that are waiting to be conquered wakes me up in the morning.
|
||||
|
||||
</div>
|
||||
<div class="col-6 col-md-4">
|
||||
Hardwork is always worth it. I tend to move deeper and work harder as obstacles come to move to show my willingness to be a master at my trade and keep pushing boundaries to make them seem simpler once I look back at them and realise I couldn't have done it all if I quit.
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id = "buttons">
|
||||
|
||||
<a href="main.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">HomePage</a>
|
||||
|
||||
<a href="interests.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Interests</a>
|
||||
|
||||
<a href="hobbies.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Hobbies</a>
|
||||
|
||||
<a href="experiences.html" class="btn btn-primary btn" tabindex="-1" role="button" aria-disabled="true">Experiences</a>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue