diff --git a/README copy.md b/README copy.md new file mode 100644 index 00000000..61644f44 --- /dev/null +++ b/README copy.md @@ -0,0 +1,27 @@ +# HTML/CSS Project + +## Setup + +First step is to fork this repo into your own Github account - if you don't remember how, then refer back Lesson 0 contents. + +## Homework + +Create a new webpage on a subject that you're interested in (maybe the same topic you used for your Codepen submission). + +The page should **NOT** use any framework like Bootstrap. + +It should include the following elements: + +- The `.html` page and a linked `.css` file applies a consistent color scheme to links and text on your page. +- A page header with a title and description for the site. +- An articles section with three articles, each including a title, summary and a link. +- A page footer containing info about you or the site. +- Proper use of the semantic HTML tags we discussed. +- Research the `:first-child` pseudo-class and use it to style the first article so that it stands out from the others. +- Use this website [Lorem Ipsum](http://www.lipsum.com/) to generate random blocks of contents to fill your website. +- **Commit often (with good meaningful commit messages), and Push to Github regularly.** +- Use the sketch below to guide you towards the layout and content you are trying to achieve. _Please note that this is just a sketch - you can choose the colours, fonts and images that you want to use in the page._ + + + + diff --git a/legend cut 3.PNG b/legend cut 3.PNG new file mode 100644 index 00000000..051be76f Binary files /dev/null and b/legend cut 3.PNG differ diff --git a/legendcuts.png b/legendcuts.png new file mode 100644 index 00000000..633764a3 Binary files /dev/null and b/legendcuts.png differ diff --git a/loco1.PNG b/loco1.PNG new file mode 100644 index 00000000..10ec060f Binary files /dev/null and b/loco1.PNG differ diff --git a/loco2.PNG b/loco2.PNG new file mode 100644 index 00000000..46dadd25 Binary files /dev/null and b/loco2.PNG differ diff --git a/loco3.PNG b/loco3.PNG new file mode 100644 index 00000000..4c342285 Binary files /dev/null and b/loco3.PNG differ diff --git a/loco4.PNG b/loco4.PNG new file mode 100644 index 00000000..3565b3f8 Binary files /dev/null and b/loco4.PNG differ diff --git a/nivea.png b/nivea.png new file mode 100644 index 00000000..2fa71a43 Binary files /dev/null and b/nivea.png differ diff --git a/week1.css b/week1.css new file mode 100644 index 00000000..dd91d79c --- /dev/null +++ b/week1.css @@ -0,0 +1,272 @@ + +header { + overflow: hidden; +background-color: black; +margin-top: 50px; +margin-left: 150px; +margin-right: 150px; +} + +body { +margin:0; +padding:0; +background-color: rgb(236, 241, 240); +background-image: url(jpg); +} + +video { +width: 700px; +height: 800px; +} + + +img { +width: 300px; +height: 250px; +margin-top: 20px; +} + +ul { +display: flex; +list-style: none; +float: right; +padding: 0px; +} + +li a { +color: rgb(245, 239, 239); +text-decoration: none; +padding: 10px; +overflow: hidden; +} + +li a:hover { +color: rgb(14, 14, 15); +background-color: rgb(243, 56, 4); +padding: 27px; +width: 15px; +} + +.logo { +font-size: 50px; +} +.part1 { + box-sizing: border-box; + margin-top: 30px; +} +h2{ + margin-left: 550px; + margin-top: 60px; + color: orangered; +} +.diva1 { +text-align: center; +font-size:x-large; +margin-top: 70px; +} +.number1 { + margin-top: 50px; +font-style: inherit; +box-shadow: 5px 3px 5px 3px ; +width:1000px; +margin-left: 250px; +} +.diva2 { +text-align: end; +} +.para1 { + width: 500px; + margin-top: 100px; + margin-left: 900px; + +} +.picture1 { + width: 400px; + height: 500px; + margin-top: -400px; + +} +.button1 { + margin-left: 1200px; + margin-bottom: 40px; + +} + .butt { +width: 200px; +background-color: orangered; +box-sizing: content-box; +font-style: italic; + + + } + .part2 { + background-color: black; + height: 500px; + + } + .service { + color: aliceblue; + text-align: center; + padding-top: 80px; + text-transform: uppercase; + font-size: xx-large; + margin-left: 500px; + + } + .service1 { + margin-top: 250px; + padding: 0px; + } + + em{ + color: aqua; + + } + + .precing12 { + margin-left:500px; + } + .pricing2 { + color: aqua; + text-align: center; + padding-top: 100px; + + + } + + .image2 { + width: 350px; + height: 400px; + margin-left: 200px; + margin-bottom: 30px; + margin-top: -280px; + } + .para12 { + margin-left: 300px; + + } + + .para2 { + margin-left: 200px; + text-align: center; + color: aliceblue; + } + + .burundi1{ + margin-left: 860px; + margin-top: -150px; + + } + .burundi{ + width: 100px; + height: 50px; + color: orangered; + background-color: black; + border-color: orangered; + + } + + .south1 { + margin-left: 750px; + margin-top: -50px; + border: 1px solid; + + + } + + .south { + width: 100px; + height: 50px; + color: orangered; + background-color: black; + border-color: orangered; + } + + .burundi:hover { + + background-color: orangered; + color: black; + } + + .south:hover { + + background-color: orangered; + color: black; + } + + .garelie{ + text-align: center; + background-color: orangered; + width: 300px; + margin-left: 600px; + margin-top: 50px; + } + .some image{ + text-align: center; + + } + + .some{ + padding-top: 100px; + text-align: center; + font-size: xx-large; + + } + .loco1{ + margin-left: 200px; + margin-top: 10px; + + + } + .locopc1{ + + width: 300px; + height: 440px; + margin-top: 50px; + } + .loco2{ + text-align: center; + margin-top: -400px; + + } + .locopc2{ + + width: 300px; + height: 400px; + margin-bottom: -30px; + + } + + .loco3{ +text-align: end; +margin-top: -400px; +margin-right: 200px; + } + + .locopc3{ + + width: 300px; + height: 400px; + margin-bottom: -30px; + + } + .loco4{ + text-align: center; + margin-top: 100px; + } + + .locopc4{ + margin-bottom: 30px; + width: 1200px; + height: 500px; + } + + footer{ + background-color: black; + text-align: center; + } + .intro1{ + color: black; + background-color: black; + margin-right: 500px; + } \ No newline at end of file diff --git a/week1.html b/week1.html new file mode 100644 index 00000000..64c1fbc9 --- /dev/null +++ b/week1.html @@ -0,0 +1,143 @@ + + + + + + + Document + + + +
+
+ + +
+ +
+ + + +
+
+

