BRING NATURE INDOORS
+ +
+ Welcome to Prickles & Co.! We're not just a regular shop;
+ we're all about plants and making your home greener.
+ We've been around since 2035, and we're here to bring nature inside.
+ Our store is filled with awesome cacti, plants, and succulents to spruce up your space.
+
+
+ You might have some questions, and that's cool – check out our FAQs. And if you need to reach us, just hit "Contact."
+ The best part? We'll even deliver these lovely plants to your doorstep. So, come on in, explore, and let's have a chat about how
+ Prickles & Co. can make your home more lush and vibrant.
+
BUY ONLINE NOW & GET 10% OFF !
+ +This website design was created by Wix.com, and is used here for strictly educational purposes.
diff --git a/MultiPage-Clone/workshop.webp b/MultiPage-Clone/workshop.webp new file mode 100644 index 00000000..40973c92 Binary files /dev/null and b/MultiPage-Clone/workshop.webp differ diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css index e69de29b..0f959688 100644 --- a/Wireframe/css/style.css +++ b/Wireframe/css/style.css @@ -0,0 +1,159 @@ +body, +h1, +h2, +p { + margin: 20; + padding: 0; +} + +/* Apply a consistent color scheme for links and text */ +body { + font-family: Arial, sans-serif; + color: #333; + background-color: #f5f5f5; +} + +a { + text-decoration: none; + color: #007bff; /* Link color */ +} + +/* Header styles */ +header { + background-color:var(--foreground-color); + text-align: center; + padding: 25px; +} + +/* Add this CSS to style the article */ + +#git-article { + background-color: var(--foreground-color); + padding: 2rem; + border-radius: var(--radius); + box-shadow: 2px 2px 6px var(--shadow-color); + width: 80%; /* Adjust the width as needed */ + max-width: 800px; /* Set a maximum width if necessary */ + margin: 0 auto; /* Center the box horizontally */ + text-align: center; /* Center the content within the box */ +} + +#git-article img { + max-width: 100%; + height: auto; + border-radius: var(--radius); + margin-bottom: 1rem; /* Add space below the image */ +} + +#git-article h2 { + font-size: var(--fs-subtitle); + margin-bottom: 1rem; /* Add space below the heading */ +} + +#git-article p { + font-size: var(--fs-paragraph); + text-align: justify; + margin-bottom: 1rem; /* Add space below the paragraph */ +} + +#git-article a.orange-btn { + background: #f77d24; + display: inline-block; + color: #fff; + text-decoration: none; + text-transform: none; + font-family: Sans-serif; + font-size: 16px; + padding: 10px; + text-align: center; +} +} + +#git-article a.orange-btn:hover { + background-color: var(--focus-color-light-bg); + font-weight: bold; + transition: all 0.2s; +} +/* ......................... */ +/* Main container styles */ +.main-container { + display: flex; + justify-content: space-between; + align-items: flex-start; /* Align items to the top */ + padding: 20px; /* Increased padding for better spacing */ +} + +/* Article styles */ +/* the following two articles will be in one row, but two columns beside each other */ +.articles-container { + display: flex; /* Use flexbox for layout */ + justify-content: space-between; + align-items: flex-start; /* Align items to the top */ + padding: 20px; /* Increased padding for better spacing */ + margin-top: 10px; /* Add some space between the main content and articles */ +} +.orange-btn { + background: #f77d24; + display: inline-block; + color: #fff; + text-decoration: none; + text-transform: none; + font-family: Sans-serif; + font-size: 16px; + padding: 10px; + text-align: center; +} + +.article { + flex: 1; /* Equal width for both articles */ + box-sizing: border-box; + border: 1px solid var(--grey-light); + border-radius: 4px; + padding: 20px; /* Increased padding for better spacing */ + margin-bottom: 2rem; + background-color: #fff; /* Add a white background to articles */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 100px; + /* Add a subtle shadow for depth */ +} + +.article img { + max-width: 100%; + height: auto; +} + +.article__title { + font-size: 1.5rem; /* Increased font size for article titles */ + font-weight: 700; + margin-bottom: 1rem; /* Slightly increased margin for spacing */ +} + +.article__read-more a { + color: #007bff; + text-decoration: none; + font-weight: bold; /* Bold font for "Read More" link */ +} + +.article__read-more a:hover { + text-decoration: underline; +} + +.article__summary { + margin: 0; +} + +/* Footer styles */ +footer { + display: block; + clear: both; + background-color: lightgrey; + text-align: center; + padding: 25px; +} +@media screen and (max-width: 600px) { + aside, + section, + article { + width: 100%; + } +} diff --git a/Wireframe/git small.png b/Wireframe/git small.png new file mode 100644 index 00000000..862a5077 Binary files /dev/null and b/Wireframe/git small.png differ diff --git a/Wireframe/github image.jpg b/Wireframe/github image.jpg new file mode 100644 index 00000000..0f5bd1b2 Binary files /dev/null and b/Wireframe/github image.jpg differ diff --git a/Wireframe/githublogo.jpg b/Wireframe/githublogo.jpg new file mode 100644 index 00000000..8862bf0e Binary files /dev/null and b/Wireframe/githublogo.jpg differ diff --git a/Wireframe/gitsmall2.png b/Wireframe/gitsmall2.png new file mode 100644 index 00000000..a41fef46 Binary files /dev/null and b/Wireframe/gitsmall2.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 67544158..eb0e05f8 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,13 +1,79 @@ - - -Unleashing the Power of Distributed Collaboration
+ + +
+
+ Git is a distributed version control system that tracks changes in any
+ set of computer files, usually used for coordinating work among
+ programmers who are collaboratively developing source code during
+ software development. Its goals include speed, data integrity, and
+ support for distributed, non-linear workflows (thousands of parallel
+ branches running on different computers).
+ Read More
+
+
+
+ Git is an immensely popular Version Control System, which allows
+ developers to create a history of changes that occur over time in
+ their code.
+ Read More
+
+
+
+ A branch represents an independent line of development. Branches
+ serve as an abstraction for the edit/stage/commit process. You can
+ think of them as a way to request a brand new working directory,
+ staging area, and project history.
+
+
+ Read More
+