Skip to content

Commit

Permalink
Lösning Lektion 4
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mual5746
Mual5746 committed Mar 13, 2024
1 parent 82af168 commit 73d7458
Show file tree
Hide file tree
Showing 3 changed files with 145 additions and 86 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
85 changes: 40 additions & 45 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FruktOnline</title>
<link rel="icon" href="images/favicon.ico">
<!--Adda icon för hemsidan samma som logon-->
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

Expand Down Expand Up @@ -41,73 +42,68 @@ <h1 id="typing-text">Välkommen till Fruktbutik!</h1>
</div>
</section>
<!--About section-->
<section id="about" class="about-section">
<div class="contact-about" >
<h2>Varför välja våra frukter?</h2>
<div class="row">
<div class="col col-md-6 col-sm-12">
<div class="about-wrapper__image load-hidden" >
<img
alt="Profile Image"
class="img-fluid rounded shadow-lg"
height="auto"
width="80%"
src="images/about.jpeg"
/>
</div>
<section id="about">
<div class="container">
<h2 class="section-title"> Om Oss</h2>
<div class="row about-wrapper" >
<div class="col-md-6 col-sm-12" >
<div class="about-wrapper__image load-hidden" >
<img
alt="Profile Image"
class="img-fluid rounded shadow-lg"
height="auto"
width="80%"
src="images/about.jpeg"
/>
</div>
<div class="col col-md-6 col-sm-12">
</div>
<div class="col-md-6 col-sm-12">
<div class="about-wrapper__info load-hidden" >
<div class="paragraf-box">
<p> 🍎 **Äpplen:** Knapriga och saftiga äpplen från våra lokala odlingar är inte bara en smakupplevelse utan också en källa till viktiga näringsämnen och antioxidanter för din hälsa.</p>
<p class="about-wrapper__info-text"> 🍎 **Äpplen:** Knapriga och saftiga äpplen från våra lokala odlingar är inte bara en smakupplevelse utan också en källa till viktiga näringsämnen och antioxidanter för din hälsa.</p>

<p> 🍌 **Bananer:** Våra bananer är inte bara fyllda med energi och näringsämnen utan kommer också från hållbara odlingar, vilket gör dem till ett val som är bra för både dig och planeten.</p>
<p class="about-wrapper__info-text"> 🍌 **Bananer:** Våra bananer är inte bara fyllda med energi och näringsämnen utan kommer också från hållbara odlingar, vilket gör dem till ett val som är bra för både dig och planeten.</p>

<p> 🍊 **Apelsiner:** Saftiga och fulla av C-vitamin är våra apelsiner perfekta för att ge dig den uppiggande energikicken du behöver för att starta dagen på rätt sätt.</p>
<p class="about-wrapper__info-text"> 🍊 **Apelsiner:** Saftiga och fulla av C-vitamin är våra apelsiner perfekta för att ge dig den uppiggande energikicken du behöver för att starta dagen på rätt sätt.</p>

<p> 🍇 **Druvor:** Våra druvor är inte bara en fest för smaklökarna utan är också laddade med antioxidanter och vitaminer som främjar din hälsa och välbefinnande.</p>
<p class="about-wrapper__info-text"> 🍇 **Druvor:** Våra druvor är inte bara en fest för smaklökarna utan är också laddade med antioxidanter och vitaminer som främjar din hälsa och välbefinnande.</p>

</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label-subscribe">Prenumerera på vår veckobrev och få först tillgång till våra bästa erbjudanden</label>
</div>

<div id="mc_embed_shell">
<link href="//cdn-images.mailchimp.com/embedcode/classic-061523.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; width: 600px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
<style type="text/css">
#mc_embed_signup{ clear:left; font:14px Helvetica,Arial,sans-serif; width: 400px;}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://gmail.us22.list-manage.com/subscribe/post?u=9114bca7522609dd32a6a0ec6&amp;id=7a2dc8e4ef&amp;f_id=00d3c0e1f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<div id="mc_embed_signup_scroll"><h2>Prennumera till vårt veckobrev och få erbjudande varje vecka!!!</h2>
<div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""><span id="mce-EMAIL-HELPERTEXT" class="helper_text"></span></div>
<form action="https://gmail.us21.list-manage.com/subscribe/post?u=d70c4abfa729d59c93615fdf7&amp;id=5b0444349a&amp;f_id=00feeee6f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label><input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required="" value=""></div>
<div id="mce-responses" class="clear foot">
<div class="response" id="mce-error-response" style="display: none;"></div>
<div class="response" id="mce-success-response" style="display: none;"></div>
</div>
<div aria-hidden="true" style="position: absolute; left: -5000px;">
/* real people should not fill this in and expect good things - do not remove this or risk form bot signups */
<input type="text" name="b_9114bca7522609dd32a6a0ec6_7a2dc8e4ef" tabindex="-1" value="">
</div>
<div class="optionalParent">
<div class="clear foot">
<input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Subscribe">
<input type="submit" name="subscribe" id="mc-embedded-subscribe" class="button" value="Prenumerera">
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script></div>
</div>
<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[4]='PHONE';ftypes[4]='phone';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[5]='BIRTHDAY';ftypes[5]='birthday';}(jQuery));var $mcj = jQuery.noConflict(true);</script></div>

</div>
</div>

<p> Oavsett om du letar efter en nyttig och läcker snacks eller frukt till din favorit smoothie, så har vi något för dig!</p>

<p> Utforska vårt sortiment och upptäck varför våra frukter är det bästa valet för dig och din familj! 🌟</p>


