This is a quick yet effective boilerplate for a digital creator to use as a start for their homepage. Modify to your wildest dreams!
Created
July 15, 2020 19:36
-
-
Save fluushx/349fbe17c77156c861d63747886bfcb9 to your computer and use it in GitHub Desktop.
Creator Homepage
This file contains 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"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <link href="https://fonts.googleapis.com/css2?family=Fira+Sans&family=Suez+One&display=swap" rel="stylesheet"> | |
| <title>Homepage</title> | |
| </head> | |
| <body> | |
| <header class="header header--purple"> | |
| <div class="header__logo"> | |
| <img src="https://vinculacion.unab.cl/wp-content/uploads/2018/06/fondo-transparente-logo-color-con-texto-blanco-y-3-palabras.png"> | |
| </div> | |
| <h1 class="header__title font-display"> | |
| Encuesta disponible hasta......</h1> | |
| </header> | |
| <div class="info"> | |
| <p class="info__text font-body"> | |
| Para poder responder la encuesta, debe seleccionar del los dominios del 1 al 10 </p> | |
| <ul class="info__link-list"> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" | |
| id="dominio_1">Dominion N°1 - Política Seguridad</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" id="dominio_2">Dominio N°2 - Organización de la Seguridad Informática</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" id="parametrizacion_">Dominio N°3 - Administración Activos</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" id="dominio_4">Dominio N°4 - Seguridad Recursos Humanos</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" | |
| id="dominio_5">Dominio N°5 - Seguridad Física y Ambiental</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" | |
| id="dominio_6">Dominio N°6 - Administración Comunicaciones y Operaciones</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" | |
| id="dominio_7">Dominio N°7 - Control de Accesos</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" | |
| id="dominio_8">Dominio N°8 - Adquisición, desarrollo y mantenimiento de Sistemas Informáticos</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" | |
| id="dominio_9">Dominio N°9 - Administración de Incidentes de Seguridad Informática</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" | |
| id="dominio_10">Dominio N°10 - Administración Continuidad de Negocios</a> | |
| </li> | |
| <li class="info__link-list-item"> | |
| <a class="button font-display" | |
| id="dominio_11">Dominio N°11 - Cumplimiento</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <article class="article"> | |
| <header class="article__header"> | |
| <h1>Proyecto T1. Seguridad Informatica</h1> | |
| <span rel="author" class="byline">Universidad Andrés Bello | |
| </div> | |
| </article> | |
| <footer class="footer"> | |
| <img class="footer__logo" src="https://vinculacion.unab.cl/wp-content/uploads/2018/06/fondo-transparente-logo-color-con-texto-blanco-y-3-palabras.png"> | |
| </footer> | |
| </body> | |
| </html> |
This file contains 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
| .font-display { | |
| font-family: 'Suez One', serif; | |
| } | |
| .font-body { | |
| font-family: 'Fira Sans', sans-serif; | |
| } | |
| .header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 25px; | |
| } | |
| .header--purple { | |
| background-color: purple; | |
| } | |
| .header__title { | |
| text-align: left; | |
| font-size: 25px; | |
| margin: 0; | |
| } | |
| .header--purple .header__title { | |
| color: white; | |
| } | |
| .header__logo { | |
| width: 380px; | |
| } | |
| .header__logo img { | |
| width: 60%; | |
| } | |
| .info { | |
| max-width: 700px; | |
| padding: 25px; | |
| margin: 0 auto; | |
| } | |
| .info__text { | |
| font-size: 30px; | |
| line-height: 1.5; | |
| margin: 0 0 30px 0; | |
| } | |
| .info__link-list { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .info__link-list-item { | |
| margin-bottom: 20px; | |
| } | |
| .button { | |
| display: block; | |
| text-align: center; | |
| text-transform: uppercase; | |
| text-decoration: none; | |
| font-size: 15px; | |
| color: purple; | |
| border: 8px solid purple; | |
| padding: 35px 45px; | |
| border-radius: 80px; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .button:hover { | |
| background: purple; | |
| color: white; | |
| } | |
| .article { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| padding: 25px; | |
| } | |
| .article__header { | |
| border-bottom: 1px solid black; | |
| padding-bottom: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .article__header h1 { | |
| font-size: 20px; | |
| font-family: 'Suez One', serif; | |
| margin: 0 0 8px 0; | |
| } | |
| .article__header .byline { | |
| font-size: 16px; | |
| font-family: 'Fira Sans', sans-serif; | |
| } | |
| .article__body p { | |
| font-family: 'Fira Sans', sans-serif; | |
| font-size: 18px; | |
| line-height: 1.4; | |
| margin: 15px 0; | |
| } | |
| .article__body p:last-child, | |
| .article__body img:last-child { | |
| margin: 15px 0 0 0; | |
| } | |
| .article__body img { | |
| max-width: 100%; | |
| margin: 15px 0 | |
| } | |
| .footer { | |
| display: flex; | |
| flex-flow: column; | |
| align-items: center; | |
| justify-content: center; | |
| background: purple; | |
| padding: 40px; | |
| } | |
| .footer__logo { | |
| display: block; | |
| max-width: 120px; | |
| margin-bottom: 10px; | |
| } | |
| .footer__text { | |
| font-size: 16px; | |
| color: white; | |
| margin: 0; | |
| } | |
| .form-group { | |
| margin: 0 auto 1.25rem auto; | |
| padding: 0.25rem; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment