Scribd
Upload
5 views

Css Kodları

The document is a CSS stylesheet that defines styles for a web page, including variables for colors, layout settings, and responsive design rules. It includes styles for various sections such as the header, home page, about section, skills, contact form, footer, and portfolio, ensuring a cohesive design across different screen sizes. The stylesheet also incorporates hover effects and transitions to enhance user interaction.

Uploaded by

nsasengunn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

Css Kodları

The document is a CSS stylesheet that defines styles for a web page, including variables for colors, layout settings, and responsive design rules. It includes styles for various sections such as the header, home page, about section, skills, contact form, footer, and portfolio, ensuring a cohesive design across different screen sizes. The stylesheet also incorporates hover effects and transitions to enhance user interaction.

Uploaded by

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

:root{

--main-color: #9ba9bb ;

--black-color: #0e0e0e;

--border: 0.1rem solid rgba(255,255,255,0.4);

*{

margin: 0;

padding: 0;

box-sizing: border-box;

outline: none;

border: none;

text-decoration: none;

text-transform: capitalize;

transition: 0.2 ease;

html::-webkit-scrollbar{

width: 0.8rem;

background-color: #c9d9e6;

html::-webkit-scrollbar-track{

background-color: transparent;

html::-webkit-scrollbar-thumb{

border-radius: 3rem;

background-color: #88a2c4;
}

/*! base html codes */

html{

font-size: 62.5%;

overflow-x: hidden;

scroll-padding-top: 9rem;

scroll-behavior: smooth;

body{

background-color:var(--main-color);

section{

padding: 3.5rem 7%;

/*! header start*/

.header .logo img {

height: 10rem;

.header{

background-color:#c4d0de ;

display: flex;
align-items: center;

justify-content: space-between;

padding: 0 8%;

margin: 2rem 8%;

border-radius: 30rem;

box-shadow: 0px 0px 17px -2px rgba(0,0,0, 0.75);

position: sticky;

top: 0;

z-index: 1000;

.header .navbar a{

margin: 0 1rem ;

font-size: 2.5rem;

color: var(--black-color);

border-bottom: 0.1rem solid transparent;

.header .navbar .active,

.header .navbar a:hover{

border-color: var(--main-color);

padding-bottom: 1rem;

/*! header end*/

/*! Ana Sayfa start*/

.AnaSayfa

{
min-height: 100vh;

background: url(../image/anasayfa1.png)

no-repeat;

background-size: cover;

background-position: center;

margin-top: -14.5rem;

display: flex;

align-items: center;

.AnaSayfa .content {

max-width: 60rem;

.AnaSayfa .content h3{

font-size: 6rem;

color: #fff;

.AnaSayfa .content p{

font-size: 2rem;

font-weight: 200;

line-height: 2rem;

padding: 1rem 0;

color: #fff;

/*! Ana Sayfa end*/

/*! hakkımda start*/


.hakkımda .box-container {

display: grid;

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

gap: 1.5rem;

width: 100%;

.hakkımda .box img {

width: 100%;

height: 350px;

object-fit: cover;

border-radius: 15px;

box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);

margin: 2rem;

.hakkımda h2 {

font-size: 2.8rem;

font-weight: bold;

line-height: 3.5rem;

color: #222;

margin-bottom: 2rem;

.hakkımda p {

font-size: 2.2rem;

line-height: 3rem;

color: #444;

margin-bottom: 2rem;
}

.hakkımda .box-container .box {

padding: 2.5rem;

background-color: #c9d1db;

border-radius: 20px;

border: 1px solid #9fa8b3;

min-height: 40rem;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 1.5rem;

/*! hakkımda end*/

/*! Yetenekler start */

.yetenekler {

padding: 4rem 6%;

background-color: #9ba9bb;

color: #fff;

.section-title {

font-size: 2.5rem;

text-align: center;
margin-bottom: 3.5rem;

font-weight: bold;

color: #2e4a62;

.yetenekler-container {

display: flex;

flex-wrap: wrap;

gap: 5rem;

justify-content: center;

.yetenek-karti {

background-color: #9fa8b3;

padding: 5rem;

border-radius: 2.5rem;

box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);

max-width: 48rem;

text-align: center;

transition: transform 0.3s, box-shadow 0.3s;

.yetenek-karti:hover {

transform: translateY(-8px);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

.yetenek-baslik {

font-size: 2rem;
margin-bottom: 2.5rem;

color: #2e4a62;

font-weight: bold;

.yetenek-gorsel {

width: 100%;

height: 350px;

object-fit: cover;

border-radius: 2rem;

margin-bottom: 2.5rem;

.yetenekler-container .dijital {

background-color: #bac5d3;

.yetenekler-container .elle {

background-color: #bac5d3;

.yetenekler-container .solidworks {

background-color: #bac5d3;

/*! yetenekler end*/

/*! iletişim start*/

.contact {
padding: 3rem 5%;

background: linear-gradient(135deg, #dfe6ed, #9ba9bb);

color: #2e4a62;

border-radius: 15px;

max-width: 700px;

margin: 0 auto;

box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

.container {

text-align: center;

.section-title {

font-size: 2.4rem;

font-weight: bold;

margin-bottom: 1rem;

color: #222;

.section-subtitle {

font-size: 1.6rem;

color: #555;

margin-bottom: 2rem;

.contact-form {

display: flex;

flex-direction: column;
gap: 1.5rem;

.form-group {

display: flex;

flex-direction: column;

text-align: left;

label {

font-size: 1.4rem;

font-weight: 600;

margin-bottom: 0.5rem;

input, textarea {

width: 100%;

padding: 1rem;

font-size: 1.2rem;

border: 1px solid #ccc;

border-radius: 10px;

background-color: #fff;

box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.05);

transition: border-color 0.2s;

input:focus, textarea:focus {

border-color: #9ba9bb;

outline: none;
}

textarea {

resize: none;

.btn-submit {

background-color: #819fbf;

color: #fff;

padding: 1rem 2rem;

font-size: 1.4rem;

font-weight: bold;

border: none;

border-radius: 5px;

cursor: pointer;

transition: background-color 0.3s;

.btn-submit:hover {

background-color: #7d8fa1;

/*! iletişim end*/

/*! footer start*/

.search-menu {

padding: 2rem;

background: #bac5d3;

display: flex;

flex-direction: column;
align-items: center;

gap: 1.5rem;

margin-top: 1rem;

.search-bar {

display: flex;

align-items: center;

gap: 0.5rem;

width: 100%;

max-width: 600px;

.search-bar input[type="text"] {

flex: 1;

padding: 1rem;

font-size: 1.2rem;

border: none;

border-radius: 50px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

.search-bar button {

padding: 1rem 2rem;

font-size: 1.2rem;

font-weight: bold;

color: white;

background: #819fbf;

border: none;
border-radius: 50px;

cursor: pointer;

transition: background-color 0.3s;

.search-bar button:hover {

background: #819fbf;

.nav-menu {

display: flex;

gap: 1rem;

.nav-menu a {

text-decoration: none;

padding: 1rem 2rem;

color: white;

font-size: 1.2rem;

font-weight: bold;

background: #819fbf;

border-radius: 50px;

transition: background-color 0.3s;

.nav-menu a:hover {

background: #7d8fa1;

}
/*! footer end*/

/*! portföy start*/

#portfolio {

background-color:var(--main-color);

padding: 60px 20px;

margin-bottom: 4rem;

#portfolio h2 {

text-align: center;

color: #2e4a62;

margin-bottom: 20px;

font-size: 28px;

font-family: Arial, sans-serif;

.portfolio {

display: grid;

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

gap: 20px;

justify-content: center;

align-items: stretch;

.card:hover {

transform: translateY(-10px);

box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);

}
.card {

background-color: #bac5d3;

border-radius: 15px;

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

padding: 20px;

text-align: center;

transition: transform 0.3s ease, box-shadow 0.3s ease;

border: 1px solid #dde6f2;

display: flex;

flex-direction: column;

justify-content: space-between;

.card img {

width: 100%;

height: auto;

border-radius: 10px;

margin-bottom: 15px;

border: 2px solid #bac5d3;

.card h3 {

margin: 10px 0 5px;

font-size: 18px;

color: #2e4a62;

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

.card p {
font-size: 14px;

color: #4f6d85;

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

margin-bottom: 10px;

.special-card img {

width: 100%; /* Resmin genişliğini %100 yaparak kapsayıcıya uyacak


şekilde boyutlandırır */

height: 400px; /* Yüksekliği 400px olarak sabitliyoruz */

object-fit: cover; /* Resmin düzgün bir şekilde sığmasını sağlar */

border-radius: 10px;

margin-bottom: 15px;

border: 2px solid #bac5d3;

/*! portföy end*/

/*! responsive start*/

@media (max-width: 1024px) {

section {

padding: 3rem 5%;

.header {

padding: 0 5%;

.AnaSayfa .content h3 {

font-size: 4rem;

}
.AnaSayfa .content p {

font-size: 1.6rem;

.yetenekler-container {

flex-direction: column;

gap: 2rem;

.yetenek-karti {

max-width: 100%;

padding: 3rem;

.portfolio {

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

.card img {

height: 300px;

.card h3 {

font-size: 16px;

.card p {

font-size: 12px;
}

@media (max-width: 768px) {

.header .logo img {

height: 8rem;

.header .navbar a {

font-size: 2rem;

.hakkımda h2 {

font-size: 2.2rem;

.hakkımda p {

font-size: 1.8rem;

.card {

padding: 15px;

text-align: center;

.card img {

height: 250px;

}
.contact {

max-width: 100%;

padding: 3rem 3%;

.contact-form input,

.contact-form textarea {

font-size: 1.2rem;

.contact-form button {

padding: 1rem 2rem;

@media (max-width: 480px) {

.header {

padding: 0 3%;

.AnaSayfa .content h3 {

font-size: 3rem;

.AnaSayfa .content p {

font-size: 1.4rem;

.yetenekler-container {
flex-direction: column;

gap: 1.5rem;

.yetenek-karti {

padding: 2rem;

.card img {

height: 200px;

.card h3 {

font-size: 14px;

.card p {

font-size: 12px;

.contact-form input,

.contact-form textarea {

font-size: 1.1rem;

.contact-form button {

padding: 0.8rem 1.5rem;

}
/*! responsive end*/

You might also like