Skip to content

Instantly share code, notes, and snippets.

@BugsBountyHunter

BugsBountyHunter/modern-cv-body.css

Created March 8, 2023 20:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BugsBountyHunter/d8f51a9dbe47f2f26b677e51f3548b7d to your computer and use it in GitHub Desktop.
Save BugsBountyHunter/d8f51a9dbe47f2f26b677e51f3548b7d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
modern-cv-body.css
/* Google font */
@import url("https://fonts.googleapis.com/css2?family=Oxygen&family=Oxygen+Mono&display=swap");
/* variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */
:root {
--black: #171321;
--dkblue: #0d314b;
--plum: #4b0d49;
--hotmag: #ff17e4;
--magenta: #e310cb;
--aqua: #86fbfb;
--white: #f7f8fa;
--font-size: 1.3rem;
--mono: "Oxygen mono", monospace;
--sans: Oxygen, sans-serif;
}
/* border box model: https://css-tricks.com/box-sizing/ */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/*
generic styles for the page
*/
body {
padding: 0;
margin: 0;
font-family: var(--sans);
background-color: var(--black);
color: var(--white);
font-size: var(--font-size);
}
h1,
h2,
h3 {
margin: 0;
}
a {
color: var(--magenta);
}
a:hover {
color: var(--hotmag);
text-decoration: none;
}
img {
width: 100%;
}
/* project section */
#projects {
padding: 4rem 1rem;
max-width: 1200px;
margin: 0 auto;
}
#projects h2 {
font-size: 2.5rem;
margin-bottom: calc(2.5rem * 1.5);
}
#projects h3 {
color: var(--aqua);
}
#projects h4 {
font-size: 1rem;
font-family: var(--mono);
margin: 0;
}
.blackbox {
padding: 1rem;
border-radius: 10px;
color: white;
background-color: var(--black);
font-size: 1rem;
line-height: 1.5;
}
#projects ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
gap: 1rem;
font-size: 1rem;
}
#projects img {
margin: 2rem 0 4rem 0;
padding: 1rem;
border-left: 1px solid var(--aqua);
border-top: 1px solid var(--aqua);
border-radius: 25px;
}
@media (min-width: 800px) {
article {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-gap: 1rem;
}
#projects img {
grid-column: 1/6;
grid-row: 1/2;
}
.text {
padding-top: 4rem;
order: 2;
grid-column: 5/11;
grid-row: 1/2;
text-align: right;
}
#projects ul {
justify-content: right;
}
}
/* Divider gradient */
.gradient {
background: linear-gradient(
90deg,
rgba(255, 23, 228, 1) 0%,
rgba(134, 251, 251, 1) 100%
);
height: 2px;
}
/* background color divs */
.section-plum {
background-color: var(--plum);
}
.section-blue {
background-color: var(--dkblue);
}
/* Contact Section */
#contact {
width: 400px;
text-align: center;
margin: 0 auto;
padding: 3rem 0;
}
#contact p:last-child {
margin-top: 3rem;
}
Raw
modern-cv-body.index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
/>
<link rel="stylesheet" href="body.css" />
<title>Body</title>
</head>
<body>
<div class="gradient"></div>
<div class="section-blue">
<section id="projects">
<h2>Projects I'm proud of</h2>
<article>
<div class="text">
<h4>Last Project</h4>
<h3>Lorem, ipsum dolor.</h3>
<p class="blackbox">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aspernatur non vero repudiandae voluptatibus ut nam illum
provident corrupti fugit enim magnam reiciendis sapiente qui
harum, maxime, ullam vitae temporibus optio dolorem exercitationem
fuga molestias corporis? Molestias aliquam rerum excepturi enim
facere est, nulla cum nemo eligendi provident voluptate qui aut.
</p>
<p>Technologies used include:</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</div>
<img src="/image/project1.jpg" alt="Lorem ipsum dolor sit" />
</article>
</section>
</div>
<div class="gradient"></div>
<div class="section-plum">
<section id="contact">
<h2>Contact me</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque enim
autem ratione, odio dolorem quos inventore pariatur ab ipsam unde.
</p>
<p><a href="mailto:ahmed@example.com">Email Me</a></p>
</section>
</div>
<div class="gradient"></div>
</body>
</html>
Raw
modern-cv-header.css
/* Google font */
@import url("https://fonts.googleapis.com/css2?family=Oxygen&family=Oxygen+Mono&display=swap");
/* variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */
:root {
--black: #171321;
--dkblue: #0d314b;
--plum: #4b0d49;
--hotmag: #ff17e4;
--magenta: #e310cb;
--aqua: #86fbfb;
--white: #f7f8fa;
--font-size: 1.3rem;
--mono: "Oxygen mono", monospace;
--sans: Oxygen, sans-serif;
}
/* border box model: https://css-tricks.com/box-sizing/ */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/*
generic styles for the page
*/
body {
padding: 0;
margin: 0;
font-family: var(--sans);
background-color: var(--black);
color: var(--white);
font-size: var(--font-size);
}
h1,
h2,
h3 {
margin: 0;
}
a {
color: var(--magenta);
}
a:hover {
color: var(--hotmag);
text-decoration: none;
}
img {
width: 100%;
}
/* intro section style */
#intro {
padding: 4rem 1rem 10rem 1rem;
padding-bottom: 10rem;
max-width: 1200px;
margin: 0 auto;
}
#intro p {
font-size: 1rem;
line-height: 1.5;
}
#intro .name {
font-family: var(--mono);
font-size: 1rem;
}
.name span {
font-family: var(--sans);
font-size: 4rem;
color: var(--aqua);
display: block;
font-weight: 300;
}
#intro h2 {
font-size: 4rem;
}
/* header nav section */
nav {
font-family: var(--mono);
font-size: 80%;
padding: 1rem;
}
nav h1 a {
font-family: var(--sans);
}
nav ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 2rem;
}
nav li:first-child {
flex-basis: 100%;
text-align: center;
}
nav [class*="fa-"] {
font-size: 150%;
color: var(--aqua);
}
nav h1 [class*="fa-"] {
font-size: 100%;
color: var(--aqua);
}
nav a {
color: white;
text-decoration: none;
display: block;
}
nav a:hover,
nav [class*="fa-"]:hover {
color: var(--magenta);
}
.button {
background-color: var(--magenta);
color: white;
padding: 0.5rem;
border-radius: 5px;
}
.button:hover {
color: white;
background-color: var(--hotmag);
}
@media (min-width: 850px) {
nav {
max-width: 1200px;
margin: 0 auto;
}
nav li:first-child {
flex-basis: auto;
text-align: left;
margin-right: auto;
}
}
Raw
modern-cv-header.index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Header</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
/>
<link rel="stylesheet" href="header.css" />
</head>
<body>
<header>
<nav>
<ul>
<li>
<h1>
<a href="index.html"
><span class="fas fa-code" aria-hidden="true"></span
><span>Ahmed Saber</span></a
>
</h1>
</li>
<li><a href="#projects">Projects</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li>
<a
href="https://www.linkedin.com/in/ahmed-saber-1b549ab4/"
target="_blank"
>
<span class="fab fa-linkedin" aria-hidden="true"></span>
<span class="sr-only">LinkedIn</span></a
>
</li>
<li>
<a href="https://github.com/BugsBountyHunter" target="_blank">
<span class="fab fa-github-square" aria-hidden="true"></span>
<span class="sr-only">Github</span>
</a>
</li>
<li>
<a
class="button"
href="https://www.linkedin.com/in/ahmed-saber-1b549ab4/"
>Resume</a
>
</li>
</ul>
</nav>
</header>
<section id="intro">
<p class="name">Hi, my name is <span>Ahmed Saber.</span></p>
<h2>I'm work as Software Engineer</h2>
<p>
I focus on building complete solutions in clean architecture to better
focus on my application concerns and overall design.
</p>
<p>
Currently, I'm creating workshops for
<a href="https://www.facebook.com/Creativa.Hub.Ismailia" target="_blank"
>Creativa Hub Ismailia</a
>
</p>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment