iam-gopi/gist:2f787d33a8fb7a542ecf60ace8cdf7d2

## 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 id="main-about-1">
                <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 id="main-about-2">
                <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>

## 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;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    #content-container {
        flex-direction: column;
    }

    #left {
        width: 100%
    }

    #right {
        width: 100%
    }

    #top-container {
        padding: 0.4rem;
        margin: 0.4rem;
    }

    .btn-icon-top {
        width: 1.3rem;
    }

    #about {
        flex-direction: column;
    }

    #main-about-1 {
        order: 2;
    }

    #main-about-2 {
        order: 1;
    }

    #profile-photo {
        margin: 0.2rem;
        padding: 0.3rem;
        width: 10rem;
    }

    #left-main-container {
        padding: 0.6rem;
        margin: 6px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    #content-container {
        flex-direction: column;
    }

    #left {
        width: 100%
    }

    #right {
        width: 100%
    }
}

@media screen and (min-width: 1024px) {
    #left {
        width: 100%
    }

    #right {
        width: 100%
    }

    #profile-photo {
        margin: 0;
    }
}

@media (orientation:landscape) {
    body {
        background-color: red
    }
}
	<!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 id="main-about-1">
	<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 id="main-about-2">
	<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>
	@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;
	}

	@media screen and (min-width: 320px) and (max-width: 767px) {
	#content-container {
	flex-direction: column;
	}

	#left {
	width: 100%
	}

	#right {
	width: 100%
	}

	#top-container {
	padding: 0.4rem;
	margin: 0.4rem;
	}

	.btn-icon-top {
	width: 1.3rem;
	}

	#about {
	flex-direction: column;
	}

	#main-about-1 {
	order: 2;
	}

	#main-about-2 {
	order: 1;
	}

	#profile-photo {
	margin: 0.2rem;
	padding: 0.3rem;
	width: 10rem;
	}

	#left-main-container {
	padding: 0.6rem;
	margin: 6px;
	}
	}

	@media screen and (min-width: 768px) and (max-width: 1023px) {
	#content-container {
	flex-direction: column;
	}

	#left {
	width: 100%
	}

	#right {
	width: 100%
	}
	}

	@media screen and (min-width: 1024px) {
	#left {
	width: 100%
	}

	#right {
	width: 100%
	}

	#profile-photo {
	margin: 0;
	}
	}

	@media (orientation:landscape) {
	body {
	background-color: red
	}
	}