ben/freecodecamp
1
0
Fork 0
mirror of https://github.com/BenDWit/freecodecamp.git synced 2025-12-23 09:00:01 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

old stuff

Browse source
This commit is contained in:
bendwit 2025-07-28 14:09:47 +02:00
parent fc385a818d
commit 20c9e4212c
8 changed files with 158 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

18
Certified_Full_Stack_Developer/CSS/Colored_Boxes/index.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colored Boxes</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="color-grid">
<div class="color-box color1"></div>
<div class="color-box color2"></div>
<div class="color-box color3"></div>
<div class="color-box color4"></div>
<div class="color-box color5"></div>
</div>
</body>
</html>

25
Certified_Full_Stack_Developer/CSS/Colored_Boxes/styles.css Normal file
View file

@ -0,0 +1,25 @@
body {
background-color: #f4f4f4;
}
.color-box {
width: 10px;
height: 10px;
display: inline-block;
}
.color1{
background-color: #323232;
}
.color2 {
background-color: rgb(10, 20, 255);
}
.color3 {
background-color: aqua;
}
.color4 {
background-color: hsl(10, 15%, 37%);
}
.color5 {
background-color: green;
}

23
Certified_Full_Stack_Developer/CSS/Confidential_Email/index.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confidential Email</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="email">
<div id="confidential">
<p>CONFIDENTIAL</p>
</div>
<div id="top-secret">
<p>TOP SECRET</p>
</div>
<p>address:<span class="blurred">Homestreet 1 1919EI</span></p>
<p>name:<span class="blurred">BEN</span></p>
<p>sender:<span class="blurred">CIA</span></p>
</main>
</body>
</html>

28
Certified_Full_Stack_Developer/CSS/Confidential_Email/styles.css Normal file
View file

@ -0,0 +1,28 @@
#email {
padding: 50px;
margin-top: 50px;
width: 500px;
border: 2px solid black;
max-width: 500px;
box-sizing: border-box;
}
#confidential {
display: inline-block;
padding: 10px 4px;
margin-left: 10px;
border: 2px solid black;
transform: rotate(20deg);
}
#top-secret{
display: inline-block;
transform: rotate(20deg);
padding: 10px 4px;
margin-left: 10px;
border: 10px solid black;
}
.blurred {
filter: blur(3px);
}

23
Certified_Full_Stack_Developer/CSS/Contact_Form/index.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form-container">
<form action="">
<h2>Leave a message</h2>
<label for="full-name">full name:</label>
<input type="text" name="full-name" id="full-name" required>
<label for="email">email: </label>
<input type="email" name="email" id="email" required>
<label for="message">type your message:</label>
<textarea name="message" id="message" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>

41
Certified_Full_Stack_Developer/CSS/Contact_Form/styles.css Normal file
View file

@ -0,0 +1,41 @@
* {
padding: 0;
margin: 0;
}
body {
background-color: aquamarine;
}
.form-container {
border-radius: 25px;
padding: 20px;
width: 50%;
background-color: aliceblue;
display: center;
}
label {
margin: 10px;
color: brown;
}
input {
width: 90px;
padding: 10px;
margin-bottom: 10px;
height: 10px;
}
textarea {
width: 90px;
padding: 10px;
margin-bottom: 10px;
}
button {
background-color: rgb(82, 90, 90);
font-size: 12px;
}
button:hover {
background-color: green;
}

0
Certified_Full_Stack_Developer/CSS/Playing_Cards/index.html Normal file
View file

0
Certified_Full_Stack_Developer/CSS/Playing_Cards/styles.css Normal file
View file