Skip to content

Commit

Permalink
Merge pull request #4 from zahidayturan/main
Browse files Browse the repository at this point in the history
edit jobs
zahidayturan authored Feb 18, 2024
2 parents 75a997f + 3ab43da commit e48b3d8
Showing 7 changed files with 361 additions and 96 deletions.
16 changes: 16 additions & 0 deletions .idea/inspectionProfiles/Project_Default.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Binary file added assets/arrow-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/arrow-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
200 changes: 147 additions & 53 deletions index.html
Original file line number Diff line number Diff line change
@@ -77,70 +77,164 @@

<section id="about">
<div class="jobs-container">
<div class="job-item job-item-color-1">
<div class="job-item job-text">
<p class="jobs__text__p1">Mobil<br>Uygulama<br></p>
<p class="jobs__text__p2">Hizmeti</p>


<div class="job-item job-item-color-1" id="job-item-color-1">
<div class="job-item-box" id="job-1">
<div class="job-text">
<p class="jobs__text__p1">Mobil<br>Uygulama<br></p>
<p class="jobs__text__p2">Hizmeti</p>
</div>
<div class="job-icon">
<div class="job-icon-box">
<div class="job-icon-box-in bottom-left "></div>
<div class="job-icon-box-out top-right">
<img src="assets/mobile.png"
src-light="./assets/mobile.png"
src-dark="./assets/mobile.png"
alt="Mobile icon" class="icon icon__default" />
</div>
</div>
<div class="job-arrow-box" onclick="changeJobTextVisible(1)">
<img src="./assets/arrow-light.png"
src-light="./assets/arrow-light.png"
src-dark="./assets/arrow-dark.png"
alt="Arrow icon" class="icon icon__mini" />
</div>
</div>
</div>
<div class="job-item job-icon">
<img src="assets/mobile.png"
src-light="./assets/mobile.png"
src-dark="./assets/mobile.png"
alt="Mobile icon" class="icon" />
<img src="./assets/link-arrow-light.png"
src-light="./assets/link-arrow-light.png"
src-dark="./assets/link-arrow-dark.png"
alt="Link Arrow icon" class="icon" />
<div class="job-item-box" id="job-e-1">
<div class="job-explanation-text">
<p class="jobs__text__p3">Mobil uygulama fikrinizi baştan sona en yeni teknolojiler ile, bütün sürece sizi de dahil ederek hazırlıyor ve size teslim ediyoruz.</p>
</div>
<div class="job-icon">
<div class="job-arrow-box" onclick="changeJobTextVisible(1)">
<img src="./assets/arrow-light.png"
src-light="./assets/arrow-light.png"
src-dark="./assets/arrow-dark.png"
alt="Arrow icon" class="icon icon__mini" />
</div>
</div>
</div>
</div>
<div class="job-item job-item-color-2">
<div class="job-item job-icon">
<img src="./assets/web.png"
src-light="./assets/web.png"
src-dark="./assets/web.png"
alt="Web icon" class="icon" />
<img src="./assets/link-arrow-light.png"
src-light="./assets/link-arrow-light.png"
src-dark="./assets/link-arrow-dark.png"
alt="Link Arrow icon" class="icon" />
</div>
<div class="job-item job-text">
<p class="jobs__text__p1">Web<br>Tasarım<br></p>
<p class="jobs__text__p2">Hizmeti</p>

