Skip to content
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

Making template #49

Open
wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open

Making template #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
35029e8
Update index.html
CihanGonen Dec 23, 2020
3db37dd
added top part
CihanGonen Dec 24, 2020
cf205c8
very raw template ready
CihanGonen Dec 25, 2020
e10e559
grid system added
CihanGonen Dec 25, 2020
dd0f59c
a comment added
CihanGonen Dec 25, 2020
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
85 changes: 62 additions & 23 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,62 @@
/* Stylez */
body {font-family: Franklin Gothic Book, Source Sans Pro, Helvetica Neue, sans-serif; margin: 0 auto; background: #efefef; line-height: 1.8em; padding: 12px; box-sizing: border-box; color: #333;}
body, html {height: 100%;}

.wrapper {box-sizing: border-box; background: #fff; box-shadow: 0 0 5px #888; box-shadow: 0 0 5px #888; height: 100%; overflow: auto; }


a {color: #777; text-decoration: none; border-bottom: 1px solid #CCFF26;}
a:hover {border-bottom: 1px solid #CCFF26; color: #222}
p {font-weight: 200; font-size: 20px;}

.name {font-family: Playfair Display; font-size: 50px; font-weight: 900; padding-bottom: 20px;}

.container {margin: 0 auto; width: 600px; height: 400px; padding: 80px 12px; overflow: auto;}

.meta {text-transform: uppercase; font-family: Courier New, Quicksand, "Helvetica Neue", "Arial", sans-serif; font-size: 11px; letter-spacing: .15em;}
.meta a:hover {border-bottom: 1px solid #CCFF26; color: #333;}

.inline-list {list-style: none; margin: 0; padding: 0;}
.inline-list li {display: inline-block;}

footer .inline-list li {padding-right: 40px;}
footer {margin: 0 auto; position: absolute; bottom: 0px; padding: 40px 0; width: 600px;}
body{
display:relative;
width:100%;
padding:0;
margin:0;
font-family:"Montserrat";
}
p{
margin:0;
}
.ana-alan{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width:70%;
background-color:red;
padding:2%;
display:grid;
}
.ust-alan{
width:100%;
display:grid;
}
.ust-sol-alan{
grid-column:0/2;
grid-row:0/2;
}
.ust-sag-alan{
grid-column:2/10;
grid-row:0/2;
}
.gorsel-isim-alan{
grid-column:0/2;
grid-row:0/2;
}
.isim-alan{
text-align:center;
}
.aciklama-alan{
padding-left:5%;
grid-column:2/10;
grid-row:0/2;
}
.gorsel-alan{
width:150px;
height:150px;
border-radius:50%;
background-color:purple;
}
.alt-sol-alan{
margin-top:20%;
grid-column:0/2;
grid-row:2/6;
}
.alt-sag-alan{
padding-left:5%;
grid-column:2/10;
grid-row:2/6;
}
53 changes: 0 additions & 53 deletions css/style2.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +0,0 @@
body {font-family: Montserrat, Helvetica Neue, sans-serif; margin: 0 auto; line-height: 2em; padding: 12px; box-sizing: border-box; color: #333; overflow: auto;
background: #ffded1; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffded1 0%, #ffded1 50%, #ffc5af 50%, #ffc5af 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffded1), color-stop(50%,#ffded1), color-stop(50%,#ffc5af), color-stop(100%,#ffc5af)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* IE10+ */
background: linear-gradient(135deg, #ffded1 0%,#ffded1 50%,#ffc5af 50%,#ffc5af 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffded1', endColorstr='#ffc5af',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

body, html {height: 100%;}

.wrapper {box-sizing: border-box; height: 100%; overflow: auto; }


a {text-decoration: none; color: #333; border-bottom: 3px solid #0068FF;}
a:hover {color: #0068FF}
p {font-weight: 200; font-size: 20px;}

.name {font-family: Montserrat; font-size: 45px; text-transform: uppercase; font-weight: 900; padding: 12px; border: 4px solid #0068FF; color: #0068FF; display: inline-block; position: absolute; margin-bottom: 60px; top: 60px; left: 90px;}

.container {margin: 0 auto; width: 700px; padding: 120px 12px 50px; overflow: auto;}
article {padding: 60px;}
/* TODO find better cross-platform characters */
/* article::before {
content: '\2601';
position: relative;
top: 0;
left: -30px;
color: #0068FF;
font-size: 24px;
}
article::after {
content: '\2A55\2A55\2A55\2A55';
position: relative;
top: 40px;
left: 300px;
color: #0068FF;
font-size: 44px;
} */
hr {border-bottom: 3px solid #0068FF;}

.meta {text-transform: uppercase; font-family: Arial, Courier New, Source Sans Pro, sans-serif; font-size: 10px; letter-spacing: .15em;}
.meta a:hover {color: #333;}

.inline-list {list-style: none; margin: 0; padding: 0;}
.inline-list li {display: inline-block;}

footer .inline-list li {margin-right: 40px;}
footer a {border: none; color: #0068FF;}
footer {margin: 0 auto; position: absolute; bottom: 55%; right: -255px; padding: 40px 0 0 0; width: 600px; -webkit-transform: rotate(-90deg);}
82 changes: 62 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,71 @@
<head>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Montserrat" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style2.css">
<link rel="icon" href="favicon.png" type="image/x-icon">
<title>Hello World</title>
<link rel="stylesheet" href="css/style.css">
<title>Cihan Gönen</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<h1 class="name">jlord</h1>
</header>
<article>
<p>I'm an <a href="http://en.wikipedia.org/wiki/Open-source_software" target="_blank">open source</a> developer and designer living in Oakland, California. Far, far away from my <a href="http://en.wikipedia.org/wiki/Central_Georgia" target="_blank">East Coast US roots</a>. I work at <a href="http://www.github.com/about" target="_blank">GitHub</a>, mentor at programming events (<a href="http://www.nodeschool.io">NodeSchool.io</a>, <a href="https://github.com/blog/1805-patchwork-night" target="_blank">Patchwork</a>) and do some conferences, too.</p>
<p> Previously I was an <a href="http://www.bostonredevelopmentauthority.org" target="_blank">urban designer</a>, but the call of the wild open tech world would win me over.</p>
</article>
<div class="ana-alan">

<footer>
<ul class="meta inline-list">
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li><a href="http://www.twitter.com/jllord" target="_blank">twitter/jllord</a></li>
<li><a href="http://www.github.com/jlord" target="_blank">github/jlord</a></li>
</ul>
</footer>
</div>
</div>
<div class="ust-sol-alan">

<div class="gorsel-isim-alan">
<div class="gorsel-alan">
</div>
<div class="isim-alan">
<p>Cihan Gönen</p>
<p>Web Developer</p><!-- it can also be frontend developer-->
</div>
</div>

</div>

<div class="ust-sag-alan">

<div class="aciklama-alan">
<h2 class="aciklama-baslik">Sample Header</h2>
<article class="aciklama-text">sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation sample explanation</article>
</div>

</div>

<div class="alt-sol-alan">
<div class="contact">
<p>tel</p>
<p>linkedin</p>
<p>github</p>
</div>
<hr/>
<div class="skills">
<p>HTML</p>
<p>CSS</p>
<p>JS</p>
</div>
<hr/>
<div class="power-sides">
<p>honesty</p>
<p>gratitude</p>
<p>hope</p>
<p>humor</p>
<p>perspective</p>
</div>
<hr/>
<div class="hobies">
<p>some icons that represent my hobies</p>
</div>
</div>
<div class="alt-sag-alan">
<article class="experience">
<h2 class="experience-header">Experience</h2>
<p>experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text</p>
</article>
<article class="education">
<h2 class="education-header">Education</h2>
<p>experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text experience text</p>
</article>
</div>

</div>
</body>
</html>