diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..a3b3444e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "cSpell.words": ["fullname", "Wireframe"] +} diff --git a/Cakes-Co/index.html b/Cakes-Co/index.html index 60b1afe1..16d44d7c 100644 --- a/Cakes-Co/index.html +++ b/Cakes-Co/index.html @@ -1,16 +1,127 @@ - - - - - + + + + Responsive Cake webpage - - - - - + + + + + + + + + + + +
+ + + +
+
+ an image of an icon menu +
+ +
+

The best cakes in town delivered to your door

+
+
+
+ + + +
+ +
+
+ +
+ + +
+ + +
+

Welcome to ShelbyCakes

+
+

+ Thank you for visiting ShelbyCakes, where we craft beautiful, + custom cakes for every special occasion. From birthdays to + weddings, our delicious creations are designed to bring your cake + visions to life. Explore our flavors and designs, and let us + sweeten your celebrations with a touch of joy! +

+ +
+ + + + +
+ a beautiful cake +
+
+ +
+ maroon cake with flower decorations + a cake with a wine class and flowers + blueberry glass cake + green coloured delicious doughnuts +
+
+ +
+ + + + diff --git a/Cakes-Co/style.css b/Cakes-Co/style.css index 6de1b356..f50959cc 100644 --- a/Cakes-Co/style.css +++ b/Cakes-Co/style.css @@ -1 +1,442 @@ -/* Add your styling here */ +/* ------------HEADER---------*/ + +body { + margin: 0px; + background-color: #a79aaf; +} + +header { + display: flex; + justify-content: space-between; + background-color: #d1cfe2; + width: 100%; +} + +.header-img-text { + display: grid; + grid-template-rows: 1fr 1fr; + justify-items: end; + padding-right: 10px; +} + +.header-logo { + margin: 10px; +} + +.header-logo img { + width: 150px; + border-radius: 50%; +} + +.header-menu { + width: 50px; + height: 50px; + padding-top: 20px; +} + +.header-menu img { + width: 50px; + background-color: #d4afb9; +} + +.header-text { + font-size: 35px; + text-wrap: wrap; + text-align: right; + color: rgb(95, 88, 88); +} + +/* ------------MAIN---------*/ + +/* ------------NAV BAR---------*/ + +nav { + display: none; +} + +/* -----------------SECTION 1-------------------*/ + +main { + padding: 7px; + background-color: #a39196; +} + +main h1 { + font-size: 30px; + color: rgb(52, 50, 53); + margin: 10px; +} + +main p { + font-size: 21px; + color: rgb(46, 44, 44); + margin: 10px; +} + +.main-image { + width: 100%; +} +/* -----------------SECTION 2-------------------*/ + +.image-of-four { + box-sizing: border-box; + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + row-gap: 20px; + column-gap: 20px; + margin-top: 50px; + margin-bottom: 40px; +} + +.image-of-four img { + width: 100%; + height: 100%; +} + +/* -----------------FOOTER-------------------*/ + +hr { + margin-top: 0px; + margin-bottom: 0px; +} + +.info-contact { + font-size: larger; + font-weight: 800; +} + +footer { + background-color: #a79aaf; + margin-top: 0; + height: 100%; +} + +.footer-box { + font-size: large; + margin-bottom: 0px; +} + +.copyright { + text-align: center; +} + +/* -----------------MEDIA QUERIES(768px)-Medium-------------------*/ +@media (min-width: 768px) { + body { + box-sizing: border-box; + padding: 10px; + } + + header { + display: flex; + justify-content: space-between; + background-color: #d1cfe2; + width: 100%; + } + + .header-img-text { + display: grid; + grid-template-rows: 1fr; + padding-right: 10px; + align-items: end; + } + + .header-logo { + margin: 10px; + } + + .header-logo img { + width: 150px; + border-radius: 50%; + } + + .header-menu { + display: none; + } + + .header-menu img { + width: 50px; + background-color: #d4afb9; + } + + .header-text { + font-size: 35px; + text-wrap: wrap; + text-align: right; + color: rgb(95, 88, 88); + } + /* -----------------MAIN-------------------*/ + + nav { + display: flex; + flex-direction: row; + justify-content: end; + padding: 30px; + } + + nav li { + color: rgb(95, 88, 88); + list-style-type: none; + display: inline-block; + padding-left: 20px; + font-weight: 600; + font-size: 16px; + } + + nav li:hover { + color: #a79aaf; + } + + /* -----------------SECTION 1------------------*/ + + .nav-heading-text-image-box { + display: grid; + background-color: #d4afb9; + padding-bottom: 0px; + } + + .heading-text-image-box { + display: flex; + flex-direction: row-reverse; + box-sizing: border-box; + } + + .main-image { + width: 500px; + height: 500px; + border-radius: 15px; + } + + .heading-text { + width: 80%; + } + .heading-text h1 { + text-align: right; + } + + .main-text p { + text-wrap: wrap; + font-size: 30px; + text-align: right; + padding: 10px; + } + + /* -----------------SECTION 2------------------*/ + + .image-of-four { + box-sizing: border-box; + width: 100%; + height: 40%; + margin-top: 50px; + padding: 20px; + display: grid; + grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr; + grid-template-rows: 0fr 0fr 0fr 0fr; + column-gap: 30px; + } + + .image-of-four img { + width: 100%; + height: 100%; + border-radius: 15px; + } + + /* -----------------FOOTER-----------------*/ + + .info-contact { + text-align: center; + margin-bottom: 10px; + } + + footer { + background-color: #a79aaf; + margin-top: 0; + height: 100%; + } + + .footer-box { + display: flex; + flex-direction: row; + justify-content: center; + font-size: large; + margin-bottom: 0px; + padding: 20px; + } + + .footer-box p { + padding-left: 30px; + text-align: center; + } + + .copyright { + text-align: center; + } +} +/* -----------------MEDIA QUERIES (900) LARGE-------------------*/ +@media (min-width: 900px) { + body { + box-sizing: border-box; + padding: 10px; + } + + header { + display: flex; + justify-content: space-between; + background-color: #d1cfe2; + width: 100%; + } + + .header-img-text { + display: grid; + grid-template-rows: 1fr; + padding-right: 10px; + align-items: end; + } + + .header-logo { + margin: 10px; + } + + .header-logo img { + width: 150px; + border-radius: 50%; + } + + .header-menu { + display: none; + } + + .header-menu img { + width: 50px; + } + + .header-text { + font-size: 35px; + text-wrap: wrap; + text-align: right; + color: rgb(95, 88, 88); + } + /* -----------------MAIN-------------------*/ + + nav { + display: flex; + flex-direction: row; + justify-content: end; + padding: 30px; + border: 1px solid cornsilk; + background-color: #e0d1d6; + margin-bottom: 30px; + margin-top: 5px; + height: 40px; + + box-shadow: 3px 2px 3px #d1cfe2; + } + + nav li { + color: rgb(95, 88, 88); + list-style-type: none; + display: inline-block; + padding-bottom: 10px; + font-weight: 700; + font-size: 16px; + text-shadow: 4px 2px 5px cornsilk; + } + + nav li:hover { + color: #a79aaf; + } + + main { + background-color: white; + } + + /* -----------------SECTION 1------------------*/ + + .nav-heading-text-image-box { + display: grid; + background-color: #a39196; + padding-bottom: 0px; + } + + .heading-text-image-box { + display: flex; + flex-direction: row-reverse; + align-items: center; + box-sizing: border-box; + } + + .main-image { + width: 500px; + height: 500px; + } + + .heading-text { + width: 80%; + } + .heading-text h1 { + text-align: right; + font-size: 70px; + padding: 15px; + color: rgb(52, 50, 53); + } + + .main-text p { + text-wrap: wrap; + font-size: 30px; + text-align: right; + padding: 10px; + color: rgb(63, 63, 63); + } + + /* -----------------SECTION 2------------------*/ + + .image-of-four { + box-sizing: border-box; + width: 100%; + height: 40%; + margin-top: 50px; + padding: 20px; + display: grid; + grid-template-columns: 0.5fr 0.5fr 0.5fr 0.5fr; + grid-template-rows: 0fr 0fr 0fr 0fr; + column-gap: 30px; + } + + .image-of-four img { + width: 100%; + height: 100%; + } + + /* -----------------FOOTER-----------------*/ + + .info-contact { + text-align: center; + margin-bottom: 10px; + } + + footer { + background-color: #a79aaf; + margin-top: 0; + height: 100%; + } + + .footer-box { + display: flex; + flex-direction: row; + justify-content: center; + font-size: large; + margin-bottom: 0px; + padding: 20px; + } + + .footer-box p { + padding-left: 30px; + text-align: center; + } + + .copyright { + text-align: center; + } +} diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 4344b144..2082ea39 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,28 +1,141 @@ - - - - My form exercise - - - - + + + + My form exercise + + + + -
-

Product Pick

-
-
-
- - -
- -
- - - - \ No newline at end of file +
+

Product Pick

+ +
+ + + +
+
+ + + + + + + + +

Confirm Your Name and Email

+ +
+ + + + + + + + + +

Choose Shirt Color

+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ + +

Choose Shirt Size

+ +
+ + +
+ + +
+ +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+
+ +

Select Delivery Date

+
+ + +
+ + + +
+ +
+ + + + + + + + +
+
+ + + diff --git a/Form-Controls/styles.css b/Form-Controls/styles.css index e69de29b..67319ee7 100644 --- a/Form-Controls/styles.css +++ b/Form-Controls/styles.css @@ -0,0 +1,83 @@ +body { + font-family: Georgia, "Times New Roman", Times, serif; + color: white; + display: flex; + flex-direction: column; + align-items: center; + background-image: url("https://i.pinimg.com/736x/60/20/6d/60206d5bdac65259ed1bd1c202dee4e3.jpg"); + background-position: center; + background-size: cover, 10px; + background-repeat: no-repeat; +} + +form { + width: 100%; + padding: 30px; + background-color: rgba(82, 58, 22, 0.7); + border-radius: 5px; +} + +h1 { + margin-top: 2px; + font-size: 50px; + text-align: center; + color: black; + text-shadow: 2px 2px 7px white; +} +s h2 { + font-size: 25px; + margin-top: 5px; + color: rgb(255, 255, 255); +} + +h3 { + font-size: 25px; + margin-top: 5px; + color: rgb(245, 240, 240); +} + +label { + font-size: 23px; + color: orange; +} + +input { + margin-bottom: 15px; + accent-color: rgb(7, 7, 7); + font-size: 20px; +} + +#fullname { + width: 250px; + height: 30px; + margin-bottom: 15px; +} + +#email { + width: 250px; + height: 30px; + padding-left: 50px; +} + +#date { + font-size: 18px; + padding: 5px; +} + +.submit { + width: 130px; + height: 35px; + margin: 25px; + font-size: 19px; + background-color: white; + color: black; + border: 1px solid rgb(231, 202, 140); + border-radius: 4px; +} + +footer h2 { + margin-top: 40px; + font-size: 19px; + color: black; + font-weight: 800; +} diff --git a/Wireframe/css/style.css b/Wireframe/css/style.css index e69de29b..00a9c932 100644 --- a/Wireframe/css/style.css +++ b/Wireframe/css/style.css @@ -0,0 +1,171 @@ + +/* Body */ + +body{ +background-color:rgb(63, 54, 65); +} + + + +/* Header */ + + +.page_title{ +font-size: 40px; +margin-bottom: 10px; +position: relative; +left: 750px; +color: aliceblue; +} + + +.title_description{ +font-family: Georgia, 'Times New Roman', Times, serif; +font-size: large; +font-style: italic; +margin-top:0px; +margin-bottom: 80px; +position: relative; +left: 600px; +color: aliceblue; +} + + +/* Article Title */ + + +article { +position: relative; +left: 170px; +} + + + +h4{ +font-size: 18px; +color: aliceblue; +} + + +/* Article 1 */ + +.div_article1:first-child{ +border: 0.5px solid rgb(245, 234, 217); +width: 1000px; +position: relative; +left:300px ;; +} + +.div_article1 img{ + width: 1000px; +height: 500px; +} + +.subdivided_div_article1{ +text-align: left; +padding: 15px; +font-family:Georgia, 'Times New Roman', Times, serif; +color: aliceblue; +} + + + + +/* Article 2 */ + +.div_article2{ +border:0.5px solid rgb(245, 234, 217); +width: 500px; +height: 420px; +position: relative; +left: 300px; +top:53px; +overflow: hidden; +padding-bottom:15px; +} + +.div_article2 img{ +width:500px; +} + +.subdivided_div_article2{ +margin: 10px; +font-family:Georgia, 'Times New Roman', Times, serif; +color: aliceblue; +} + + + + + +/* Article 3 */ + + + +.div_article3{ +border:0.5px solid rgb(245, 234, 217); +width: 455px; +height:420px; +position:relative; +left: 848px; +bottom:385px; +overflow: hidden; +padding-bottom:15px; +} + +.div_article3 img{ +width:455px; +height: 250px; +} + +.subdivided_div_article3{ +margin: 10px; +font-family:Georgia, 'Times New Roman', Times, serif; +color: aliceblue; +} + + + +/* Buttons */ + +.subdivided_div_article1 button { +color:black; +border-radius: 7px; +border:0.5px solid grey; +background-color: rgb(181, 207, 183); +height:30px; +width: 100px; +} + +.subdivided_div_article2 button { +color:black; +border-radius: 7px; +border:0.5px solid grey; +background-color: rgb(181, 207, 183); +height:30px; +width: 100px; +} + +.subdivided_div_article3 button { +color:black; +border-radius: 7px; +border:0.5px solid grey; +background-color: rgb(181, 207, 183); +height:30px; +width: 100px; +} + + +/* Footer */ + +footer{ +color: rgb(218, 240, 231); +background-color: rgb(71, 63, 80); +text-align: center; +font-size: larger; +padding:30px; +position: fixed; +bottom: 0; +width: 100%; +box-shadow: 0 -2px 5px rgb(126, 126, 126); +} \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 67544158..1f10beeb 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,13 +1,118 @@ + Wireframe - + + + + +
+ +

Git: A Developer's Best Friend

+

Explore the world of Git branching and discover how this powerful feature can enhance your development workflow.

+ +
+ + + + + +
+
+ + + +
+ + An image with the inscription Git + +
+ +

What Is Git?

+ +

Git is a powerful version control system that enables developers to efficiently manage their code, collaborative development, tracking changes, and undoing mistakes.

+ + + + + +
+ + +
+ + + +
+ + An image with question why Git? + + + +
+

Importance Of Git

+ +

Git is a revolutionized way developers work. It provides a robust framework for tracking changes to code, collaborating with team members, and managing project history.

+ + + + +
+ + + +
+ + + +
+ + This is an image of a source control icon + + +
+

What is a Git Branch?

+ +

Git Branches are like parallel paths within a project's history. They allow developers to work on different features, bug fixes, or experimental changes without affecting the main codebase.

+ + + + + + +
+ + +
+ +
+
+ + + + + + + + + + +