Arcron-ArchLinux/100-Days-Of-Code
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added another website with border and margins and colors

Browse Source
This commit is contained in:
Muhammad Ibrahim 2024-11-20 12:05:47 +05:30
parent 0af715d5b3
commit 0bd12b840b
3 changed files with 119 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Web Development Python Projects/6.3 CSS Box Model/goal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 955 KiB

67
Web Development Python Projects/6.3 CSS Box Model/index.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Box Model</title>
<style>
div {
width: 200px;
height: 200px;
}
p {
margin: 0;
}
#first {
background-color: cadetblue;
padding: 20px;
border: 10px, solid black;
}
#second {
background-color: gold;
border: solid black;
border-right-width: 10px;
border-left-width: 10px;
border-top-width: 20px;
border-bottom-width: 20px;
margin-left: 260px;
}
#third {
background-color: indianred;
border: 10px, solid black;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="first">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at sapien porttitor urna elementum lacinia. In
id magna pulvinar, ultricies lorem id, vehicula elit. Aliquam eu luctus nisl, vitae pellentesque magna. Phasellus
dolor metus, laoreet ac convallis sit amet, efficitur sed dolor.
</p>
</div>
<div id="second">
<p>
</p>
</div>
<div id="third">
<p>
</p>
</div>
</body>
</html>

52
Web Development Python Projects/6.3 CSS Box Model/solution.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Box Model</title>
<style>
div {
height: 200px;
width: 200px;
}
p {
margin: 0;
}
#first {
background-color: cadetblue;
padding: 20px;
border: 10px solid black;
}
#second {
background-color: gold;
border: solid black;
border-width: 20px 10px;
margin-left: 260px;
}
#third {
background-color: indianred;
border: 10px solid black;
margin-left: 40px;
}
</style>
</head>
<body>
<div id="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at sapien porttitor urna elementum lacinia. In
id magna pulvinar, ultricies lorem id, vehicula elit. Aliquam eu luctus nisl, vitae pellentesque magna. Phasellus
dolor metus, laoreet ac convallis sit amet, efficitur sed dolor. </p>
</div>
<div id="second">
</div>
<div id="third">
</div>
</body>
</html>