Skip to content

Farshad Bagdeli #86

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FBagdeli wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Farshad Bagdeli #86

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
48cac9d
Farshad Bagdeli
Mar 15, 2024
8d80535
Farshad Bagdeli
Mar 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 81 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,86 @@
</head>
<body>

<div class="container">
<div class="tabbar">
<div class="portfolio-name">Farshad Bagdeli</div>
<div class="option">

<div><a href="#aboutMe">About Me</a></div>
<div><a href="#portfolio">Portfolio</a></div>
<div><a href="#experience">Experience</a></div>

</div>
</div>
<div class="description">
<h1> Hiring A Full-Stack Developer? </h1>
<p>I have experience with <span>React</span>, <span>NodeJs</span> and <span>Typescript</span>. I would love to work at an <sl>innovative</sl> and <sl>eco-frienly</sl> start-up in the <span> sustainable energy sector.</span></p>
</div>

<div class="aboutMe" id="aboutMe">
<h1>ABOUT ME</h1>
<h3>Introduction</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>Technical Skills</h3>
<ul>
<li>HTML \& Css</li>
<li>Java Script</li>
<li>Type Script</li>
</ul>
<ul>
<li>React</li>
<li>Redux</li>
<li>NodeJS</li>
</ul>
</div>

<div class="portfolio" id="portfolio">
<h1>PORTFOLIO</h1>
<div class="portfolio-parts">
<div class="each-portfolio">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p>
<div>
<button>READ MORE</button>
<p><span>Github Ripo</span></p>
</div>
</div>
<div class="each-portfolio">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p>
<div>
<button>READ MORE</button>
<p><span>Github Ripo</span></p>
</div>
</div>
<div class="each-portfolio">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur </p>
<div>
<button>READ MORE</button>
<p><span>Github Ripo</span></p>
</div>
</div>
</div>

</div>

<div class="experience" id="experience">
<h1>EXPERIENCE</h1>
<div class="experience-job">
<h2>Job Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="experience-job">
<h2>Job Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="footer">
@Farshad Bagdeli
</div>
</div>

</body>
</html>
162 changes: 162 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
* {
margin: 0;
}
.container {
display: grid;
grid-template-rows: 50px 500px 450px 600px 450px 50px;
width: 1150px;
height: 100vh;
grid-template-areas:
'tabbar'
'description'
'aboutMe'
'portfolio'
'experience'
'footer';
overflow-y: scroll;
scroll-behavior: smooth;
}
a {
text-decoration: none;
}
.tabbar {
grid-area: tabbar;
background-color: #4EB6AC;
color: #E5FFFF ;
display: grid;
grid-template-columns: 2fr 1fr;
padding: 10px;
}
.portfolio-name {
font-weight: bold;
}
.option {
display: grid;
grid-template-columns: 100px 100px 100px;
gap: 20px;
div {
height: 17px ;
background-color: #E5FFFF;
text-align: center;
padding: 10px;
border-radius: 10px;
color: #4EB6AC;
font-size: 15px;
}
}



.description {
padding: 50px 200px 50px 200px;
grid-area: description;
background-color: #4EB6AC;
color: #E5FFFF;
border-bottom: 5px solid black;
text-align: left;
font-size: 42px;
p {
padding-top: 25px;
font-size: 15px;
text-align: left;
span {
color: black;
}
sl {
text-decoration: underline;
text-decoration-color: black;
}
}
}

.aboutMe {
padding: 50px 200px 50px 200px;
grid-area: aboutMe;
background-color: white;
border-bottom: 5px solid black;

h1 {
text-align: center;
padding-bottom: 20px;
}
p{
font-size: 17px;
padding-bottom: 20px;
}
h3 {
padding-bottom: 20px;
}
ul {
display: inline-block;
}
}

.portfolio {
grid-area: portfolio;
background-color: #FFEBEE;
border-bottom: 5px solid black;
text-align: center;
padding: 40px 60px 40px 60px;
display: grid;
grid-template-rows: 50px 450px;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
.portfolio-parts {
display: grid;
grid-template-columns: repeat(3,330px);
gap: 20px;
.each-portfolio {
background-color: #FBFFFC;
border: 5px solid #AE1457;
box-shadow: 1px 1px 5px #AE1457;
padding: 20px 30px 10px 30px;
display: grid;
grid-template-rows: 40px 300px 100px ;
h2 {
text-align: left;
}
p {
text-align: left;
font-family: 'Courier New', Courier, monospace;
}
div {
button {
color: white;
background-color: #AE1457;
height: 30px;
width: 250px;
align-items: center;
border: 0;
border-radius: 5px;
margin-bottom:15px ;
}

p {
text-align: center;
span {
color: #B8336B;
text-decoration: underline;
text-decoration-color: red;
}
}
}
}
}
}
.experience {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
grid-area: experience;
padding-top: 20px;
text-align: center;
.experience-job {
font-family: 'Courier New', Courier, monospace;
padding: 20px 200px 20px 200px;
text-align: left;
}
}

.footer {
grid-area: footer;
padding: 15px 0px 15px 15px;
background-color: #1D313A;
color: white;
}