</div>
</div>

</section>
<!-- ------- Product section------------->
<!---------------------Produkt sektion ------------------------------------->
<section id="product">
<div class="container-product">
<div class="product-header">
Expand Down Expand Up @@ -194,14 +190,13 @@ <h2 class="section-title load-hidden">Våra tjänster</h2>
class="cta-btn cta-btn--resume"
href="assets/resume.pdf"
>
View Resume
Footer
</a>
</span>
</div>

</div>
</section>

<!--contat section-->
<section id="contact" class="contact-section">
<div class="paragraf-box-contact">
Expand Down
146 changes: 105 additions & 41 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,6 @@ body {
background-color : #87CEEB;
margin: auto 0;
}

section {
margin-left: 10px;
margin-right: 10px;
}
/*---------Nav bar--------------*/
.nav {
background-color: #f0f0f0;
Expand Down Expand Up @@ -67,53 +62,103 @@ section {


/*----About sektion --------*/
#about {
margin: auto 0;
background-color: $primary-color;
background-image: linear-gradient(
135deg,
green 0%,
blue 100%
);
color: $white-color;
height: 120vh;
border-top: 0px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
padding-bottom: 10%;
}
h2 {
text-align: center;
color: white;
}
.about-wrapper {
margin-top: 60px;
}

.about-wrapper__image {
display: flex;
justify-content: center; /* Placera innehållet horisontellt i mitten */
align-items: center; /* Placera innehållet vertikalt i mitten */
}

/* Justera storleken på bilden på mobilskärmar */
@media only screen and (max-width: 800px) {
.about-wrapper__image img {
width: 70%; /* Justera bredden till 70% på mobilskärmar */
}
}

.paragraf-box {
background-color: #f0f0f0;
border: 2px solid black;
padding: 10px;
border-radius: 20px;
margin: 0 auto;
width: 80%;
width: 90%;
}
.paragraf-box-contact {
width: 80%;
margin: 0 auto;

.about-wrapper__info-text {
@media only screen and (max-width: 900px) {
font-size: 0.7rem;
}
}
.about-section {
background-color:#5F9EA0;
margin: 0 auto;
.form-label-subscribe{
font-weight: bold; /* Gör texten fet */
font-size: 1.5rem; /* Öka textstorleken */
color: white;
@media only screen and (max-width: 900px) {
font-size: 0.7rem;
}
}
/*-------Product section ----------*/

.product-container {
display: grid;
grid-template-rows: auto 1fr auto; /* Tre rader: header, innehåll, footer */

}
.product-header {
grid-column: 1 / -1; /* Börjar från kolumn 1 och sträcker sig över alla kolumner */
padding: 10px;
}
.product-hero {
display: grid;
grid-template-columns: 200px auto;
}
.product-sidebar {
padding: 10px;
}
.product-content {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));;
padding: 10px;
}
.product-footer {
grid-column: 1 / -1; /* Börjar från kolumn 1 och sträcker sig över alla kolumner */
padding: 10px;

/*-----------produkt sektion-------------*/
.product-container {
display: grid;
grid-template-columns: 200px auto; /* Två kolumner: sidebar och innehåll */
grid-template-rows: auto 1fr auto; /* Tre rader: header, innehåll, footer */

}
.product-header {
grid-column: 1 / -1; /* Börjar från kolumn 1 och sträcker sig över alla kolumner */
padding: 10px;
}
.product-hero {
display: grid;
grid-template-columns: 200px auto;
}
.product-hero {
@media only screen and (max-width: 700px) {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
padding: 10px;
}

}
.product-sidebar {
padding: 10px;
}
.product-content {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
padding: 10px;
}
.product-footer {
grid-column: 1 / -1; /* Börjar från kolumn 1 och sträcker sig över alla kolumner */
padding: 10px;

}
/*------------ Kontakt sektion --------- */
.contact-section {
margin: 0 auto;
Expand All @@ -127,16 +172,28 @@ section {
/* Bakgrundsbilden */
background: url('images/contact.png') fixed; /* Lägg till bakgrundsbilden här */
height: 100vh; /* Använd 100% av fönstrets höjd */
background-size: cover; /* Täcker hela hero-sektionen med bakgrundsbilden */
background-size: 100%; /* Täcker hela hero-sektionen med bakgrundsbilden */
background-position: center; /* Centrerar bakgrundsbilden */
background-position: fixed;


}
.paragraf-box-contact {
width: 80%;
background-color: rgba(128, 128, 128, 0.6);;

}

/* Styla label för formular */
.form-label {
font-weight: bold; /* Gör texten fet */
font-size: 2.2rem; /* Öka textstorleken */
color: blue;
margin: 15px;
@media only screen and (max-width: 700px) {

font-size: 1.1rem; /* Öka textstorleken */
}
}

/* Styla input-fälten */
Expand All @@ -152,5 +209,12 @@ section {
font-weight: bold; /* Gör texten fet */
padding: 10px 20px; /* Lägg till lite utrymme runt texten */
font-size: 1.2rem; /* Öka textstorleken */
margin-top: 10px; /* Lägg till lite avstånd ovanför knappen */
margin: 10px; /* Lägg till lite avstånd ovanför knappen */
}

/*** Footer ---- */

.footer {
text-align: center; /* Centrerar texten */
padding: 10px 0; /* Lägger till 10 pixlar padding över och under texten */
}

0 comments on commit 73d7458

Please sign in to comment.