<div class="job-item job-item-color-2" id="job-item-color-2">
<div class="job-item-box" id="job-2">
<div class="job-icon align-start">
<div class="job-icon-box">
<div class="job-icon-box-in top-left"></div>
<div class="job-icon-box-out bottom-right">
<img src="./assets/web.png"
src-light="./assets/web.png"
src-dark="./assets/web.png"
alt="Web icon" class="icon" />
</div>
</div>
<div class="job-arrow-box" onclick="changeJobTextVisible(2)">
<img src="./assets/arrow-light.png"
src-light="./assets/arrow-light.png"
src-dark="./assets/arrow-dark.png"
alt="Arrow icon" class="icon icon__mini" />
</div>
</div>
<div class="job-text">
<p class="jobs__text__p1">Web<br>Tasarım<br></p>
<p class="jobs__text__p2">Hizmeti</p>
</div>
</div>
<div class="job-item-box" id="job-e-2">
<div class="job-explanation-text">
<p class="jobs__text__p3">Kurumsal veya kişisel web sitesi haricinde, fikrinize yönelik web sitesini yenilikçi düşüncelerle hazırlıyor ve size teslim ediyoruz.</p>
</div>
<div class="job-icon align-start">
<div class="job-arrow-box" onclick="changeJobTextVisible(2)">
<img src="./assets/arrow-light.png"
src-light="./assets/arrow-light.png"
src-dark="./assets/arrow-dark.png"
alt="Arrow icon" class="icon icon__mini" />
</div>
</div>
</div>
<div class="job-item job-item-color-4">
<div class="job-item job-text">
<p class="jobs__text__p1">UI/UX<br>Tasarım<br></p>
<p class="jobs__text__p2">Hizmeti</p>
</div>

<div class="job-item job-item-color-4" id="job-item-color-4">
<div class="job-item-box" id="job-4">
<div class="job-text">
<p class="jobs__text__p1">UI/UX<br>Tasarım<br></p>
<p class="jobs__text__p2">Hizmeti</p>
</div>
<div class="job-icon">
<div class="job-icon-box">
<div class="job-icon-box-in bottom-left"></div>
<div class="job-icon-box-out top-right">
<img src="./assets/uıux.png"
src-light="./assets/uıux.png"
src-dark="./assets/uıux.png"
alt="Web icon" class="icon" />
</div>
</div>
<div class="job-arrow-box" onclick="changeJobTextVisible(4)">
<img src="./assets/arrow-light.png"
src-light="./assets/arrow-light.png"
src-dark="./assets/arrow-dark.png"
alt="Arrow icon" class="icon icon__mini" />
</div>
</div>
</div>
<div class="job-item job-icon">
<img src="./assets/uıux.png"
src-light="./assets/uıux.png"
src-dark="./assets/uıux.png"
alt="UıUx icon" class="icon" />
<img src="./assets/link-arrow-light.png"
src-light="./assets/link-arrow-light.png"
src-dark="./assets/link-arrow-dark.png"
alt="Link Arrow icon" class="icon" />
<div class="job-item-box" id="job-e-4">
<div class="job-explanation-text">
<p class="jobs__text__p3">Dilediğiniz platformlara yönelik, tamamen kullanıcı dostu ve özgün fikirlerle hazırlanmış tasarımları size teslim ediyoruz.</p>
</div>
<div class="job-icon align-start">
<div class="job-arrow-box" onclick="changeJobTextVisible(4)">
<img src="./assets/arrow-light.png"
src-light="./assets/arrow-light.png"
src-dark="./assets/arrow-dark.png"
alt="Arrow icon" class="icon icon__mini" />
</div>
</div>
</div>
</div>
<div class="job-item job-item-color-3">
<div class="job-item job-icon">
<img src="./assets/technic.png"
src-light="./assets/technic.png"
src-dark="./assets/technic.png"
alt="Technic icon" class="icon" />
<img src="./assets/link-arrow-light.png"
src-light="./assets/link-arrow-light.png"
src-dark="./assets/link-arrow-dark.png"
alt="Link Arrow icon" class="icon" />

