CSS Header Assignment

<!
DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
/* Style the body */
body {
font-family: Arial, Impact, sans-serif;
margin: 0;
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background:crimson;
color: chartreuse;
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is
positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like
position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for
these versions the navbar will inherit default position */
.navbar {
overflow: hidden;
background-color: darkblue;
position: sticky;
position: -webkit-sticky;
top: 0;
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: burlywood;
text-align: center;
padding: 14px 20px;
text-decoration: none;
/* Right-aligned link */
.navbar a.right {
float: right;
/* Change color on hover */
.navbar a:hover {
background-color: blue;
color: black;
}
/* Active/current link */
.navbar a.active {
background-color: #666;
color: white;
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: darkblue;
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top
of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on
top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<h1 style="border:2px solid chartreuse;">Priyanka Mahesh Rustumpure</h1>
<p><b>Roll No. 2011256</b></p>
</div>
<div class="navbar">
<a href="#" class="active">Home</a>
</div>
<div class="row">
<div class="side">
<h2 align="center" style=color:darkblue;>About Me</h2>
<h4 align="center">Photo of me:</h4>
<center><img src="C:\Users\piyub\Downloads\Pic of myself31491274798.jpg"

width="400"></center>
</div>
<div class="main">
<h2 align="center" style=color:darkblue;>About Myself</h2>
<p align="center" style=color:Tomato;>My name is Priyanka. I am from Belgavi, Karnataka

currently residing in Bahrain.
I am an undergraduate student studying BCom Honours at Christ University, Bangalore.
I can speak in English, Hindi and Kannada.
I am a person who is very optimistic about every aspect of life. I stay away from all sorts of
negativity.
I am a highly organised person who likes to keep a clean workspace.
I am a responsible person who can handle things very well especially when it comes to
multitasking.
I am looking forward to making a career in finance and accounting.</p>

<p align="center" style=color:Tomato;>When I'm not working, I spend my time in a variety of
interests and hobbies which include reading thriller suspense novels, art, dance and music.
I cannot call it a day until I have read something good. I like playing badminton with my dad in the
weekends.
I enjoy spending time with my friends and family. I enjoy travelling as well.
I usually like watching movies and series which have genres of mystery and comedy.
I enjoy watching korean dramas and Kpop.
I also love being out in nature. It helps me feel relaxed and peaceful.</p>
<br>
<h2 align="center" style=color:darkblue;>My College</h2>
<center><img src="C:\Users\piyub\OneDrive\Documents\christ-uni-1594812346.jpg"
width="500"></center>
</div>
</div>
<div class="footer">
<h2><font color="white">Thank you</font></h2>
</div>
</body>
</html>

CSS Header Assignment

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Header Assignment

Uploaded by

Copyright:

Available Formats

<!

<meta name="viewport" content="width=device-width, initial-scale=1">

/* Style the body */

font-family: Arial, Impact, sans-serif;

/* Increase the font size of the heading */

/* Style the navigation bar links */

padding: 14px 20px;

/* Change color on hover */

display: -ms-flexbox; /* IE10 */

-ms-flex-wrap: wrap; /* IE10 */

/* Create two unequal columns that sits next to each other */

-ms-flex: 30%; /* IE10 */

-ms-flex: 70%; /* IE10 */

/* Fake image, just for this example */

@media screen and (max-width: 700px) {

@media screen and (max-width: 400px) {

<h1 style="border:2px solid chartreuse;">Priyanka Mahesh Rustumpure</h1>

<p><b>Roll No. 2011256</b></p>

<a href="#" class="active">Home</a>

<h2 align="center" style=color:darkblue;>About Me</h2>

<h4 align="center">Photo of me:</h4>

<center><img src="C:\Users\piyub\Downloads\Pic of myself31491274798.jpg"

<h2 align="center" style=color:darkblue;>About Myself</h2>

<p align="center" style=color:Tomato;>My name is Priyanka. I am from Belgavi, Karnataka

I am an undergraduate student studying BCom Honours at Christ University, Bangalore.

I can speak in English, Hindi and Kannada.

I am a highly organised person who likes to keep a clean workspace.

I am looking forward to making a career in finance and accounting.</p>

I enjoy watching korean dramas and Kpop.

<h2 align="center" style=color:darkblue;>My College</h2>

<h2><font color="white">Thank you</font></h2>

You might also like