Scribd
Upload
14 views8 pages

Portfolio Sumal

The document contains HTML code for a portfolio website with pages for About and Portfolio. It includes navigation links between pages and uses CSS styling for colors, fonts, positioning of elements.

Uploaded by

sumalesh.it22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views8 pages

Portfolio Sumal

The document contains HTML code for a portfolio website with pages for About and Portfolio. It includes navigation links between pages and uses CSS styling for colors, fonts, positioning of elements.

Uploaded by

sumalesh.it22
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

PORTFOLIO.

html :
<!DOCTYPE html>

<html lang="en">

<head>

<link rel="stylesheet" href="STYLE\STYLE.css">

<meta charset="UTF-8">

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

<title>PORTFOLIO</title>

<link rel="icon" href="IMAGE\storm_FILL0_wght400_GRAD0_opsz24.png">

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Diphylleia&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200;0,300;0,500;1,900&display=swap" rel="stylesheet">

<center><img src="IMAGE\123.png" height="200" top:2cm> </center>

<header>SUMALESH K A</header>

<h1>Department of</h1>

<h2>INFORMATION TECHNOLOGY</h2>

</head>

<body>

<div class="container">

<nav class="navbar">

<ul class="nav-links">

<li class="nav-link">

<a href="about.html">ABOUT</a>

</li>

<li class="nav-link skills">

<a href="#">SKILLS</a>

<Ul class="drop-down-1">

<li>IOT</li>

<li>MACHINE LEARNING</li>

<li>QT</li>

<li>SPORTS</li>

</Ul>

</li>

<li class="nav-link project">

<a href="#">PROJECTS</a>

<Ul class="drop-down-2">

<li>TEXT EMOTION DETECTION</li>

<li>ADAPTIVE HEADLIGHT</li>

<li>CGPA CALCULATOR</li>

</Ul>

</li>

<li class="nav-link">
<a href="second.html">CLUB</a>

</li>

</ul>

</nav>

</div>

<div class="footer">

<p>+91 9788948883 <br><a href = "mailto: sumalesh.it22@bitsathy.ac.in">sumalesh.it22@bitsathy.ac.in</a>

</p>

</div>

</body>

</html>

ABOUT.html :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>ABOUT ME</title>

<header id="abt-header">ABOUT ME</header>

<h1>Hello there!</h1>

</head>

<style>

p{

color: antiquewhite;

text-align: center;

font-family: 'Jost', sans-serif;

letter-spacing: 1.5px;

word-spacing: 2px;

font-size:20px;}

