Implemented Design66

killerkc12 · Oct 10, 2021 · 7b7f867 · 7b7f867
1 parent 755ab52
commit 7b7f867
Show file tree

Hide file tree

Showing 17 changed files with 300 additions and 0 deletions.
diff --git a/Design66/images/arrow.png b/Design66/images/arrow.png
diff --git a/Design66/images/arrow3.png b/Design66/images/arrow3.png
diff --git a/Design66/images/bar.png b/Design66/images/bar.png
diff --git a/Design66/images/facebook.png b/Design66/images/facebook.png
diff --git a/Design66/images/icons8-menu-24.png b/Design66/images/icons8-menu-24.png
diff --git a/Design66/images/img.png b/Design66/images/img.png
diff --git a/Design66/images/img1.png b/Design66/images/img1.png
diff --git a/Design66/images/insta.png b/Design66/images/insta.png
diff --git a/Design66/images/line.png b/Design66/images/line.png
diff --git a/Design66/images/main_bg.png b/Design66/images/main_bg.png
diff --git a/Design66/images/play.png b/Design66/images/play.png
diff --git a/Design66/images/share.png b/Design66/images/share.png
diff --git a/Design66/images/shoe_bg1.png b/Design66/images/shoe_bg1.png
diff --git a/Design66/images/square_box.png b/Design66/images/square_box.png
diff --git a/Design66/images/sun_bg.png b/Design66/images/sun_bg.png
diff --git a/Design66/index.html b/Design66/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>ShoeMart</title>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+
+        <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald" />
+        <link rel="stylesheet" href="styles.css">
+    </head> 
+    <body>
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-lg-1">
+                    <img src="./images/icons8-menu-24.png" class="menu-bar">
+                    <div class="socials">
+                        <img src="./images/insta.png" class="insta-icon">
+                        <img src="./images/facebook.png" class="fb-icon">
+                    </div>
+                </div>
+                <div class="col-lg-11">
+
+                    <header>
+                        <div class="header_left_side">
+                            <div class="header_line">
+                                <img src="./images/line.png">
+                            </div>
+                            <div class="company_name">ULAS FLYKNIT  RACER</div>
+                        </div>
+
+                        <div class="header_middle_side">
+                            <a class="where_to_buy">WHERE TO BUY</a>
+                            <a class="stores">STORES</a>
+                        </div>
+
+                        <div class="header_last_side">
+                            <img src="./images/share.png">
+                        </div>
+                    </header>
+
+                    <div class="main_body row">
+                        <div class="col col-lg-10" >
+
+                            <div class="left_content">THE<br> QUASAR.</div>
+
+                            <div class="right_content">
+
+                                <div class="three_squares">...</div>
+
+                                <div class="first_para">
+                                    <div class="first_line">
+                                        <div>THE  </div>
+                                        <img src="./images/bar.png">
+                                    </div>
+                                    <div class="rest_of_para">ENERGY WAVES <br>FROM THE <br>QUASAR.</div>
+                                </div>
+
+                                <div class="last_para">AERODYNAMIC <br>AND      STRONG<br>LINES.</div>
+                            </div>
+                        </div>
+                        <div class="col-lg-2">
+                            <img src="./images/play.png">
+                        </div>
+                    </div>
+                    <footer class="fixed-bottom">
+                        <div class="row">
+                            <div class="col-lg-6 col">
+                                <div>SITUATED 28.85 BILLION LIGHT YEARS FROM<br>
+                                    EARTH, ULAS J1120+0641 IS ONE OF THE MOST<br>
+                                    LUMINOUS QUASAR, THE MOST ENERGETIC<br>
+                                    COSMIC OBJECT OBSERVED IN SPACE.
+                                </div>
+                            </div>
+                            <div class="col-lg-2 col ulas">
+                                <div>ULAS<br>J1120+0641</div>
+                            </div>
+                            <div class="col-lg-2 col nav_arrows">
+                                <div class="next_page">
+                                    <img src="./images/arrow3.png">
+                                    <div class="next_text">NEXT</div>
+                                </div>
+                                <div class="prev_page">
+                                    <div class="prev_text">PREV</div>
+                                    <img src="./images/line.png">
+                                </div>
+                            </div>
+                            <div class="col-lg-2 shoes">
+                                <img src="./images/img1.png">
+                            </div>
+                        </div>
+                    </footer>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/Design66/styles.css b/Design66/styles.css
@@ -0,0 +1,201 @@
+* {
+    color: white;
+}
+a, a:hover {
+    text-decoration: none;
+    color: white;
+    cursor: pointer;
+}
+
+body{
+    width: 100vw;
+    height: 100vh;
+    background-image: url('./images/main_bg.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-attachment: fixed;
+}
+.col-lg-1 {
+    height: 100vh;
+    border-right: 2px solid rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+}
+.menu-bar {
+    width: 40%;
+    padding: 40px 0;
+    cursor: pointer;
+}
+.socials {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 20px 0;
+}
+.insta-icon, .fb-icon {
+    width: 40%;
+    padding: 10px 0;
+}
+header {
+    display: flex;
+    flex-direction: row;
+    margin: 50px;
+}
+header > * {
+    letter-spacing: 3px;
+}
+.header_left_side {
+    display: flex;
+    flex-direction: row;
+}
+.header_line > img{
+    height: 4px;
+    width: 150px;
+    margin: 0 20px;
+}
+.header_middle_side {
+    display: flex;
+    flex-direction: row;
+    padding: 0 0 0 350px ;
+}
+.where_to_buy, .stores {
+    padding: 0 30px;
+}
+.header_last_side {
+    padding: 0 0 10px 120px;
+    margin-top: -3px;
+}
+.main_body > .col-lg-10{
+    margin-bottom: 50px;
+}
+.main_body > .col-lg-10 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+
+}
+.main_body > .col-lg-10 > .left_content {
+    transform: rotate(270deg);
+    font-size: 600%;
+    font-family: 'Oswald', sans-serif;
+    letter-spacing: 15px;
+    font-stretch: condensed;
+    margin: 7% 0;
+}
+.right_content {
+    display: flex;
+    flex-direction: column;
+    margin: 4% 0 0 0;
+}
+.three_squares {
+    font-size: 800%;
+    padding-right: 230px;
+    margin-bottom: -10px;
+}
+.first_para {
+    margin-bottom: 20px;
+}
+.first_para > .first_line {
+    display: flex;
+    flex-direction: row;
+}
+.first_para > .first_line > img {
+    height: 15px;
+    width: 70px;
+    margin: 0px 0 16px 16px ;
+}
+.first_para > .first_line > div {
+    font-size: 15px;
+    letter-spacing: 6px;
+}
+.first_para > .rest_of_para {
+    font-size: 15px;
+    margin-top: -10px;
+    letter-spacing: 6px;
+}
+
+.last_para {
+    font-size: 15px;
+    letter-spacing: 6px;
+}
+.main_body > .col-lg-2 {
+    border-top: solid 2px rgba(255, 255, 255, 0.1);
+    border-left: solid 2px rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 297px;
+
+}
+.main_body > .col-lg-2 > img {
+    margin: 30px;
+    width: 50%;
+}
+footer {
+    border-top: solid 2px rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(5px);
+}
+footer > .row > .col {
+
+    letter-spacing: 4px;
+    word-spacing: 7px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    line-height: 17px;
+    margin-top: 3%;
+}
+footer > .row > .ulas {
+    font-family: 'Oswald', sans-serif;
+    font-size: 200%;
+    letter-spacing: 1px;
+    line-height: 33px;
+}
+footer > .row > .nav_arrows {
+    display: flex;
+    flex-direction: column;
+}
+footer > .row > .col > .next_page {
+    display: flex;
+    flex-direction: row;
+}
+footer > .row > .col > .next_page >img {
+    height: 20px;
+    width: 100px;
+    margin: 0 10px;
+}
+footer > .row > .col > .next_page > .next_text {
+    font-weight: bold;
+    letter-spacing: 3px;
+}
+
+footer > .row > .col > .prev_page {
+    display: flex;
+    flex-direction: row;
+    margin-top: 20px;
+    margin-left: 27px;
+}
+footer > .row > .col > .prev_page >img {
+    height: 5px;
+    width: 90px;
+    opacity: 0.2;
+    margin: 5px 12px;
+}
+footer > .row > .col > .prev_page > .prev_text {
+    font-weight: bold;
+    letter-spacing: 3px;
+    opacity: 0.2;
+}
+.shoes {
+    border-left: solid rgba(255, 255, 255, 0.1) 2px;
+}
+.shoes > img {
+    width: 80%;
+}