NUMBER 1 RATED BARBERSHOP IN SOUTH AFRICA

+

About legendary

+
+ +
+

Barbershop is the leading barbershop in South Africa as rated by the African Hair Awards Council. + + Legends Barbershop provides you with a professional grooming service throughout South Africa, Gaborone (Botswana) and soon touching down on international soil. We also offer the Exclusive Legendary Mobile Service that brings the Exclusive Legendary Experience directly to your doorstep. + + The Legendary Barbers have been trained to give you exceptional service, quality haircuts and excellent advice on the use of our outstanding Legends products which will ensure you maintain your great look until your next visit. + + Visit us today and get a Legendary Experience Legends Barbershop is the leading barbershop in South Africa as rated by the African Hair Awards Council. + + Legends Barbershop provides you with a professional grooming service throughout South Africa, Gaborone (Botswana) and soon touching down on international soil. We also offer the Exclusive Legendary Mobile Service that brings the Exclusive Legendary Experience directly to your doorstep. + + The Legendary Barbers have been trained to give you exceptional service, quality haircuts and excellent advice on the use of our outstanding Legends products which will ensure you maintain your great look until your next visit. + + Visit us today and get a Legendary Experience

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

THE LEGENDARY PRICING

+
+
+

WE PROVIDE THE BEST SERVICE +
+ IN AFRICA!

+
+
+

Checkout our Legendary pricing below

+
+ +
+ legend cuts +
+ + + + +
+ +
+ + + + +
+ +
+ + +
+ + +
+

LEGENDARY GALLERY

+ +
+

SOME IMAGES FROM OUR BARBER SHOPS

+
+ +
+ cuts1 + +
+ +
+ cuts4 + +
+ +
+ cuts3 + +
+ +
+ cuts2 + +
+
+ + + + + + \ No newline at end of file