Scribd
Upload
12 views11 pages

Document 42

The document outlines a project to create a Creative Portfolio Website using HTML and CSS, focusing on various CSS techniques for interactivity and user experience. It includes a step-by-step procedure for setting up the project structure, building the HTML layout, and implementing features such as smooth scrolling, interactive project cards, and a contact form with CSS validation. The learning outcomes emphasize gaining proficiency in CSS layout techniques, 3D transformations, and responsive design.

Uploaded by

puhazh03
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
12 views11 pages

Document 42

The document outlines a project to create a Creative Portfolio Website using HTML and CSS, focusing on various CSS techniques for interactivity and user experience. It includes a step-by-step procedure for setting up the project structure, building the HTML layout, and implementing features such as smooth scrolling, interactive project cards, and a contact form with CSS validation. The learning outcomes emphasize gaining proficiency in CSS layout techniques, 3D transformations, and responsive design.

Uploaded by

puhazh03
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/ 11

Ex NO:2A PORTFOLIO WEBSITE USING HTML AND CSS

Objective:
The goal of this exercise is to build a Creative Portfolio Website using HTML and CSS,
incorporating various CSS techniques to enhance interactivity and user experience

Tools Required:
• Code Editor: Visual Studio Code, Sublime Text, or any preferred editor.
• Web Browser: Chrome, Firefox, Edge, etc. (for testing).
• Basic Knowledge of:
• HTML (for structuring content).
• CSS (for styling and animations).

Procedure:
1. Setup the Project Structure

• Create a new project folder.


• Inside the folder, create:
1. index.html (Main file)
2. styles.css (CSS file)
3. images folder (for assets like profile picture).

2. Build the Basic HTML Structure

• Define the DOCTYPE and <html> structure.


• Add a <head> section with metadata and link to an external CSS file (styles.css).
• Create sections for Hero, Projects, Skills, Testimonials, and Contact.

3. Style the Hero Section (Split-Screen Layout):

• Use Flexbox to create a split-screen layout.


• Apply CSS variables for color themes and typography.
• Ensure responsive design with media queries.
4. Implement Smooth Scrolling:

• Add scroll-behavior: smooth; in CSS to enable smooth scrolling.


5. Create Interactive Flipping Project Cards:

• Use CSS perspective and 3D transforms to create flipping cards.


• Define .project-card with perspective: 1000px;.
• Style .card-inner with transform-style: preserve-3d; and transition.
• Add .card-front and .card-back for front and back views of the cards.

6. Style the Skills Section with Custom Progress Bars:

• Create .progress-bar with a background color.


• Use a span inside the bar to visually represent skill levels.
• Set width: % dynamically for different skills.

7. Build the Testimonial Carousel with CSS Transitions:

• Use CSS flexbox for alignment.


• Apply transition: transform 1s; to slide testimonials on hover.

8. Implement Contact Form with CSS-Only Validation:

• Use :invalid selector to style invalid inputs with red borders.


• Add smooth transitions to highlight invalid fields dynamically

CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Portfolio</title>
<link rel="stylesheet" href="styles.css">
<style>
:root {
--primary-color: #0077b6;
--secondary-color: #f4f4f4;
--text-color: #333;
--font-family: Arial, sans-serif;
}

body {
font-family: var(--font-family);
margin: 0;
padding: 0;
scroll-behavior: smooth;
}

.hero {
display: flex;
height: 100vh;
}

.split {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.left {
background: var(--primary-color);
color: white;
text-align: center;
}
.right img {
max-width: 100%;
height: auto;
border-radius: 50%;
}

nav ul {
display: flex;
justify-content: center;
list-style: none;
background: var(--secondary-color);
padding: 10px 0;
}

nav ul li {
margin: 0 15px;
}

nav ul li a {
text-decoration: none;
color: var(--text-color);
}

.project-container {
display: flex;
gap: 20px;
justify-content: center;
padding: 50px;
}

.project-card {
width: 200px;
height: 200px;
perspective: 1000px;
}

.card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
}

.project-card:hover .card-inner {
transform: rotateY(180deg);
}

.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-color);
color: white;
border-radius: 10px;
}

.card-back {
transform: rotateY(180deg);
background: var(--text-color);
}

.progress-bar {
width: 100%;
background: var(--secondary-color);
height: 10px;
border-radius: 5px;
margin-bottom: 10px;
overflow: hidden;
}

.progress-bar span {
display: block;
height: 100%;
background: var(--primary-color);
}

.testimonial-carousel {
display: flex;
overflow: hidden;
width: 100%;
}

.testimonial {
min-width: 100%;
text-align: center;
font-size: 1.2em;
transition: transform 1s;
}

.testimonial-carousel:hover .testimonial {
transform: translateX(-100%);
}

form {
max-width: 400px;
margin: auto;
display: flex;
flex-direction: column;
}

input, textarea {
margin-bottom: 10px;
padding: 10px;
border: 1px solid var(--text-color);
border-radius: 5px;
}

input:invalid, textarea:invalid {
border-color: red;
}

button {
background: var(--primary-color);
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}

</style>
</head>
<body>
<header class="hero">
<div class="split left">
<h1>Creative Professional</h1>
<p>Design | Development | Innovation</p>
</div>
<div class="split right">
<img src="profile.jpg" alt="Profile Image">
</div>
</header>

<nav>
<ul>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>

<section id="projects">
<h2>Projects</h2>
<div class="project-container">
<div class="project-card">
<div class="card-inner">
<div class="card-front">Project 1</div>
<div class="card-back">Details about Project 1</div>
</div>
</div>
<div class="project-card">
<div class="card-inner">
<div class="card-front">Project 2</div>
<div class="card-back">Details about Project 2</div>
</div>
</div>
</div>
</section>

<section id="skills">
<h2>Skills</h2>
<div class="skill">
<p>HTML</p>
<div class="progress-bar"><span style="width: 90%;"></span></div>
</div>
<div class="skill">
<p>CSS</p>
<div class="progress-bar"><span style="width: 85%;"></span></div>
</div>
</section>

<section id="testimonials">
<h2>Testimonials</h2>
<div class="testimonial-carousel">
<div class="testimonial">"Amazing work!"</div>
<div class="testimonial">"Highly recommended!"</div>
</div>
</section>

<section id="contact">
<h2>Contact</h2>
<form>
<input type="text" placeholder="Your Name" required>
<input type="email" placeholder="Your Email" required>
<textarea placeholder="Your Message" required></textarea>
<button type="submit">Send</button>
</form>
</section>
</body>
</html>

OUTPUT:
Learning Outcome:
• By completing this exercise, you will:
Gain proficiency in CSS layout techniques (Flexbox, Grid).
Understand smooth scrolling and 3D transformations in CSS.
Learn interactive UI design using CSS hover effects and animations.
Enhance skills in form validation using only CSS.
Develop an understanding of CSS variables for consistency.
Create a fully responsive and aesthetically appealing portfolio website.

This hands-on project will provide practical experience in modern web design principles.

You might also like