<div class="job-item job-item-color-3" id="job-item-color-3">
<div class="job-item-box" id="job-3">
<div class="job-icon align-start">
<div class="job-icon-box">
<div class="job-icon-box-in top-left"></div>
<div class="job-icon-box-out bottom-right">
<img src="./assets/technic.png"
src-light="./assets/technic.png"
src-dark="./assets/technic.png"
alt="Web icon" class="icon" />
</div>
</div>
<div class="job-arrow-box" onclick="changeJobTextVisible(3)">
<img src="./assets/arrow-light.png"
src-light="./assets/arrow-light.png"
src-dark="./assets/arrow-dark.png"
alt="Arrow icon" class="icon icon__mini" />
</div>
</div>
<div class="job-text">
<p class="jobs__text__p1">Teknik<br>Destek<br></p>
<p class="jobs__text__p2">Hizmeti</p>
</div>
</div>
<div class="job-item job-text">
<p class="jobs__text__p1">Teknik<br>Destek<br></p>
<p class="jobs__text__p2">Hizmeti</p>
<div class="job-item-box" id="job-e-3">
<div class="job-explanation-text">
<p class="jobs__text__p3">Hizmetlerimiz dahilinde veya yayın süreçlerinde yaşanan sorunlara hızlı bir şekilde teknik ve pratik çözümler üretiyoruz.</p>
</div>
<div class="job-icon align-start">
<div class="job-arrow-box" onclick="changeJobTextVisible(3)">
<img src="./assets/arrow-light.png"
src-light="./assets/arrow-light.png"
src-dark="./assets/arrow-dark.png"
alt="Arrow icon" class="icon icon__mini" />
</div>
</div>
</div>
</div>

</div>
</section>

107 changes: 81 additions & 26 deletions mediaqueries.css
Original file line number Diff line number Diff line change
@@ -30,20 +30,16 @@
}

.job-item{
width: 9rem;
height: 9rem;
width: 10.5rem;
height: 10.5rem;
padding: 10px;
}

.job-icon{
width: 8rem;
}

.jobs__text__p1 {
font-size: 1.25rem;
font-size: 1.5rem;
}
.jobs__text__p2 {
font-size: 1.25rem;
font-size: 1.5rem;
}

.works__text__p1 {
@@ -123,12 +119,8 @@
}

.job-item{
width: 7rem;
height: 7rem;
}

.job-icon{
width: 6rem;
width: 8rem;
height: 8rem;
}

.jobs__text__p1 {
@@ -138,6 +130,25 @@
font-size: 1rem;
}

.jobs__text__p3 {
font-size: 0.7rem;
}

.job-arrow-box{
width: 1.75em;
height: 1.75rem;
border-radius: 50%;
}

.job-arrow-box:hover{
width: 1.85rem;
height: 1.85rem;
}

.icon__mini{
height: 0.8rem;
}

.works__text__p1 {
font-size: 2.5rem;
}
@@ -229,12 +240,8 @@
}

.job-item{
width: 8.5rem;
height: 8.5rem;
}

.job-icon{
width: 7.5rem;
width: 10.5rem;
height: 10.5rem;
}

.job-item-color-1 {
@@ -262,10 +269,28 @@
}

.jobs__text__p1 {
font-size: 1.25rem;
font-size: 1.4rem;
}
.jobs__text__p2 {
font-size: 1.25rem;
font-size: 1.4rem;
}

.jobs__text__p3 {
font-size: 0.9rem;
}

.job-arrow-box{
width: 2em;
height: 2rem;
}

.job-arrow-box:hover{
width: 2.25rem;
height: 2.25rem;
}

.icon__mini{
height: 1rem;
}

#experience {
@@ -438,18 +463,25 @@

@media screen and (max-width: 420px) {


#about {
position: relative;
height: 92ch;
align-items: center;
display: flex;
flex-direction: column;
}

.jobs-container {
width: 12rem;
width: 10rem;
height: 84ch;
}

.job-item{
width: 7.5rem;
height: 7.5rem;
}

.job-icon{
width: 6.5rem;
}

.job-item-color-1 {
margin-right: 6rem;
@@ -474,6 +506,24 @@
font-size: 1.1rem;
}

.jobs__text__p3 {
font-size: 0.65rem;
}

.job-arrow-box{
width: 1.5em;
height: 1.5rem;
}

.job-arrow-box:hover{
width: 1.75rem;
height: 1.75rem;
}

.icon__mini{
height: 0.75rem;
}


