Created
May 23, 2025 03:23
-
-
Save iam-gopi/e0eee149caae2a25e0ea37aa199a44ad to your computer and use it in GitHub Desktop.
html css design 1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"> | |
| <div id="top-container"><p>top</p></div> | |
| <main id="content-container" class="center"> | |
| <div id="left" 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">copy email</p> | |
| </div> | |
| </div> | |
| <div> | |
| <img src="./brand.png" alt="" /> | |
| </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" 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>></p> | |
| </div> | |
| <div class="row-between shadow" 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>></p> | |
| </div> | |
| <div class="row-between shadow" 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>></p> | |
| </div> | |
| </section> | |
| </div> | |
| <div id="right" class="shadow">right</div> | |
| </main> | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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); | |
| /* display: flex; */ | |
| } | |
| #left { | |
| width: 50%; | |
| background-color: var(--bg-secondary); | |
| padding: 10px; | |
| border-radius: 7px; | |
| margin: 12px; | |
| } | |
| #right { | |
| width: 50%; | |
| background-color: var(--bg-secondary); | |
| padding: 10px; | |
| border-radius: 7px; | |
| margin: 12px; | |
| } | |
| .row-between { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| #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; | |
| } | |
| .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; | |
| } | |
| #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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment