sites/abdullahtarawneh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

second commit

Browse source
This commit is contained in:
a 2020-10-10 14:13:26 -05:00
parent 30a1d891f1
commit 916ca189f4
1 changed files with 207 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

207
assets/scss/main.scss Normal file
View file

@ -0,0 +1,207 @@
/* base styles */
* {margin: 0; padding: 0; box-sizing: border-box;}
html {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
scroll-behavior: smooth;
}
body {
width: 100vw;
position: relative;
}
/* layout */
.section {
padding: 1em 0;
}
@media (min-width: 480px) {
.section {padding: 2em 0;}
}
@media (min-width: 900px) {
.section {padding: 4em 0;}
}
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1em;
}
.section-heading {
font-size: 1.2em;
font-weight: 400;
line-height: 1.2;
text-align: center;
max-width: 18ch;
margin: 0 auto;
margin-bottom: 4em;
padding-bottom: 1em;
border-bottom: 2px solid rgba(0,0,0,0.25)
}
/* site header */
.site-header {
padding: 0.5em 0;
}
.site-header .container {
display: grid;
grid-template-columns: auto 1fr;
gap: 1em;
}
.site-title {
font-size: 1em;
align-self: center;
font-weight: 400;
line-height: 1;
}
.site-nav {
position: fixed;
bottom: 0;
left: 0;
z-index: 2;
width: 100vw;
height: 4em;
background: #212121;
color: white;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.site-nav__item {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
border-top: 4px solid rgba(255,255,255,0.5);
}
.site-nav__item.active {
border-top: 4px solid #0060ff;
}
body {margin-bottom: 4em;}
@media (min-width: 480px) {
.site-header .container {
grid-template-columns: auto 1fr auto;
}
.site-nav {
position: unset;
background: unset;
color: unset;
width: unset;
height: unset;
}
.site-nav__item.active {
background: unset;
color: #0060ff;
}
body {margin-bottom: 0}
}
/* hero section */
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 1em;
}
.hero img {
width: 100%;
grid-row: 1/3;
}
.headline {
font-size: clamp(1.4em, 7vw, 3em);
max-width: 11ch;
line-height: 1.2;
align-self: end;
}
.button {
background: #0060ff;
color: white;
width: max-content;
font-size: clamp(0.75em,2vw,1em);
padding: 0.75em;
display: flex;
justify-content: center;
text-decoration: none;
border-radius: 100em;
font-weight: 700;
}
.cta {grid-column: 1; grid-row: 2; align-self: start;}
/* praise and testimonials */
.testimonials {
display: flex;
flex-flow: row wrap;
gap: 1em;
justify-content: center;
}
.testimonial {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
grid-gap: 1em;
margin-bottom: 1em;
flex-basis: 18em;
}
.avatar {
margin-left: 1em;
width: 2em;
height: 2em;
border-radius: 1em;
background: #212121;
}
.name {
align-self: center;
}
.bubble {
background-color: #212121;
color: white;
padding: 0.5em;
border-radius: 0.5em;
position: relative;
grid-column: span 2;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.bubble:after {
content: '';
position: absolute;
top: 0;
left: 2em;
width: 0;
height: 0;
border: 0.5em solid transparent;
border-bottom-color: #212121;
border-top: 0;
margin-left: -0.5em;
margin-top: -0.5em;
}
/* skills */
.skills {
list-style: none;
max-width: 18em;
}
.skill:before {
content: "+";
margin-right: 0.5em;
}
/* process */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15em,1fr));
gap: 1em;
}
.card {
background: white;
}
.card img {
width: 100%;
height: auto;
}
#process .card img {
height: 200px;
}
.card h3 {
margin: 1em 0;
}
.card p {
margin-bottom: 1em;
}