.works-container{
width: 90%;
@@ -563,6 +613,11 @@

@media screen and (max-width: 200px) {


.jobs__text__p3 {
font-size: 0.3rem;
}

.logo{
font-size: 1rem;
}
18 changes: 17 additions & 1 deletion script.js
Original file line number Diff line number Diff line change
@@ -218,4 +218,20 @@ function changeClass(mode) {

changeIconVisible(3);
}
}
}

function changeJobTextVisible(mode) {
const container = document.getElementById(`job-${mode}`);
const container_e = document.getElementById(`job-e-${mode}`);
const box = document.getElementById(`job-item-color-${mode}`);

if(container.style.display === "none"){
container.style.display = "flex";
container_e.style.display = "none";
box.style.backgroundColor = "";
} else {
container.style.display = "none";
container_e.style.display = "flex";
box.style.backgroundColor = "rgb(242,167,27)";
}
}
116 changes: 100 additions & 16 deletions style.css
Original file line number Diff line number Diff line change
@@ -356,14 +356,23 @@ section {
height: 2rem;
}

.icon__mini{
height: 1rem;
}

.icon__default{
cursor: default;
}


.icon__large {
cursor: pointer;
height: 3rem;
}

.icon__buton {
cursor: pointer;
height: 3.5rem;
height: 3rem;
transition: all 0.3s ease-in-out;
}

@@ -404,23 +413,91 @@ section {
}

.job-item{
width: 12rem;
height: 12rem;
width: 11rem;
height: 11rem;
border-radius: 0.5rem;
justify-content: space-around;
padding: 12px;
justify-content: space-between;
padding: 1rem;
transition: opacity 0.5s ease-in-out;
}

.job-text{

.job-item-box{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.job-icon{
width: 10.5rem;
height: 1.5rem;
width: 100%;
height: min-content;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: end;
}

.align-start{
align-items: start;
}

.job-icon-box{
position: relative;
width: 3rem;
height: 3rem;
border-radius: 8px;
}

.job-arrow-box{
width: 2rem;
height: 2rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--primary-color-4);
transition: all 0.3s ease-in-out;
cursor: pointer;
}

.job-arrow-box:hover{
background-color: var(--primary-color-5);
width: 2.25rem;
height: 2.25rem;
box-shadow: rgba(0, 0, 0, 0.25) 0 14px 28px, rgba(0, 0, 0, 0.22) 0 10px 10px;
}

.job-icon-box-in{
position: absolute;
width: 2rem;
height: 2rem;
border-radius: 12px;
background-color: rgb(1,31,38);
}

.job-icon-box-out{
position: absolute;
}

.top-left{
top: 0;
left: 0;
}

.top-right{
top: 0;
right: 0;
}

.bottom-right{
bottom: 0;
right: 0;
}

.bottom-left{
bottom: 0;
left: 0;
}

.job-item-color-1 {
@@ -430,6 +507,7 @@ section {
background-color: rgb(15,194,192);
transform: rotate(-6deg);
box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 3px;
transition: all 0.2s ease-in-out;
}

.job-item-color-2 {
@@ -462,25 +540,31 @@ section {
.jobs__text__p1 {
font-weight: 700;
font-size: 1.5rem;
flex: 1;

text-align: start;
font-style: normal;
color: var(--primary-color);
}
.jobs__text__p2 {
font-size: 1.5rem;
flex: 1;

text-align: start;
font-style: normal;
color: var(--primary-color);
}

.arrow {
position: absolute;
right: -5rem;
bottom: 2.5rem;
#job-e-1,#job-e-2,#job-e-4,#job-e-3 {
display: none;
}

.jobs__text__p3 {
font-size: 0.95rem;
text-align: start;
font-style: normal;
color: var(--primary-color);
}


/* EXPERIENCE SECTION */

#experience {
@@ -976,4 +1060,4 @@ footer p {
text-align: center;
font-style: normal;
color: var(--secondary-color-6);
}
}

0 comments on commit e48b3d8

Please sign in to comment.