PORTFOLIO BY USING HTML & CSS

BIRLA INSTITUTE OF TECHNOLOGY,MESRA
JAIPUR
TOPIC : PORTFOLIO BY USING HTML & CSS
PRESENTED BY:
TARUN TIWARI (MCA/25007/18)
MEGHAJ KUMAR MALLICK(MCA/25017/18)
MCA 2ND YEAR , 4TH SEMESTER

CONTENT OF SLIDE
• INTRODUCTION OF TOPIC
• WEBPAGE
• CODE IMPLEMENTATION

1. INTRODUCTION
• To create a portfolio gallery we will need only HTML and CSS.
• Divide the whole article into two different sections in the 1st
section, we will create the structure for the portfolio gallery.
• In the second section, we will make sure the gallery looks
attractive.
• The portfolio gallery is useful when your website contains
different types of content or so many contents.
• With the help of a portfolio gallery, we can easily display all
the contents in your front page to the user.

3. CODE IMPLEMENTATION
• <html>
• <head>
• <style>
• ul {
• list-style-type: none;
• margin: 0;
• padding: 0;
• overflow: hidden;
• background-color: #333;
• }
• li {
• float: right;
• }
• li a {
• display: block;
• color: white;
• text-align: center;
• padding: 14px 16px;
• text-decoration: none;
• }

• li a:hover:not(.active) {
• background-color: #111;
• }
• .active {
• background-color: #11005c;
• }
• .centered {
• position: absolute;
• top: 50%;
• left: 50%;
• transform: translate(-50%, -50%);
• }
• </style>
• </head>
• <body>

• <ul>
• <li><a href="#CONTACT">CONTACT</a></li>
• <li><a href="#MYWORK">MYWORK</a></li>
• <li><a href="#SERVICES">CONTACT</a></li>
• <li><a href="#ABOUT">ABOUT</a></li>
• <li><a class="active" href="#HOME">HOME</a></li>
• </ul>
• <div class="container">
• <img src="C:UsersTarun TiwariDesktop111.jpg" alt="Snow" style="width:100%;" height
="500">
• <div class="centered"><h1>Hi we are making the portfolio<br><h3>We use HTML and CSS to
convert webpages designs into beautiful and efficient websites.</h3></h1></div><br>
• <div class="centered"></div>
• </div>
• </body>
• </html>

• References:
• Galitz, Wilbert (2007). The Essential Guide to User
Interface Design, 3rd Edition. John Wiley & Sons, Inc. ,
Canada
• http://www.google.com.ph/
•http://www.wikipedia.com/
REFERENCES

PORTFOLIO BY USING HTML & CSS

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to PORTFOLIO BY USING HTML & CSS

Similar to PORTFOLIO BY USING HTML & CSS (20)

More from Meghaj Mallick

More from Meghaj Mallick (20)

Recently uploaded

Recently uploaded (20)

PORTFOLIO BY USING HTML & CSS