Your Portfolio
Hi, I'm [Your Name]
A Tech Content Creator and Designer
View My Work
Portfolio
Project 1 Description
Project 2 Description
Blog
Blog Post 1 Excerpt
Blog Post 2 Excerpt
Client Testimonials
"Amazing work!" - Client 1
"Highly recommend!" - Client 2
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
color: #333;
background-color: #fff;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
background-color: #0d6efd;
color: white;
}
header .logo h1 {
font-size: 1.5em;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}
.hero {
background: url('hero-image.jpg') no-repeat center center/cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.hero-text {
color: white;
text-align: center;
}
.hero-text h2 {
font-size: 2.5em;
margin-bottom: 10px;
}
.hero-text p {
font-size: 1.2em;
margin-bottom: 20px;
}
.cta-button {
background-color: #fff;
color: #0d6efd;
padding: 10px 20px;
text-decoration: none;
font-weight: bold;
border-radius: 5px;
}
.cta-button:hover {
background-color: #0a58ca;
color: white;
}
section {
padding: 50px;
text-align: center;
}
h2 {
margin-bottom: 30px;
font-size: 2em;
color: #0d6efd;
}
.grid {
display: flex;
gap: 20px;
justify-content: center;
}
.grid .project, .grid .blog-post {
width: 300px;
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
}
.grid img {
max-width: 100%;
border-radius: 10px;
}
.testimonials .testimonial {
margin-bottom: 20px;
font-style: italic;
}
.contact form {
display: flex;
flex-direction: column;
align-items: center;
}
.contact label {
font-size: 1.2em;
margin: 10px 0;
}
.contact input, .contact textarea {
width: 80%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
.contact button {
background-color: #0d6efd;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.contact button:hover {
background-color: #0a58ca;
}
footer {
text-align: center;
padding: 20px;
background-color: #0d6efd;
color: white;
}
0 تعليقات