KEMBAR78
PORTFOLIO BY USING HTML & CSS | PPTX
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.
2. PORTFOLIO PAGE
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

PORTFOLIO BY USING HTML & CSS

  • 1.
    BIRLA INSTITUTE OFTECHNOLOGY,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
  • 2.
    CONTENT OF SLIDE •INTRODUCTION OF TOPIC • WEBPAGE • CODE IMPLEMENTATION
  • 3.
    1. INTRODUCTION • Tocreate 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.
  • 4.
  • 5.
    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; • }
  • 6.
    • 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>
  • 7.
    • <ul> • <li><ahref="#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>
  • 8.
    • 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