Skip to content

css solutions ali ossaily #15

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
Aliosseily wants to merge 5 commits into
base: master
Choose a base branch
from
Open

css solutions ali ossaily #15

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
19c65c4
first commit
Xananax May 15, 2017
ec94c1c
style.css
Aliosseily Dec 11, 2017
9d1fe93
styles.css
Aliosseily Dec 19, 2017
536003a
solution aliosseily
Aliosseily Dec 20, 2017
4427837
Merge pull request #1 from Aliosseily/solution
Aliosseily Dec 20, 2017
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
17 changes: 9 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<!-- /Stylesheets -->
</head>
<body>
<div id="#wrapper">
<div id="wrapper">
<header>
<div>
<hgroup>
Expand All @@ -31,30 +31,32 @@ <h2>Codes and Sleeps</h2>
<section id="about">
<h3>About</h3>
<p>
Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus.
Pellentesque nec nisi at sapien sagittis sagittis. Aliquam eu condimentum mauris. Proin accumsan enim at risus hendrerit lobortis. Nunc sollicitudin sodales lectus, et rhoncus mi molestie hendrerit. Vestibulum velit lorem, rhoncus a congue ultricies, faucibus facilisis risus. Mauris turpis ante, aliquet ac venenatis at, ornare ut velit. Duis ut erat neque, eget consectetur tellus.
</p>
</section>
<section id="competencies">
<h3>Competencies</h3>

<div class='skills skills-primary'>
<div class='skill' data-skill="5">
<span>HTML</span>
<span>HTML</span >
</div>
<div class='skill' data-skill="3">
<span>CSS</span>
</div>
<div class='skill' data-skill="1">
<div class='skill' data-skill="1">
<span>Javascript</span>
</div>
</div>

<div class='skills skills-secondary'>
<div class='skill' data-skill="9">
<span>HTML</span>
</div>
<div class='skill' data-skill="5">
<span>CSS</span>
</div>
<div class='skill' data-skill="7">
<div class='skill' data-skill="7">
<span>Javascript</span>
</div>
</div>
Expand Down Expand Up @@ -151,22 +153,21 @@ <h4>
</section>
<section id="hobbies">
<h3>Hobbies</h3>
<ul>
<ul>
<li>Watching Youtube</li>
<li>Sleeping</li>
<li>Writing CVs</li>
</ul>
</section>
<section id="contact">
<h3>Contact</h3>
<div class="contacts">
<dl class="contact contact-email">
<dt class="contact-type">Email</dt>
<dd class="contact-value">
<a href="mailto:jad@codi.tech">jad@codi.tech</a>
</dd>
</dl>
<dl class="contact contact-skype">
<dl class="contact contact-skype">
<dt class="contact-type">Skype</dt>
<dd class="contact-value">jad.sarout</dd>
</dl>
Expand Down
224 changes: 224 additions & 0 deletions style/style.1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
@import "normalize.css";


/** MAIN STUFF **/

body{
font:16px Helvetica, Sans-Serif;
padding:50px 20px 20px 20px;
}

header > div{
max-width:960px;
margin:0 auto;
position: relative;
}

hgroup{
float:left;
margin:0;
border-bottom:1px solid #ccc;
width:100%
}

header figure{
position: absolute;
right:20px;
}

header h2{
display: none;
}

header figure img{
transform: rotate(-13deg);
width:200px;
height:200px;
}

.content{
padding:20px;
margin:0 auto;
max-width:960px;
}

section{
float:left;
padding-left:160px;
position:relative;
margin-bottom: 50px;
}

h3{
position: absolute;
top:0;
left:0;
width:150px;
margin-right:10px;
font-style: italic;
height:100%;
border-right:1px solid black;
}

/** SKILLS STUFF **/

#competencies{

}

.skills{
padding-top:15px;
}

.skill{
width:130px;
margin:5px;
float:left;
padding:10px;
background:teal;
color:white;
}

.skill span{
width: 130px;
display:inline-block;
}

.skill span::after{
content:"";
color:white;
display:block;
float:right;
}

.skill[data-skill="1"] span::after {content:"★";}
.skill[data-skill="1"] span::after {content:"★";}
.skill[data-skill="2"] span::after {content:"★★";}
.skill[data-skill="3"] span::after {content:"★★";}
.skill[data-skill="4"] span::after {content:"★★★";}
.skill[data-skill="5"] span::after {content:"★★★";}
.skill[data-skill="6"] span::after {content:"★★★★";}
.skill[data-skill="7"] span::after {content:"★★★★";}
.skill[data-skill="8"] span::after {content:"★★★★★";}
.skill[data-skill="9"] span::after {content:"★★★★★";}
.skill[data-skill="10"]span::after {content:"★★★★★";}


.skills-primary .skill{
font-size: 1.2em;
}

.skills-secondary .skill{
font-size: .7em;
}

/** ABOUT STUFF **/

#about{
max-width:640px;
text-align: justify;
margin-bottom:100px;
font-style: italic;
color:#999;
padding-left:0;
}

#about h3{
display: none;
}

/** EXPERIENCES STUFF **/

.experience h4{
color:teal;
margin-bottom:3px;
float:left;
}

.experience p{
margin-top:30px;
float:left;
}

.experience-details{
color:#999;
float: right;
margin-top:18px;
}
.experience-type{
font-weight:bold;
}
.experience-institution{
display:none;
}

.experience-date-separator{
color:teal;
}

/** CONTACTS STUFF **/

#contact h3{
display: none;
}

.contact{
margin:0;
width:130px;
height:130px;
background-repeat: no-repeat;
background-size:80%;
background-position: 50% 50%;
float:left;
display: block;
margin:3px;
}

.contact:hover{
background-color:teal;
}

.contact-type,.contact-value{
display:block;
float:left;
margin:0;
width:100%;
height:100%;
text-align: center;
}

.contact-type{
display: none;
}

.contact-value a{
display:block;
width:100%;
height:100%;
font-size: 0;
}

.contact-skype{
display: none;
}

.contact-phone{background-image:url("../images/phone.png");}
.contact-email{background-image:url("../images/email.png");}
.contact-github{background-image:url("../images/github.png");}
.contact-facebook{background-image:url("../images/facebook.png");}

/** MEDIA QUERIES **/

@media only screen and (max-width: 650px) {
header figure{
display: none;
}
section{
padding-left:0;
}
h3{
position: static;
border-right:none;
border-bottom:1px solid black;
}
}
Loading