A Pen by Marie Hekel on CodePen.
Created
March 31, 2026 00:58
-
-
Save mhekel/0c2716b39a9c1f9055c75ed15b1a9891 to your computer and use it in GitHub Desktop.
Build a Survey Form -Responsive Web Project
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
| <div class="section-labels"> | |
| <article class="section-card horizontal"> | |
| <div class="section-card-inner"> | |
| <span class="section-card-pin simple"></span> | |
| <div class="section-card-image"> | |
| </div> | |
| <div class="section-card-content"> | |
| <div class="section-card-meta"> | |
| <span class="section-card-meta-label">Survey Form</span> | |
| </div> | |
| <h2 class="section-card-title">Local and WWW | |
| </h2> | |
| </div> | |
| <span class="section-card-pin simple"></span> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="section-labels"> | |
| <article class="section-card horizontal"> | |
| <div class="section-card-inner"> | |
| <span class="section-card-pin simple"></span> | |
| <div class="section-card-image"> | |
| </div> | |
| <div class="section-card-content"> | |
| <div class="section-card-meta"> | |
| <span class="section-card-meta-data">apps</span> | |
| </div> | |
| <h2 class="section-card-title">Local and WWW | |
| </h2> | |
| </div> | |
| <span class="section-card-pin simple"></span> | |
| </div> | |
| </article> | |
| </div> | |
| </div> |
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
| <script src="https://cdn.jsdelivr.net/gh/OshekharO/Neubrutalism@main/neubrutalism.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/4.1.12/lib.min.js"></script> |
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=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Space+Grotesk:wght@300..700&family=Syne:wght@400..800&display=swap'); | |
| :root { | |
| --primary-color: #000; | |
| --secondary-color: #fff; | |
| --accent-color: #3498db; | |
| --border-width: 2px; | |
| --border-radius: 4px; | |
| --shadow-offset: 4px; | |
| --form-bg: #f8f4e5; | |
| --form-shadow: #ffa580; | |
| --form-primary-highlight: #95a4ff; | |
| --form-secondary-highlight: #ffc8ff; | |
| --form-border-color: #000; | |
| } | |
| p { | |
| font-family: "Syne", sans-serif; | |
| font-optical-sizing: auto; | |
| font-weight: 700; | |
| font-style: normal; | |
| } | |
| h1 { | |
| font-family: "Bricolage Grotesque", sans-serif; | |
| font-optical-sizing: auto; | |
| font-weight: 500; | |
| font-style: normal; | |
| font-variation-settings: | |
| "width" 100; | |
| } | |
| a:link, a:hover, a:active { | |
| font-family: "Space Grotesque", sans-serif; | |
| font-optical-sizing: auto; | |
| font-weight: 700; | |
| font-style: normal; | |
| text-transform: uppercase; | |
| } | |
| *, | |
| *::before, | |
| *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| line-height: 1.6; | |
| background-color: var(--secondary-color); | |
| color: var(--primary-color); | |
| padding: 0px; | |
| } | |
| .nb-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .nb-border { | |
| border: var(--border-width) solid var(--primary-color); | |
| box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--primary-color); | |
| } | |
| .nb-pre-form { | |
| width: 100%; | |
| max-width: 500px; | |
| background: var(--form-bg); | |
| border: 2px solid var(--form-border-color); | |
| box-shadow: 15px 15px 0 var(--form-shadow), 15px 15px 0 2px var(--form-border-color); | |
| padding: 50px; | |
| } | |
| .nb-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 25px; | |
| } | |
| .nb-form-group, | |
| .nb-form-input, | |
| .nb-form-btn { | |
| width: 100%; | |
| } | |
| .nb-form-input { | |
| padding: 10px 5px; | |
| font-size: 14pt; | |
| font-family: "Fjalla One", sans-serif; | |
| border: none; | |
| border-bottom: 5px solid var(--form-border-color); | |
| background: var(--form-bg); | |
| outline: none; | |
| transition: border-color 0.3s ease; | |
| } | |
| .nb-form-input:focus { | |
| border-bottom-color: var(--form-shadow); | |
| } | |
| .nb-form-input:invalid { | |
| border-bottom-color: red; | |
| } | |
| .nb-form-btn { | |
| display: block; | |
| padding: 15px; | |
| background: var(--form-shadow); | |
| color: var(--form-border-color); | |
| border: 2px solid var(--form-border-color); | |
| box-shadow: 3px 3px 0 var(--form-primary-highlight), 3px 3px 0 2px var(--form-border-color); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .nb-form-btn:hover { | |
| background: var(--form-border-color); | |
| color: var(--form-bg); | |
| transform: translate(2px, 2px); | |
| box-shadow: 1px 1px 0 var(--form-primary-highlight), 1px 1px 0 2px var(--form-border-color); | |
| } | |
| .nb-form-input:-webkit-autofill, | |
| .nb-form-input:-webkit-autofill:hover, | |
| .nb-form-input:-webkit-autofill:focus { | |
| -webkit-text-fill-color: var(--form-border-color); | |
| -webkit-box-shadow: 0 0 0px 1000px var(--form-bg) inset; | |
| transition: background-color 5000s ease-in-out 0s; | |
| border-bottom: 5px solid var(--form-primary-highlight); | |
| } | |
| ::selection { | |
| background: var(--form-secondary-highlight); | |
| } | |
| *, | |
| *:after, | |
| *:before { | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --c-gray-100: #fbf8f2; | |
| --c-gray-200: #fcfdfe; | |
| --c-gray-300: #e9ebec; | |
| --c-gray-400: #e3e4ea; | |
| --c-gray-500: #5f5f5f; | |
| --c-gray-900: #1d1d1d; | |
| --c-blue-300: #a8dee2; | |
| --c-blue-500: #2ab3c0; | |
| --c-green-500: #80b895; | |
| --c-green-300: #bad5ca; | |
| --c-red-500: #ea605e; | |
| --c-yellow-300: #f8e0b1; | |
| --c-yellow-500: #f9bc73; | |
| --rotation: -3deg; | |
| } | |
| body { | |
| font-family: "Bricolage Grotesque", sans-serif; | |
| line-height: 1.5; | |
| min-height: 100vh; | |
| padding-top: 5vw; | |
| padding-bottom: 5vw; | |
| border: 2px solid var(--form-border-color); | |
| box-shadow: 3px 3px 0 var(--form-primary-highlight), 3px 3px 0 2px var(--form-border-color); | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| } | |
| .nb-form-btn:hover { | |
| background: var(--form-border-color); | |
| color: var(--form-bg); | |
| transform: translate(2px, 2px); | |
| box-shadow: 1px 1px 0 var(--form-primary-highlight), 1px 1px 0 2px var(--form-border-color); | |
| } | |
| .nb-form-input:-webkit-autofill, | |
| .nb-form-input:-webkit-autofill:hover, | |
| .nb-form-input:-webkit-autofill:focus { | |
| -webkit-text-fill-color: var(--form-border-color); | |
| -webkit-box-shadow: 0 0 0px 1000px var(--form-bg) inset; | |
| transition: background-color 5000s ease-in-out 0s; | |
| border-bottom: 5px solid var(--form-primary-highlight); | |
| } | |
| ::selection { | |
| background: var(--form-secondary-highlight); | |
| } | |
| @media (max-width: 600px) { | |
| .nb-contact-form { | |
| padding: 30px 20px; | |
| } | |
| } | |
| img { | |
| display: block; | |
| max-width: 100%; | |
| } | |
| .section-labels { | |
| margin-top: .5rem; | |
| display: flex; | |
| margin-left: 5rem; | |
| padding: 2rem 0.5rem; | |
| } | |
| .section-card { | |
| width: 30rem; | |
| transition: 0.15s ease-out; | |
| } | |
| .section-card:nth-child(2) { | |
| margin-top: 2rem; | |
| } | |
| .section-card:nth-child(2) .section-card-inner:after { | |
| background-color: var(--c-green-300); | |
| } | |
| .section-card:nth-child(2) .section-card-pin { | |
| top: 20px; | |
| left: 20px; | |
| } | |
| .section-card + .section-card { | |
| margin-left: 2rem; | |
| } | |
| .section-card:hover .section-card-inner, | |
| .section-card:focus-within .section-card-inner { | |
| background-color: var(--c-gray-100); | |
| } | |
| .section-card:hover .section-card-pin:after, | |
| .section-card:focus-within .section-card-pin:after { | |
| height: 54px; | |
| } | |
| .section-card.horizontal { | |
| width: 55rem; | |
| } | |
| .section-card.horizontal .section-card-inner { | |
| flex-direction: row; | |
| align-items: center; | |
| padding: 0.1rem; | |
| } | |
| .section-card.horizontal .section-card-inner:after { | |
| background-color: var(--c-green-500); | |
| } | |
| .section-card.horizontal .section-card-image { | |
| width: 40px; | |
| height: 40px; | |
| flex-shrink: 0; | |
| margin-left: 1rem; | |
| margin-top: -1rem; | |
| } | |
| .section-card.horizontal .section-card-content { | |
| width: 100%; | |
| margin-top: 0; | |
| margin-left: 0.5rem; | |
| } | |
| .section-card.horizontal .section-card-meta-data { | |
| font-weight: 700; | |
| } | |
| .section-card.horizontal .section-card-title { | |
| font-weight: 500; | |
| color: var(--c-gray-500); | |
| font-size: 1.25rem; | |
| margin-top: 0.125em; | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| } | |
| .section-card.horizontal .section-card-sub { | |
| font-weight: 600; | |
| } | |
| .section-card.horizontal:hover .section-card-pin.simple:before, | |
| .section-card.horizontal:hover .section-card-pin.simple:after, | |
| .section-card.horizontal:focus-within .section-card-pin.simple:before, | |
| .section-card.horizontal:focus-within .section-card-pin.simple:after { | |
| transform: none; | |
| } | |
| .section-card.horizontal:hover .section-card-pin.simple:after, | |
| .section-card.horizontal:focus-within .section-card-pin.simple:after { | |
| height: 50px; | |
| } | |
| .section-card-inner { | |
| display: flex; | |
| flex-direction: column; | |
| border: 2px solid var(--c-gray-900); | |
| border-radius: 10px; | |
| padding: 0.5rem; | |
| background-color: #fff; | |
| position: relative; | |
| } | |
| .section-card-inner:after { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| z-index: -1; | |
| width: 99%; | |
| height: 100%; | |
| bottom: -12px; | |
| left: calc(50% - 47.5%); | |
| border-radius: 10px; | |
| border: 2px solid var(--c-gray-900); | |
| background-color: var(--c-yellow-300); | |
| } | |
| .section-card-pin { | |
| width: 12px; | |
| height: 12px; | |
| background-color: var(--c-gray-900); | |
| position: absolute; | |
| top: 20px; | |
| left: calc(50% - 6px); | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c-gray-900); | |
| transform: rotate(3deg); | |
| z-index: 1; | |
| padding-bottom: 1rem; | |
| } | |
| .section-card-pin:before, | |
| .section-card-pin:after { | |
| content: ""; | |
| display: block; | |
| border-radius: 50%; | |
| position: absolute; | |
| transition: 0.15s ease-out; | |
| } | |
| .section-card-pin:before { | |
| width: 12px; | |
| height: 12px; | |
| background-color: var(--c-gray-900); | |
| left: calc(50% - 6px); | |
| top: -44px; | |
| } | |
| .section-card-pin:after { | |
| width: 6px; | |
| background-color: #fff; | |
| border: 1px solid; | |
| border-radius: 99em; | |
| height: 50px; | |
| left: calc(50% - 3px); | |
| bottom: 3px; | |
| } | |
| .section-card-pin.simple { | |
| box-shadow: none; | |
| } | |
| .section-card-pin.simple:nth-of-type(odd) { | |
| left: 10px; | |
| top: 10px; | |
| transform: rotate(-45deg); | |
| } | |
| .section-card-pin.simple:nth-of-type(even) { | |
| left: calc(100% - 20px); | |
| top: calc(100% - 20px);u | |
| transform: rotate(120deg); | |
| } | |
| .section-card-image { | |
| border-radius: 15px; | |
| overflow: hidden; | |
| aspect-ratio: 4/3; | |
| position: relative; | |
| } | |
| .section-card-image img { | |
| width: 100%; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .section-card-meta, | |
| .section-card-title { | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; | |
| } | |
| .section-card-title { | |
| padding-bottom: 1.0rem; | |
| } | |
| .section-card-meta { | |
| padding-top: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .section-card-meta-data { | |
| color: var(--c-gray-500); | |
| font-weight: 500; | |
| } | |
| .section-card-meta-label { | |
| color: var(--c-gray-500); | |
| font-size: 2rem; | |
| font-weight: 800; | |
| font-family: "Bricolage Grotesque", sans-serif; | |
| } | |
| .section-card-meta-button { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 0; | |
| color: var(--c-gray-900); | |
| flex-shrink: 0; | |
| cursor: pointer; | |
| padding: 0; | |
| line-height: 0; | |
| border-radius: 50%; | |
| background-color: transparent; | |
| } | |
| .section-card-meta-button i { | |
| font-size: 1.75rem; | |
| } | |
| .section-card-meta-button:after { | |
| content: ""; | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| } |
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
| <link href="https://cdn.jsdelivr.net/gh/matifandy8/NeoBrutalismCSS/dist/index.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment