ResponsiveDesign/index.html at main · AvaHurstCode/ResponsiveDesign · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/defaults.css">
    <link rel="stylesheet" href="css/colourscheme.css">
    <link rel="stylesheet" href="css/avaframework/flex-align.css">
    <link rel="stylesheet" href="css/avaframework/buttons.css">
    <link rel="stylesheet" href="css/dynamicgrid.css">
    <link rel="stylesheet" href="css/background.css">
    <link rel="stylesheet" href="css/navbar.css">
    <title>ResponsiveDesign</title>
</head>
<body>
    <div class="parallax-wrapper">
        <div class="svg-container">
            <svg id="landscape" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><ellipse class="sun" rx="200" ry="200" transform="translate(1378.326272 415.466102)" fill="#ff963a" stroke-width="0"/><path class="back-1" d="M0,215.466102q120.063559,7.627119,213.495763,173.516949c93.432204,165.88983,158.262712,184.110169,268.855932,226.48305s64.830507,84.322033,347.033897,162.499999s221.18644,40.042372,390.88983,13.347457s230.72034,24.788136,381.355933,7.627119s158.32627-36.228814,238.347456-102.966102s47.669491-114.40678,83.898305-181.144068c8.756703-16.130768-6.284194-453.802795-3.87712-398.516949c4.232064,97.202346,19.27296,762.035391,3.87712,1080h-1923.87712v-1080L0,215.466102Z" transform="translate(.000005-116.313557)" fill="#3d81b1" stroke-width="3.84"/><path class="back-2" d="M-0.000009,25.494978Q-8.670766,209.745764,30.444916,249.788136c39.115682,40.042372,32.864087,60.336298,96.856802,103.2059s67.125121,80.14017,137.677101,146.158499s87.560044,46.794623,152.573517,69.568314s76.637506,7.81863,147.086462,74.523806s64.010008,71.912676,176.503754,109.824558s142.202426-9.433406,218.857446-18.959047s132.521186-11.440679,231.673729,5.720338s152.542372-19.067798,209.745762-26.694916s142.265835.80031,226.16414,14.147767s127.909017,4.195775,180.42606-52.283364s48.79472-72.181464,111.990302-106.279141c24.77846-13.369415,0-543.225871,0-543.225871s0,721.690775,0,721.690775v358.309224h-1920v-1080Z" transform="translate(1.386363-25.494978)" fill="#4e93c5" stroke-width="3.84"/><path class="back-3" d="M0,374.566726Q67.42198,414.76478,139.068639,517.730882c71.646659,102.966102,27.505606,104.568242,125.910184,143.92166s146.473987-26.44446,254.553464,51.483054s70.49198,138.178277,221.610269,116.418585s184.701464,88.861901,317.192338,51.518467s161.855634-48.051456,253.553709-25.945942s139.539036-53.298699,221.559695-74.601344s148.598449,21.692869,188.270671,25.494985s78.446113,1.961153,118.259841-41.184209q39.813728-43.145362,80.021185-51.700542l-3.877123-636.650637v1080h-1920l.000004-1080L0,374.566726Z" transform="translate(3.877129-76.484959)" fill="#5da7dc" stroke-width="3.84"/><path class="back-4" d="M-10.001047,546.168292c86.117517,39.661017,133.50963,104.268501,183.454446,146.105192s132.163126,49.990198,230.220767,85.290949s84.92066,115.835202,193.897529,149.719989c265.118646,82.434823,176.253269,92.749186,348.550127,233.427838c82.434682,67.307089,131.701406,137.956974,131.701406,137.956974s-1091.701407,0-1091.701407,0s0-1080,0-1080-16.77234,317.989041,3.877132,327.499058Z" transform="translate(13.87818-218.669234)" fill="#83c7f9" stroke-width="3.84"/><path class="back-4" d="M1164.448095,1298.669233q204.443283-134.704955,272.858536-226.911984c68.415253-92.207029,132.960771-65.031871,207.882199-131.39724c41.104947-36.410744,151.599439-15.689221,178.464907-50.989973q26.865468-35.300752,82.468086-144.828521v-525.872282v1080h-741.673728Z" transform="translate(13.878177-218.669233)" fill="#83c7f9" stroke-width="3.84"/><path class="back-5" d="M3.877129,349.07174c56.213942,8.993031,52.848572,115.588808,165.262383,194.154126C354.178383,672.54839,334.412483,653.474771,386.068796,753.069218s110.831229,66.774411,199.90818,132.628534c88.437983,65.381738,82.385308,202.345862,177.60512,197.20844s86.628723,5.378476,245.433268,0h233.501515h194.391177c55.674477,4.624227,100.573803-16.666501,141.418215-28.401183s150.022916-172.046943,229.683426-201.416997q79.66051-29.370054,129.745601-182.387213l-17.755301,412.205393c-538.348289,0-1493.756221,0-1919.999996,0v-1082.906197L3.877129,349.07174Z" transform="translate(.000004 0.000005)" fill="#9cd4fd" stroke-width="3.84"/><path class="back-6" d="M-2.817267,42.25895q35.439655,502.404389,112.79425,619.393593c77.354595,116.989204,64.30341,133.470363,185.939386,191.435474s176.835157,33.802105,268.722438,107.863403s276.245589,73.360321,395.361192,119.048579s206.734005,38.083708,355.76573,7.844611s194.073287,11.878193,343.301274-61.283682s258.11573-158.514203,258.11573-158.514203q0,0,0,254.212225Q1.059861,1125.165147,1.059861,1125.165147t-3.877128-1082.906197Z" transform="translate(2.817267-42.258949)" fill="#b4ddfb" stroke-width="3.84"/></svg>
        </div>
        <div class="primary-grid bg">
            <nav>
                <div class="nav-inner af-flex af-align-i-center af-justify-space-between">
                    <aside>
                        <a href="index.html" class="nav-icon-button">
                            <p class="nav-icon-img">ICON</p>
                        </a>
                    </aside>
                    <ul class="af-flex af-align-i-center">
                        <li>
                            <a href="page1.html" class="nav-button">
                                <p>Page 1</p>
                            </a>
                        </li>
                        <li>
                            <a href="page2.html" class="nav-button">
                                <p>Page 2</p>
                            </a>
                        </li>
                        <li>
                            <a href="page3.html" class="nav-button">
                                <p>Page 3</p>
                            </a>
                        </li>
                        <li>
                            <a href="page4.html" class="nav-button">
                                <p>Page 4</p>
                            </a>
                        </li>
                        <li>
                            <a href="page5.html" class="nav-button">
                                <p>Page 5</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </nav>
            <section class="grid-main bg">
                <header>
                    <h1>Header</h1>
                <h2>Sub-Header</h2>
                </header>
                <main>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio voluptatem ea deleniti ex veniam, nobis molestias aut quisquam nihil hic nemo beatae minus perspiciatis voluptatibus saepe possimus odio corporis officia.</p>
                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                </main>
            </section>
        </div>
    </div>
</body>
</html>