From 6b7a961e9a1d65340ef8850482a84c6b042f2951 Mon Sep 17 00:00:00 2001 From: Krishan Date: Fri, 30 Jul 2021 21:54:47 +0100 Subject: [PATCH] cake project finished doing cake wbsite --- .github/pull_request_template.md | 10 +- .vscode/settings.json | 3 + index.html | 119 ++++++++++-- style.css | 313 +++++++++++++++++++++++++++++++ 4 files changed, 428 insertions(+), 17 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 46c150e15..7a738a691 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -16,14 +16,14 @@ Please complete the details below this message # Your Details -- Your Name: -- Your City: -- Your Slack Name: +- Your Name:krishan kumar +- Your City:West Midlands +- Your Slack Name:Krishan Kumar # Homework Details -- Module: -- Week: +- Module:Html/css coursework +- Week:3 # Notes diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html index 60b1afe13..0dda9d347 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,111 @@ - - - - - - - - Responsive Cake webpage - + + + + +Responsive Cake webpage + - + - + +
+ + + × + + +
+ About + Services + Clients + Contact +
+ +
+ + + open + + + + + + +
+
+
+ +
+ +
+

The best cakes in town delivered to your door

+
+
+ + + + +
+
+
+

WELCOME



+

If you are in the mood to have some sweets and you don't have time this is the place to eat and order. + The selection is amazing and you can not decide, Hard to make choice for what to take home with u as there are so much delicious cakes and doughnut to grab. But as soon as you take a bite you just realize how soft and delicious they are and you could spend the whole day just eating them + your expert team of chefs and patisserie experts from across the country are constantly innovating, reformulating and re-engineering traditional and modern recipes to create the + perfect tasting Eggless savories that is loved by all ages and enjoyed by everyone in the family!

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

Join us on

+
+ + + + +
+ +
+

© copyrights Krishan Kumar2021

+
+ - \ No newline at end of file + \ No newline at end of file diff --git a/style.css b/style.css index 6de1b3567..686de0ec5 100644 --- a/style.css +++ b/style.css @@ -1 +1,314 @@ /* Add your styling here */ + +body{ + background-color:whitesmoke; +} + +*{ + box-sizing: border-box; +} + + +.header_section{ + padding:10px; +} + +.menu ui{ + display:flex; + flex-direction: row; + gap:10px; +} + + +.menu li { + list-style-type:none; + background-color:grey; +} + +.menu a{ + color:white; + font-weight:bold; + justify-content:flex-end; + text-decoration:none; + display:flex; + font-size:8px; + +} + +.logo_of_cake img{ + width:100px; +} + + +.header_container{ + background-image:url("https://github.com/Elyamira/Cake-groupProject/blob/main/img/background.jpg?raw=true"); + background-size: auto; + border: 20px solid pink; + + display:flex; + align-items: baseline; + justify-content: space-around; + gap: 20px; + padding-left:19px; + padding-top:10px; +} + +.header_txt { + position:relative; + top:-85px; + font-size:20px; + color:brown; + text-decoration:none; +} + +/* The Overlay (background) */ +.overlay { + /* Height & width depends on how you want to reveal the overlay (see JS below) */ + height: 100%; + width: 0; + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + background-color: rgb(0,0,0); /* Black fallback color */ + background-color: rgba(0,0,0, 0.9); /* Black w/opacity */ + overflow-x: hidden; /* Disable horizontal scroll */ + transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ + } + + /* Position the content inside the overlay */ + .overlay-content { + position: relative; + top: 25%; /* 25% from the top */ + width: 100%; /* 100% width */ + text-align: center; /* Centered text/links */ + margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */ + } + + /* The navigation links inside the overlay */ + .overlay a { + padding: 8px; + text-decoration: none; + font-size: 36px; + color: #818181; + display: block; /* Display block instead of inline */ + transition: 0.3s; /* Transition effects on hover (color) */ + } + + /* When you mouse over the navigation links, change their color */ + .overlay a:hover, .overlay a:focus { + color: #f1f1f1; + } + + /* Position the close button (top right corner) */ + .overlay .closebtn { + position: absolute; + top: 20px; + right: 45px; + font-size: 60px; + } + + /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ + @media screen and (max-height: 450px) { + .overlay a {font-size: 20px} + .overlay .closebtn { + font-size: 40px; + top: 15px; + right: 35px; + } + } + + +.container{ + border: 20px solid rgb(196, 186, 186); + position:relative; + top:10px; + justify-content:space-around; + background-size: auto; + margin-left: 10px; + padding:19px; + margin-right: 10px; + width: 300px; +} +.container h2{ + position:relative; + /*justify-content:space-evenly;*/ + color:#d90166; + padding:3px; +} +.container p{ + position:relative; + justify-content:space-around; + padding:3px; + text-align: justify; +} +.flex-container{ + display:flex; + flex-wrap: wrap; +} +.photos{ + display:flex; + justify-content: center; + +} +.photos img{ + position:relative; + top:30px; + width: 300px; + border: 20px solid pink; +} + +.bakery_container{ + position:relative; + top:60px; + background-color:#ece9ebde; + text-align:center; + margin-left: 10px; + margin-right: 10px; + width:100%; +} +.bakery_container img{ + position:relative; + top:2px; + padding:3px; + /* height:130px; + width:130px; */ + +} +.bakery_container-group{ + display: flex; + flex-direction: column; + justify-content:space-evenly; + align-items: flex-start; + width:100%; + +} + + +.image-container{ + margin-right:30px; + margin-bottom: 30px; + width:30%; + +} +.footer{ + top:75px; + position:relative; + /*align-items: start ;*/ +} +.footer p{ + /*display:flex;*/ + display: flex; + justify-content: center; +} +.footer-social-links{ + + display:flex; + justify-content: center; +} +.footer-social-links img{ + width:25px; + margin-bottom: 10px; + padding:3px; +} + +@media (min-width: 900px) { + .logo_of_cake img{ + height:300px; + width:300px; + + } + .bakery_container { + margin-left: 40px; + margin-right: 40px; + } + .bakery_container img{ + + height:300px; + width:300px; + } + .header_txt { + font-size:30px; + } + .menu a{ + font-size:15px; + } + .footer-social-links img{ + width:35px; + margin-bottom: 10px; + padding:5px; + } + .flex-container{ + display:flex; + flex-wrap: nowrap; + flex-direction: row-reverse; + } + .photos{ + width: 50%; + + } + .photos img{ + top:10px; + width: 100%; + height: 450px; + margin-left: 50px; + margin-right: 10px; + } + .container{ + text-align: right; + width: 48%; + font-size: 19px; + margin-right: 40px; + margin-left:20px; + } +} +@media (min-width: 540px) { + .logo_of_cake img{ + height:250px; + width:250px; + } + .bakery_container { + margin-left: 40px; + margin-right: 40px; + + } + /* .bakery_container img{ + + /* height:210px; + width:210px; */ + + .header_txt { + font-size:25px; + } + .menu a{ + font-size:12px; + } + .footer-social-links img{ + width:35px; + margin-bottom: 10px; + padding:5px; + } + + .photos { + padding-right: 20px; + padding-left:20px; + + } + .photos img{ + width: 500px; + height: 450px; + + } + .flex-container{ + display:flex; + flex-direction:column; + justify-content: center; + } + .container{ + width: 100%; + font-size: 17px; + padding-right: 20px; + padding-left:20px; + } + +} \ No newline at end of file