Project Resubmission

README.md

@@ -0,0 +1,37 @@
+# ENCRYPTION WEBSITE
+
+## The challenge
+
+This project was created for the Encryption challenge of ORACLE ONE NEXT EDUCATION - ALURA LATAM 2023.
+
+The goal was to develop a responsive encryption website that aligns with the provided designs found at: [Figma](https://www.figma.com/file/trP3p5nEh7XUyB3n2bomjP/Alura-Challenge---Desaf%C3%ADo-1---L%C3%B3gica) and fulfill the following criteria:
+
+- Develop an application for text encryption using the following substitution rules:
+  <ul>
+    <li> Replace "e" with "enter"</li>
+    <li> Replace "i" with "imes"</li>
+    <li> Replace "a" with "ai"</li>
+    <li> Replace "o" with "ober"</li>
+    <li> Replace "u" with "ufat"</li>
+  </ul>
+- The application should only support lowercase letters and exclude accented letters and special characters.
+- Enable bidirectional conversions; the application should be capable of both encrypting and decrypting text (e.g., "gato" => "gaitober" or "gaitober" => "gato").
+- The webpage must provide dedicated input fields for text, offering options for both encryption and decryption. The interface must display immediate results.
+- Additionally, include a button to easily copy encrypted or decrypted text to the clipboard."
+
+### <p align="center">**Screenshot (Desktop)**</p>
+<p align="center"><img src="https://snipboard.io/zxVPE8.jpg" alt="Screenshot" /></p>
+
+## My process
+
+### Built with
+
+- Semantic HTML5 markup
+- CSS custom properties
+- Desktop to Mobile workflow
+- JavaScript
+- DOM Manipulation
+
+## Author
+
+- [Mara Cruz](https://github.com/Mara-Cruz)

css/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

css/style.css

@@ -0,0 +1,226 @@
+:root{
+    --color-background: #F3F5FC ;
+    --color-title: #343A40;
+    --color-info: #495057;
+    --color-blue: #0A3871;
+    --color-lightBlue:#D8DFE8;
+}
+
+* {
+    background: var(--color-background);
+	box-sizing: border-box;
+	font-family: 'Inter';
+    font-size: 32px;
+    letter-spacing: 1px;
+}
+
+.logo{
+    padding: 2.778% 0 0 5.8335%;
+    width: auto;
+}
+
+main{
+    display: flex;
+    margin-left: 15.8%;
+    height: 85%;
+}
+
+.section1, .section2{
+    width: 45%;
+}
+
+.text_input{
+    height: 65%;
+    max-width: 90%;
+    margin-top: 30px;
+    text-transform: lowercase;
+    overflow: auto;
+}
+
+.text_input::placeholder, .text_input{
+    color: var(--color-blue);
+}
+
+.message{
+    background: white;
+    color: var(--color-title);
+    background-image: url("../imagenes/muneco.svg");
+    background-position: center 40px;
+    background-repeat: no-repeat;
+    width: 75.18%;
+    min-width: 366.141px;
+    height: 94%;
+    border-radius: 24px;
+    margin-left: 5.86%;
+    padding: 0 20px 30px 20px;
+    box-shadow: 5px 12px 32px -6px rgba(0, 0,0, 0.08);
+    flex-direction: column;
+    position: relative;
+}
+
+.final_message{
+    width: 100%;
+    height: 52px;
+    margin-top: 360px;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 24px;
+    caret-color: transparent;
+}
+
+.info{
+    margin-top: 16px;
+    font-size: 16px;
+    line-height: 16px;
+}
+
+.text_input:focus, .final_message:focus{
+    outline: none;
+}
+
+.final_message, .info, .left_info, footer{
+    background: none;
+    text-align: center;
+}
+
+.text_input, .message, .final_message{
+    border:none;
+    resize: none;
+}
+
+.buttons{
+    gap: 24px;
+}
+
+.btn_encrypt {
+    background-color: var(--color-blue);
+    color: white;
+}
+
+.btn_decrypt{
+    background-color: var(--color-lightBlue);
+    color:var(--color-blue);
+}
+
+.btn_encrypt,
+.btn_decrypt,
+.btn_copy {
+    width: 45%;
+    height: 67px;
+    border: 1px solid var(--color-blue);
+    border-radius: 24px;
+    font-size: 16px;
+    cursor: pointer;    
+}
+
+.left_info{
+    color: var(--color-info);
+    font-size: 12px;
+    display: flex;
+    flex-direction: row;
+    margin: 16px 0;
+    gap: 8px;
+}
+
+footer{
+    width: 100%;
+    font-family: 'Inter';
+    font-size: 11px;
+    padding:0 30px 7px 30px; 
+}
+
+.message-style {
+    width: 100%;
+    height: 377px;
+    margin-top: 40px;
+    overflow: auto;
+    font-weight: 400;
+}
+
+.btn_copy{
+    width: 90%;
+    background-color: transparent;
+    color: var(--color-blue);
+    margin-top: 5px; 
+    left: 50%;
+    transform: translateX(-50%);
+    display: none;
+    position: absolute;
+}
+
+a:link, a:visited, a:active{
+    font-weight: bold;
+    color:var(--color-blue);
+}
+
+a:hover{
+    color: black;
+}
+
+.btn_copy:hover, .btn_encrypt:hover, .btn_decrypt:hover{
+    cursor: pointer;
+    font-weight: bold;
+}
+
+@media screen and (max-width: 1023px) {
+    .logo{
+        padding: 3.911% 0 0 3.911%;
+    }
+    main{
+        flex-direction: column;
+        margin: 116px 40px 0 40px;
+    }
+    .section1, .section2, .text_input, .message, .buttons{
+        width: 100%;
+    } 
+    .text_input{
+        height: 548px;
+        margin-top: 0;
+    }
+    .message{
+        margin: 64px 0 64px 0;
+        padding: 32px;
+        background-image: none;
+    }
+    .final_message{
+        margin-top: 0;
+    }
+    .buttons{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+    .btn_encrypt, .btn_decrypt, .btn_copy{
+        max-width: 49%;
+        min-width: 49%;
+    }      
+    .message-style {
+        height: 100px;
+    }
+    .btn_copy{
+        margin-top: 10px;
+        position: relative;
+    }
+}
+
+@media screen and (max-width: 575px) {
+    .logo{
+        padding: 20px 0 0 20px;
+    }
+    main{
+        margin: 80px 20px 0 20px;
+    }
+    .text_input{
+        height: 251px;
+    }
+    .message{
+        min-width: auto;
+    }
+    .buttons{
+        flex-direction: column;
+    }
+    .btn_encrypt, .btn_decrypt, .btn_copy{
+        max-width: 100%;
+        min-width: 100%;
+    }       
+}