Css/layouts

projectfolder/content.txt

@@ -0,0 +1,34 @@
+📘 The Code Magazine
+
+The Basic Language of the Web: HTML
+
+Posted by Laura Jones on Monday, June 21st 2027
+
+All modern websites and web applications are built using three fundamental technologies: HTML, CSS and JavaScript. These are the languages of the web.
+
+In this post, let's focus on HTML. We will learn what HTML is all about, and why you too should learn it.
+
+What is HTML?
+
+HTML stands for HyperText Markup Language. It's a markup language that web developers use to structure and describe the content of a webpage (not a programming language).
+
+HTML consists of elements that describe different types of content: paragraphs, links, headings, images, video, etc. Web browsers understand HTML and render HTML code as websites.
+
+In HTML, each element is made up of 3 parts:
+
+The opening tag
+The closing tag
+The actual element
+You can learn more at the MDN Web Docs.
+
+Why should you learn HTML?
+
+There are countless reasons for learning the fundamental language of the web. Here are 5 of them:
+
+To be able to use the fundamental web dev language
+To hand-craft beautiful websites instead of relying on tools like Worpress or Wix
+To build web applications
+To impress friends
+To have fun 😃
+
+Hopefully you learned something new here. See you next time!

projectfolder/css/shopStyle.css

@@ -0,0 +1,198 @@
+* {
+	margin: 0px;
+	padding: 0px;
+	box-sizing: content-box;
+}
+
+body {
+	font-family: sans-serif;
+	line-height: 1.4;
+}
+
+p {
+	margin-bottom: 20px;
+}
+.product-description {
+	clear: both;
+}
+
+.product-container {
+	border: black 4px solid;
+	width: 900px;
+	margin: 25px auto;
+	position: relative;
+}
+.product-name {
+	background: #f7f7f7;
+	text-transform: uppercase;
+	text-align: center;
+	padding: 20px 0;
+}
+
+.product-name::after {
+	content: 'SALE';
+	position: absolute;
+	top: 25px;
+	left: -25px;
+	background: red;
+	color: white;
+	letter-spacing: 2px;
+	padding: 5px 5px;
+	font-size: 12px;
+	width: 80px;
+	text-align: center;
+}
+
+.product-details {
+	text-transform: uppercase;
+	margin-bottom: 20px;
+	font-size: 16px;
+}
+
+.shipping {
+	text-transform: uppercase;
+	font-weight: bold;
+	color: #777;
+	float: right;
+}
+
+.price {
+	font-size: 25px;
+	margin-bottom: 0px;
+	float: left;
+}
+
+/* Link styling */
+.homepage:link {
+	color: #1098ad;
+}
+
+.homepage:visited {
+	color: #1098ad;
+}
+.homepage:hover {
+	color: orangered;
+	text-decoration: none orangred;
+}
+
+a:link {
+	color: black;
+	text-decoration: underline black;
+}
+
+a:visited {
+	color: black;
+}
+
+a:hover {
+	color: black;
+	text-decoration: none;
+}
+
+/* Other stuff */
+
+button {
+	width: 100%;
+	background-color: black;
+	text-transform: uppercase;
+	border: black solid 5px;
+	color: white;
+	font-size: 18px;
+}
+
+button:hover {
+	color: black;
+	background-color: white;
+	border: black solid 5px;
+	/* The above can be consolidated down into: 
+  background-color: white
+  filter:invert(100%) 
+  */
+}
+
+ul {
+	margin-left: 15px;
+	margin-bottom: 10px;
+}
+
+ul li {
+	list-style: square;
+	margin-bottom: 10px;
+}
+
+nav {
+	border: #1098ad solid 5px;
+	background-color: #ad2510;
+	opacity: 0.8;
+	justify-content: center;
+}
+
+.colored-boxes > div {
+	display: inline-block;
+	width: 15px;
+	height: 15px;
+	margin-right: 5px;
+	margin-bottom: 10px;
+}
+
+.black {
+	background-color: black;
+	border: solid 5px black;
+	width: 5px;
+	height: 5px;
+}
+.blue {
+	background-color: blue;
+	border: solid 5px blue;
+	width: 5px;
+	height: 5px;
+}
+.red {
+	background-color: red;
+	border: solid 5px red;
+	width: 5px;
+	height: 5px;
+}
+
+.yellow {
+	background-color: yellow;
+	border: solid 5px yellow;
+	width: 5px;
+	height: 5px;
+}
+.green {
+	background-color: #00d500;
+	border: solid 5px #00d500;
+	width: 5px;
+	height: 5px;
+}
+.brown {
+	background-color: brown;
+	border: solid 5px brown;
+	width: 5px;
+	height: 5px;
+}
+
+/* Floats */
+.product-image {
+	float: left;
+	margin-right: 40px;
+}
+
+.product-details-container {
+	/* background-color: yellow; */
+	width: 243px;
+	height: 250px;
+	float: left;
+	padding: 0px 40px;
+	/* margin-top: 20px; */
+}
+
+.product-info-container {
+	width: 243px;
+	/* background-color: blue; */
+	float: left;
+	height: 250px;
+	margin-right: 40px;
+	/* margin-top: 20px; */
+}