body{

background-image: linear-gradient(to right, #000000, #2b0c13, #4e0817, #720013, #920000);}

h1{

color: antiquewhite;

text-align: center;

font-family: 'Jost', sans-serif;

letter-spacing: 1.5px;

word-spacing: 2px;

font-size: 40px; }

.container {

font-family: arial;

font-size: 24px;

margin: 25px;

width: 350px;
height: 200px;

outline: dashed 1px rgba(0, 0, 0, 0);

position: relative;

.cont {

width:30cm;

height:auto ;

background-color: rgba(255, 0, 0, 0.161);

position: absolute;

border-radius: 5px;

top: 50%;

left: 50%;

margin: -25px 0 0 -25px;

</style>

<body>

<div class="container">

<div class="cont">

<p id="dd"> I'm <STRong>SUMALESH K A</STRong> , a passionate and dedicated college student with a zest for COMPUTER SCIEMCE. Currently pursuing
my B TECH at BANNARI AMMAN INSTITUTE OF TECHNOLOGY I am deeply engaged in exploring the realms of MACHINE LEARNING.

<br> <br>

Driven by curiosity and fueled by a love for learning, I am committed to honing my skills in MACHINE LEARNING. My academic journey has equipped me
with a solid foundation in AI, and I am excited about the prospect of applying this knowledge in real-world scenarios.

<br><br>

Beyond the classroom, I actively seek opportunities to engage in RRC CLUB that allow me to collaborate, innovate, and contribute meaningfully to my
community. As a forward-thinking individual, I am constantly on the lookout for new challenges that push me to expand my horizons.

<br><br>

This portfolio serves as a snapshot of my academic and extracurricular endeavors, showcasing my commitment to excellence, creativity, and continuous
growth. Feel free to explore and get to know more about my journey, projects, and aspirations.</p>

</div>

</div>

</body>

</html>
STYLE.css :
body{ background: #ffffff24;

background-image: linear-gradient(to right, #000000, #2b0c13, #4e0817, border-radius: 1rem ;


#720013, #920000);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.545);
}
}
header{

.nav-links{
font-family:'Jost', sans-serif ;
display: flex;
font-optical-sizing: auto;
gap: 2rem;
font-weight: 500;
}
font-size: 250%;
.nav-link, .drop-down-1 li,.drop-down-2 li,.drop-down-3 li{
font-style: normal;
list-style: none;
text-align: center;
height: 100%;
letter-spacing: 5px;
padding: 0.5rem 1rem;
color:antiquewhite;
font-weight: 600;
margin: cm;
cursor: pointer;
}
}
h1{
a{
font-family:cursive;
text-decoration:none;
font-weight: 50;
color:antiquewhite;
font-size:150% ;
font-size:23px;
font-style: normal;
font-family:'Jost', sans-serif ;
text-align: center;
font-weight:lighter;
color:whitesmoke;

}
}
h2{
.drop-down-1{
text-align: center;
position: absolute;
font-family:'Jost', sans-serif ;
padding: 0.5rem 0;
color: antiquewhite;
margin: 0.5rem -0.5rem;
font-weight:300;
background: rgba(0, 0, 0, 0.125) ;
letter-spacing: 2px;
color:antiquewhite;
font-size: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.889);
}
letter-spacing: 2px;

border-radius: 0.5rem;
.container{
font-family: 'Jost', sans-serif;
display: flex;
font-weight: 100;
font-size: 14px;
font-style: normal;
height: 30vh;
font-size: 15px;

display: none;
background: #ffffff00;
text-align: center;
}
}
.navbar{
.drop-down-2{
margin: auto;
position: absolute;
padding: 0.5rem 1.5rem;
padding: 0.5rem 0; left: 0;

margin: 0.5rem -0.5rem; bottom: 0;

background: rgba(0, 0, 0, 0.125) ; width: 100%;

color:antiquewhite; font-family: 'Jost', sans-serif;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.889); font-weight: lighter;

border-radius: 0.5rem; font-size: 20px;

font-family: 'Jost', sans-serif;

font-size: 15px; background-color: rgba(255, 0, 0, 0);

letter-spacing: 2px; color: antiquewhite;

display: none; text-align: center;

text-align: center; }

} .abt-header{

.drop-down-3{ text-align:;

position: absolute; }

text-align: center;

padding: 0.5rem 0;

margin: 0.5rem -0.5rem;

letter-spacing: 3px;

background: rgba(0, 0, 0, 0) ;

color:antiquewhite;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.889);

border-radius: 0.5rem;

font-family: 'Jost', sans-serif;

font-weight: lighter;

font-size: 15px;

display: none;

.nav-link:hover{

background-color:rgba(43, 35, 35, 0.224);

color: aliceblue;

border-radius: 0.5rem;

.skills:hover .drop-down-1{

display: block;

.project:hover .drop-down-2{

display: block;

.contact:hover .drop-down-3{

display: block;

.footer {

position: fixed;
SECONDPAGE.html:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>CLUBS</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>

.header {

display:flex;

justify-content: center;

align-items: center;

height: 100px;

color: antiquewhite;

font-weight: lighter;

font-family:'Jost', sans-serif ;

background-color: #4e88c200;

body{

background-image: linear-gradient(to right, #000000, #2b0c13, #4e0817, #720013, #920000);

.gallery {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

grid-gap: 10px;

padding: 10px;

.card {

border: 1px solid #dee6df00;

border-radius: 0.25rem;

padding: 10px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

.card img {

width: 100%;

height: auto;

.card-body {
padding: 10px;

.card-title {

margin-bottom: 10px;

.card-text {

margin-bottom: 10px;

</style>

</head>

<body>

<div class="header">

<h1>CLUBS</h1>

</div>

<div class="gallery">

<div class="card">

<img src="IMAGE\NCC.png" alt="Placeholder Image">

<div class="card-body">

<p class="card-text">NCC</p>

</div>

</div>

<div class="card">

<img src="IMAGE\rrc.png" alt="Placeholder Image">

<div class="card-body">

<p class="card-text">RRC</p>

</div>

</div>

<div class="card">

<img src="IMAGE\SCOUT.jpeg" alt="Placeholder Image">

<div class="card-body">

<p class="card-text">SCOUT</p>

</div>

</div>

<div class="card">

<img src="IMAGE\NSS.jpeg" alt="Placeholder Image">

<div class="card-body">

<p class="card-text">NSS</p>

</div>

</div>

<!----Add more photo cards here -->

</div>

</body>

</html>
OUTPUT:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy