Skip to content

Instantly share code, notes, and snippets.

@iam-gopi

iam-gopi/gist:70e46cd750e6ecbd33fa1177d1e881ef

Created May 26, 2025 03:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iam-gopi/70e46cd750e6ecbd33fa1177d1e881ef to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iam-gopi/70e46cd750e6ecbd33fa1177d1e881ef to your computer and use it in GitHub Desktop.
Download ZIP
final design complete html css
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learning Design</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section id="overall-container" class="center">
<main id="content-container" class="center">
<div id="left">
<main id="top-container" class="tb-spacing shadow row-between">
<div>
<img src="./copy.png" id="icon-bg" class="btn-icon-top" />
<img src="./copy.png" class="btn-icon-top" />
<img src="./copy.png" class="btn-icon-top" />
<img src="./copy.png" class="btn-icon-top" />
</div>
<p class="btn black shadow">Hire me</p>
</main>
<main id="left-main-container" class="shadow">
<section id="header" class="row-between tb-spacing">
<p id="product">.product designer</p>
<p id="available-work">available for work</p>
</section>
<main id="about" class="row-between">
<div>
<h1 id="name" class="tb-spacing">I'm Brain Do</h1>
<p id="desc" class="tb-spacing">
Lorem ipsum dolor sit amet. <br />Lorem ipsum dolor sit amet.
</p>
<div class="row-between tb-spacing">
<p class="btn black shadow">Hire me</p>
<p class="btn white shadow">
<img src="./copy.png" class="btn-icon" />
copy email
</p>
</div>
</div>
<div>
<img src="./brand.png" class="shadow" id="profile-photo" />
</div>
</main>
<section id="project" class="tb-spacing">
<div class="row-between">
<p>Projects</p>
<p class="btn shadow">View All</p>
</div>
<div class="row-between shadow white" id="experience">
<div class="row-between">
<img class="icon" src="./brand.png" alt="" />
<div id="company-details">
<p id="company-name">Rectangle</p>
<p id="work">Product Design, Icon Design</p>
</div>
</div>
<p class="arrow">></p>
</div>
<div class="row-between shadow white" id="experience">
<div class="row-between">
<img class="icon" src="./brand.png" alt="" />
<div id="company-details">
<p id="company-name">Rectangle</p>
<p id="work">Product Design, Icon Design</p>
</div>
</div>
<p class="arrow">></p>
</div>
<div class="row-between shadow white" id="experience">
<div class="row-between">
<img class="icon" src="./brand.png" alt="" />
<div id="company-details">
<p id="company-name">Rectangle</p>
<p id="work">Product Design, Icon Design</p>
</div>
</div>
<p class="arrow">></p>
</div>
</section>
</main>
</div>
<div id="right" class="shadow">right</div>
</main>
</section>
</body>
</html>
Raw
gistfile2.txt
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
--ff-primary: "Roboto", sans-serif;
--fs-primary: 14px;
--fw-primary: 400;
--fw-h1: 700;
--bg-primary: #ECF0F3;
--bg-secondary: #FFF;
--btn-bg-color-primary: #0D0D0F;
--btn-bg-color-secondary: #FFF;
--shadow: #F1F1F1;
--success-300: #CCF8D8;
--success-600: #6FA281;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--ff-primary);
font-size: var(--fs-primary);
font-weight: var(--fw-primary);
overflow-x: hidden;
min-width: 100%;
background-color: var(--bg-primary);
height: 100vh;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
#overall-container {
flex-direction: column;
}
#content-container {
/* flex-direction: row; */
width: 100%;
}
#top-container {
background-color: var(--bg-secondary);
padding: 1.2rem;
margin: 12px;
border-radius: 7px;
}
#left {
width: 30%;
}
#left-main-container {
padding: 1.6rem;
margin: 12px;
border-radius: 7px;
background-color: var(--bg-secondary);
}
#right {
width: 30%;
background-color: var(--bg-secondary);
padding: 1.6rem;
border-radius: 7px;
margin: 12px;
}
.row-between {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
#header {
flex: 1;
align-items: center;
}
.tb-spacing {
margin: 1rem 0;
}
#product {
text-transform: capitalize;
font-weight: 500;
}
#available-work {
background-color: var(--success-300);
color: var(--success-600);
text-transform: uppercase;
font-size: 0.6rem;
font-weight: 500;
padding: 7px 10px;
border-radius: 12px;
}
#desc {
color: #868686;
font-weight: 500;
line-height: 22px;
}
.btn {
border-radius: 5px;
padding: 7px 12px;
text-transform: capitalize;
display: flex;
align-items: center;
gap: 0.3rem;
}
.shadow {
box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.19);
}
.black {
background-color: black;
color: #fff;
}
.white {
background-color: #fff;
color: #222;
}
.arrow {
color: #b9b7b7;
font-size: 1.5rem;
font-weight: 500;
}
#company-details {
padding: 0 1rem;
}
#experience {
padding: 1rem 1.2rem;
border-radius: 5px;
margin: 1.3rem 0;
}
.icon {
width: 30px;
}
#work {
font-weight: 500;
color: #868686;
margin: 0.3rem 0;
}
#company-name {
font-weight: 500;
font-size: 1.1rem;
}
#project {
background-color: #f7f4f4;
padding: 1.6rem;
border-radius: 6px;
}
#profile-photo {
background-color: #f1f0f0;
border-radius: 50%;
border: 7px solid #fff;
margin: 1rem;
padding: 10px;
}
.btn-icon {
width: 1rem;
}
.btn-icon-top {
cursor: pointer;
width: 2rem;
transition: all .2s ease-in-out;
}
.btn-icon-top:hover {
background-color: #b9b7b7;
border-radius: 50%;
padding: 3px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment