Download to read offline
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